/* ============================================================
   MODERN UI — premium chauffeur design system
   Loaded last: overrides legacy template styles (shared/global)
   Palette: ink navy + warm gold on warm paper
   Type: Fraunces (display) / Manrope (body)
   ============================================================ */

:root {
    --mx-ink: #0b1320;
    --mx-ink-2: #131f33;
    --mx-ink-3: #1b2a42;
    --mx-paper: #f6f3ec;
    --mx-card: #ffffff;
    --mx-gold: #c2922d;
    --mx-gold-2: #e0b452;
    --mx-gold-soft: rgba(194, 146, 45, 0.12);
    --mx-cta: var(--bg-seconday);   /* brand gold — same as the search-map buttons */
    --mx-cta-hover: var(--bg-third);
    --mx-cta-shadow: rgba(214, 163, 10, 0.32);
    --mx-muted: #5c6573;
    --mx-line: rgba(11, 19, 32, 0.1);
    --mx-on-ink-muted: rgba(246, 243, 236, 0.66);
    --mx-radius: 18px;
    --mx-radius-sm: 12px;
    --mx-shadow: 0 18px 45px -18px rgba(11, 19, 32, 0.25);
    --mx-shadow-sm: 0 8px 24px -12px rgba(11, 19, 32, 0.2);
    --mx-font-display: 'Fraunces', Georgia, serif;
    --mx-font-body: 'Manrope', 'Segoe UI', sans-serif;
    --mx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--mx-font-body) !important;
    font-size: 16px;
    line-height: 1.65;
    color: var(--mx-ink);
    background: var(--mx-paper);
    -webkit-font-smoothing: antialiased;
    /* global.css uses overflow-x: hidden, which turns body into a clip
       container and breaks position: sticky on the header. 'clip' blocks
       horizontal overflow without creating a scroll container. */
    overflow-x: clip;
    /* shared.css sets body { height: 100% }, capping body at ~1 viewport.
       Sticky children only stick within their parent's bounds, so the
       header stopped following after the first screen. */
    height: auto;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mx-font-display);
    color: var(--mx-ink);
    line-height: 1.15;
    font-weight: 600;
}

p {
    font-family: var(--mx-font-body);
    color: var(--mx-muted);
    font-size: 16px;
    line-height: 1.7;
}

a {
    color: var(--mx-ink);
    transition: color 0.25s var(--mx-ease);
}

/* global.css sets a:-webkit-any-link to #e9e6e6, which outranks
   single-class selectors (0,1,1 vs 0,1,0) — neutralize it */
a:-webkit-any-link {
    color: inherit;
}

a:any-link {
    color: inherit;
}

a:hover,
a:focus {
    color: var(--mx-gold);
    text-decoration: none;
}

::selection {
    background: var(--mx-gold);
    color: #fff;
}

img {
    max-width: 100%;
}

/* ---------- Buttons (covers legacy .ma-btn / .ma-theme-btn) ---------- */

.mx-btn,
.ma-btn,
.ma-theme-btn,
button.ma-theme-btn,
a.ma-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 30px;
    font-family: var(--mx-font-body);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--mx-ink) !important;
    background: var(--mx-cta);
    border: none;
    border-radius: 8px;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 8px 18px -9px var(--mx-cta-shadow);
    transition: transform 0.25s var(--mx-ease), box-shadow 0.25s var(--mx-ease), background 0.25s var(--mx-ease), filter 0.25s;
}

.mx-btn::before,
.mx-btn::after,
.ma-btn::before,
.ma-btn::after,
.ma-theme-btn::before,
.ma-theme-btn::after,
button.ma-theme-btn::before,
button.ma-theme-btn::after,
a.ma-btn::before,
a.ma-btn::after {
    display: none !important;
    content: none !important;
}

.mx-btn:hover,
.ma-btn:hover,
.ma-theme-btn:hover,
button.ma-theme-btn:hover,
a.ma-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    background: var(--mx-cta-hover);
    box-shadow: 0 12px 24px -10px var(--mx-cta-shadow);
    color: var(--mx-ink) !important;
}

.mx-btn--ghost {
    background: transparent;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: none;
}

.mx-btn--ghost:hover {
    border-color: var(--mx-gold-2);
    color: var(--mx-gold-2) !important;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
}

.mx-btn--dark {
    background: var(--mx-ink);
    color: #fff !important;
    box-shadow: 0 12px 26px -12px rgba(11, 19, 32, 0.6);
}

.mx-btn--dark:hover {
    background: var(--mx-ink-2);
    color: var(--mx-gold-2) !important;
    box-shadow: 0 16px 30px -12px rgba(11, 19, 32, 0.65);
}

/* ---------- Topbar ---------- */

.mx-topbar {
    background: var(--mx-ink);
    color: var(--mx-on-ink-muted);
    font-size: 13px;
    padding: 8px 0;
}

.mx-topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.mx-topbar a {
    color: var(--mx-on-ink-muted);
    font-weight: 600;
}

.mx-topbar a:hover {
    color: var(--mx-gold-2);
}

.mx-topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.mx-topbar__item i {
    color: var(--mx-gold-2);
}

.mx-topbar__left {
    display: flex;
    align-items: center;
    gap: 22px;
}

/* account dropdown (no JS needed) */
.mx-account {
    position: relative;
}

.mx-account summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--mx-on-ink-muted);
    font-weight: 600;
}

.mx-account summary::-webkit-details-marker {
    display: none;
}

.mx-account summary i {
    color: var(--mx-gold-2);
}

.mx-account[open] summary {
    color: var(--mx-gold-2);
}

.mx-account__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 190px;
    background: var(--mx-card);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius-sm);
    box-shadow: var(--mx-shadow);
    padding: 8px;
    z-index: 1200;
}

.mx-account__menu a {
    display: block;
    padding: 9px 14px;
    border-radius: 8px;
    color: var(--mx-ink);
    font-size: 14px;
    font-weight: 600;
}

