/*
 * MyClevan design system — public-site layer.
 * Loaded last on every public page (includes/header.php), after tokens.css,
 * the shared stylesheet and the page bundle. Admin never loads it.
 */

/* ── 1. Legacy variables re-pointed at design tokens ─────────────────── */
:root {
    --font-body: var(--font-sans);
    --font-heading: var(--font-sans);
    --letter-spacing-heading: 0;

    --primary-blue: var(--action);
    --primary-blue-dark: var(--action-hover);
    --primary-yellow: var(--action);
    --primary-yellow-light: var(--brand-subtle);
    --primary-yellow-dark: var(--action);
    --primary-orange: var(--action);
    --primary-orange-light: var(--brand-subtle);
    --primary-orange-dark: var(--urgency);
    --yellow-light: var(--brand-subtle);
    --yellow-medium: var(--action);
    --yellow-dark: var(--action);
    --orange-light: var(--brand-subtle);
    --orange-medium: var(--action);
    --orange-dark: var(--urgency);
    --text-dark: var(--text-default);
    --text-light: var(--text-subtle);
    --bg-light: var(--background);
    --bg-white: var(--surface);
    --shadow-sm: var(--shadow-s);
    --shadow-md: var(--shadow-m);
    --shadow-lg: var(--shadow-soft);
    --shadow-xl: var(--shadow-panel);
    --border-radius: var(--radius-8);

    /* Bootstrap 5.3 */
    --bs-primary: var(--action);
    --bs-primary-rgb: var(--action-rgb);
    --bs-secondary-color: var(--text-subtle);
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: #2a2a2e;
    --bs-body-color-rgb: 42, 42, 46;
    --bs-body-bg: #ffffff;
    --bs-emphasis-color: #252c38;
    --bs-link-color: var(--action);
    --bs-link-color-rgb: var(--action-rgb);
    --bs-link-hover-color: var(--action-hover);
    --bs-link-hover-color-rgb: 140, 65, 83;
    --bs-border-color: #dddfe2;
    --bs-border-radius: 8px;
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: 16px;
    --bs-border-radius-pill: 999px;
    --bs-danger: #c53829;
    --bs-danger-rgb: 197, 56, 41;
    --bs-success: #00622f;
    --bs-success-rgb: 0, 98, 47;
    --bs-focus-ring-color: rgba(var(--action-rgb), 0.35);
}

body {
    background-color: var(--background);
    color: var(--text-default);
    font-family: var(--font-sans);
}

@media (max-width: 599.98px) {
    body { font-family: var(--font-mobile); }
}

h1:not(:where(.reviews-section .review-card *)),
h2:not(:where(.reviews-section .review-card *)),
h3:not(:where(.reviews-section .review-card *)),
h4:not(:where(.reviews-section .review-card *)),
h5:not(:where(.reviews-section .review-card *)),
h6:not(:where(.reviews-section .review-card *)),
.h1:not(:where(.reviews-section .review-card *)),
.h2:not(:where(.reviews-section .review-card *)),
.h3:not(:where(.reviews-section .review-card *)),
.h4:not(:where(.reviews-section .review-card *)),
.h5:not(:where(.reviews-section .review-card *)),
.h6:not(:where(.reviews-section .review-card *)) {
    color: var(--text-default);
    font-weight: 600;
    letter-spacing: 0;
}

a:not(:where(.reviews-section .review-card *)) { color: var(--action); }
@media (hover: hover) {
a:not(:where(.reviews-section .review-card *)):hover { color: var(--action-hover); }
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

::selection { background: var(--brand-subtle); color: var(--text-default); }

/* ── 2. Bootstrap components ─────────────────────────────────────────── */
.btn:not(:where(.reviews-section .review-card *)) {
    --bs-btn-font-family: var(--font-sans);
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: 14px;
    --bs-btn-line-height: 18px;
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 8px;
    --bs-btn-border-radius: var(--radius-max);
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.35);
    border-radius: var(--radius-max);
    min-height: var(--control-m);
    text-transform: none;
    letter-spacing: 0;
}

.btn-lg {
    --bs-btn-padding-x: 24px;
    --bs-btn-padding-y: 12px;
    --bs-btn-font-size: 16px;
    --bs-btn-line-height: 20px;
    --bs-btn-border-radius: var(--radius-max);
    min-height: var(--control-l);
}

.btn-sm:not(:where(.reviews-section .review-card *)) {
    --bs-btn-padding-x: 12px;
    --bs-btn-padding-y: 4px;
    --bs-btn-font-size: 14px;
    --bs-btn-border-radius: var(--radius-max);
    min-height: var(--control-s);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--action);
    --bs-btn-border-color: var(--action);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--action-hover-light);
    --bs-btn-hover-border-color: var(--action-hover-light);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--action-pressed);
    --bs-btn-active-border-color: var(--action-pressed);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--action);
    --bs-btn-disabled-border-color: var(--action);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-secondary,
.btn-light,
.btn-warning,
.btn-info {
    --bs-btn-color: var(--action);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--border-default);
    --bs-btn-hover-color: var(--action);
    --bs-btn-hover-bg: var(--action-hover-wash);
    --bs-btn-hover-border-color: var(--action);
    --bs-btn-active-color: var(--action);
    --bs-btn-active-bg: var(--brand-subtle);
    --bs-btn-active-border-color: var(--brand);
    --bs-btn-disabled-color: var(--text-disabled);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: var(--border-default);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--urgency);
    --bs-btn-border-color: var(--urgency);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #9e2418;
    --bs-btn-hover-border-color: #9e2418;
    --bs-btn-active-bg: #9e2418;
    --bs-btn-active-border-color: #9e2418;
}

.btn-outline-danger {
    --bs-btn-color: var(--urgency);
    --bs-btn-border-color: var(--urgency);
    --bs-btn-hover-bg: var(--urgency);
    --bs-btn-hover-border-color: var(--urgency);
    --bs-btn-active-bg: #9e2418;
}

.btn-success {
    --bs-btn-bg: #00622f;
    --bs-btn-border-color: #00622f;
    --bs-btn-hover-bg: #004d25;
    --bs-btn-hover-border-color: #004d25;
}

.btn-link:not(:where(.reviews-section .review-card *)) {
    --bs-btn-color: var(--action);
    --bs-btn-hover-color: var(--action-hover);
    --bs-btn-active-color: var(--action-hover);
    min-height: 0;
}

.text-primary { color: var(--action) !important; }
.bg-primary { background-color: var(--action) !important; }
.border-primary { border-color: var(--brand) !important; }
.text-muted:not(:where(.reviews-section .review-card *)), .text-secondary:not(:where(.reviews-section .review-card *)) { color: var(--text-subtle) !important; }
.text-danger { color: var(--urgency) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--brand) !important; }
.bg-light { background-color: var(--background) !important; }
.bg-warning { background-color: var(--accent) !important; color: var(--text-default) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-danger { background-color: var(--urgency) !important; }
.bg-info { background-color: var(--brand-subtle) !important; color: var(--action) !important; }

.badge {
    --bs-badge-font-size: 12px;
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: var(--radius-2);
    --bs-badge-padding-x: 8px;
    --bs-badge-padding-y: 4px;
}

.form-control,
.form-select {
    border-color: var(--border-field);
    border-radius: var(--radius-8);
    color: var(--text-strong);
    font-family: inherit;
}

.form-control::placeholder { color: var(--text-subtle); }

.form-control:focus,
.form-select:focus {
    border-color: var(--focus-border);
    box-shadow: 0 0 0 3px rgba(var(--focus-rgb), 0.2);
}

.form-check-input {
    border: 2px solid var(--border-inactive);
    border-radius: var(--radius-2);
}

.form-check-input:checked {
    background-color: var(--action);
    border-color: var(--action);
}

.form-check-input:focus {
    border-color: var(--focus-border);
    box-shadow: 0 0 0 3px rgba(var(--focus-rgb), 0.2);
}

.form-switch .form-check-input { border-radius: var(--radius-max); }

.card {
    --bs-card-border-color: var(--border-default);
    --bs-card-border-radius: var(--radius-8);
    --bs-card-inner-border-radius: 7px;
    --bs-card-bg: var(--surface);
}

.modal {
    --bs-modal-border-radius: var(--radius-16);
    --bs-modal-inner-border-radius: 15px;
    --bs-modal-border-color: transparent;
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--border-default);
    --bs-dropdown-border-radius: var(--radius-8);
    --bs-dropdown-link-color: var(--text-default);
    --bs-dropdown-link-hover-bg: var(--brand-subtle);
    --bs-dropdown-link-hover-color: var(--action);
    --bs-dropdown-link-active-bg: var(--brand-subtle);
    --bs-dropdown-link-active-color: var(--action);
    box-shadow: var(--shadow-m);
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--border-default);
    --bs-nav-tabs-link-active-color: var(--action);
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--brand);
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--radius-max);
    --bs-nav-pills-link-active-bg: var(--brand-subtle);
    --bs-nav-pills-link-active-color: var(--brand-strong);
}

.nav-link { color: var(--text-default); }

.pagination {
    --bs-pagination-color: var(--action);
    --bs-pagination-border-color: var(--border-default);
    --bs-pagination-hover-bg: var(--brand-subtle);
    --bs-pagination-hover-color: var(--action);
    --bs-pagination-active-bg: var(--action);
    --bs-pagination-active-border-color: var(--action);
    --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.35);
}

.progress { --bs-progress-bar-bg: var(--brand); }

.spinner-border.text-primary { color: var(--brand) !important; }

.alert { border-radius: var(--radius-8); }
.alert-info { --bs-alert-bg: var(--brand-subtle); --bs-alert-color: var(--action); --bs-alert-border-color: var(--border-default); }
.alert-success { --bs-alert-bg: var(--success-subtle); --bs-alert-color: var(--success); --bs-alert-border-color: var(--success-subtle); }
.alert-warning { --bs-alert-bg: var(--accent-subtle); --bs-alert-color: var(--text-default); --bs-alert-border-color: var(--accent); }

/* ── 3. Design-system component classes (ported from bundle.css) ─────── */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--radius-max);
    font: 600 14px/18px var(--font-sans);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
