/* ============================================================
   MX DARK — dark-mode override layer, loads LAST.
   Keys everything off html[data-theme="dark"] and only inverts
   surfaces/ink/lines. Brand-black sections (marquee, trust strip,
   .mx2-dark sections, appband) stay black in both modes; photos
   and scrims stay untouched.
   mx-redesign.css now themes via vars, so this layer only holds
   what vars alone cannot do (scoped flips, embedded assets,
   bootstrap internals).
   ============================================================ */

html[data-theme="dark"] body,
html[data-theme="dark"] body.theme {
    background: var(--mx-bg);
    color: var(--mx-ink);
}

/* ---- bootstrap surfaces riders see most ---- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background: var(--mx-surface-2);
    border-color: var(--mx-border);
    color: var(--mx-ink);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--mx-ink-4); }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background: var(--mx-surface-2);
    border-color: var(--mx-ink);
    color: var(--mx-ink);
    box-shadow: none;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button {
    background: var(--mx-surface);
    color: var(--mx-ink);
    border-color: var(--mx-border);
}
html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background: var(--mx-surface-2);
    color: var(--mx-ink);
}
html[data-theme="dark"] .dropdown-menu {
    background: var(--mx-surface);
    border-color: var(--mx-border);
}
html[data-theme="dark"] .dropdown-item { color: var(--mx-ink-2); }
html[data-theme="dark"] .dropdown-item:hover { background: var(--mx-surface-2); color: var(--mx-ink); }
html[data-theme="dark"] .table { color: var(--mx-ink-2); --bs-table-bg: transparent; }
html[data-theme="dark"] .table thead th { color: var(--mx-ink-3); }
html[data-theme="dark"] a:not(.mx2-btn):not(.mx-btn):not(.btn):not(.mxr-btn):not(.ticket-btn) { color: var(--mx-ink); }
html[data-theme="dark"] .btn-outline-dark,
html[data-theme="dark"] .btn-light { background: transparent; border-color: var(--mx-border); color: var(--mx-ink); }

/* bootstrap pagination (blogs index, lists) */
html[data-theme="dark"] .pagination {
    --bs-pagination-bg: var(--mx-surface);
    --bs-pagination-color: var(--mx-ink-2);
    --bs-pagination-border-color: var(--mx-border);
    --bs-pagination-hover-bg: var(--mx-surface-2);
    --bs-pagination-hover-color: var(--mx-ink);
    --bs-pagination-hover-border-color: var(--mx-border-2);
    --bs-pagination-focus-bg: var(--mx-surface-2);
    --bs-pagination-focus-color: var(--mx-ink);
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-bg: var(--mx-accent);
    --bs-pagination-active-color: var(--mx-on-accent);
    --bs-pagination-active-border-color: var(--mx-accent);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: var(--mx-ink-4);
    --bs-pagination-disabled-border-color: var(--mx-border);
}

/* ---- mx2 landing: what vars cannot reach ----
   (mx-redesign.css themes everything else via --mx-* vars) */
html[data-theme="dark"] .mx2-section--gray { background: #111111; }
/* process map tile: dashed route + dot grid flip to white ink */
html[data-theme="dark"] .mx2-mock--map::before { border-color: rgba(255, 255, 255, .34); }
html[data-theme="dark"] .mx2-mock--map { background: var(--mx-surface-2); }
html[data-theme="dark"] .mx2-mock--map .mx2-mock__path { background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.09) 1px, transparent 1.4px) 0 0 / 20px 20px; }

/* ---- buttons in dark mode: guaranteed high contrast and pill rounded ---- */
html[data-theme="dark"] .mx2-btn--primary,
html[data-theme="dark"] a.mx2-btn--primary,
html[data-theme="dark"] button.mx2-btn--primary,
html[data-theme="dark"] .mx-btn--primary,
html[data-theme="dark"] a.mx-btn--primary,
html[data-theme="dark"] button.mx-btn--primary {
    background: var(--mx-accent) !important;
    background-color: var(--mx-accent) !important;
    color: var(--mx-on-accent) !important;
    border-color: transparent !important;
}
html[data-theme="dark"] .mx2-btn--primary:hover,
html[data-theme="dark"] a.mx2-btn--primary:hover,
html[data-theme="dark"] .mx2-btn--primary:focus,
html[data-theme="dark"] a.mx2-btn--primary:focus,
html[data-theme="dark"] .mx-btn--primary:hover,
html[data-theme="dark"] a.mx-btn--primary:hover {
    background: var(--mx-accent-hover) !important;
    background-color: var(--mx-accent-hover) !important;
    color: var(--mx-on-accent) !important;
}