.mx-account__menu a:hover {
    background: var(--mx-gold-soft);
    color: var(--mx-gold);
}

/* ---------- Header ---------- */

.mx-header {
    position: sticky;
    top: 0;
    z-index: 1100;
    background: rgba(246, 243, 236, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--mx-line);
    transition: box-shadow 0.3s var(--mx-ease);
}

.mx-header.is-scrolled {
    box-shadow: 0 10px 30px -18px rgba(11, 19, 32, 0.35);
}

.mx-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 78px;
}

.mx-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.mx-logo img {
    max-height: 52px;
    width: auto;
}

.mx-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mx-nav li {
    list-style: none;
}

.mx-nav a {
    display: inline-block;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: capitalize;
    color: var(--mx-ink);
    border-radius: 999px;
    position: relative;
}

.mx-nav a:hover {
    color: var(--mx-gold);
}

.mx-nav li.active a {
    color: var(--mx-gold);
}

.mx-nav li.active a::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--mx-gold);
}

.mx-header__cta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* burger */
.mx-burger {
    display: none;
    width: 46px;
    height: 46px;
    border: 1px solid var(--mx-line);
    background: var(--mx-card);
    border-radius: 12px;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.mx-burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--mx-ink);
    border-radius: 2px;
    transition: transform 0.3s var(--mx-ease), opacity 0.2s;
}

body.mx-nav-open .mx-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

body.mx-nav-open .mx-burger span:nth-child(2) {
    opacity: 0;
}

body.mx-nav-open .mx-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* mobile drawer */
.mx-drawer {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: var(--mx-ink);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 90px 28px 40px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--mx-ease), visibility 0.35s;
}

body.mx-nav-open .mx-drawer {
    opacity: 1;
    visibility: visible;
}

body.mx-nav-open {
    overflow: hidden;
}

.mx-drawer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mx-drawer li {
    list-style: none;
    transform: translateY(14px);
    opacity: 0;
    transition: transform 0.45s var(--mx-ease), opacity 0.45s var(--mx-ease);
}

body.mx-nav-open .mx-drawer li {
    transform: translateY(0);
    opacity: 1;
}

body.mx-nav-open .mx-drawer li:nth-child(2) { transition-delay: 0.06s; }
body.mx-nav-open .mx-drawer li:nth-child(3) { transition-delay: 0.12s; }
body.mx-nav-open .mx-drawer li:nth-child(4) { transition-delay: 0.18s; }
body.mx-nav-open .mx-drawer li:nth-child(5) { transition-delay: 0.24s; }

.mx-drawer a {
    display: block;
    padding: 14px 0;
    font-family: var(--mx-font-display);
    font-size: 32px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mx-drawer a:hover {
    color: var(--mx-gold-2);
}

.mx-drawer .mx-btn {
    margin-top: 28px;
}

@media (max-width: 991px) {
    .mx-nav,
    .mx-header__cta .mx-btn {
        display: none;
    }

    .mx-burger {
        display: flex;
    }
}

/* ---------- Section primitives ---------- */

.mx-section {
    padding: 90px 0;
}

.mx-section--tight {
    padding: 60px 0;
}

.mx-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mx-gold);
    margin-bottom: 14px;
}

.mx-kicker::before {
    content: '';
    width: 34px;
    height: 2px;
    background: var(--mx-gold);
    border-radius: 2px;
}

.mx-kicker--center::after {
    content: '';
    width: 34px;
    height: 2px;
    background: var(--mx-gold);
    border-radius: 2px;
}

.mx-title {
    font-size: clamp(28px, 4vw, 42px);
    margin-bottom: 16px;
}

.mx-title em {
    font-style: italic;
    color: var(--mx-gold);
}

/* legacy headings used by inner pages */
.site-heading h4,
.service-heading h4,
.services-area h4 {
    font-family: var(--mx-font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mx-gold);
}

.site-heading h2,
.service-heading h2,
.services-area h2 {
    font-family: var(--mx-font-display);
    font-size: clamp(26px, 3.6vw, 38px);
    color: var(--mx-ink);
    text-transform: none;
}

.site-heading h2:after,
.service-heading h2:after {
    display: none;
}

/* ---------- Hero ---------- */

.mx-hero {
    position: relative;
    background-color: #0b1320;
    background-image: url('/assets/images/cars/slider-1.jpg');
    background-size: cover;
    background-position: center 65%;
    color: #fff;
    overflow: hidden;
}

/* readability scrim over the photo */
.mx-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg,
        rgba(11, 19, 32, 0.92) 0%,
        rgba(11, 19, 32, 0.72) 45%,
        rgba(11, 19, 32, 0.3) 100%);
    pointer-events: none;
}

.mx-hero__layout {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 56px;
    padding: 84px 0 110px;
}

.mx-hero__inner {
    max-width: 600px;
}

.mx-hero__brand {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mx-gold-2);
    margin-bottom: 18px;
}

.mx-hero h1 {
    font-size: clamp(34px, 4.6vw, 52px);
    color: #fff;
    margin-bottom: 20px;
    font-weight: 600;
}

.mx-hero__lead {
    font-size: 17px;
    color: rgba(246, 243, 236, 0.82);
    max-width: 500px;
    margin-bottom: 32px;
}

.mx-hero__phone {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #fff;
}

.mx-hero__phone i {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: var(--mx-gold-2);
    font-size: 17px;
}

.mx-hero__phone span {
    display: flex;
    flex-direction: column;
    font-family: var(--mx-font-display);
    font-size: 21px;
    line-height: 1.2;
}

.mx-hero__phone small {
    font-family: var(--mx-font-body);
    font-size: 12px;
    font-weight: 600;
    color: rgba(246, 243, 236, 0.65);
}

.mx-hero__phone:hover {
    color: var(--mx-gold-2);
}