.mc-btn--l { height: var(--control-l); padding: 12px 24px; font-size: 16px; line-height: 20px; }
.mc-btn--m { height: var(--control-m); padding: 8px 16px; }
.mc-btn--s { height: var(--control-s); padding: 0 12px; }
.mc-btn--primary { background: var(--action); color: var(--text-inverted); }
@media (hover: hover) {
.mc-btn--primary:hover { background: var(--action-hover-light); color: var(--text-inverted); }
}
.mc-btn--secondary { background: var(--surface); color: var(--action); border: 1px solid var(--border-default); }
@media (hover: hover) {
.mc-btn--secondary:hover { background: var(--brand-subtle); border-color: var(--brand); color: var(--action); }
}
.mc-btn--text { background: transparent; color: var(--action); }
@media (hover: hover) {
.mc-btn--text:hover { background: var(--brand-subtle); color: var(--action); }
}
/* WhatsApp: every enquiry button (includes/enquiry_modal.php) */
.mc-btn--whatsapp { background: var(--whatsapp); color: var(--text-inverted); gap: 8px; }
.mc-btn--whatsapp svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
/* Inline SVG icon (myclevanBrandIcon) sized like a font glyph by its <i>'s font-size */
.mc-icon-svg { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; fill: currentColor; }
/* WhatsApp icon on cards / the business page: the enquiry form's 18px icon size;
   the button's gap spaces it from the text (drops the markup's me-1) */
:is(.mc-btn--whatsapp, .sbc-enquiry, .gallery-cta) .mc-whatsapp-icon { font-size: 18px !important; line-height: 1; margin: 0 !important; }
@media (hover: hover) {
.mc-btn--whatsapp:hover { background: var(--whatsapp-hover); color: var(--text-inverted); }
}

.mc-chip {
    display: inline-flex;
    align-items: center;
    height: var(--control-m);
    padding: 4px 16px;
    border-radius: var(--radius-max);
    border: 1px solid var(--border-default);
    background: var(--surface);
    color: var(--text-default);
    font: 400 14px/18px var(--font-sans);
}
.mc-chip[aria-pressed="true"],
.mc-chip.is-active {
    background: var(--brand-subtle);
    border: 2px solid var(--brand);
    color: var(--brand-strong);
    padding: 4px 15px;
}

.mc-tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 4px 8px;
    border-radius: var(--radius-2);
    font: 400 12px/15px var(--font-sans);
    white-space: nowrap; /* fixed 22px height: wrap whole tags, never their text */
}
.mc-tag--outline { border: 1px solid var(--border-default); color: var(--text-subtle); }
.mc-tag--info { background: var(--brand-subtle); color: var(--action); }
.mc-tag--success { background: var(--success-subtle); color: var(--success); }
.mc-tag--award { background: var(--accent); color: var(--text-default); font-weight: 600; }

.mc-rating {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 2px 4px;
    border-radius: 4px 4px 4px 0;
    background: var(--action);
    color: var(--text-inverted);
    font: 600 14px/18px var(--font-sans);
}

.mc-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-24);
}
.mc-h-xl { font: 600 24px/29px var(--font-sans); margin: 0; color: var(--text-default); }
.mc-link { font: 600 14px/18px var(--font-sans); color: var(--action); text-decoration: none; }
@media (hover: hover) {
.mc-link:hover { text-decoration: underline; color: var(--action); }
}

/* ── 4. Header (Agoda: full-bleed, no divider; desktop 60px, mobile 64px) */
#mainNavbar.navbar {
    background: var(--surface) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
    box-shadow: none;
    min-height: var(--header-mobile);
    padding: 0 !important;
}

@media (min-width: 992px) {
    #mainNavbar.navbar { min-height: var(--header-desktop); }
}

#mainNavbar.navbar.scrolled { box-shadow: var(--shadow-s); }

#mainNavbar .navbar-brand.mc-brand {
    display: inline-flex !important;
    align-items: center;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    left: auto !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: var(--space-24) !important;
}

#mainNavbar .mc-brand .mc-brand-logo { display: block; width: 150px; height: 29px; }
#mainNavbar .mc-brand .mc-brand-mark { display: none; width: 35px; height: 40px; }

@media (max-width: 599.98px) {
    #mainNavbar .mc-brand .mc-brand-logo { display: none; }
    #mainNavbar .mc-brand .mc-brand-mark { display: block; }
}

/* Full-width header: Agoda pins logo/actions 32px from the viewport edges on
   desktop and uses the page gutter on tablet/mobile. */
#mainNavbar .container,
#mainNavbar .navbar-shell {
    max-width: none !important;
    padding-left: var(--gutter-tablet) !important;
    padding-right: var(--gutter-tablet) !important;
}

@media (min-width: 992px) {
    #mainNavbar .container,
    #mainNavbar .navbar-shell {
        padding-left: var(--space-32) !important;
        padding-right: var(--space-32) !important;
    }
}

@media (max-width: 599.98px) {
    #mainNavbar .container,
    #mainNavbar .navbar-shell {
        padding-left: var(--gutter-mobile) !important;
        padding-right: var(--gutter-mobile) !important;
    }
}

#mainNavbar .navbar-nav,
#mainNavbar #mainNavItemsList { margin-left: 0 !important; padding-left: 0 !important; }

@media (min-width: 992px) {
    #mainNavbar .navbar-right-section,
    #mainNavbar .navbar-right-section.navbar-right-section-guest { margin-right: 0 !important; }
}

#mainNavbar .navbar-nav .nav-link,
body.lang-ms #mainNavbar .navbar-nav .nav-link {
    font: 700 14px/17px var(--font-sans) !important;
    color: var(--text-strong) !important;
    padding: 8px 0 !important;
    margin: 0 0 0 var(--space-24) !important;
    background: none !important;
}

#mainNavbar .navbar-nav .nav-item:first-child .nav-link { margin-left: 0 !important; }

/* Agoda header links: colour-only hover, no background */
#mainNavbar .navbar-nav .nav-link:focus-visible,
#mainNavbar .navbar-nav .nav-link.show {
    color: var(--nav-hover) !important;
}
@media (hover: hover) {
#mainNavbar .navbar-nav .nav-link:hover {
    color: var(--nav-hover) !important;
}
}

#mainNavbar .navbar-nav .nav-link::before { display: none; }

@media (min-width: 992px) {
    #mainNavbar .navbar-nav .nav-link i { display: none !important; }
}

#mainNavbar .nav-ec-menu { padding: var(--space-8); }

#mainNavbar .nav-ec-item {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-4);
    font: 600 14px/18px var(--font-sans);
    color: var(--text-default);
    text-decoration: none;
}

/* !important beats public-core's `.nav-ec-menu .nav-ec-item:hover` (which also forces background: none) */
@media (hover: hover) {
#mainNavbar .nav-ec-item:hover { color: var(--nav-hover) !important; }
}

/* Guest actions use the MyClevan brand palette (user decision 2026-09-29):
   Sign in = deep-blue text button with a warm gem wash, Create account =
   deep-blue pill with fur-white text that turns blush on hover */
#mainNavbar .navbar-guest-actions { display: flex; align-items: center; gap: var(--space-8); }

#mainNavbar .navbar-guest-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--control-l);
    padding: 12px 22px;
    border-radius: var(--radius-max);
    font: 600 15px/20px var(--font-sans);
    text-decoration: none;
    white-space: nowrap;
    color: var(--deep-blue);
    background: transparent;
    border: 1px solid transparent;
    opacity: 1;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

@media (hover: hover) {

#mainNavbar .navbar-sign-in-link:hover { background: var(--gem-highlight); color: var(--graphite); }
}

#mainNavbar .navbar-create-account-link {
    background: var(--deep-blue);
    border-color: var(--deep-blue);
    color: var(--fur-white);
    box-shadow: 0 1px 2px rgba(64, 89, 104, 0.24);
    margin-left: 0 !important;
}

@media (hover: hover) {

#mainNavbar .navbar-create-account-link:hover {
    background: color-mix(in srgb, var(--deep-blue) 88%, white);
    border-color: color-mix(in srgb, var(--deep-blue) 88%, white);
}
}

/* Button label that fills with blush from the bottom up on hover (Create Account, Discover) */
.btn-fill-text {
    background: linear-gradient(to top, var(--blush) 50%, var(--fur-white) 50%) 0 0 / 100% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: background-position 0.35s ease;
}

a:focus-visible>.btn-fill-text,
button:focus-visible>.btn-fill-text { background-position: 0 100%; }

@media (hover: hover) {

a:hover>.btn-fill-text,
button:hover>.btn-fill-text { background-position: 0 100%; }
}

.btn-fill-text i { color: transparent; }

@media (prefers-reduced-motion: reduce) {
    .btn-fill-text { transition: none; }
}

#mainNavbar .navbar-guest-link:active { transform: translateY(1px); }

#mainNavbar .navbar-guest-link:focus-visible {
    outline: 2px solid var(--deep-blue);
    outline-offset: 2px;
}

#mainNavbar .navbar-create-account-link::before,
#mainNavbar .navbar-guest-link::after { display: none; }

#mainNavbar .navbar-guest-link { text-transform: none; letter-spacing: 0; }

/* Language picker, after courtsite.my: globe + code + chevron in a 20px-radius pill; open, the pill
   and the list of the other languages join into one card (toggle tinted, options below) */
#mainNavbar .mc-lang {
    border-radius: 17px;
}
#mainNavbar .mc-lang:has(.mc-lang-toggle.show) {
    box-shadow: var(--shadow-m);
}
#mainNavbar .mc-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 84px;
    height: 34px;
    padding: 6px 10px;
    border: 0;
    border-radius: 17px;
    background: transparent;
    color: var(--text-strong);
    font: 400 14px/20px var(--font-sans);
}
#mainNavbar .mc-lang-toggle .fa-globe { font-size: 14px; }
#mainNavbar .mc-lang-chev { margin-left: auto; font-size: 10px; }
#mainNavbar .mc-lang-toggle.show {
    border-radius: 17px 17px 0 0;
    background: var(--brand-subtle);
    color: var(--action);
}
#mainNavbar .mc-lang-toggle:focus-visible {
    outline: 2px solid var(--focus-border);
    outline-offset: 2px;
}
#mainNavbar .mc-lang-menu {
    top: 100%;
    left: 0;
    right: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0 0 17px 17px;
    overflow: hidden;
}
#mainNavbar .mc-lang-option {
    display: block;
    padding: 8px 10px 8px 30px;
    color: var(--text-strong);
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
}
/* Phones: the header is crowded, so the pill shrinks to its content and drops the chevron */
@media (max-width: 767.98px) {
#mainNavbar .mc-lang-toggle {
    min-width: 0;
    height: 32px;
    padding: 6px 8px;
    gap: 4px;
}
#mainNavbar .mc-lang-chev { display: none; }
}
@media (hover: hover) {
#mainNavbar .mc-lang-toggle:not(.show):hover { background: var(--background-subtle); }
#mainNavbar .mc-lang-option:hover {
    background: var(--brand-subtle);
    color: var(--action);
}
}

#mainNavbar .navbar-icon-button { color: var(--text-subtle); }
#mainNavbar .navbar-avatar { border-color: var(--brand); }
/* !important beats the legacy `.btn i { font-size: .65rem !important }` */
#mainNavbar .navbar-menu-icon { font-size: var(--icon) !important; color: var(--text-default); }