html[data-theme="dark"] .mx2-btn--outline,
html[data-theme="dark"] a.mx2-btn--outline,
html[data-theme="dark"] button.mx2-btn--outline {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--mx-ink) !important;
    border: 1.5px solid var(--mx-ink) !important;
}
html[data-theme="dark"] .mx2-btn--outline:hover,
html[data-theme="dark"] a.mx2-btn--outline:hover,
html[data-theme="dark"] .mx2-btn--outline:focus,
html[data-theme="dark"] a.mx2-btn--outline:focus {
    background: var(--mx-accent) !important;
    background-color: var(--mx-accent) !important;
    color: var(--mx-on-accent) !important;
    border-color: var(--mx-accent) !important;
}

html[data-theme="dark"] .mx2-btn--invert,
html[data-theme="dark"] a.mx2-btn--invert,
html[data-theme="dark"] button.mx2-btn--invert {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0A0A0A !important;
    border-color: transparent !important;
}
html[data-theme="dark"] .mx2-btn--invert:hover,
html[data-theme="dark"] a.mx2-btn--invert:hover,
html[data-theme="dark"] .mx2-btn--invert:focus,
html[data-theme="dark"] a.mx2-btn--invert:focus {
    background: #E2E2E2 !important;
    background-color: #E2E2E2 !important;
    color: #0A0A0A !important;
}

/* login split: form column inverts, visual column already dark */
html[data-theme="dark"] .mx2-loginsplit .mx-cabauth { background: var(--mx-bg); }
html[data-theme="dark"] .mx2-loginsplit .mx-cabauth__title { color: var(--mx-ink); }
html[data-theme="dark"] .mx2-loginsplit .mx-cabauth__sub { color: var(--mx-ink-2); }
html[data-theme="dark"] .mx2-loginsplit__legal { color: var(--mx-ink-3); }
html[data-theme="dark"] .mx-cabauth__inputrow { background: var(--mx-surface); border-color: var(--mx-border); }

/* scrollbars */
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--mx-border-2); border-radius: 99px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--mx-bg); }

/* language dropdown (header-animations.css pins light values) */
html[data-theme="dark"] header .language-dropdown .dropdown-menu {
    background: var(--mx-surface) !important;
    border-color: var(--mx-border) !important;
    box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .8);
}
html[data-theme="dark"] header .language-dropdown .dropdown-item { color: var(--mx-ink-2); }
html[data-theme="dark"] header .language-dropdown .dropdown-item:hover,
html[data-theme="dark"] header .language-dropdown .dropdown-item.active {
    background: var(--mx-surface-2) !important;
    color: var(--mx-ink) !important;
}

/* ============================================================
   HEADER & LOGO IN DARK MODE
   ============================================================ */