/* booking card */
.mx-hero__card {
    flex-shrink: 0;
    width: 400px;
    max-width: 100%;
    background: var(--mx-card);
    border-radius: var(--mx-radius);
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.55);
    padding: 30px 30px 24px;
    color: var(--mx-ink);
}

.mx-hero__card h2 {
    font-size: 23px;
    margin-bottom: 18px;
}

.mx-hero__card label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mx-muted);
    margin-bottom: 8px;
}

.mx-hero__card select {
    width: 100%;
    padding: 13px 14px;
    margin-bottom: 16px;
    font-family: var(--mx-font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--mx-ink);
    background: var(--mx-paper);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius-sm);
}

.mx-hero__card select:focus {
    outline: none;
    border-color: var(--mx-gold);
    box-shadow: 0 0 0 4px rgba(194, 146, 45, 0.14);
}

.mx-hero__card-btn {
    width: 100%;
}

.mx-hero__card-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.mx-hero__card-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--mx-ink-3);
    border-bottom: 1px dashed var(--mx-line);
}

.mx-hero__card-list li:last-child {
    border-bottom: none;
}

.mx-hero__card-list i {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mx-gold-soft);
    color: var(--mx-gold);
    border-radius: 10px;
    font-size: 14px;
}

.mx-hero__card-alt {
    margin: 14px 0 0;
    font-size: 13px;
    text-align: center;
    color: var(--mx-muted);
}

.mx-hero__card-alt a {
    font-weight: 800;
    color: var(--mx-gold);
}

.mx-hero__card-note {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--mx-line);
    font-size: 12px;
    text-align: center;
    color: var(--mx-muted);
}

.mx-hero__card-note i {
    color: var(--mx-gold);
    margin-right: 4px;
}

@media (max-width: 991px) {
    .mx-hero__layout {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
        padding: 60px 0 100px;
    }

    .mx-hero__card {
        width: 100%;
    }
}

/* staggered load animation */
@keyframes mxRise {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mx-hero [data-rise] {
    animation: mxRise 0.8s var(--mx-ease) both;
}

.mx-hero [data-rise='2'] { animation-delay: 0.12s; }
.mx-hero [data-rise='3'] { animation-delay: 0.24s; }
.mx-hero [data-rise='4'] { animation-delay: 0.36s; }

/* trust strip overlapping hero bottom */
.mx-trust {
    position: relative;
    z-index: 5;
    margin-top: -58px;
}

.mx-trust__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--mx-card);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    box-shadow: var(--mx-shadow);
    overflow: hidden;
}

.mx-trust__item {
    padding: 26px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-left: 1px solid var(--mx-line);
}

.mx-trust__item:first-child {
    border-left: none;
}

.mx-trust__item i {
    font-size: 22px;
    color: var(--mx-gold);
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mx-gold-soft);
    border-radius: 14px;
}

.mx-trust__item h4 {
    font-family: var(--mx-font-body);
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 2px;
}

.mx-trust__item p {
    font-size: 13px;
    margin: 0;
}

@media (max-width: 991px) {
    .mx-trust__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mx-trust__item:nth-child(3) {
        border-left: none;
    }

    .mx-trust__item:nth-child(n + 3) {
        border-top: 1px solid var(--mx-line);
    }
}

@media (max-width: 575px) {
    .mx-trust__grid {
        grid-template-columns: 1fr;
    }

    .mx-trust__item {
        border-left: none;
    }

    .mx-trust__item + .mx-trust__item {
        border-top: 1px solid var(--mx-line);
    }
}

/* ---------- How it works ---------- */

.mx-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    counter-reset: mxstep;
}

.mx-step {
    position: relative;
    background: var(--mx-card);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    padding: 36px 30px 32px;
    transition: transform 0.3s var(--mx-ease), box-shadow 0.3s var(--mx-ease);
}

.mx-step:hover {
    transform: translateY(-6px);
    box-shadow: var(--mx-shadow);
}

.mx-step::before {
    counter-increment: mxstep;
    content: '0' counter(mxstep);
    position: absolute;
    top: 22px;
    right: 26px;
    font-family: var(--mx-font-display);
    font-style: italic;
    font-size: 44px;
    line-height: 1;
    color: rgba(194, 146, 45, 0.22);
}

.mx-step i {
    font-size: 22px;
    color: var(--mx-gold);
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mx-gold-soft);
    border-radius: 16px;
    margin-bottom: 20px;
}

.mx-step h3 {
    font-size: 21px;
    margin-bottom: 10px;
}

.mx-step p {
    font-size: 15px;
    margin: 0;
}

@media (max-width: 991px) {
    .mx-steps {
        grid-template-columns: 1fr;
    }
}

/* ---------- Service cards (new + legacy override) ---------- */

.mx-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

@media (max-width: 991px) {
    .mx-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .mx-services-grid {
        grid-template-columns: 1fr;
    }
}

.mx-service-card,
.single-service {
    position: relative;
    background: var(--mx-card);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    padding: 34px 30px;
    margin-top: 0;
    box-shadow: none;
    transition: transform 0.3s var(--mx-ease), box-shadow 0.3s var(--mx-ease), border-color 0.3s;
    overflow: hidden;
}

.mx-service-card:hover,
.single-service:hover {
    transform: translateY(-6px);
    box-shadow: var(--mx-shadow);
    border-color: rgba(194, 146, 45, 0.4);
}

.mx-service-card::after,
.single-service::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--mx-gold-2), var(--mx-gold));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--mx-ease);
}

.mx-service-card:hover::after,
.single-service:hover::after {
    transform: scaleX(1);
}

.single-service .service-number,
.mx-service-card__num {
    position: absolute;
    top: 18px;
    right: 24px;
    font-family: var(--mx-font-display);
    font-style: italic;
    font-size: 40px;
    line-height: 1;
    color: rgba(194, 146, 45, 0.22);
    background: none;
    border: none;
    width: auto;
    height: auto;
}