/* Floating pill toggle: hidden until .nav-pill (below) */
.nav-pill-toggle { display: none; }

/* Mobile + tablet: header scrolls away; once gone, a floating logo tab sits top-right
   and opens the menu drawer. .nav-pill is toggled by shared-layout.js (all pages) */
@media (max-width: 991.98px) {
    #mainNavbar.navbar { position: absolute; }

    /* Legacy directory.php filter strip sat under the fixed header (style.css top: 65px) */
    .mobile-filter-bar { top: 0 !important; }

    /* Well below the 54px sticky filter strip so it never covers the chips */
    #mainNavbar.navbar.nav-pill {
        position: fixed;
        top: 150px;
        left: auto;
        right: 0;
        min-height: 0;
        /* Tab docked to the screen edge: only the left side is rounded, a bit squarer than a full pill */
        border-radius: 12px 0 0 12px;
        background: var(--accent-subtle) !important;
        box-shadow: 0 2px 8px rgba(4, 7, 10, 0.16);
        animation: nav-pill-in 0.2s ease-out;
    }

    #mainNavbar.nav-pill .navbar-shell { width: auto; padding: 0 !important; }

    /* Pill = just the mark; header contents step aside */
    /* .navbar-brand adds specificity over brand.css's display: inline-flex !important */
    #mainNavbar.nav-pill .navbar-brand.mc-brand,
    #mainNavbar.nav-pill .navbar-back,
    #mainNavbar.nav-pill .mobile-header-buttons { display: none !important; }

    #mainNavbar.nav-pill .nav-pill-toggle {
        display: flex;
        align-items: center;
        height: var(--control-l);
        /* tight to the screen edge on the right */
        gap: 6px;
        padding: 0 6px 0 8px;
        border: 0;
        border-radius: inherit;
        background: none;
    }

    /* Grabber line: hints the tab pulls open */
    #mainNavbar.nav-pill .nav-pill-toggle::before {
        content: '';
        width: 2.5px;
        height: 20px;
        border-radius: var(--radius-max);
        background: var(--action);
        opacity: 0.35;
    }
}

@keyframes nav-pill-in {
    from { opacity: 0; transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    #mainNavbar.navbar.nav-pill { animation: none; }
}

/* ── 4c. Mobile/tablet menu drawer (Bootstrap offcanvas, slides in from the right) ── */
.mc-drawer {
    --bs-offcanvas-width: min(88vw, 400px);
    --bs-offcanvas-bg: var(--surface);
    --bs-offcanvas-border-width: 0;
    --bs-offcanvas-transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
    /* Above the chatbot launcher (z-index 9999) */
    --bs-offcanvas-zindex: 10010;
    border-radius: var(--radius-24) 0 0 var(--radius-24);
    box-shadow: -8px 0 32px rgba(4, 7, 10, 0.18);
    font-family: var(--font-sans);
}

/* The panel takes focus on open (Bootstrap); it isn't a control, so no ring on it */
.mc-drawer:focus { outline: none; }

.offcanvas-backdrop { --bs-backdrop-bg: #04070a; --bs-backdrop-opacity: 0.4; z-index: 10005; }

.mc-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: var(--header-mobile);
    padding: 0 var(--space-16) 0 var(--space-24);
}

.mc-drawer-brand img { display: block; width: auto; height: 26px; }

.mc-drawer-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--radius-max);
    background: var(--background-subtle);
    color: var(--text-default);
    font-size: 16px;
    transition: background-color 0.2s ease;
}

@media (hover: hover) {

.mc-drawer-close:hover { background: var(--gem-highlight); }
}

.mc-drawer-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-16);
    overflow-y: auto;
    padding: var(--space-8) var(--space-16) var(--space-24);
}

/* Guest: Sign in / Create account up top */
.mc-drawer-auth { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }

.mc-drawer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--control-l);
    border-radius: var(--radius-max);
    font: 600 15px/20px var(--font-sans);
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mc-drawer-btn--ghost { border: 1px solid var(--border-default); color: var(--text-strong); }
@media (hover: hover) {
.mc-drawer-btn--ghost:hover { background: var(--gem-highlight); color: var(--text-strong); }
}
.mc-drawer-btn--solid { background: var(--deep-blue); color: var(--fur-white); }
@media (hover: hover) {
.mc-drawer-btn--solid:hover { background: color-mix(in srgb, var(--deep-blue) 88%, white); color: var(--fur-white); }
}

/* Signed in: profile card */
.mc-drawer-user {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-16);
    background: var(--background-subtle);
    color: var(--text-strong);
    text-decoration: none;
}

.mc-drawer-avatar { flex-shrink: 0; border: 2px solid var(--brand); border-radius: 50%; object-fit: cover; }
.mc-drawer-user-text { display: flex; flex-direction: column; min-width: 0; }
.mc-drawer-user-name { overflow: hidden; font: 600 16px/20px var(--font-sans); text-overflow: ellipsis; white-space: nowrap; }
.mc-drawer-user-sub { font: 400 13px/17px var(--font-sans); color: var(--text-subtle); }
.mc-drawer-user-chevron { margin-left: auto; font-size: 14px; color: var(--text-subtle); }

.mc-drawer-nav { margin: 0; padding: 0; list-style: none; }
.mc-drawer-nav--account { padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); }

.mc-drawer-link {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    min-height: 56px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-12, 12px);
    color: var(--text-strong);
    font: 500 16px/20px var(--font-sans);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.mc-drawer-link:focus-visible { background: var(--background-subtle); color: var(--text-strong); }

@media (hover: hover) {

.mc-drawer-link:hover { background: var(--background-subtle); color: var(--text-strong); }
}

/* Bare icon in a fixed-width slot so the labels line up */
.mc-drawer-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 28px;
    color: var(--blush-deep);
    font-size: 18px;
}

.mc-drawer-link-text { display: flex; flex-direction: column; }
.mc-drawer-link-text small { font: 400 12px/16px var(--font-sans); color: var(--text-subtle); }

/* Language: segmented control pinned to the bottom of the scroll area */
.mc-drawer-lang {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    margin-top: auto;
    padding: var(--space-4);
    border-radius: var(--radius-max);
    background: var(--background-subtle);
}

.mc-drawer-lang a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--control-m);
    border-radius: var(--radius-max);
    color: var(--text-subtle);
    font: 500 14px/18px var(--font-sans);
    text-decoration: none;
}

.mc-drawer-lang a.is-active { background: var(--surface); box-shadow: var(--shadow-s); color: var(--text-strong); font-weight: 600; }

.mc-drawer-footer {
    flex-shrink: 0;
    padding: var(--space-12) var(--space-16) calc(var(--space-12) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-subtle);
}

.mc-drawer-logout {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    height: var(--control-l);
    padding: 0 var(--space-8);
    color: var(--urgency);
    font: 600 15px/20px var(--font-sans);
    text-decoration: none;
}

@media (hover: hover) {

.mc-drawer-logout:hover { color: var(--urgency); }
}

/* Items glide in just behind the panel */
.mc-drawer .mc-drawer-body > * {
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.3s ease, transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

.mc-drawer.showing .mc-drawer-body > *,
.mc-drawer.show:not(.hiding) .mc-drawer-body > * { opacity: 1; transform: none; }

.mc-drawer .mc-drawer-body > :nth-child(2) { transition-delay: 0.04s; }
.mc-drawer .mc-drawer-body > :nth-child(3) { transition-delay: 0.08s; }
.mc-drawer .mc-drawer-body > :nth-child(4) { transition-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
    .mc-drawer { --bs-offcanvas-transition: none; }
    .mc-drawer .mc-drawer-body > * { opacity: 1; transform: none; transition: none; }
}

/* Tablet/mobile header follows Agoda's mobile site: centred logo, menu on the right */
@media (max-width: 991.98px) {
    #mainNavbar .navbar-shell { position: relative; justify-content: flex-end; }

    #mainNavbar .navbar-brand.mc-brand {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
    }

    /* Back = a plain chevron at the header's left edge (navbar.php, pages set $header_back_url) */
    #mainNavbar .navbar-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 0 auto 0 -12px;
        color: var(--text-strong);
        font-size: 20px;
        text-decoration: none;
    }
    #mainNavbar .navbar-back[hidden] { display: none; }
}

/* ── 4b. Page gutters (Agoda search page: the 1124px column holds while it
   fits — 1124 + 2×24 = 1172px — so zooming in eats the side margins instead
   of re-flowing; then 900px; below 992px fluid with a 24px tablet / 12px
   mobile gutter) ────────────────────────────────────────────────────── */
body .container:not(.navbar-shell) {
    max-width: 100% !important;
    padding-left: var(--gutter-tablet) !important;
    padding-right: var(--gutter-tablet) !important;
}

@media (min-width: 992px) {
    body .container:not(.navbar-shell) {
        max-width: calc(var(--container-l) + 2 * var(--gutter-tablet)) !important;
    }
}

@media (min-width: 1172px) {
    body .container:not(.navbar-shell) {
        max-width: calc(var(--container-xl) + 2 * var(--gutter-tablet)) !important;
    }
}

@media (max-width: 599.98px) {
    body .container:not(.navbar-shell) {
        padding-left: var(--gutter-mobile) !important;
        padding-right: var(--gutter-mobile) !important;
    }
}

/* ── 4d. Filter bar on tablet/mobile (Agoda search results bar: white strip
   pinned to the top with a soft shadow; directory adds a grey search pill +
   Map above one scrollable row of outlined chips — Filter, Sort, then the
   filters. Each chip opens a bottom sheet, see 4e) ─────────────────────── */
.efb-search-row,
.efb-segment--sort,
.efb-sort-chip { display: none; }

/* Agoda, every width: the pinned bar slides away on scroll down and back on scroll up (shared-layout.js) */
.efb-wrap.efb-sticky { transition: transform 0.25s ease; }
.efb-wrap.efb-sticky.efb-hidden:not(:has(.efb-drop--open)) { transform: translateY(calc(-100% - 10px)); } /* 10px: clear the shadow */