html[data-theme="dark"] header,
body.dark header {
    background: #0A0A0A !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* Logo toggling */
html[data-theme="dark"] .logo-box .mx-logo-light,
body.dark .logo-box .mx-logo-light {
    display: none !important;
}
html[data-theme="dark"] .logo-box .mx-logo-dark,
body.dark .logo-box .mx-logo-dark {
    display: block !important;
}

/* Fallback: if only a single logo image is present without class, invert it */
html[data-theme="dark"] header .logo-box img:only-child,
body.dark header .logo-box img:only-child {
    filter: brightness(0) invert(1) !important;
}

/* Nav links in dark mode */
html[data-theme="dark"] header .navbar-nav .nav-link,
body.dark header .navbar-nav .nav-link,
html[data-theme="dark"] header .top-header .navbar-nav .nav-item .nav-link,
body.dark header .top-header .navbar-nav .nav-item .nav-link {
    color: #A6A6A6 !important;
}

html[data-theme="dark"] header .navbar-nav .nav-link:hover,
body.dark header .navbar-nav .nav-link:hover,
html[data-theme="dark"] header .navbar-nav .nav-link:focus,
body.dark header .navbar-nav .nav-link:focus,
html[data-theme="dark"] header .navbar-nav .nav-link:focus-visible,
body.dark header .navbar-nav .nav-link:focus-visible,
html[data-theme="dark"] header .navbar-nav .nav-link.active,
body.dark header .navbar-nav .nav-link.active,
html[data-theme="dark"] header .top-header .navbar-nav .nav-item .nav-link.active,
body.dark header .top-header .navbar-nav .nav-item .nav-link.active,
html[data-theme="dark"] header .top-header .navbar-nav .nav-item.active .nav-link,
body.dark header .top-header .navbar-nav .nav-item.active .nav-link {
    color: #ffffff !important;
}

/* Animated active underline in dark mode */
html[data-theme="dark"] header .navbar-nav .nav-link::after,
body.dark header .navbar-nav .nav-link::after,
html[data-theme="dark"] header .top-header .navbar-nav .nav-item .nav-link::after,
body.dark header .top-header .navbar-nav .nav-item .nav-link::after {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Language button & dropdown in dark mode */
html[data-theme="dark"] header .language-btn,
body.dark header .language-btn {
    background: var(--mx-surface, #161616) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] header .language-btn span,
body.dark header .language-btn span {
    color: #ffffff !important;
}
html[data-theme="dark"] header .language-btn:hover,
body.dark header .language-btn:hover {
    border-color: #ffffff !important;
}

/* Dark mode toggle button */
html[data-theme="dark"] header .dark-light-mode,
body.dark header .dark-light-mode {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}
html[data-theme="dark"] header .dark-light-mode i,
body.dark header .dark-light-mode i {
    color: #ffffff !important;
}
html[data-theme="dark"] header .dark-light-mode:hover,
body.dark header .dark-light-mode:hover {
    border-color: #ffffff !important;
}

/* FOR BUSINESS button in dark mode */
html[data-theme="dark"] header .header-right .btn.ticket-btn.mx-ghost-btn,
body.dark header .header-right .btn.ticket-btn.mx-ghost-btn,
html[data-theme="dark"] header .ticket-btn:not(.mx-cta),
body.dark header .ticket-btn:not(.mx-cta) {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 9999px !important;
    color: #ffffff !important;
}
html[data-theme="dark"] header .header-right .btn.ticket-btn.mx-ghost-btn span,
body.dark header .header-right .btn.ticket-btn.mx-ghost-btn span,
html[data-theme="dark"] header .ticket-btn:not(.mx-cta) span,
body.dark header .ticket-btn:not(.mx-cta) span {
    color: #ffffff !important;
}
html[data-theme="dark"] header .header-right .btn.ticket-btn.mx-ghost-btn:hover,
body.dark header .header-right .btn.ticket-btn.mx-ghost-btn:hover,
html[data-theme="dark"] header .ticket-btn:not(.mx-cta):hover,
body.dark header .ticket-btn:not(.mx-cta):hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #0A0A0A !important;
}
html[data-theme="dark"] header .header-right .btn.ticket-btn.mx-ghost-btn:hover span,
body.dark header .header-right .btn.ticket-btn.mx-ghost-btn:hover span,
html[data-theme="dark"] header .ticket-btn:not(.mx-cta):hover span,
body.dark header .ticket-btn:not(.mx-cta):hover span {
    color: #0A0A0A !important;
}

/* BOOK NOW CTA button in dark mode */
html[data-theme="dark"] header .header-right .btn.ticket-btn.mx-cta,
body.dark header .header-right .btn.ticket-btn.mx-cta {
    background: #ffffff !important;
    border-color: #ffffff !important;
    border-radius: 9999px !important;
    color: #0A0A0A !important;
}
html[data-theme="dark"] header .header-right .btn.ticket-btn.mx-cta span,
body.dark header .header-right .btn.ticket-btn.mx-cta span {
    color: #0A0A0A !important;
}
html[data-theme="dark"] header .header-right .btn.ticket-btn.mx-cta:hover,
body.dark header .header-right .btn.ticket-btn.mx-cta:hover {
    background: #E2E2E2 !important;
    border-color: #E2E2E2 !important;
    color: #0A0A0A !important;
}

/* Mobile menu drawer in dark mode */
html[data-theme="dark"] header .top-header .header-middle,
body.dark header .top-header .header-middle {
    background: var(--mx-surface, #161616) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}
html[data-theme="dark"] header .top-header .header-middle .menu-title,
body.dark header .top-header .header-middle .menu-title {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}
html[data-theme="dark"] header .top-header .header-middle .menu-title h3,
body.dark header .top-header .header-middle .menu-title h3,
html[data-theme="dark"] header .close-menu,
body.dark header .close-menu {
    color: #ffffff !important;
}
html[data-theme="dark"] header .close-menu:hover,
body.dark header .close-menu:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] header .navbar-toggler,
body.dark header .navbar-toggler,
html[data-theme="dark"] header .navbar-toggler i,
body.dark header .navbar-toggler i {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}