.single-service .service-number span {
    font-size: inherit;
    color: inherit;
}

.single-service .service-icon,
.mx-service-card__icon {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mx-gold-soft);
    border-radius: 16px;
    margin-bottom: 20px;
    float: none;
}

.single-service .service-icon img,
.mx-service-card__icon img {
    max-width: 34px;
    max-height: 34px;
    object-fit: contain;
}

.single-service .service-icon i,
.mx-service-card__icon i {
    font-size: 24px;
    color: var(--mx-gold);
}

.single-service .service-text,
.mx-service-card__text {
    overflow: visible;
    padding: 0;
}

.single-service .service-text h3,
.mx-service-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--mx-ink);
    text-transform: none;
}

.single-service .service-text h3:hover,
.mx-service-card h3 a:hover {
    color: var(--mx-gold);
}

.single-service .service-text p,
.mx-service-card p {
    font-size: 15px;
    color: var(--mx-muted);
    margin: 0;
}

a.mx-service-card__link,
.mx-service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mx-gold);
}

.mx-service-card__link i {
    transition: transform 0.25s var(--mx-ease);
}

.mx-service-card:hover .mx-service-card__link i {
    transform: translateX(5px);
}

/* ---------- About split ---------- */

.mx-about__media {
    position: relative;
}

.mx-about__media img {
    width: 100%;
    border-radius: var(--mx-radius);
    box-shadow: var(--mx-shadow);
    position: relative;
    z-index: 1;
}

.mx-about__media::before {
    content: '';
    position: absolute;
    inset: -22px auto auto -22px;
    width: 60%;
    height: 60%;
    border: 2px solid rgba(194, 146, 45, 0.45);
    border-radius: var(--mx-radius);
    z-index: 0;
}

.mx-about__media::after {
    content: '';
    position: absolute;
    right: -18px;
    bottom: -18px;
    width: 45%;
    height: 45%;
    background: var(--mx-gold-soft);
    border-radius: var(--mx-radius);
    z-index: 0;
}

.mx-about__body p {
    margin-bottom: 18px;
}

.mx-about__phone {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    padding: 16px 22px;
    background: var(--mx-card);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius-sm);
}

.mx-about__phone i {
    font-size: 20px;
    color: var(--mx-gold);
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mx-gold-soft);
    border-radius: 12px;
}

.mx-about__phone span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mx-muted);
}

.mx-about__phone a {
    font-family: var(--mx-font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--mx-ink);
}

/* ---------- Driver CTA band (replaces promo-area) ---------- */

.mx-band,
.promo-area {
    position: relative;
    background:
        radial-gradient(800px 300px at 90% 0%, rgba(224, 180, 82, 0.18), transparent 60%),
        linear-gradient(140deg, #0b1320, #16243a);
    border-radius: var(--mx-radius);
    overflow: hidden;
    padding: 0;
}

.mx-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    padding: 54px 56px;
}

.mx-band h3 {
    color: #fff;
    font-size: clamp(24px, 3vw, 34px);
    margin: 0;
    max-width: 560px;
}

.mx-band h3 em {
    font-style: italic;
    color: var(--mx-gold-2);
}

.mx-band p {
    color: var(--mx-on-ink-muted);
    margin: 10px 0 0;
}

/* legacy promo-area content fallback (about page keeps old markup) */
.promo-area {
    border-radius: 0;
    padding: 70px 0;
}

.promo-area .promo-box-left img {
    filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.35));
}

.promo-area .promo-box-left::before,
.promo-area .promo-box-left::after {
    display: none;
}

.promo-area .promo-box-right h3 {
    color: #fff;
    font-size: clamp(24px, 3vw, 34px);
}

/* ---------- Testimonials ---------- */

.mx-quotes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

@media (max-width: 991px) {
    .mx-quotes {
        grid-template-columns: 1fr;
    }
}

.mx-quote {
    position: relative;
    background: var(--mx-card);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    padding: 38px 32px 30px;
    transition: transform 0.3s var(--mx-ease), box-shadow 0.3s var(--mx-ease);
}

.mx-quote:hover {
    transform: translateY(-6px);
    box-shadow: var(--mx-shadow);
}

.mx-quote::before {
    content: '\201C';
    position: absolute;
    top: 6px;
    left: 24px;
    font-family: var(--mx-font-display);
    font-size: 84px;
    line-height: 1;
    color: rgba(194, 146, 45, 0.25);
}

.mx-quote__stars {
    color: var(--mx-gold);
    font-size: 13px;
    letter-spacing: 3px;
    margin-bottom: 16px;
}

.mx-quote p {
    font-size: 15px;
    font-style: italic;
    color: var(--mx-ink-3);
    margin-bottom: 20px;
}

.mx-quote footer {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    padding: 0;
}

.mx-quote__avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--mx-ink);
    color: var(--mx-gold-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mx-font-display);
    font-size: 17px;
}

.mx-quote h4 {
    font-family: var(--mx-font-body);
    font-size: 15px;
    font-weight: 800;
    margin: 0;
}

.mx-quote span {
    display: block;
    font-size: 13px;
    color: var(--mx-muted);
}

/* ---------- Checklist (why choose us) ---------- */

.mx-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mx-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px dashed var(--mx-line);
}

.mx-checklist li:last-child {
    border-bottom: none;
}

.mx-checklist i {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mx-gold-soft);
    color: var(--mx-gold);
    border-radius: 50%;
    font-size: 14px;
    margin-top: 2px;
}

.mx-checklist h4 {
    font-family: var(--mx-font-body);
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 3px;
}

.mx-checklist p {
    font-size: 14px;
    margin: 0;
}

/* ---------- Value cards (about page) ---------- */

.mx-values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