@media (max-width: 991.98px) {
    /* Same full-width white strip before and after it pins (the JS only switches it to fixed) */
    .efb-wrap,
    .efb-wrap.efb-sticky {
        display: block; /* desktop centres one row; here search row stacks over chips */
        padding: var(--space-8) 0 !important;
        border-radius: 0 !important;
        background: var(--surface) !important;
        box-shadow: 0 2px 6px rgba(4, 7, 10, 0.12);
        transition: transform 0.25s ease;
    }

    .efb-wrap:not(.efb-sticky) { margin: 0 calc(-1 * var(--gutter-tablet)) var(--space-16) !important; }
    .efb-wrap:not(.efb-sticky):not(.ec-efb) { box-shadow: none; } /* homepage: shadow only once pinned */

    /* Search pill (directory) */
    .efb-search-row {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        margin-bottom: var(--space-8);
    }

    .efb-wrap .efb-search-row { padding: 0 var(--space-8) 0 var(--gutter-tablet); }

    .efb-search {
        display: flex;
        flex: 1;
        align-items: center;
        min-width: 0;
        height: 52px;
        padding: 0 var(--space-4) 0 var(--space-16);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-max);
        background: var(--background-subtle);
        transition: border-color 0.15s, background-color 0.15s;
    }

    .efb-search:focus-within { border-color: var(--focus-border); background: var(--surface); }

    .efb-search-text { display: flex; flex: 1; flex-direction: column; min-width: 0; text-align: left; }

    .efb-search-input {
        width: 100%;
        padding: 0;
        border: 0;
        outline: 0; /* the pill shows focus (:focus-within) */
        background: none;
        font: 600 16px/20px var(--font-sans); /* 16px: no iOS focus zoom */
        color: var(--text-strong);
    }

    .efb-search-input::placeholder { font-weight: 400; color: var(--text-subtle); }

    .efb-search-sub {
        overflow: hidden;
        font: 400 13px/17px var(--font-sans);
        color: var(--text-subtle);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .efb-search-go {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: none;
        font-size: 20px;
        color: var(--text-strong);
    }

    .efb-icon-btn {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        min-width: 48px;
        padding: var(--space-4);
        border: 0;
        background: none;
        font: 400 12px/15px var(--font-sans);
        color: var(--text-strong);
    }

    .efb-icon-btn i { font-size: 20px; }

    .efb-search-go:active,
    .efb-icon-btn:active { color: var(--action); }

    /* Chip row */
    .efb-wrap .efb-bar {
        width: 100% !important;
        flex-wrap: nowrap;
        gap: var(--space-8) !important;
        padding: 0 !important;
        overflow-x: auto;
        scrollbar-width: none;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .efb-wrap .efb-bar { padding: 0 var(--gutter-tablet) !important; }

    .efb-wrap .efb-bar::-webkit-scrollbar { display: none; }
    .efb-wrap .efb-sep { display: none; }

    .efb-wrap .efb-segment { flex: 0 0 auto !important; position: static; }

    /* Agoda chip: white, 1px grey outline, full pill, plain dark label */
    .efb-wrap .efb-trigger,
    .efb-wrap .efb-filter-btn,
    .efb-wrap .efb-sort-chip,
    .efb-wrap .efb-reset-btn {
        display: inline-flex;
        flex: 0 0 auto !important;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        height: var(--control-m);
        margin: 0 !important;
        padding: 0 var(--space-12) !important;
        border: 1px solid var(--border-default) !important;
        border-radius: var(--radius-max) !important;
        background: var(--surface) !important;
        box-shadow: none !important;
        transform: none !important;
        font: 400 14px/18px var(--font-sans) !important;
        color: var(--text-strong) !important;
        white-space: nowrap;
    }

    .efb-wrap .efb-filter-btn { order: -2; }
    .efb-wrap .efb-segment--sort,
    .efb-wrap .efb-sort-chip { order: -1; }
    .efb-wrap .efb-segment--sort { display: block; }
    .efb-wrap .efb-reset-btn { justify-content: center; width: var(--control-m); padding: 0 !important; }

    /* Label until something is picked, then the pick, highlighted */
    .efb-wrap .efb-seg-label,
    .efb-wrap .efb-seg-val {
        font: inherit !important;
        color: inherit !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    .efb-wrap .efb-seg-val { display: none; max-width: 160px; }
    .efb-wrap .efb-has-val:not(.efb-segment--sort) .efb-seg-label { display: none; }
    .efb-wrap .efb-has-val .efb-seg-val { display: block; }

    .efb-wrap .efb-chev { display: inline-block; font-size: 10px; color: inherit; }

    .efb-wrap .efb-has-val .efb-trigger,
    .efb-wrap .efb-sort-chip.efb-has-val,
    .efb-wrap .efb-segment.efb-open .efb-trigger {
        border-color: var(--action) !important;
        background: var(--brand-subtle) !important;
        color: var(--action) !important;
    }

    .efb-wrap .efb-has-val .efb-trigger,
    .efb-wrap .efb-sort-chip.efb-has-val { font-weight: 600 !important; }

    /* Home Sort sheet: options apply on tap, so no "Show results" foot */
    #efbDrop-sort .mc-sheet-foot { display: none; }

    .efb-drop .efb-sort-opt {
        width: auto;
        border-width: 0 0 1px !important;
        text-align: left;
    }

    .efb-drop .efb-sort-opt.is-active { font-weight: 600 !important; color: var(--action) !important; }

    /* The bar's chips replace these on tablet/mobile */
    .srt-bar-wrap,
    #ecSortDropdownBtn,
    .ec-filter-col .ec-sidebar-search { display: none !important; }
}

@media (max-width: 599.98px) {
    .efb-wrap:not(.efb-sticky) { margin-left: calc(-1 * var(--gutter-mobile)) !important; margin-right: calc(-1 * var(--gutter-mobile)) !important; }
    .efb-wrap .efb-search-row { padding: 0 var(--space-4) 0 var(--gutter-mobile); }
    .efb-wrap .efb-bar { padding: 0 var(--gutter-mobile) !important; }
}

/* ── 4e. Tablet/mobile bottom sheets (Agoda Sort sheet: rises from the
   bottom over a dim backdrop, title centred, ✕ top-right, 16px rows with
   rules, a full-width action pinned to the foot). Used by the filter-bar
   chips (.efb-drop) and the directory Sort menu. !important beats the
   inline positions the page scripts set for the desktop dropdowns. ────── */
.mc-sheet-head,
.mc-sheet-foot { display: none; }

@media (max-width: 991.98px) {
    /* Backdrop + scroll lock, pinned or not */
    body:has(.efb-wrap .efb-drop--open),
    body:has(.ec-sort-dropdown-panel.open) { overflow: hidden; }

    body:has(.efb-wrap .efb-drop--open)::before,
    body:has(.ec-sort-dropdown-panel.open)::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 99998; /* over the chatbot toggle (10000) */
        background: rgba(4, 7, 10, 0.45);
        animation: mc-sheet-fade 0.2s ease-out;
    }

    /* Lift the bar's stacking contexts above the backdrop while a sheet is open */
    .efb-wrap:has(.efb-drop--open),
    .directory-hero-container:has(.efb-drop--open) { z-index: 99999 !important; }

    .efb-drop.efb-drop--open,
    .ec-sort-dropdown-panel.open {
        z-index: 99999 !important;
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: var(--surface) !important;
        overflow: hidden !important;
    }

    /* Bottom sheet, pinned or not */
    .efb-wrap .efb-drop.efb-drop--open,
    .ec-sort-dropdown-panel.open {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-height: 85vh !important;
        max-height: 85dvh !important;
        padding: 0 0 env(safe-area-inset-bottom) !important;
        border-radius: var(--radius-16) var(--radius-16) 0 0 !important;
        box-shadow: 0 -4px 16px rgba(4, 7, 10, 0.16) !important;
        animation: mc-sheet-up 0.36s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Bar not pinned yet: dim it too (it is lifted over the backdrop only to carry its sheet) */
    .efb-wrap:not(.efb-sticky):has(.efb-drop--open)::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: rgba(4, 7, 10, 0.45);
        animation: mc-sheet-fade 0.2s ease-out;
    }

    .mc-sheet-head {
        position: relative;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        height: 56px;
        border-bottom: 1px solid var(--border-default);
    }

    .mc-sheet-title { font: 600 17px/22px var(--font-sans); color: var(--text-strong); }

    .mc-sheet-close {
        position: absolute;
        top: 50%;
        right: var(--space-8);
        width: 44px;
        height: 44px;
        transform: translateY(-50%);
        border: 0;
        border-radius: 50%;
        background: none;
        color: var(--text-strong);
        font-size: 20px;
    }

    .mc-sheet-close:active { background: var(--background); }

    .mc-sheet-foot {
        display: block;
        flex-shrink: 0;
        padding: var(--space-12) var(--space-16);
        border-top: 1px solid var(--border-default);
    }

    .mc-sheet-apply {
        width: 100%;
        height: var(--control-l);
        border: 0;
        border-radius: var(--radius-max);
        background: var(--action);
        color: var(--text-inverted);
        font: 600 16px/20px var(--font-sans);
    }

    /* Option lists scroll inside the sheet; one 16px row per option */
    .efb-drop.efb-drop--open { overflow-y: auto !important; overscroll-behavior: contain; }
    .efb-drop.efb-drop--open .mc-sheet-head { position: sticky; top: 0; z-index: 1; background: var(--surface); }
    .efb-drop.efb-drop--open .mc-sheet-foot { position: sticky; bottom: 0; margin-top: auto; background: var(--surface); }
    .efb-drop--grid.efb-drop--open { grid-template-columns: none !important; }

    .efb-drop.efb-drop--open .efb-check-item,
    .ec-sort-dropdown-panel.open .ec-sort-option {
        display: flex;
        flex-shrink: 0;
        justify-content: space-between;
        gap: var(--space-12);
        min-height: 52px;
        margin: 0 var(--space-16);
        padding: var(--space-12) var(--space-4) !important;
        border-bottom: 1px solid var(--border-default);
        border-radius: 0 !important;
        background: none !important;
        font: 400 16px/20px var(--font-sans) !important;
        color: var(--text-strong) !important;
        white-space: normal;
    }

    .efb-drop.efb-drop--open .efb-check-item input[type="checkbox"] {
        order: 2;
        width: 20px;
        height: 20px;
    }

    .efb-drop.efb-drop--open .efb-check-item input:checked ~ span,
    .ec-sort-dropdown-panel.open .ec-sort-option.active { color: var(--action) !important; }

    .ec-sort-dropdown-panel.open .ec-sort-option.active { border-left: 0; font-weight: 600 !important; }
    .ec-sort-dropdown-panel.open .ec-sort-option:last-of-type { border-bottom: 0; }

    .efb-drop--area.efb-drop--open .efb-area-list { flex: 0 0 auto; max-height: none; padding: 0; overflow: visible; }
    .efb-drop--area.efb-drop--open .efb-area-search-wrap { padding: 0 var(--space-16) var(--space-12); border-bottom: 0; }

    .efb-drop--area.efb-drop--open .efb-drop-hint { padding: var(--space-24) var(--space-16); font-size: 14px; }
}

/* ── 4f. Phones: fields under 16px make iOS zoom the page on focus (review
   sort + reply bars sat at 13.6/14.4px; .mc-form fields already handle it) */
@media (max-width: 767.98px) {
    .review-sort-select,
    .reply-message-input { font-size: 16px !important; }
}

/* Tablet/mobile: small score badges scaled their word label down to ~7px */
@media (max-width: 991.98px) {
    .myclevan-score-label:not(:where(.reviews-section .review-card *)) { font-size: max(12px, calc(var(--myclevan-score-scale-size) * 0.85)); }
}

@keyframes mc-sheet-up { from { transform: translateY(100%); } }
@keyframes mc-sheet-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .efb-drop.efb-drop--open,
    .ec-sort-dropdown-panel.open,
    body::before { animation: none !important; }
}