@media (max-width: 991px) {
    .mx-values {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .mx-values {
        grid-template-columns: 1fr;
    }
}

.mx-value {
    background: var(--mx-card);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    padding: 28px 24px;
    transition: transform 0.3s var(--mx-ease), box-shadow 0.3s var(--mx-ease);
}

.mx-value:hover {
    transform: translateY(-5px);
    box-shadow: var(--mx-shadow);
}

.mx-value i {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mx-gold-soft);
    color: var(--mx-gold);
    border-radius: 14px;
    font-size: 20px;
    margin-bottom: 16px;
}

.mx-value h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.mx-value p {
    font-size: 14px;
    margin: 0;
}

/* ---------- Destination chips ---------- */

.mx-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 860px;
    margin: 0 auto;
}

a.mx-chip,
.mx-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    background: var(--mx-card);
    border: 1px solid var(--mx-line);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: var(--mx-ink);
    transition: all 0.25s var(--mx-ease);
}

.mx-chip i {
    color: var(--mx-gold);
}

a.mx-chip:hover,
.mx-chip:hover {
    border-color: var(--mx-gold);
    background: var(--mx-gold-soft);
    color: var(--mx-ink);
    transform: translateY(-2px);
}

a.mx-chip--accent,
.mx-chip--accent {
    background: var(--mx-ink);
    border-color: var(--mx-ink);
    color: #fff;
}

.mx-chip--accent i {
    color: var(--mx-gold-2);
}

a.mx-chip--accent:hover,
.mx-chip--accent:hover {
    background: var(--mx-ink-3);
    border-color: var(--mx-ink-3);
    color: var(--mx-gold-2);
}

/* ---------- FAQ accordion ---------- */

.mx-faq {
    max-width: 760px;
    margin: 0 auto;
}

.mx-faq__item {
    background: var(--mx-card);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius-sm);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.25s;
}

.mx-faq__item[open] {
    border-color: rgba(194, 146, 45, 0.45);
}

.mx-faq__item summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    font-family: var(--mx-font-body);
    font-size: 16px;
    font-weight: 800;
    color: var(--mx-ink);
}

.mx-faq__item summary::-webkit-details-marker {
    display: none;
}

.mx-faq__item summary i {
    flex-shrink: 0;
    color: var(--mx-gold);
    transition: transform 0.3s var(--mx-ease);
}

.mx-faq__item[open] summary i {
    transform: rotate(180deg);
}

.mx-faq__item summary:hover {
    color: var(--mx-gold);
}

.mx-faq__item p {
    margin: 0;
    padding: 0 22px 20px;
    font-size: 15px;
    color: var(--mx-muted);
}

/* ---------- Final CTA ---------- */

.mx-cta {
    text-align: center;
    max-width: 660px;
    margin: 0 auto;
}

.mx-cta .mx-kicker {
    justify-content: center;
}

/* ---------- Scroll reveal ---------- */

[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s var(--mx-ease), transform 0.7s var(--mx-ease);
}

[data-reveal].mx-in {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .mx-hero [data-rise] {
        animation: none;
    }
}

/* ---------- Page hero (legacy breadcromb override) ---------- */

.ma-breadcromb-area {
    position: relative;
    background:
        radial-gradient(900px 320px at 80% -20%, rgba(194, 146, 45, 0.2), transparent 60%),
        linear-gradient(160deg, #0b1320, #131f33);
    padding: 72px 0 64px;
}

.ma-breadcromb-area:after {
    display: none;
}

.breadcromb-box {
    text-align: left;
}

.breadcromb-box h3 {
    font-family: var(--mx-font-display);
    font-size: clamp(30px, 4.4vw, 46px);
    color: #fff;
    text-transform: none;
    margin-bottom: 12px;
}

.breadcromb-box ul {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.breadcromb-box li {
    color: var(--mx-on-ink-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.breadcromb-box li a {
    color: var(--mx-gold-2);
}

.breadcromb-box li i {
    color: var(--mx-gold-2);
}

/* ---------- About page (legacy override) ---------- */

.about-page-left h4 {
    font-family: var(--mx-font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mx-gold);
}

.about-page-left h3 {
    font-family: var(--mx-font-display);
    font-size: clamp(26px, 3.4vw, 36px);
    color: var(--mx-ink);
    margin: 8px 0 18px;
    text-transform: none;
}

.about-page-right img {
    border-radius: var(--mx-radius);
    box-shadow: var(--mx-shadow);
}

.about-page-call {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding: 16px 22px;
    background: var(--mx-card);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius-sm);
}

.about-page-call .page-call-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mx-gold-soft);
    border-radius: 12px;
    color: var(--mx-gold);
    font-size: 18px;
    border: none;
    line-height: normal;
}

.about-page-call .call-info p {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.about-page-call .call-info h4,
.about-page-call .call-info h4 a {
    font-family: var(--mx-font-display);
    font-size: 20px;
    color: var(--mx-ink);
    margin: 0;
}

/* ---------- Contact page (legacy override) ---------- */

.contact-left h3,
.contact-right h3 {
    font-family: var(--mx-font-display);
    font-size: 26px;
    color: var(--mx-ink);
    text-transform: none;
    margin-bottom: 24px;
}

.single-contact-field input,
.single-contact-field textarea {
    width: 100%;
    padding: 14px 18px;
    margin-bottom: 18px;
    font-family: var(--mx-font-body);
    font-size: 15px;
    color: var(--mx-ink);
    background: var(--mx-card);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius-sm);
    transition: border-color 0.25s, box-shadow 0.25s;
}

.single-contact-field textarea {
    min-height: 150px;
    resize: vertical;
}

.single-contact-field input:focus,
.single-contact-field textarea:focus {
    outline: none;
    border-color: var(--mx-gold);
    box-shadow: 0 0 0 4px rgba(194, 146, 45, 0.14);
}

.contact-right .contact-details {
    background: var(--mx-card);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    padding: 30px;
}

.contact-details p i {
    color: var(--mx-gold);
    margin-right: 8px;
}

.single-contact-btn {
    margin-top: 18px;
}

.single-contact-btn h4 {
    font-family: var(--mx-font-body);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--mx-muted);
    margin-bottom: 4px;
}

.single-contact-btn a {
    display: inline-block;
    background: none;
    padding: 0;
    font-family: var(--mx-font-display);
    font-size: 19px;
    color: var(--mx-ink);
    border: none;
}

.single-contact-btn a:hover {
    color: var(--mx-gold);
    background: none;
}

.social-links-contact {
    margin-top: 24px;
}

.social-links-contact h4 {
    font-family: var(--mx-font-body);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--mx-muted);
    margin-bottom: 10px;
}

.social-links-contact ul {
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.social-links-contact ul li a {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mx-gold-soft);
    color: var(--mx-gold);
    border-radius: 12px;
    transition: background 0.25s, color 0.25s, transform 0.25s var(--mx-ease);
}

.social-links-contact ul li a:hover {
    background: var(--mx-ink);
    color: var(--mx-gold-2);
    transform: translateY(-3px);
}

/* ---------- Footer ---------- */

.mx-footer {
    background: var(--mx-ink);
    color: var(--mx-on-ink-muted);
    margin-top: 90px;
}

.mx-footer__top {
    padding: 70px 0 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mx-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr;
    gap: 48px;
}

@media (max-width: 991px) {
    .mx-footer__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

.mx-footer__logo img {
    max-height: 54px;
    margin-bottom: 20px;
}

.mx-footer p {
    color: var(--mx-on-ink-muted);
    font-size: 14px;
}

.mx-footer h3 {
    font-family: var(--mx-font-body);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 20px;
}

.mx-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mx-footer ul li {
    margin-bottom: 10px;
    font-size: 14px;
}

.mx-footer ul li a {
    color: var(--mx-on-ink-muted);
    font-size: 14px;
}

.mx-footer ul li a:hover {
    color: var(--mx-gold-2);
}

.mx-footer__contact li {
    display: flex;
    gap: 10px;
}

.mx-footer__contact i {
    color: var(--mx-gold-2);
    margin-top: 4px;
}

.mx-footer__social {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.mx-footer__social a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    color: var(--mx-on-ink-muted);
    transition: all 0.25s var(--mx-ease);
}

.mx-footer__social a:hover {
    background: var(--mx-gold);
    border-color: var(--mx-gold);
    color: var(--mx-ink);
    transform: translateY(-3px);
}

.mx-footer__bottom {
    padding: 22px 0;
}

.mx-footer__bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.mx-footer__bottom p {
    margin: 0;
    font-size: 13px;
}

.mx-footer__bottom a {
    color: var(--mx-gold-2);
    font-weight: 700;
}

/* ---------- GDPR popup (legacy ids, new look) ---------- */

.gdpr-consent-popup {
    position: fixed;
    left: 24px;
    right: auto;
    bottom: 24px;
    max-width: 420px;
    width: calc(100% - 48px);
    background: var(--mx-card);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    box-shadow: var(--mx-shadow);
    padding: 0;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.4s var(--mx-ease), transform 0.4s var(--mx-ease), visibility 0.4s;
}

.gdpr-consent-popup.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    display: block;
}

.gdpr-consent-content {
    padding: 26px;
}

.gdpr-consent-content h3 {
    font-family: var(--mx-font-display);
    font-size: 19px;
    color: var(--mx-ink);
    margin-bottom: 8px;
}

.gdpr-consent-content p {
    font-size: 13px;
    margin-bottom: 14px;
}

.gdpr-consent-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.gdpr-consent-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mx-ink-3);
    margin: 0;
}

.gdpr-consent-options input[type='checkbox'] {
    accent-color: var(--mx-gold);
}

.gdpr-consent-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.gdpr-btn {
    flex: 1;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.25s var(--mx-ease);
}

.gdpr-btn-primary {
    background: var(--mx-cta);
    color: var(--mx-ink);
}

.gdpr-btn-primary:hover {
    filter: brightness(1.04);
    background: var(--mx-cta-hover);
}

.gdpr-btn-secondary {
    background: transparent;
    border: 1px solid var(--mx-line);
    color: var(--mx-ink);
}

.gdpr-btn-secondary:hover {
    border-color: var(--mx-ink);
    background: transparent;
    color: var(--mx-ink);
}

.gdpr-links {
    margin-top: 12px;
}

a.gdpr-link,
.gdpr-link {
    font-size: 12px;
    color: var(--mx-muted);
    text-decoration: underline;
}

/* ---------- Back to top (main.js .btntoTop) ---------- */

.btntoTop {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 46px;
    height: 46px;
    background: var(--mx-ink);
    border-radius: 14px;
    cursor: pointer;
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s var(--mx-ease);
    box-shadow: var(--mx-shadow-sm);
}

.btntoTop::before {
    content: '\2191';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mx-gold-2);
    font-size: 18px;
    font-weight: 700;
}

.btntoTop.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.btntoTop:hover {
    background: var(--mx-gold);
}

.btntoTop:hover::before {
    color: var(--mx-ink);
}

/* ---------- Fixed route cards (landing) ---------- */

.mx-routes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

@media (max-width: 991px) {
    .mx-routes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .mx-routes-grid {
        grid-template-columns: 1fr;
    }
}

a.mx-route-card,
.mx-route-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    background: var(--mx-card);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    padding: 26px 26px 22px;
    color: var(--mx-ink);
    transition: transform 0.3s var(--mx-ease), box-shadow 0.3s var(--mx-ease), border-color 0.3s;
}

a.mx-route-card:hover,
.mx-route-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--mx-shadow);
    border-color: rgba(194, 146, 45, 0.45);
    color: var(--mx-ink);
}