/* ── 4g. Tablet/mobile full-screen search page, sliding in from the right
   (homepage search container, Education & Care search pill) ──────────── */
.sb-sheet { display: none; }

@media (max-width: 991.98px) {
    body:has(.sb-sheet.open) { overflow: hidden; }

    .sb-sheet {
        position: fixed;
        inset: 0;
        z-index: 10001; /* over the chatbot toggle (10000) */
        display: flex;
        flex-direction: column;
        background: var(--surface);
        font-family: var(--font-mobile);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.36s;
    }

    .sb-sheet.open {
        transform: none;
        visibility: visible;
        transition-delay: 0s;
    }

    .sb-sheet-head {
        position: relative;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        height: 56px;
    }

    .sb-sheet-back {
        position: absolute;
        top: 50%;
        left: var(--space-8);
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: none;
        color: var(--text-strong);
        font-size: 18px;
    }

    .sb-sheet-back:active { background: var(--background); }

    .sb-sheet-title {
        margin: 0;
        font: 600 17px/22px var(--font-mobile);
        color: var(--text-strong);
    }

    .sb-sheet-search {
        position: relative;
        z-index: 1;
        flex-shrink: 0;
        padding: 0 var(--space-16) var(--space-12);
        box-shadow: 0 4px 6px -4px rgba(4, 7, 10, 0.14);
    }

    .sb-sheet-search i {
        position: absolute;
        top: 26px;
        left: 34px;
        transform: translateY(-50%);
        color: var(--text-strong);
        pointer-events: none;
    }

    .sb-sheet-search input,
    .efb-drop--area.efb-drop--open .efb-area-search {
        width: 100%;
        height: 52px;
        padding: 0 var(--space-16) 0 50px;
        border: 2px solid transparent;
        border-radius: var(--radius-max);
        background: var(--brand-subtle);
        font: 400 16px/20px var(--font-mobile);
        color: var(--text-strong);
        outline: none;
        -webkit-appearance: none;
        appearance: none;
        transition: border-color 0.15s ease, background-color 0.15s ease;
    }

    .sb-sheet-search input:focus,
    .efb-drop--area.efb-drop--open .efb-area-search:focus { border-color: var(--focus-border); background: var(--surface); }
    .sb-sheet-search input::placeholder,
    .efb-drop--area.efb-drop--open .efb-area-search::placeholder { color: var(--text-subtle); font-size: 15px; }

    /* Native clear ✕ recoloured to brand: mask shape, background colour */
    .sb-sheet-search input::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background: var(--action);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
        cursor: pointer;
    }

    .sb-sheet-body {
        flex: 1;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .sb-sheet-near {
        display: flex;
        align-items: center;
        gap: var(--space-16);
        width: 100%;
        padding: var(--space-16);
        border: 0;
        border-bottom: 1px solid var(--border-default);
        background: none;
        color: var(--text-strong);
        font: 400 16px/20px var(--font-mobile);
        text-align: left;
    }

    .sb-sheet-near i { width: 24px; font-size: 20px; color: var(--action); text-align: center; }

    .sb-sheet-label {
        padding: var(--space-16) var(--space-16) var(--space-4);
        font: 600 12px/16px var(--font-mobile);
        color: var(--text-subtle);
    }

    .sb-sheet-row {
        display: flex;
        align-items: center;
        gap: var(--space-12);
        width: 100%;
        padding: var(--space-12) var(--space-16);
        border: 0;
        background: none;
        text-align: left;
    }

    .sb-sheet-row:active,
    .sb-sheet-near:active { background: var(--background); }

    .sb-sheet-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }

    .sb-sheet-row-name,
    .sb-sheet-row-sub {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .sb-sheet-row-name { font: 400 16px/22px var(--font-mobile); color: var(--action); }
    .sb-sheet-row-name strong { font-weight: 700; }
    .sb-sheet-row-sub { font: 400 13px/18px var(--font-mobile); color: var(--text-subtle); }

    .sb-sheet-row-tag {
        flex-shrink: 0;
        min-width: 64px;
        padding: 4px 10px;
        border: 1px solid var(--action);
        border-radius: var(--radius-4);
        color: var(--action);
        font: 400 13px/16px var(--font-mobile);
        text-align: center;
    }

    .sb-sheet-empty { padding: var(--space-24) var(--space-16); font-size: 14px; color: var(--text-subtle); }

    /* Area chip: the same right-hand full-screen page instead of a bottom sheet — its list
       follows the chosen states, so it gets the whole screen. Outranks the 4e sheet rules. */
    body:has(.efb-drop--area.efb-drop--open) { overflow: hidden; }

    .efb-wrap .efb-drop.efb-drop--area.efb-drop--open {
        position: fixed !important;
        inset: 0 !important;
        max-height: none !important;
        padding: 0 0 env(safe-area-inset-bottom) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        font-family: var(--font-mobile);
        animation: mc-page-in 0.36s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Page header: back chevron on the left (shared-layout.js swaps the ✕ icon) */
    .efb-drop--area .mc-sheet-head { border-bottom: 0; }
    .efb-drop--area .mc-sheet-title { font: 600 17px/22px var(--font-mobile); } /* as .sb-sheet-title */
    .efb-drop--area .mc-sheet-close { right: auto; left: var(--space-8); font-size: 18px; }
    /* Search field stays under the header while the list scrolls */
    .efb-drop--area.efb-drop--open .efb-area-search-wrap {
        position: sticky;
        top: 56px;
        z-index: 1;
        background: var(--surface);
        box-shadow: 0 4px 6px -4px rgba(4, 7, 10, 0.14);
    }
    /* Search icon, as in the homepage area page (.sb-sheet-search i) */
    .efb-drop--area.efb-drop--open .efb-area-search-wrap::before {
        content: "\f002";
        position: absolute;
        top: 26px;
        left: 34px;
        transform: translateY(-50%);
        font: 900 16px/1 "Font Awesome 5 Free";
        color: var(--text-strong);
        pointer-events: none;
    }
    /* Rows as in the homepage area page (.sb-sheet-row): no dividers, Areas grey,
       Sub Areas indented, picked rows bold */
    .efb-drop--area.efb-drop--open .efb-check-item {
        min-height: 0;
        margin: 0;
        padding: var(--space-12) var(--space-16) !important;
        border-bottom: 0;
        font: 400 16px/22px var(--font-mobile) !important;
    }
    .efb-drop--area.efb-drop--open .efb-check-item.is-sub { padding-left: 40px !important; }
    .efb-drop--area.efb-drop--open .efb-area-more { padding: var(--space-8) var(--space-16) var(--space-12) 40px; font-size: 14px; }
    .efb-drop--area.efb-drop--open .efb-check-item.is-area { color: var(--text-subtle) !important; }
    .efb-drop--area.efb-drop--open .efb-check-item input:checked ~ span { font-weight: 700; }
    /* "Show nearby area" joins the sticky header under the search (56px head + 64px search),
       so the search's shadow no longer cuts it; rows line up with the list's 16px inset */
    .efb-drop--area.efb-drop--open .efb-area-search-wrap:has(+ .mc-nearby:not([hidden])) { box-shadow: none; }
    .efb-drop--area.efb-drop--open .mc-nearby {
        display: flex;
        position: sticky;
        top: 120px;
        z-index: 1;
        padding: var(--space-4) var(--space-16) var(--space-12);
        border-bottom: 0;
        background: var(--surface);
        box-shadow: 0 4px 6px -4px rgba(4, 7, 10, 0.14);
        font: 400 15px/20px var(--font-mobile);
    }
    .efb-drop--area.efb-drop--open .mc-nearby[hidden] { display: none; }
    .efb-drop--area.efb-drop--open .mc-nearby-check input { width: 20px; height: 20px; }
}

@keyframes mc-page-in { from { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
    .sb-sheet { transition: none; }
}

/* ── 4c. Tooltips (Agoda: dark #252c38, 14px white, 2px radius, 248px max) */
.tooltip {
    --bs-tooltip-bg: var(--text-default);
    --bs-tooltip-color: var(--text-inverted);
    --bs-tooltip-opacity: 1;
    --bs-tooltip-padding-x: var(--space-12);
    --bs-tooltip-padding-y: var(--space-12);
    --bs-tooltip-border-radius: var(--radius-2);
    --bs-tooltip-max-width: 248px;
    --bs-tooltip-font-size: 14px;
    --bs-tooltip-arrow-width: 16px;
    --bs-tooltip-arrow-height: 8px;
    font-family: var(--font-sans);
    line-height: 18px;
}

/* White rich tooltip (review breakdown) keeps a matching white arrow */
.tooltip.review-rating-tooltip { --bs-tooltip-bg: var(--surface); }

/* Review-score breakdown: Agoda's white 8px card with a grey footer bar */
.review-tooltip,
.biz-review-tooltip {
    border: 0 !important;
    border-radius: var(--radius-8) !important;
    padding: var(--space-4) !important;
    box-shadow: var(--shadow-m) !important;
    color: var(--text-default);
}

.review-tooltip .review-tooltip-content,
.biz-review-tooltip .review-tooltip-content { padding: var(--space-8) 0 0 var(--space-8); }

.review-tooltip .review-tooltip-category-label,
.biz-review-tooltip .review-tooltip-category-label { font-size: 10px; color: #555; }

.review-tooltip .review-tooltip-bar-container,
.biz-review-tooltip .review-tooltip-bar-container { background: #ccc; border-radius: 0; }

.review-tooltip .review-tooltip-bar,
.biz-review-tooltip .review-tooltip-bar { border-radius: 0; }

/* Rating bars fill left → right. Tooltips re-render on every show; page bars get
   .rating-bar-pending / .rating-bar-in-view from biz-details.js (IntersectionObserver). */
@keyframes ratingBarFill { from { transform: scaleX(0); } }
@keyframes ratingMarkerSlide { from { left: 0; } }
@media (prefers-reduced-motion: no-preference) {
    .rating-bar-pending .progress-bar { transform: scaleX(0); transform-origin: left; }
    .review-tooltip .review-tooltip-bar,
    .biz-review-tooltip .review-tooltip-bar,
    .rating-bar-in-view .progress-bar {
        transform-origin: left;
        animation: ratingBarFill 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .review-tooltip .review-tooltip-marker,
    .biz-review-tooltip .review-tooltip-marker { animation: ratingMarkerSlide 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
}

.review-tooltip .review-tooltip-footer,
.biz-review-tooltip .review-tooltip-footer {
    /* bleed to the card edges: card padding 4px + content inset 8px on the left */
    margin: var(--space-4) -4px -4px -12px;
    padding: 7px 10px;
    background: var(--background-subtle);
    border-top: 1px solid #e9ebee;
    border-radius: 0 0 var(--radius-8) var(--radius-8);
    font-size: 10px;
    color: #1d2129;
    text-align: left;
}

/* Agoda: hover only lightens the fill — drop the legacy white ripple circle
   (.btn::before in public-core/style.css) that left a pale band mid-button */
.btn:not(:where(.reviews-section .review-card *))::before { content: none; }

/* Agoda: flat primary buttons, no decorative glows, dark headings */
.btn-primary:not(:where(.reviews-section .review-card *)) {
    background: var(--action);
    box-shadow: none;
}

@media (hover: hover) {

.btn-primary:not(:where(.reviews-section .review-card *)):hover {
    background: var(--action-hover-light);
    box-shadow: none;
    transform: none;
}
}

/* These two carry !important base/hover styles in the page bundles */
@media (hover: hover) {
.mobile-filter-actions .btn-primary:hover,
.efb-filter-btn:hover {
    background: var(--action-hover-light) !important;
    box-shadow: none !important;
    transform: none !important;
}
}

.auth-page-shell::before,
.auth-page-shell::after { display: none; }

.info-page .info-section-title,
.auth-title { color: var(--text-default) !important; }

/* MyClevan signature elements keep the brand palette */
.chatbot-button { background: var(--dusty-blue) !important; color: var(--text-inverted) !important; }
.chatbot-header { background: var(--deep-blue) !important; color: var(--text-inverted) !important; }
.chatbot-welcome-bubble-avatar,
.chatbot-message-avatar { background: var(--dusty-blue) !important; color: var(--text-inverted) !important; }
.chatbot-send-btn { background: var(--deep-blue) !important; color: var(--text-inverted) !important; }

/* ── 5. Footer (brand-subtle band) ───────────────────────────────────── */
.footer-modern {
    background: var(--background-subtle) !important;
    color: var(--text-default) !important;
    border-top: 1px solid var(--border-default);
    padding: var(--space-24) 0 var(--space-16) !important;
    margin-top: var(--space-24);
}

.footer-modern .footer-brand { margin-bottom: var(--space-8); background: none; -webkit-text-fill-color: initial; }
.footer-modern .footer-brand img { display: block; width: 175px; height: auto; }

.footer-modern .footer-heading {
    color: var(--text-default) !important;
    font: 600 16px/20px var(--font-sans);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: var(--space-8);
}

.footer-modern .footer-description,
.footer-modern .footer-text,
.footer-modern .footer-links-title,
.footer-modern .footer-links a {
    color: var(--text-subtle) !important;
    font: 400 14px/20px var(--font-sans);
}

.footer-modern .footer-links a { font-weight: 600; }

@media (hover: hover) {

.footer-modern .footer-links a:hover {
    color: var(--nav-hover) !important;
    text-decoration: underline;
    transform: none;
    padding-left: 0;
}
}

.footer-modern .footer-divider { border-color: var(--border-divider) !important; opacity: 1; margin: var(--space-16) 0 var(--space-12); }
.footer-modern .footer-copyright { color: var(--text-subtle) !important; font: 400 12px/15px var(--font-sans); }

/* ── 7. Rating: word + badge (DS rating, radius 4 4 4 0) ─────────────── */
.myclevan-score-value:not(:where(.reviews-section .review-card *)) {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px 4px 4px 0;
    background: var(--action);
    color: var(--text-inverted) !important;
    font-weight: 600;
    line-height: 1.2;
}

.myclevan-score:not(:where(.reviews-section .review-card *)):has(.myclevan-score-label) {
    align-items: center;
    gap: 6px;
}

.myclevan-score-label:not(:where(.reviews-section .review-card *)) {
    color: var(--action) !important;
    font-weight: 700;
    margin-left: 0;
    padding-bottom: 0;
}

/* Image overlays: counter pill, 28px nav arrows, 36px outline favourite */
.slider-counter {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 4px 8px !important;
    border-radius: var(--radius-max) !important;
    background: var(--overlay) !important;
    color: var(--text-inverted) !important;
    font: 600 14px/18px var(--font-sans) !important;
}

.slider-nav {
    width: var(--control-s) !important;
    height: var(--control-s) !important;
    border: 0 !important;
    border-radius: var(--radius-max) !important;
    background: var(--surface) !important;
    color: var(--text-default) !important;
    box-shadow: var(--shadow-m) !important;
}

.biz-card-heart-btn,
.school-card-heart-btn.school-collection-btn {
    width: var(--control-m) !important;
    height: var(--control-m) !important;
    border-radius: var(--radius-max) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-subtle) !important;
    box-shadow: none !important;
}

@media (hover: hover) {

.biz-card-heart-btn:hover,
.school-card-heart-btn.school-collection-btn:hover { border-color: var(--brand) !important; color: var(--action) !important; }
}

.biz-card-heart-btn.active,
.school-card-heart-btn.school-collection-btn.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--text-default) !important;
}

/* Saved heart is red everywhere (directory cards + business-details sticky card) */
.biz-collection-btn.active .fas.fa-heart {
    color: var(--urgency) !important;
}

/* Ribbons become DS tags */
.new-to-myclevan-ribbon-body,
.special-label-ribbon-body {
    background: var(--accent) !important;
    color: var(--text-default) !important;
    border-radius: var(--radius-2) !important;
    font: 600 12px/15px var(--font-sans) !important;
    box-shadow: none !important;
}

.new-to-myclevan-ribbon-fold,
.special-label-ribbon-fold { display: none !important; }

.biz-level-badge {
    background: var(--brand-subtle) !important;
    color: var(--action) !important;
    border-radius: var(--radius-2) !important;
    font: 400 12px/15px var(--font-sans) !important;
}

/* ── 8. Forms: one spec for every public form ────────────────────────────
   Proportions from the shadcn "form-2" reference: 24/32 semibold title,
   14px description 4px under it, 16px to the first field, 14px/500 label
   4px above a 36px field, 16px between fields, 16px column gap, 16px rule
   before the actions, 36px/14px buttons 16px apart, 24px frame padding
   (16px on phones; spacing tightened 2026-10-11 so more fits per screen),
   6px corners on fields and buttons (user decision
   2026-10-02: forms take shadcn's rounded-md, not the pill). Colours stay
   on the design system.
   Usage: add `mc-form` to the form's .card / .modal-content (frame + fields)
   or to the <form> itself (fields only); add `form-title` to a page title;
   add `mc-form-dialog` to a .modal-dialog for the reference's 672px width.
   Why a cascade layer + !important: page CSS and the shared style.css pile
   on `!important` size overrides (up to 0,4,0 specificity, plus inline
   styles). Layered !important beats all unlayered declarations, so this
   spec wins without touching style.css (shared with admin). */
@layer mc-forms {
    .mc-form { --form-pad: 24px; }

    /* Frame */
    .mc-form > .card-body { padding: var(--form-pad) !important; }
    .mc-form .modal-header {
        align-items: flex-start !important;
        padding: var(--form-pad) var(--form-pad) 0 !important;
        border-bottom: 0 !important;
    }
    .mc-form .modal-body { padding: 16px var(--form-pad) 0 !important; }
    .mc-form .modal-body:last-child { padding-bottom: var(--form-pad) !important; }
    .mc-form .modal-footer {
        justify-content: flex-end !important;
        gap: 16px !important;
        border-top: 1px solid var(--border-divider) !important;
    }
    .mc-form > .modal-footer,
    .mc-form > form > .modal-footer {
        margin: 16px var(--form-pad) 0 !important;
        padding: 16px 0 var(--form-pad) !important;
    }
    .mc-form .modal-body .modal-footer {
        margin: 16px 0 0 !important;
        padding: 16px 0 0 !important;
    }
    .mc-form .modal-footer > * { margin: 0 !important; }
    .mc-form hr { margin: 16px 0 !important; }
    .mc-form-dialog { max-width: min(672px, calc(100vw - 32px)) !important; }
    /* A <form> between .modal-content and .modal-body breaks Bootstrap's
       scrollable flex chain; make it a shrinkable flex column again */
    .modal-dialog-scrollable .modal-content > form {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* Title + description */
    .mc-form :is(.modal-title, .form-title) {
        font-size: 24px !important;
        line-height: 32px !important;
        font-weight: 600 !important;
    }
    .mc-form .card-body > .form-title { margin-bottom: 16px !important; }
    .mc-form .modal-header .text-muted {
        display: block;
        margin-top: 4px !important;
        font-size: 14px !important;
        line-height: 20px !important;
    }

    /* Field rhythm */
    .mc-form .mb-3 { margin-bottom: 16px !important; }
    .mc-form .row:not(.g-0) {
        --bs-gutter-x: 16px !important;
        --bs-gutter-y: 16px !important;
    }
    .mc-form .enquiry-form-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
    .mc-form .enquiry-field { margin: 0 !important; }
    .mc-form .enquiry-field-full { grid-column: 1 / -1 !important; }
    /* Child name: our own suggestion list under the field (enquiry.js) */
    .mc-form .enquiry-child { position: relative; }
    /* A popover card: "Your children", then one row per child (initial · name · date of birth).
       !important on the box: Bootstrap's unlayered ul/li defaults would otherwise indent it */
    .mc-form .enquiry-child-list {
        position: absolute;
        z-index: 5;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        max-height: 248px;
        overflow-y: auto;
        margin: 0 !important;
        padding: 4px !important;
        list-style: none !important;
        background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-8);
        box-shadow: var(--shadow-m);
        animation: mcChildListIn 0.14s ease-out;
    }
    @keyframes mcChildListIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
    .mc-form .enquiry-child-head { margin: 0 !important; padding: 6px 8px 4px !important; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-subtle); }
    .mc-form .enquiry-child-list [role="option"] {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 !important;
        padding: 6px 8px !important;
        border-radius: 6px;
        font-size: 14px;
        line-height: 20px;
        color: var(--text-default);
        cursor: pointer;
        transition: background-color 0.12s ease;
    }
    .mc-form .enquiry-child-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-subtle); color: var(--action); font-size: 13px; font-weight: 700; }
    .mc-form .enquiry-child-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
    .mc-form .enquiry-child-dob { flex: none; font-size: 12px; color: var(--text-subtle); }
    .mc-form .enquiry-child-list [role="option"].is-active { background: var(--action-hover-wash); }
    @media (hover: hover) {
    .mc-form .enquiry-child-list [role="option"]:hover { background: var(--action-hover-wash); }
    }
    @media (prefers-reduced-motion: reduce) { .mc-form .enquiry-child-list { animation: none; } }
    .mc-form .enquiry-section-label { margin: 0 !important; font-size: 13px; font-weight: 700; color: var(--text-subtle); }
    /* Password checklist (shared-layout.js): grey → red as you type → teal ✓, then the row folds
       away; all met: green border, a ✓ in the field and one soft green pulse */
    .mc-form .mc-pw-rules { margin: 8px 0 0 !important; padding: 0 !important; list-style: none; transition: margin 0.34s ease; }
    .mc-form .mc-pw-rules.is-valid { margin-top: 0 !important; }
    .mc-form .mc-pw-rule { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.34s ease, opacity 0.34s ease, transform 0.34s ease; }
    .mc-form .mc-pw-rule.is-gone { grid-template-rows: 0fr; opacity: 0; transform: translateX(10px); }
    .mc-form .mc-pw-rule-inner { display: flex; align-items: center; gap: 8px; min-height: 0; overflow: hidden; padding: 2px 0; font-size: 13px; line-height: 18px; color: var(--text-subtle); transition: color 0.2s ease; }
    .mc-form .mc-pw-rules.is-typing .mc-pw-rule-inner { color: var(--urgency); }
    .mc-form .mc-pw-rules .mc-pw-rule.is-met .mc-pw-rule-inner { color: var(--success-teal); }
    .mc-form .mc-pw-icon { position: relative; flex: none; width: 16px; height: 16px; }
    .mc-form .mc-pw-icon svg { position: absolute; inset: 0; width: 16px; height: 16px; transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .mc-form .mc-pw-check { opacity: 0; transform: scale(0.3) rotate(-35deg); }
    .mc-form .mc-pw-rule.is-met .mc-pw-x { opacity: 0; transform: scale(0.3) rotate(35deg); }
    .mc-form .mc-pw-rule.is-met .mc-pw-check { opacity: 1; transform: none; }
    .mc-form .password-toggle-wrapper .form-control.mc-pw-field { padding-right: 72px !important; transition: border-color 0.25s ease, box-shadow 0.25s ease; }
    .mc-form .form-control.mc-pw-valid { border-color: var(--success) !important; animation: mcPwPulse 0.7s ease-out; }
    @keyframes mcPwPulse { from { box-shadow: 0 0 0 0 rgba(0, 98, 47, 0.35); } to { box-shadow: 0 0 0 7px rgba(0, 98, 47, 0); } }
    .mc-form .mc-pw-ok { position: absolute; z-index: 11; top: 50%; right: 40px; width: 18px; height: 18px; color: var(--success); opacity: 0; transform: translateY(-50%) scale(0.3); transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; }
    .mc-form .mc-pw-ok svg { display: block; width: 18px; height: 18px; }
    .mc-form .mc-pw-valid ~ .mc-pw-ok { opacity: 1; transform: translateY(-50%) scale(1); }
    @media (prefers-reduced-motion: reduce) {
        .mc-form :is(.mc-pw-rule, .mc-pw-rule-inner, .mc-pw-icon svg, .mc-pw-ok, .mc-pw-field) { transition-duration: 0.01ms !important; }
        .mc-form .form-control.mc-pw-valid { animation: none; }
    }
    /* A saved child's date of birth can't be changed here: the field greys out */
    .mc-form .enquiry-field .form-control[readonly] { background-color: var(--bs-secondary-bg) !important; color: var(--text-subtle); cursor: default; }
    /* Enquiry modal: the match question and the saved screen replace the form in place */
    .mc-form [hidden] { display: none !important; }
    .mc-form .enquiry-consent { display: flex; gap: 8px; padding-left: 0; font-size: 14px; line-height: 1.4; color: var(--text-subtle); }
    .mc-form .enquiry-consent .form-check-input { flex-shrink: 0; margin: 2px 0 0; float: none; }
    .mc-form .enquiry-panel { text-align: center; padding: 8px 0; }
    .mc-form .enquiry-panel p { margin: 0 0 8px; color: var(--text-default); }
    .mc-form .enquiry-panel-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
    .mc-form .enquiry-panel-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px !important; }
    .mc-form .enquiry-panel-actions--stacked { flex-direction: column; align-items: stretch; }
    /* Saved screen: ✓ + title in a row, reference pill with copy, WhatsApp message preview */
    .mc-form .enquiry-saved-title { margin: 0 0 8px !important; text-align: center; font-size: 24px !important; line-height: 32px !important; font-weight: 700 !important; color: var(--text-default); }
    /* The title text is what's centred; the ✓ hangs off its left edge */
    .mc-form .enquiry-saved-title-text { position: relative; display: inline-block; }
    .mc-form .enquiry-saved-icon { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--success-subtle); color: var(--whatsapp); font-size: 22px; }
    .mc-form .enquiry-panel .enquiry-saved-reference { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 16px !important; padding: 2px 2px 2px 12px !important; border: 1px solid var(--border-default); border-radius: 999px; font-size: 12px; color: var(--text-subtle); }
    .mc-form .enquiry-saved-reference strong { font-size: 13px; letter-spacing: 0.02em; color: var(--text-default); }
    .mc-form .enquiry-saved-copy { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--text-subtle); font-size: 12px; }
    .mc-form .enquiry-saved-copy:hover { background: var(--action-hover-wash); color: var(--action); }
    .mc-form .enquiry-panel .enquiry-saved-text { margin-bottom: 16px !important; font-size: 14px; line-height: 20px; color: var(--text-subtle); }
    .mc-form .enquiry-saved-text strong { color: var(--text-default); }
    .mc-form .enquiry-saved-preview { text-align: left; }
    .mc-form .enquiry-panel .enquiry-saved-preview-label { margin-bottom: 8px !important; font-size: 13px; font-weight: 700; color: var(--text-subtle); }
    /* WhatsApp's own chat colours, so the preview reads as the message they'll send */
    .mc-form .enquiry-saved-chat { display: flex; justify-content: flex-end; padding: 16px !important; border-radius: 12px; background: #efeae2; }
    .mc-form .enquiry-panel .enquiry-saved-bubble { max-width: 420px; margin: 0 !important; padding: 10px 12px !important; border-radius: 10px 2px 10px 10px; background: #d9fdd3; box-shadow: 0 1px 1px rgba(11, 20, 26, 0.13); color: #111b21; font-size: 14px; line-height: 20px; }
    /* Signed out: Create account / Sign in underline tabs (the login page's Email / Phone tabs) */
    .mc-form .enquiry-tabs { display: flex; margin-bottom: 16px; border-bottom: 1px solid var(--border-divider); }
    .mc-form .enquiry-tab {
        flex: 1;
        margin-bottom: -1px;
        padding: 10px 8px;
        border: 0;
        border-bottom: 2px solid transparent;
        background: none;
        color: var(--text-default);
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.15s ease, border-color 0.15s ease;
    }
    .mc-form .enquiry-tab[aria-selected="true"] { border-bottom-color: var(--brand); color: var(--brand); }
    .mc-form .enquiry-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
    @media (hover: hover) {
    .mc-form .enquiry-tab:hover { color: var(--brand); }
    }
    .mc-form .enquiry-account { margin-bottom: 16px; }
    .mc-form .enquiry-divider { margin: 0 !important; border-color: var(--border-divider); opacity: 1 !important; }
    /* auto: as wide as its longest option (flag + "+971"); a fixed 104px clipped iOS's wider flag emoji */
    .mc-form .enquiry-country-code { flex: 0 0 auto !important; width: auto !important; }
    .mc-form :is(.enquiry-forgot, .auth-forgot) { margin: 0 0 16px !important; text-align: right; font-size: 14px; }
    /* Login / register: "Don't have an account? …" right under the button */
    .mc-form .auth-switch { margin: 0 !important; text-align: center; font-size: 14px; color: var(--text-subtle); }
    /* Sign-in / create-account forms (login, register, the enquiry modal's two tabs) keep the
       approved prototype's spacing at every width, not the compact phone padding (user decision
       2026-10-17): fields sit tight under each other, 16px before the button, 24px top and bottom */
    .mc-form :is(#loginForm, #registrationForm, #enquirySignInForm) .mb-3 { margin-bottom: 0 !important; }
    .mc-form :is(#loginForm, #registrationForm, #enquiryWaForm) .mc-pw-rules { margin: 0 0 16px !important; }
    .mc-form :is(#loginForm, #registrationForm) .mc-btn { display: flex; margin-top: 16px !important; }
    .mc-form #registrationForm .mb-3:has(.mc-pw-rules) + .mc-btn { margin-top: 0 !important; } /* the checklist's 16px is the gap */
    .auth-page .mc-form > .card-body { padding-top: 24px !important; padding-bottom: 24px !important; }
    .auth-page .mc-form .card-body > .form-title { margin-bottom: 24px !important; }
    #enquiryModal .mc-form .modal-header { padding-top: 24px !important; }
    #enquiryModal .mc-form .modal-footer { padding-bottom: 24px !important; }
    #enquiryModal .mc-form .enquiry-tabs { margin-bottom: 20px !important; }
    #enquiryModal .mc-form .enquiry-account { margin-bottom: 16px !important; }

    /* Labels, fields, helper text */
    .mc-form .form-label {
        margin-bottom: 4px !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        font-weight: 500 !important;
    }
    .mc-form :is(.form-control, .form-select):where(:not(.otp-digit, .auth-otp-field)) {
        min-height: 36px !important;
        padding: 7px 12px !important;
        font-size: 16px !important; /* ≥16px on phones stops iOS zoom-on-focus */
        line-height: 20px !important;
    }
    .mc-form .form-control::placeholder { font-size: inherit !important; }
    .mc-form .form-select { padding-right: 36px !important; }
    /* shadcn Input/Textarea/Select: 1px border, shadow-xs at rest; replaces style.css's 2px frame.
       Colours stay on the unlayered rules (brand.css base, Bootstrap is-valid/is-invalid),
       so focus rings and error borders still come through. */
    .mc-form :is(.form-control, .form-select) {
        border-width: 1px !important;
        border-style: solid !important;
        transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
    }
    .mc-form :is(.form-control, .form-select):not(:focus, .is-invalid, .is-valid, [aria-invalid="true"]) {
        box-shadow: 0 1px 2px 0 rgba(13, 17, 24, 0.05) !important;
    }
    .mc-form :is(.form-control, .form-select)[aria-invalid="true"] { border-color: var(--urgency) !important; }
    .mc-form :is(.form-control, .form-select)[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(197, 56, 41, 0.2) !important; }
    .mc-form :is(.form-control, .form-select):disabled { opacity: 0.5; cursor: not-allowed; }
    /* File input: shadcn's plain "Choose file" text instead of Bootstrap's grey button */
    .mc-form .form-control[type="file"]::file-selector-button {
        margin: 0 8px 0 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--text-strong);
        font-size: 14px;
        font-weight: 500;
    }
    /* Manage Business: the admin's file box instead, a grey Choose file button flush left, darker on hover */
    #manageBizModal .mc-form .form-control[type="file"] { padding: 0 12px 0 0 !important; line-height: 34px !important; overflow: hidden; }
    #manageBizModal .mc-form .form-control[type="file"]::file-selector-button {
        height: 34px;
        padding: 0 12px !important;
        border-right: 1px solid var(--bs-border-color) !important;
        background: var(--bs-tertiary-bg) !important;
        cursor: pointer;
        transition: background-color 0.15s ease;
    }
    #manageBizModal .mc-form .form-control[type="file"]:hover::file-selector-button { background: var(--bs-secondary-bg) !important; }
    /* Password eye toggle (shared-layout.js): keep text clear of the eye, and of Bootstrap's
       is-valid / is-invalid icon, which style.css moves to the eye's left */
    .mc-form .password-toggle-wrapper .form-control { padding-right: 44px !important; }
    .mc-form .password-toggle-wrapper .form-control:is(.is-valid, .is-invalid) { padding-right: 76px !important; }
    .mc-form textarea.form-control {
        min-height: 64px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .mc-form :is(.form-text, .form-check-label) {
        font-size: 14px !important;
        line-height: 20px !important;
    }
    .mc-form .form-text { margin-top: 8px !important; }

    /* Buttons */
    .mc-form .btn:not(.btn-link) {
        min-height: 36px !important;
        padding: 8px 16px !important;
        font-size: 14px !important;
        line-height: 18px !important;
    }
    .mc-form .btn i { font-size: 14px !important; }

    /* 6px corners by re-pointing the radius tokens the base .btn and
       .form-control rules read, so Bootstrap's input-group / btn-group
       rules still square the inner seams */
    .mc-form .btn { --radius-max: 6px; }
    .mc-form :is(.input-group-lg, .input-group-sm, .form-control-lg, .form-control-sm) {
        --bs-border-radius-lg: 6px;
        --bs-border-radius-sm: 6px;
    }
    /* Fields are forced (style.css hard-codes radii on some); input-group
       seams are then re-squared here, buttons keep Bootstrap's seam rules */
    .mc-form :is(.form-control, .form-select) { border-radius: 6px !important; }
    .mc-form .input-group > :not(:last-child) {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    .mc-form .input-group > :not(:first-child) {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    @media (min-width: 768px) {
        .mc-form :is(.form-control, .form-select):where(:not(.otp-digit, .auth-otp-field)) { font-size: 14px !important; }
    }

    @media (max-width: 575.98px) {
        .mc-form { --form-pad: 16px; }
        .mc-form .enquiry-form-grid { grid-template-columns: 1fr !important; }
    }

    /* Phones/tablets: every modal is one of two kinds (user decision 2026-10-17).
       .mc-modal-page = full page, opens in place (X closes);
       + .mc-modal-push = full page sliding in from the right (back chevron; phone Back closes, shared-layout.js);
       .mc-modal-viewer = full-page photo/video viewer on black;
       .mc-modal-sheet = bottom sheet sliding up.
       In this layer because .mc-form-dialog's layered !important max-width must lose to it. */
    @media (max-width: 991.98px) {
        .mc-modal-page,
        .mc-modal-sheet {
            --bs-modal-margin: 0 !important;
            --bs-modal-border-width: 0 !important;
        }
        .mc-modal-page .modal-dialog {
            display: flex !important;
            flex-direction: column !important;
            max-width: none !important;
            min-height: 100% !important;
        }
        .mc-modal-page {
            --bs-modal-border-radius: 0 !important;
            --bs-modal-inner-border-radius: 0 !important;
        }
        .mc-modal-page .modal-content { flex: 1 0 auto; overflow-y: auto !important; }
        .mc-modal-page .modal-header { position: sticky; top: 0; z-index: 2; background: var(--surface); }
        .mc-modal-page .modal-body { max-height: none !important; }
        .mc-modal-page.fade .modal-dialog { transform: none !important; transition: none !important; }

        .mc-modal-push.fade .modal-dialog {
            transform: translateX(100%) !important;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }
        .mc-modal-push.show .modal-dialog { transform: none !important; }
        /* Back chevron first, the title right beside it on the left */
        .mc-modal-push .modal-header { justify-content: flex-start !important; }
        .mc-modal-push .modal-header .btn-close {
            order: -1;
            margin: 0 8px 0 0 !important;
            --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.5 2.5 5 8l5.5 5.5'/%3e%3c/svg%3e") !important;
        }

        .mc-modal-viewer .modal-content { background: #000 !important; }
        .mc-modal-viewer .modal-body { display: flex !important; align-items: center; justify-content: center; }
        /* Login / Register: the form sits in the middle of the page and grows up and down
           (the auto margins fall back to the top when it is taller than the screen) */
        .mc-auth-modal iframe { margin-block: auto !important; }

        .mc-modal-sheet .modal-dialog {
            display: flex !important;
            align-items: flex-end !important;
            min-height: 100% !important;
            max-width: none !important;
        }
        .mc-modal-sheet .modal-content {
            width: 100%;
            max-height: 85dvh;
            overflow-y: auto !important;
            border-radius: var(--radius-16) var(--radius-16) 0 0 !important;
            padding-bottom: env(safe-area-inset-bottom) !important;
        }
        .mc-modal-sheet.fade .modal-dialog {
            transform: translateY(100%) !important;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }
        .mc-modal-sheet.show .modal-dialog { transform: none !important; }
    }
}

/* Login / Register modal: spinner while the form loads in the iframe (auth-modal.js toggles .is-loading) */
.mc-auth-modal .mc-auth-loader {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-body-bg, #fff);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.mc-auth-modal.is-loading .mc-auth-loader { opacity: 1; }

/* ── "Show nearby area" (assets/js/area-nearby.js) ─────────────────────────────
   Appears once a Sub Area is selected: homepage search (end of the Age group row),
   and under the area search of the Explore / Education & Care Area dropdowns.
   Ticked: the label gives way to the distance dropdown; the box stays on its left. */
.mc-nearby {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    min-height: var(--control-s);
    font: 400 14px/18px var(--font-sans);
    color: var(--text-default);
}
.mc-nearby[hidden] { display: none; }
.mc-nearby-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
}
.mc-nearby-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--action);
    cursor: pointer;
}
.mc-nearby-km {
    display: none;
    height: var(--control-s);
    padding: 0 28px 0 12px;
    border: 1px solid var(--border-field);
    border-radius: var(--radius-max);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23252c38' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: var(--text-strong);
    font: 600 14px/18px var(--font-sans);
    appearance: none;
    cursor: pointer;
}
.mc-nearby-km:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
@media (hover: hover) {
    .mc-nearby-check:hover { color: var(--action); }
    .mc-nearby-km:hover { border-color: var(--brand); }
}
.mc-nearby.is-on .mc-nearby-text { display: none; }
.mc-nearby.is-on .mc-nearby-km { display: inline-block; }

/* Homepage search: right end of the Age group row */
.hero-section .sb-age-row .mc-nearby { margin-left: auto; }
/* Tablet/mobile: own line under the age chips, left-aligned */
@media (max-width: 991.98px) {
    .hero-section .sb-age-row { flex-wrap: wrap; row-gap: var(--space-8); }
    .hero-section .sb-age-row .mc-nearby { width: 100%; margin-left: 0; }
}
/* Mobile stacks the row as a column; wrapping there sizes the chip strip to its
   content instead of the panel, pushing the chips off-screen. */
@media (max-width: 767.98px) {
    .hero-section .sb-age-row { flex-wrap: nowrap; }
}
/* Explore / Education & Care Area dropdowns: under the area search */
.efb-drop--area .mc-nearby { padding: 0 var(--space-12) var(--space-8); border-bottom: 1px solid var(--border-default); }
/* No divider between the search and "Show nearby area" right under it */
.efb-area-search-wrap:has(+ .mc-nearby:not([hidden])) { border-bottom: 0; }
/* Homepage Area list: Areas have no icon, Sub Areas carry a pin and sit indented
   under their Area; checkbox on the right. */
.sb-area-panel .sb-area-option { display: flex; align-items: center; }
.sb-area-option .sb-area-option-name { flex: 1; min-width: 0; }
.sb-area-option.is-sub { padding-left: 28px; }
/* Areas in grey so the Sub Areas under them stand out */
.sb-area-option.is-area { color: var(--text-subtle); }
@media (hover: hover) {
    .sb-area-panel .sb-area-option:hover,
    .sb-area-panel .sb-area-option:hover i { color: var(--action); }
}
.sb-area-option.is-selected,
.sb-area-option.is-selected i { color: var(--action); font-weight: 600; }
.sb-area-option .sb-area-cb {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0 0 0 var(--space-12);
    accent-color: var(--action);
    pointer-events: none; /* the whole row toggles */
}

/* Checkbox lists (homepage State panel, Explore / Education & Care filter dropdowns):
   checkbox on the right of each option, as the mobile sheets already do */
.efb-check-item,
.sb-state-check-label { justify-content: space-between; }
.efb-check-item input[type="checkbox"],
.sb-state-check-label input[type="checkbox"] { order: 2; }
/* Homepage search sheet, area mode: picked rows are bold with a tick */
.sb-sheet-row.is-selected .sb-sheet-row-name { font-weight: 700; }
/* Same look as the desktop list: Areas grey, Sub Areas indented, checkbox on the right */
.sb-sheet-row.is-area .sb-sheet-row-name { color: var(--text-subtle); }
.sb-sheet-row.is-sub { padding-left: 40px; }
.sb-sheet-row.is-sub .sb-sheet-row-name { color: var(--text-strong); }
.sb-sheet-row.is-selected .sb-sheet-row-name { color: var(--action); }
.sb-sheet-row-cb {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--action);
    pointer-events: none; /* the whole row toggles */
}
/* Explore / Education & Care Area dropdowns: Areas grey, Sub Areas indented under their Area */
.efb-area-list .efb-check-item.is-sub { padding-left: 32px; }
.efb-area-list .efb-check-item.is-area { color: var(--text-subtle); }
@media (hover: hover) {
    .efb-area-list .efb-check-item.is-area:hover { color: var(--primary-blue); }
}
/* Area lists: "+N more" / "Show less" under an Area's first Sub Area, indented like the Sub Areas */
.sb-area-more,
.efb-area-more {
    display: block;
    width: 100%;
    padding: 4px 14px 6px 28px;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--action);
    cursor: pointer;
}
.efb-area-more { padding-left: 32px; }
#sbSheetResults .sb-area-more { padding: var(--space-8) var(--space-16) var(--space-12) 40px; font-size: 14px; }
@media (hover: hover) {
    .sb-area-more:hover,
    .efb-area-more:hover { text-decoration: underline; }
}