.mx-route-card__stop {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
}

.mx-route-card__dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
}

.mx-route-card__dot--a {
    background: var(--mx-gold);
    box-shadow: 0 0 0 3px rgba(194, 146, 45, 0.22);
}

.mx-route-card__dot--b {
    background: var(--mx-ink);
    box-shadow: 0 0 0 3px rgba(11, 19, 32, 0.12);
}

.mx-route-card__divider {
    height: 16px;
    border-left: 2px dashed rgba(11, 19, 32, 0.18);
    margin: 3px 0 3px 4px;
}

.mx-route-card__meta {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 1px solid var(--mx-line);
    padding-top: 16px;
}

.mx-route-card__price {
    font-family: var(--mx-font-display);
    font-size: 24px;
    font-weight: 600;
}

.mx-route-card__price small {
    font-size: 13px;
    color: var(--mx-muted);
}

.mx-route-card__duration {
    font-size: 13px;
    color: var(--mx-muted);
}

.mx-route-card__go {
    margin-left: auto;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mx-gold);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.25s, transform 0.25s;
}

.mx-route-card:hover .mx-route-card__go {
    opacity: 1;
    transform: translateX(0);
}

/* ---------- Custom select (nice-select restyle) ---------- */

.nice-select {
    float: none;
    display: block;
    width: 100%;
    height: auto;
    padding: 13px 46px 13px 16px;
    line-height: 1.45;
    font-family: var(--mx-font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--mx-ink);
    background: var(--mx-paper);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius-sm);
    transition: border-color 0.25s var(--mx-ease), box-shadow 0.25s var(--mx-ease);
}

.nice-select .current {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nice-select:hover {
    border-color: rgba(194, 146, 45, 0.5);
}

.nice-select:active,
.nice-select:focus,
.nice-select.open {
    border-color: var(--mx-gold);
    box-shadow: 0 0 0 4px rgba(194, 146, 45, 0.14);
}

.nice-select:after {
    width: 7px;
    height: 7px;
    right: 18px;
    margin-top: -5px;
    border-bottom: 2px solid var(--mx-gold);
    border-right: 2px solid var(--mx-gold);
}

.nice-select .list {
    width: 100%;
    margin-top: 8px;
    padding: 6px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--mx-card);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius-sm);
    box-shadow: var(--mx-shadow);
    z-index: 1050;
}

.nice-select .option {
    min-height: 0;
    line-height: 1.45;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mx-ink-3);
    white-space: normal;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
    background-color: var(--mx-gold-soft);
    color: var(--mx-gold);
}

.nice-select .option.selected {
    font-weight: 800;
    color: var(--mx-ink);
}

.nice-select .option.disabled {
    color: var(--mx-muted);
    opacity: 0.6;
}

.mx-hero__card .nice-select {
    margin-bottom: 16px;
}

/* ---------- Booking mode switcher ---------- */

.mx-mode-switch {
    display: flex;
    gap: 10px;
    max-width: 640px;
    margin: 26px auto 6px;
    padding: 8px;
    background: var(--mx-card);
    border: 1px solid var(--mx-line);
    border-radius: 999px;
    box-shadow: var(--mx-shadow-sm);
}

.mx-mode-switch__tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 999px;
    color: var(--mx-muted);
    transition: all 0.25s var(--mx-ease);
}

.mx-mode-switch__tab i {
    font-size: 18px;
}

.mx-mode-switch__tab span {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: left;
}

.mx-mode-switch__tab strong {
    font-size: 14px;
    font-weight: 800;
    color: var(--mx-ink);
}

.mx-mode-switch__tab small {
    font-size: 12px;
    color: var(--mx-muted);
}

.mx-mode-switch__tab i {
    color: var(--mx-gold);
}

.mx-mode-switch__tab.is-active strong {
    color: #fff;
}

.mx-mode-switch__tab.is-active small {
    color: rgba(255, 255, 255, 0.7);
}

.mx-mode-switch__tab:hover {
    color: var(--mx-ink);
    background: var(--mx-gold-soft);
}

.mx-mode-switch__tab.is-active {
    background: var(--mx-ink);
    color: #fff;
}

.mx-mode-switch__tab.is-active i {
    color: var(--mx-gold-2);
}

@media (max-width: 575px) {
    .mx-mode-switch {
        flex-direction: column;
        border-radius: var(--mx-radius);
    }

    .mx-mode-switch__tab {
        border-radius: var(--mx-radius-sm);
    }
}

/* ---------- Booking stepper (legacy shared.css override) ---------- */

.stepper-wrapper {
    margin: 10px auto 28px;
    max-width: 720px;
}

.stepper-item::after {
    border-bottom: 2px solid var(--mx-line);
    top: 17px;
}

.stepper-item .step-counter {
    width: 36px;
    height: 36px;
    background: var(--mx-card);
    border: 2px solid var(--mx-line);
    color: var(--mx-muted);
    font-weight: 800;
    font-size: 14px;
    transition: all 0.3s var(--mx-ease);
}

.stepper-item .step-name {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mx-muted);
    text-align: center;
}

.stepper-item.active .step-counter {
    background-color: var(--mx-ink);
    border-color: var(--mx-ink);
    color: var(--mx-gold-2);
    box-shadow: 0 0 0 5px rgba(194, 146, 45, 0.18);
}

.stepper-item.active .step-name {
    color: var(--mx-ink);
}

.stepper-item.completed .step-counter {
    background-color: var(--mx-gold);
    border-color: var(--mx-gold);
    color: var(--mx-ink);
}

.stepper-item.completed::after,
.stepper-item.completed::before {
    border-bottom: 2px solid var(--mx-gold);
    top: 17px;
}

/* ---------- Service details (legacy override) ---------- */

.sidebar-widget {
    background: var(--mx-card);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    padding: 24px;
    margin-bottom: 26px;
    box-shadow: none;
}

.sidebar-widget h3 {
    font-family: var(--mx-font-display);
    font-size: 20px;
    color: var(--mx-ink);
    text-transform: none;
}

.service-menu li a {
    border-radius: var(--mx-radius-sm);
    font-weight: 600;
}

.service-menu li a:hover,
.service-menu li.active a {
    background: var(--mx-gold-soft);
    color: var(--mx-gold);
}

.service-details-image img {
    border-radius: var(--mx-radius);
}

/* ---------- Auth pages (legacy login.css override) ---------- */

.login-box {
    max-width: 480px;
    margin: 0 auto;
    background: var(--mx-card);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius);
    box-shadow: var(--mx-shadow-sm);
    padding: 44px 40px;
}

.login-page-heading {
    text-align: center;
    margin-bottom: 28px;
}

.login-page-heading i {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mx-gold-soft);
    color: var(--mx-gold);
    border-radius: 16px;
    font-size: 20px;
    margin-bottom: 14px;
    border: none;
    line-height: normal;
}

.login-page-heading h3 {
    font-family: var(--mx-font-display);
    font-size: 26px;
    color: var(--mx-ink);
    text-transform: none;
}

.account-form-group {
    position: relative;
    margin-bottom: 18px;
}

.account-form-group input {
    width: 100%;
    padding: 14px 18px 14px 46px;
    font-family: var(--mx-font-body);
    font-size: 15px;
    color: var(--mx-ink);
    background: var(--mx-paper);
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius-sm);
    transition: border-color 0.25s, box-shadow 0.25s;
}

.account-form-group input:focus {
    outline: none;
    border-color: var(--mx-gold);
    box-shadow: 0 0 0 4px rgba(194, 146, 45, 0.14);
    background: var(--mx-card);
}

.account-form-group i {
    position: absolute;
    left: 16px;
    top: 16px;
    color: var(--mx-gold);
    border: none;
    background: none;
    width: auto;
    height: auto;
    line-height: normal;
}

.remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.remember-row p {
    margin: 0;
    font-size: 14px;
}

.login-box button.ma-theme-btn,
.login-box .ma-theme-btn {
    display: inline-flex;
    width: 100%;
    margin: 10px 0 0;
    background: var(--mx-cta);
    border: none;
    border-radius: 8px;
    color: var(--mx-ink) !important;
}

.login-box button.ma-theme-btn:hover {
    background: var(--mx-cta-hover);
    filter: brightness(1.04);
}

.login-sign-up {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
}

.login-sign-up a {
    color: var(--mx-gold);
    font-weight: 700;
}

/* ---------- Misc polish ---------- */

.mx-section--ink {
    background:
        radial-gradient(800px 300px at 10% 0%, rgba(224, 180, 82, 0.1), transparent 60%),
        linear-gradient(160deg, #0b1320, #131f33);
}

.mx-section--ink .mx-title,
.mx-section--ink h2 {
    color: #fff;
}

.mx-section--ink p {
    color: var(--mx-on-ink-muted);
}

/* keep bootstrap alert/cards aligned with theme on inner pages */
.card {
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius-sm);
}

.text-danger {
    font-size: 13px;
}

/* ---------- SweetAlert (toasts + modals) ----------
   The sticky header is z-index 1100 and the account menu 1200, while
   SweetAlert defaults to 1060 — so notifications rendered behind the nav
   (appearing "under" it). Lift them above the chrome and offset top-anchored
   toasts so they clear the fixed header instead of tucking beneath it. */
.swal2-container {
    z-index: 1400 !important;
}

.swal2-container.swal2-top,
.swal2-container.swal2-top-start,
.swal2-container.swal2-top-end {
    padding-top: 120px !important;
}

.swal2-toast {
    box-shadow: var(--mx-shadow) !important;
    border-radius: var(--mx-radius-sm) !important;
}

/* Safety net: never show a nice-select widget that may have been generated
   from SweetAlert's hidden helper <select> inside a popup/toast. */
.swal2-container .nice-select,
.swal2-popup .nice-select {
    display: none !important;
}

@media (max-width: 768px) {
    .swal2-container.swal2-top,
    .swal2-container.swal2-top-start,
    .swal2-container.swal2-top-end {
        padding-top: 100px !important;
    }
}

/* ─── Sticky WhatsApp button ─── */
.mx-whatsapp {
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    box-shadow: 0 8px 24px -6px rgba(37, 211, 102, 0.6);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    animation: mx-wa-pulse 2.4s ease-out infinite;
}

.mx-whatsapp,
.mx-whatsapp:hover,
.mx-whatsapp:focus,
.mx-whatsapp .fa-whatsapp {
    color: #fff;
}

.mx-whatsapp:hover,
.mx-whatsapp:focus {
    text-decoration: none;
    transform: scale(1.08);
    box-shadow: 0 12px 30px -6px rgba(37, 211, 102, 0.75);
}

.mx-whatsapp__tip {
    position: absolute;
    left: calc(100% + 12px);
    white-space: nowrap;
    background: #0b1320;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.mx-whatsapp__tip::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #0b1320;
}

.mx-whatsapp:hover .mx-whatsapp__tip {
    opacity: 1;
    transform: translateX(0);
}

@keyframes mx-wa-pulse {
    0% { box-shadow: 0 8px 24px -6px rgba(37, 211, 102, 0.6), 0 0 0 0 rgba(37, 211, 102, 0.45); }
    70% { box-shadow: 0 8px 24px -6px rgba(37, 211, 102, 0.6), 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 8px 24px -6px rgba(37, 211, 102, 0.6), 0 0 0 0 rgba(37, 211, 102, 0); }
}

@media (max-width: 575.98px) {
    .mx-whatsapp {
        left: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
        font-size: 27px;
    }
    .mx-whatsapp__tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mx-whatsapp { animation: none; }
}