/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Outfit", sans-serif;
}

/* No browser focus ring, tap flash, or focus glow on interactive controls */
:where(button,
    input,
    select,
    textarea,
    a,
    summary,
    fieldset,
    [role="button"],
    [tabindex]:not([tabindex="-1"])) {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

:where(button,
    input,
    select,
    textarea,
    a,
    summary,
    fieldset,
    [role="button"],
    [tabindex]:not([tabindex="-1"]),
    .tab-btn,
    .calendar-nav-btn,
    .calendar-clear,
    .calendar-done-btn,
    .calendar-flex-chip,
    .calendar-tab,
    .time-picker-confirm-btn,
    .time-picker-item,
    .calendar-cell,
    .location-switch-btn,
    .booking-fs-back,
    .search-clear-btn,
    .search-search-btn,
    .mobile-menu-toggle,
    .input-group):focus,
:where(button,
    input,
    select,
    textarea,
    a,
    summary,
    fieldset,
    [role="button"],
    [tabindex]:not([tabindex="-1"]),
    .tab-btn,
    .calendar-nav-btn,
    .calendar-clear,
    .calendar-done-btn,
    .calendar-flex-chip,
    .calendar-tab,
    .time-picker-confirm-btn,
    .time-picker-item,
    .calendar-cell,
    .location-switch-btn,
    .booking-fs-back,
    .search-clear-btn,
    .search-search-btn,
    .mobile-menu-toggle,
    .input-group):focus-visible,
:where(button,
    input,
    select,
    textarea,
    a,
    summary,
    fieldset,
    [role="button"],
    [tabindex]:not([tabindex="-1"]),
    .tab-btn,
    .calendar-nav-btn,
    .calendar-clear,
    .calendar-done-btn,
    .calendar-flex-chip,
    .calendar-tab,
    .time-picker-confirm-btn,
    .time-picker-item,
    .calendar-cell,
    .location-switch-btn,
    .booking-fs-back,
    .search-clear-btn,
    .search-search-btn,
    .mobile-menu-toggle,
    .input-group):focus-within,
:where(button,
    input,
    select,
    textarea,
    a,
    .tab-btn,
    .calendar-nav-btn,
    .calendar-clear,
    .calendar-done-btn,
    .time-picker-confirm-btn,
    .location-switch-btn,
    .booking-fs-back,
    .search-clear-btn,
    .search-search-btn,
    .mobile-menu-toggle):active {
    outline: none;
    outline-offset: 0;
    box-shadow: none;
}

button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

:root {
    --background: #f2f3f5;
    --foreground: #fafafa;
    --background-alt: #f5f5f5;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: #662442;
    --primary-foreground: #6624420d;
    --primary-highlight: #6624421a;
    --secondary: #46464d;
    --secondary-foreground: #46464d;
    --tertiary: #74747a;
    --muted: #e5e5e5;
    --muted-foreground: #74747a;
    --accent: #e5e5e5;
    --accent-foreground: #fafafa;
    --destructive: #f04;
    --destructive-foreground: #ffebf0;
    --border: #dddfe4;
    --border-foreground: #17171a1a;
    --input: #e5e5e5;
    --ring: #e5e5e5;
    --link: #1a85ff;
    --primary-error: #f04;
    --foreground-error: #ffebf0;
    --primary-success: #556b2f;
    --foreground-success: #556b2f0d;
    --primary-info: #2b4593;
    --foreground-info: #1a85ff0d;
    --highlight-info: #e4f0ff;
    --primary-warning: #e19500;
    --foreground-warning: #e195000d;
    --shadow-primary: 0 8px 24px 0 #46464d14;
    --shadow-primary-v2: 0 8px 24px 0 #46464d2e;
    --shadow-secondary: 0 8px 24px 0 #959da526;
}

body {
    font-family: "Outfit", sans-serif;
    line-height: 1.6;
    color: #333;
}

.container {
    width: 1400px;
    max-width: 100%;
    margin: 0 auto;
}

/***************
 * Header Style
 ***************/
.header-top-bar {
    background: #06357a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

.header-top-bar__list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.25rem 10rem;
    list-style: none;
    margin: 0;
    padding: 0.7rem 15px 0.4rem;
}

.header-top-bar__item a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.header-top-bar__item a:hover {
    opacity: 0.85;
}

.header-top-bar__icon {
    flex-shrink: 0;
    color: #ffffff;
}

@media (max-width: 767px) {
    .header-top-bar__list {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0.65rem;
        padding: 0.45rem 12px;
        font-size: 12px;
    }

    .header-top-bar__item {
        flex: 0 0 auto;
    }

    .header-top-bar__item a {
        gap: 0;
        padding: 0.2rem;
    }

    .header-top-bar__item a>span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

.main-header {
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 12000;
    transition: box-shadow 0.3s ease;
}

.main-header.scrolled {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.main-header .header-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    max-width: 1400px;
    margin: 0 auto;
}

.main-header .header-nav .nav-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
}

.main-header .header-nav .nav-left .logo {
    display: flex;
    align-items: center;
}

.main-header .header-nav .nav-left .logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    gap: 0.5rem;
}

.main-header .header-nav .nav-left .logo a img {
    width: 100%;
    height: auto;
    max-width: 160px;
    object-fit: contain;
    object-position: center;
    border-radius: 0;
    box-shadow: none;
    filter: none;
    transition: none;
    margin: 0;
    padding: 0;
}

.main-header .header-nav .nav-menu>.mobile-menu-brand,
.main-header .header-nav .nav-menu>.mobile-sub-nav-header {
    display: none;
}

.main-header .header-nav .nav-menu {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    justify-content: center;
    margin: 0 2rem;
}

.main-header .header-nav .nav-menu .nav-item {
    position: relative;
}

/* Phone + languages in slide-out only (hidden on wide desktop) */
.main-header .header-nav .nav-menu>li.nav-menu-utilities {
    display: none;
    list-style: none;
}

.main-header .header-nav .nav-menu .nav-item .nav-item a {
    padding: 0.75rem 0.75rem;
    font-size: 0.9rem;
}

.nav-item a {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    text-decoration: none;
    color: #5f6368;
    font-size: 15px;
    font-weight: 400;
    transition: color 0.3s ease;
    border-bottom: 2px solid transparent;
    position: relative;
    margin: 0 12px;
}

.main-header .header-nav .nav-menu .nav-item.active a {
    color: #06357a;
    border-bottom-color: #06357a;
    font-weight: 500;
}

.main-header .header-nav .nav-menu .nav-item .nav-dropdown-trigger:hover,
.main-header .header-nav .nav-menu .nav-item.has-dropdown.is-open .nav-dropdown-trigger {
    color: #06357a;
}

.main-header .header-nav .nav-menu .nav-item .nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 12px;
    margin: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #5f6368;
    font-size: 15px;
    font-weight: 400;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    position: relative;
}

@media (min-width: 1201px) {
    .main-header .header-nav .nav-menu .nav-item.has-dropdown:hover .nav-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(4px);
    }
}

.main-header .header-nav .nav-menu .nav-item .nav-dropdown-trigger::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 12px;
    right: 12px;
    height: 2px;
    background-color: #06357a;
    border-radius: 0 0 2px 2px;
    width: 0;
    transition: width 0.2s ease;
}

.main-header .header-nav .nav-menu .nav-item .nav-dropdown-trigger:hover::after,
.main-header .header-nav .nav-menu .nav-item.has-dropdown.is-open .nav-dropdown-trigger::after {
    width: calc(100% - 24px);
}

.main-header .header-nav .nav-menu .nav-item.has-dropdown .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 220px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 1001;
    list-style: none;
}

.main-header .header-nav .nav-menu .nav-item.has-dropdown.is-open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(4px);
}

.main-header .header-nav .nav-menu .nav-item .nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    transition: background 0.15s ease, color 0.15s ease;
    margin: 0;
}

.main-header .header-nav .nav-menu .nav-item .nav-dropdown-item:hover {
    background: rgba(6, 53, 122, 0.06);
    color: #06357a;
}

.main-header .header-nav .nav-menu .nav-item.has-dropdown {
    position: relative;
}

.main-header .header-nav .nav-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    position: relative;
}

.main-header .header-nav .nav-right .contact-info a {
    font-size: 0.95rem;
    color: #000;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.main-header .header-nav .nav-right .contact-info svg {
    width: 28px;
    height: 28px;
    background: #06357a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    flex-shrink: 0;
}

.main-header .header-nav .nav-right .contact-info .phone-number {
    font-size: 0.95rem;
    color: #000;
    font-weight: 400;
}

.main-header .header-nav .nav-right .login-btn {
    display: flex;
    align-items: center;
}

/* Circular profile icon button (guest login + logged-in menu trigger) */
.profile-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid #c8c8c8;
    border-radius: 50%;
    background: #fff;
    color: #17171a;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.profile-icon-btn:hover,
.profile-icon-btn:focus-visible {
    border-color: #c8c8c8;
    background: #fafafa;
    outline: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.profile-icon-btn__svg {
    display: block;
    flex-shrink: 0;
}

/* Header auth: login button (guest) + account menu (logged in) */
.header-auth {
    position: relative;
}

.header-auth .account-menu:not([hidden]) {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.header-auth .account-menu:not([hidden]) .account-menu__dropdown {
    pointer-events: auto;
}

.account-menu {
    position: relative;
}

.account-menu__trigger {
    font-family: inherit;
}

.account-menu__dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 12010;
    min-width: 17.5rem;
    max-width: 20rem;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 0.5rem 0;
    overflow: hidden;
}

.account-menu__dropdown[hidden] {
    display: none;
}

.account-menu__user {
    padding: 0.75rem 1rem 0.65rem;
}

.account-menu__name {
    margin: 0 0 0.15rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #17171a;
    line-height: 1.35;
}

.account-menu__email {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 400;
    color: #777;
    line-height: 1.4;
    word-break: break-word;
}

.account-menu__divider {
    height: 1px;
    margin: 0.35rem 0;
    background: #e8eaed;
}

.account-menu__list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
}

.account-menu__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.55rem 1rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: #3c4043;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    line-height: 1.35;
    transition: background-color 0.15s ease;
}

.account-menu__item svg {
    flex-shrink: 0;
    color: #5f6368;
}

.account-menu__item:hover,
.account-menu__item:focus-visible {
    background: #f1f3f4;
    outline: none;
}

.account-menu__item--btn {
    color: #3c4043;
}

.main-header .header-nav .nav-right .language-icons {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin: 0 0 0;
}

.main-header .header-nav .nav-right .language-icons svg {
    float: left;
    margin: 0 6px 0 0;
}

.main-header .header-nav .nav-right .language-icons a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0rem 0.2rem;
    color: #000;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 400;
    border: none;
    cursor: pointer;
}

.main-header .header-nav .nav-right .language-icons a.lang-en {
    border-right: 1px solid #ccc;
    padding: 0 5px 0 0;
}

.main-header .header-nav .nav-right .whatsapp-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    background-color: rgb(37 211 102 / 1);
    color: rgb(255 255 255 / 1);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
    animation: pulseSubtle 2s infinite;
    border-radius: 9999px;
}

.main-header .header-nav .nav-right .whatsapp-icon svg {
    margin: 6px 0 0;
}

@keyframes pulseSubtle {

    0%,
    to {
        transform: scale(1);
        box-shadow: 0 0 #ccc
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px #fff0;
    }
}

.main-header .header-nav .nav-right .mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #5f6368;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.main-header .header-nav .nav-right .mobile-menu-toggle:hover {
    color: #06357a;
}

.main-header .header-nav .nav-right .mobile-menu-toggle.active {
    color: #06357a;
}

.main-header .header-nav .nav-right .mobile-menu-toggle .hamburger-icon {
    display: block;
    position: relative;
    width: 22px;
    height: 16px;
    margin: 0 auto;
}

.main-header .header-nav .nav-right .mobile-menu-toggle .hamburger-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #000;
    border-radius: 2px;
    transform-origin: center;
    transition:
        transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
        top 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
        opacity 0.25s ease,
        width 0.25s ease;
}

.main-header .header-nav .nav-right .mobile-menu-toggle .hamburger-line:nth-child(1) {
    top: 0;
}

.main-header .header-nav .nav-right .mobile-menu-toggle .hamburger-line:nth-child(2) {
    top: 7px;
}

.main-header .header-nav .nav-right .mobile-menu-toggle .hamburger-line:nth-child(3) {
    top: 14px;
}

.main-header .header-nav .nav-right .mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
}

.main-header .header-nav .nav-right .mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.main-header .header-nav .nav-right .mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
}

/* Tablet & mobile: slide-out navigation (≤1200px) */
@media (max-width: 1200px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .main-header .header-nav .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: min(85vw, 320px);
        height: 100vh;
        height: 100dvh;
        background: #ffffff;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        margin: 0;
        padding: 6px 0 2rem;
        gap: 0;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
        z-index: 12001;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%);
        visibility: hidden;
        transition:
            transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0.45s;
        will-change: transform;
    }

    .main-header .header-nav .nav-right .profile-icon-btn {
        width: 1.8rem;
        height: 1.8rem;
    }

    .main-header .header-nav .nav-right .account-menu__dropdown {
        right: 0;
        min-width: min(17.5rem, calc(100vw - 2rem));
    }

    .main-header .header-nav .nav-right .contact-info,
    .main-header .header-nav .nav-right .language-icons {
        display: none;
    }

    body.menu-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 11999;
        opacity: 0;
        animation: headerOverlayFadeIn 0.4s ease forwards;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    @keyframes headerOverlayFadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .main-header .header-nav {
        padding: 10px 0.75rem;
        position: relative;
    }

    .main-header .header-nav .nav-left .logo a img {
        max-width: 130px;
    }

    .main-header .header-nav .nav-menu.mobile-menu-open {
        transform: translateX(0);
        visibility: visible;
    }

    .main-header .header-nav .nav-menu>.mobile-menu-brand {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 2;
        width: 100%;
        margin: 0;
        padding: 8px 20px 14px;
        background: #ffffff;
        border-bottom: 1px solid #e8eaed;
        list-style: none;
    }

    .main-header .header-nav .nav-menu>.mobile-menu-brand .mobile-menu-logo {
        display: flex;
        align-items: center;
        text-decoration: none;
        line-height: 0;
    }

    .main-header .header-nav .nav-menu>.mobile-menu-brand .mobile-menu-logo img {
        width: 100%;
        height: auto;
        max-width: 130px;
        object-fit: contain;
        object-position: left center;
    }

    .main-header .header-nav .nav-menu>.nav-item,
    .main-header .header-nav .nav-menu>li.nav-menu-utilities,
    .main-header .header-nav .nav-menu>.mobile-menu-brand {
        opacity: 0;
        transform: translateX(20px);
        transition:
            opacity 0.35s ease,
            transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .main-header .header-nav .nav-menu.mobile-menu-open>.nav-item,
    .main-header .header-nav .nav-menu.mobile-menu-open>li.nav-menu-utilities,
    .main-header .header-nav .nav-menu.mobile-menu-open>.mobile-menu-brand {
        opacity: 1;
        transform: translateX(0);
    }

    .main-header .header-nav .nav-menu.mobile-menu-open>.mobile-menu-brand {
        transition-delay: 0.04s;
    }

    .main-header .header-nav .nav-menu.mobile-menu-open>.nav-item:nth-child(2) {
        transition-delay: 0.08s;
    }

    .main-header .header-nav .nav-menu.mobile-menu-open>.nav-item:nth-child(3) {
        transition-delay: 0.12s;
    }

    .main-header .header-nav .nav-menu.mobile-menu-open>.nav-item:nth-child(4) {
        transition-delay: 0.16s;
    }

    .main-header .header-nav .nav-menu.mobile-menu-open>.nav-item:nth-child(5) {
        transition-delay: 0.2s;
    }

    .main-header .header-nav .nav-menu.mobile-menu-open>.nav-item:nth-child(6) {
        transition-delay: 0.24s;
    }

    .main-header .header-nav .nav-menu.mobile-menu-open>.nav-item:nth-child(7) {
        transition-delay: 0.28s;
    }

    .main-header .header-nav .nav-menu.mobile-menu-open>li.nav-menu-utilities {
        transition-delay: 0.32s;
    }

    @media (prefers-reduced-motion: reduce) {

        .main-header .header-nav .nav-menu,
        .main-header .header-nav .nav-menu>.nav-item,
        .main-header .header-nav .nav-menu>.mobile-menu-brand,
        .main-header .header-nav .nav-menu>li.nav-menu-utilities,
        .main-header .header-nav .nav-menu .nav-item.has-dropdown .nav-dropdown,
        .main-header .header-nav .nav-menu>.mobile-sub-nav-header,
        .main-header .header-nav .nav-menu .nav-item.has-dropdown .nav-dropdown,
        .main-header .header-nav .nav-menu.nav-menu--sub-open>.mobile-menu-brand,
        .main-header .header-nav .nav-menu.nav-menu--sub-open>.nav-item,
        .main-header .header-nav .nav-menu.nav-menu--sub-open>li.nav-menu-utilities,
        .main-header .header-nav .nav-menu .nav-item.has-dropdown .nav-dropdown .nav-dropdown-item,
        .main-header .header-nav .nav-right .mobile-menu-toggle .hamburger-line {
            transition-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
        }

        body.menu-open::before {
            animation: none;
            opacity: 1;
        }
    }

    .main-header .header-nav .nav-menu>li.nav-menu-utilities {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        margin-top: auto;
        padding: 1.25rem 1rem 1.5rem;
        border-top: 1px solid #e8eaed;
        border-bottom: none;
    }

    .main-header .header-nav .nav-menu .nav-menu-utilities .contact-info a {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        font-size: 0.95rem;
        color: #000;
        font-weight: 400;
        text-decoration: none;
        padding: 0;
        margin: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .main-header .header-nav .nav-menu .nav-menu-utilities .contact-info svg {
        width: 28px;
        height: 28px;
        background: #06357a;
        border-radius: 50%;
        padding: 5px;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    .main-header .header-nav .nav-menu .nav-menu-utilities .contact-info .phone-number {
        font-size: 0.95rem;
        color: #000;
        font-weight: 400;
    }

    .main-header .header-nav .nav-menu .nav-menu-utilities .language-icons {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        flex-wrap: wrap;
        margin: 0;
    }

    .main-header .header-nav .nav-menu .nav-menu-utilities .language-icons svg {
        float: none;
        margin: 0 4px 0 0;
    }

    .main-header .header-nav .nav-menu .nav-menu-utilities .language-icons a {
        display: flex;
        align-items: center;
        padding: 0.15rem 0.25rem;
        color: #000;
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 400;
    }

    .main-header .header-nav .nav-menu .nav-menu-utilities .language-icons a.lang-en {
        border-right: 1px solid #ccc;
        padding-right: 0.5rem;
    }

    .main-header .header-nav .nav-menu .nav-item {
        width: 100%;
        border-bottom: 1px solid #e8eaed;
    }

    .main-header .header-nav .nav-menu>.nav-item:last-of-type {
        border-bottom: none;
    }

    .nav-item a {
        padding: 1rem;
        margin: 0;
        width: 100%;
        justify-content: flex-start;
        border-bottom: none;
        font-size: 0.9rem;
    }

    .main-header .header-nav .nav-menu .nav-item.active a {
        border-bottom: none;
        background: rgba(6, 53, 122, 0.06);
    }

    .main-header .header-nav .nav-menu .nav-item .nav-dropdown-trigger {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        padding: 1rem;
        margin: 0;
        font-size: 0.9rem;
        border-radius: 0;
    }

    /* Desktop underline pseudo — hide in drawer; chevron uses ::after below */
    .main-header .header-nav .nav-menu .nav-item .nav-dropdown-trigger::after {
        content: '';
        position: static;
        bottom: auto;
        left: auto;
        right: auto;
        width: 4px;
        height: 4px;
        background: none;
        border-right: 2px solid #5f6368;
        border-bottom: 2px solid #5f6368;
        border-radius: 0;
        transform: rotate(45deg);
        transition: transform 0.2s ease;
        flex-shrink: 0;
        margin-left: 0.75rem;
    }

    .main-header .header-nav .nav-menu .nav-item .nav-dropdown-trigger:hover::after,
    .main-header .header-nav .nav-menu .nav-item.has-dropdown.is-open .nav-dropdown-trigger::after {
        width: 4px;
        height: 4px;
        background: none;
    }

    .main-header .header-nav .nav-menu .nav-item.has-dropdown.is-open .nav-dropdown-trigger::after {
        transform: rotate(-135deg);
    }

    .main-header .header-nav .nav-menu {
        --mobile-drawer-width: min(85vw, 320px);
        --mobile-sub-panel-width: 100vw;
    }

    .main-header .header-nav .nav-menu.nav-menu--sub-open {
        overflow: hidden;
    }

    .main-header .header-nav .nav-menu>.mobile-sub-nav-header {
        display: none;
        list-style: none;
        align-items: center;
        grid-template-columns: 2.5rem 1fr 2.5rem;
        gap: 0;
        flex-shrink: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 12004;
        width: var(--mobile-sub-panel-width);
        max-width: 100%;
        margin: 0;
        padding: 10px 12px;
        background: #ffffff;
        border-bottom: 1px solid #e8eaed;
        box-sizing: border-box;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transform: translateX(100%);
        transition:
            transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.3s ease,
            visibility 0.4s;
    }

    .main-header .header-nav .nav-menu.nav-menu--sub-open>.mobile-sub-nav-header {
        display: grid;
        pointer-events: auto;
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    .main-header .header-nav .nav-menu>.mobile-sub-nav-header .mobile-sub-back {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: #202124;
        cursor: pointer;
        grid-column: 1;
        justify-self: start;
        transition: background 0.15s ease;
    }

    .main-header .header-nav .nav-menu>.mobile-sub-nav-header .mobile-sub-back:hover,
    .main-header .header-nav .nav-menu>.mobile-sub-nav-header .mobile-sub-back:focus-visible {
        background: rgba(6, 53, 122, 0.08);
        outline: none;
    }

    .main-header .header-nav .nav-menu>.mobile-sub-nav-header .mobile-sub-title {
        grid-column: 2;
        font-size: 1rem;
        font-weight: 500;
        color: #202124;
        line-height: 1.3;
        text-align: center;
        padding: 0;
    }

    .main-header .header-nav .nav-menu.nav-menu--sub-open>.mobile-menu-brand,
    .main-header .header-nav .nav-menu.nav-menu--sub-open>.nav-item:not(.is-open),
    .main-header .header-nav .nav-menu.nav-menu--sub-open>li.nav-menu-utilities {
        visibility: hidden;
        opacity: 0;
        height: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: none;
        overflow: hidden;
        pointer-events: none;
    }

    .main-header .header-nav .nav-menu.nav-menu--sub-open>.nav-item.has-dropdown.is-open {
        visibility: visible;
        opacity: 1;
        height: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: none;
        overflow: visible;
    }

    .main-header .header-nav .nav-menu.nav-menu--sub-open>.nav-item.has-dropdown.is-open>.nav-dropdown-trigger {
        display: none;
    }

    .main-header .header-nav .nav-menu .nav-item.has-dropdown .nav-dropdown {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 12003;
        min-width: auto;
        width: var(--mobile-sub-panel-width);
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
        padding: 3.75rem 0 2rem;
        box-shadow: none;
        background: #ffffff;
        border-radius: 0;
        border-left: none;
        display: block;
        list-style: none;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        visibility: hidden;
        opacity: 1;
        transform: translateX(100%);
        transition:
            transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0.4s;
        will-change: transform;
        box-sizing: border-box;
    }

    .main-header .header-nav .nav-menu .nav-item.has-dropdown:not(.is-open) .nav-dropdown {
        pointer-events: none;
    }

    .main-header .header-nav .nav-menu .nav-item.has-dropdown:hover .nav-dropdown {
        max-height: none;
        transform: translateX(100%);
        visibility: hidden;
    }

    .main-header .header-nav .nav-menu .nav-item.has-dropdown.is-open .nav-dropdown {
        visibility: visible;
        transform: translateX(0);
        pointer-events: auto;
    }

    .main-header .header-nav .nav-menu .nav-item.has-dropdown .nav-dropdown li {
        width: 100%;
    }

    .main-header .header-nav .nav-menu .nav-item.has-dropdown .nav-dropdown .nav-dropdown-item {
        opacity: 1;
        transform: none;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 1rem;
        color: #202124;
        font-size: 0.9rem;
        font-weight: 300;
        border-bottom: 1px solid #e8eaed;
        transition: background 0.15s ease, color 0.15s ease;
        box-sizing: border-box;
    }

    .main-header .header-nav .nav-menu .nav-item.has-dropdown .nav-dropdown .nav-dropdown-item:hover,
    .main-header .header-nav .nav-menu .nav-item.has-dropdown .nav-dropdown .nav-dropdown-item:focus-visible {
        background: rgba(6, 53, 122, 0.06);
        color: #06357a;
    }

    .main-header .header-nav .nav-menu .nav-item.has-dropdown .nav-dropdown li:last-child .nav-dropdown-item {
        border-bottom: none;
    }

    .main-header .header-nav .nav-menu .nav-item.has-dropdown .nav-dropdown-trigger::after {
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .main-header .header-nav .nav-right {
        gap: 1rem;
    }

    .main-header .header-nav .nav-right .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 12002;
    }
}

/* Small phones: compact header bar */
@media (max-width: 640px) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .main-header .header-nav {
        padding: 8px 0.5rem;
    }

    .main-header .header-nav .nav-left .logo a img {
        max-width: 110px;
    }

    .main-header .header-nav .nav-right .profile-icon-btn {
        width: 1.8rem;
        height: 1.8rem;
    }

    .main-header .header-nav .nav-right .whatsapp-icon {
        width: 28px;
        height: 28px;
    }

    .main-header .header-nav .nav-right .whatsapp-icon svg {
        width: 14px;
        height: 14px;
    }

    .main-header .header-nav .nav-menu {
        width: 100%;
        max-width: none;
    }

    .main-header .header-nav .nav-menu>.mobile-menu-brand .mobile-menu-logo img {
        max-width: 110px;
    }
}



/********************
 * Home Banner Style
 ********************/
#home-banner {
    width: 100%;
    float: left;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 0 42px;
}

#home-banner .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/chauffeur-service-dubai.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

#home-banner .hero-background .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(6 53 122 / 67%) 0%, rgb(6 53 122 / 72%) 45%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 1;
}

#home-banner .hero-content {
    position: relative;
    z-index: 3;
    padding: 0 2rem 0;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    flex: 1;
    display: flex;
    text-align: center;
}

#home-banner .hero-content .hero-text {
    color: #ffffff;
    margin: 0 auto;
}

#home-banner .hero-content .hero-text h1 {
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 1rem;
    color: #ffffff;
    letter-spacing: 0.5px;
}

#home-banner .hero-content .hero-text p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    color: #ffffff;
    font-weight: 300;
}

#home-banner .hero-content .hero-text p span {
    font-weight: 500;
    font-style: italic;
}


/***********************
 * Booking Form Styles
 ***********************/
#home-banner .booking-form-container {
    position: relative;
    z-index: 4;
    padding: 2rem 2rem 0;
    max-width: 1400px;
    margin: 0 auto;
}

#home-banner .booking-form-container .booking-form-wrapper {
    border-radius: 8px;
    padding: 1.5rem 1.5rem 1.5rem;
}

/***************
 * Booking Tabs 
 ***************/
#home-banner .booking-form-container .booking-form-wrapper .booking-tabs {
    text-align: center;
    margin-bottom: 2rem;
}

#home-banner .booking-form-container .booking-form-wrapper .booking-tabs button {
    padding: 11px 32px 10px;
    background: #ffffff;
    color: #b0b0b0;
    border: none;
    border-radius: 6px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 400;
    font-family: "Outfit", sans-serif;
    margin: 0 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#home-banner .booking-form-container .booking-form-wrapper .booking-tabs button svg {
    float: left;
    margin: 0 8px 0 0;
    fill: currentColor;
    transition: fill 0.3s ease;
}

#home-banner .booking-form-container .booking-form-wrapper .booking-tabs button:hover {
    color: #000;
    background-color: #f5f5f5;
}

#home-banner .booking-form-container .booking-form-wrapper .booking-tabs button.active {
    color: #000000;
    border-bottom-color: #fff;
    background-color: #f5f5f5;
}


/* 
 * Booking Form Details 
 */
#home-banner .booking-form-container .booking-form-wrapper .booking-form-details {
    position: relative;
    margin-top: 12px;
    z-index: 99999;
}

#home-banner .booking-form-container .booking-form-wrapper .booking-form-details form {
    display: flex;
    background: #ffffff;
    border-radius: 30px;
    padding: 4px;
    gap: 4px;
}

#home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.3s ease;
}

#home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group fieldset {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    border: none;
}

#home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group fieldset input {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: #222;
    width: 100%;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-style: normal;
    height: 40px;
}

#home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group.is-active,
#home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group:hover,
#home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .duration-section.hourly-only-section.is-active,
#home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .duration-section.hourly-only-section:hover,
#home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .where-to-section.transfer-only-section.is-active,
#home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .where-to-section.transfer-only-section:hover {
    background: #eaeaea;
}

#home-banner .booking-form-container .booking-form-wrapper .booking-form-separator {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(to bottom, transparent 0, #e0e0e0 25%, #e0e0e0 75%, transparent 100%);
}

#home-banner .booking-form-container .booking-form-wrapper .booking-form-separator.hourly-only-section[aria-hidden="true"] {
    display: none;
}

#home-banner .booking-form-container .booking-form-wrapper .location-switch-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    align-self: center;
}

#home-banner .booking-form-container .booking-form-wrapper .location-switch-wrap .location-switch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #eaeaea;
    color: #555;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

#home-banner .booking-form-container .booking-form-wrapper .location-switch-wrap .location-switch-btn:hover {
    background: #d0cfcf;
    color: #222;
}


.booking-form-details form .date-placeholder {
    color: #888 !important;
}

#home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .search-clear-btn {
    position: absolute;
    right: -10px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: none;
    background: #eaecf0;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #000;
    transition: background var(--duration-fast) linear, color var(--duration-fast) linear, transform var(--duration-fast) var(--easing-soft);
    padding: 0 0 1px;
}

#home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .search-clear-btn:hover {
    background: #f0f0f0;
    color: #555;
}

#home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .search-clear-btn.is-visible {
    display: inline-flex;
}

#home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .search-search-btn {
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    border-radius: 60px;
    background: #06357a;
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transform: translateZ(0);
    transition: background var(--duration-fast) linear, box-shadow var(--duration-fast) var(--easing-soft), transform var(--duration-fast) var(--easing-soft), filter var(--duration-fast) linear;
    width: 50px;
    height: 50px;
}

#home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .search-search-btn:hover {
    background: #06357a;
}

#home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .search-search-icon {
    color: #fff;
}

/* Calendar popup */
.calendar-popover-shell {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 72px;
    z-index: 10;
    pointer-events: none;
}

.calendar-popover {
    width: 870px;
    background: #ffffff;
    border-radius: 32px;
    box-shadow: var(--shadow-strong);
    border: 1px solid rgba(0, 0, 0, 0.04);
    padding: 24px 24px 18px;
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.98);
    transform-origin: top center;
    transition:
        opacity var(--duration-med) var(--easing-soft),
        transform var(--duration-med) var(--easing-soft),
        visibility var(--duration-med) linear;
    visibility: hidden;
}

/* Fleet sidebar: compact calendar + popovers (desktop) */
.vehicle-sidebar-card .calendar-popover-shell,
.vehicle-sidebar-card .time-picker-popover-shell,
.vehicle-sidebar-card .duration-picker-shell {
    left: 0;
    transform: none;
}

.vehicle-sidebar-card .calendar-popover {
    width: 100%;
    max-width: 360px;
    border-radius: 18px;
    padding: 18px 16px 14px;
}

/* Fleet sidebar: show banner calendar as single-month (compact) */
.vehicle-sidebar-card .calendar-popover .calendar-month[data-month-index="1"] {
    display: none;
}

.calendar-popover.is-open {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    visibility: visible;
    pointer-events: auto;
}

.calendar-tabs {
    display: inline-flex;
    align-items: center;
    background: #f7f7f7;
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 18px;
    font-size: 14px;
}

.calendar-tab {
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
    transition: background var(--duration-fast) linear,
        color var(--duration-fast) linear,
        transform var(--duration-fast) var(--easing-soft);
    color: #555;
}

.calendar-tab.is-active {
    background: #ffffff;
    color: #222;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.calendar-header-unified {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 0 4px;
    width: 100%;
}

.calendar-months-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
    font-weight: 600;
}

.calendar-content {
    display: flex;
    gap: 30px;
}

.calendar-month {
    flex: 1;
}

.calendar-month-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.calendar-month-title {
    font-weight: 600;
    font-size: 15px;
    color: #222;
    flex: 1;
    text-align: center;
}

.calendar-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    cursor: pointer;
    background: #ffffff;
    transition: background var(--duration-fast) linear,
        box-shadow var(--duration-fast) var(--easing-soft),
        transform var(--duration-fast) var(--easing-soft);
}

.calendar-nav-btn:hover {
    background: #f7f7f7;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.calendar-nav-next--mobile {
    display: none;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-size: 13px;
    color: #000;
    text-align: center;
    margin: 12px 0 6px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    font-size: 13px;
}

.calendar-cell {
    position: relative;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #222;
    user-select: none;
    font-size: 16px;
}

.calendar-cell.is-empty {
    cursor: default;
}

.calendar-cell.is-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.calendar-cell.is-disabled .calendar-cell-inner {
    color: #1c1b1b;
}

.calendar-cell-inner {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast) linear,
        color var(--duration-fast) linear,
        transform var(--duration-fast) var(--easing-soft),
        box-shadow var(--duration-fast) var(--easing-soft);
}

.calendar-cell:not(.is-empty):hover .calendar-cell-inner {
    border: 1px solid #000;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    color: #000;
}

.calendar-cell-range {
    position: absolute;
    inset: 4px 0;
    border-radius: 0;
    background: #ececec;
    z-index: 0;
}

.calendar-cell.is-range-start .calendar-cell-range {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

.calendar-cell.is-range-end .calendar-cell-range {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

.calendar-cell.is-selected .calendar-cell-inner {
    background: #222222;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
}

.calendar-cell.is-selected-hover .calendar-cell-inner {
    border: 1px solid #000000;
    color: #000000;
}

.calendar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    font-size: 12px;
    color: #555;
}

.calendar-flex-options {
    display: flex;
    gap: 8px;
}

.calendar-flex-chip {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #dddddd;
    cursor: pointer;
    transition: background var(--duration-fast) linear,
        border-color var(--duration-fast) linear;
}

.calendar-flex-chip:hover {
    background: #fafafa;
}

.calendar-clear {
    cursor: pointer;
    text-decoration: underline;
    color: red;
}

.calendar-done-btn {
    padding: 8px 14px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    background: #222;
    color: #fff;
    transition: background var(--duration-fast) linear,
        transform var(--duration-fast) var(--easing-soft),
        box-shadow var(--duration-fast) var(--easing-soft);
    float: right;
}

.calendar-done-btn:hover {
    background: #000;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.calendar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.08);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-med) var(--easing-soft);
    z-index: 5;
}

.calendar-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
    z-index: 100010;
}

.pickup-icon {
    height: 16px;
    width: 16px;
    margin: 0;
}

.pickup-icon-inside {
    height: 16px;
    width: 16px;
    position: absolute;
    top: 8px;
    left: 8px;
}

.dropoff-icon {
    height: 20px;
    width: 20px;
    display: inline-block;
}

.dropoff-icon-inside {
    height: 16px;
    width: 16px;
    position: absolute;
    top: 8px;
    left: 8px;
}

.booking-hour-icon-inside {
    height: 16px;
    width: 16px;
    position: absolute;
    top: 7px;
    left: 8px;
}

.date-icon {
    height: 20px;
    width: 20px;
    display: inline-block;
}

.date-icon-inside {
    height: 16px;
    width: 16px;
    position: absolute;
    top: 8px;
    left: 8px;
}

.duration-icon {
    height: 16px;
    width: 16px;
}

/* Time Picker Styles */
.time-icon {
    height: 20px;
    width: 20px;
    display: inline-block;
}

.time-picker-popover-shell {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    pointer-events: none;
}

.time-picker-popover {
    width: 320px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: var(--shadow-strong);
    border: 1px solid rgba(0, 0, 0, 0.04);
    padding: 0;
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.98);
    transform-origin: top center;
    transition:
        opacity var(--duration-med) var(--easing-soft),
        transform var(--duration-med) var(--easing-soft),
        visibility var(--duration-med) linear;
    visibility: hidden;
    overflow: hidden;
}

.time-picker-popover.is-open {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    visibility: visible;
    pointer-events: auto;
}

.time-picker-header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 16px 12px 12px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}

.time-picker-column-header {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #717171;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.time-picker-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 280px;
    overflow: hidden;
}

.time-picker-column {
    border-right: 1px solid #f0f0f0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.time-picker-column:last-child {
    border-right: none;
}

.time-picker-scroll {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-picker-item {
    width: 100%;
    padding: 8px 0;
    text-align: center;
    font-size: 15px;
    color: #222;
    cursor: pointer;
    transition: background var(--duration-fast) linear,
        color var(--duration-fast) linear;
    user-select: none;
    position: relative;
}

.time-picker-item:hover {
    background: #f7f7f7;
}

.time-picker-item.is-selected {
    background: #f0f0f0;
    color: #222;
    font-weight: 600;
}

.time-picker-footer {
    padding: 16px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}

.time-picker-confirm-btn {
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    background: #06357a;
    color: #ffffff;
    transition: transform var(--duration-fast) var(--easing-soft),
        box-shadow var(--duration-fast) var(--easing-soft),
        filter var(--duration-fast) linear;
}

.time-picker-confirm-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.time-picker-confirm-btn:active {
    transform: translateY(0);
}

/* Custom scrollbar for time picker */
.time-picker-column::-webkit-scrollbar {
    width: 10px;
}

.time-picker-column::-webkit-scrollbar-track {
    background: transparent;
}

.time-picker-column::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
}

.time-picker-column::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}

/* Duration picker: same style, 1 column (hours only) */
.duration-picker-header {
    grid-template-columns: 1fr;
}

.duration-picker-content {
    grid-template-columns: 1fr;
}

/* Home booking: drum-wheel time & duration (desktop) */
@media (min-width: 1025px) {

    .booking-form-details .time-picker-popover--pickup .time-picker-header,
    .booking-form-details .time-picker-popover--duration .time-picker-header {
        display: none;
    }

    .vehicle-sidebar-card .time-picker-popover--pickup .time-picker-header,
    .vehicle-sidebar-card .time-picker-popover--duration .time-picker-header {
        display: none;
    }

    .booking-form-details .time-picker-popover--pickup,
    .booking-form-details .time-picker-popover--duration {
        padding-bottom: 0;
    }

    .booking-form-details .time-picker-popover--pickup .time-picker-wheel-wrap,
    .booking-form-details .time-picker-popover--duration .time-picker-wheel-wrap {
        position: relative;
        padding: 0.5rem 0 0;
    }

    .vehicle-sidebar-card .time-picker-popover--pickup .time-picker-wheel-wrap,
    .vehicle-sidebar-card .time-picker-popover--duration .time-picker-wheel-wrap {
        position: relative;
        padding: 0.5rem 0 0;
    }

    .booking-form-details .time-picker-popover--pickup .time-picker-wheel-highlight,
    .booking-form-details .time-picker-popover--duration .time-picker-wheel-highlight {
        position: absolute;
        left: 0.75rem;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        height: 44px;
        border-radius: 10px;
        background: #ededed;
        border: none;
        box-shadow: none;
        outline: none;
        pointer-events: none;
        z-index: 0;
    }

    .vehicle-sidebar-card .time-picker-popover--pickup .time-picker-wheel-highlight,
    .vehicle-sidebar-card .time-picker-popover--duration .time-picker-wheel-highlight {
        position: absolute;
        left: 0.75rem;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        height: 44px;
        border-radius: 10px;
        background: #ededed;
        border: none;
        box-shadow: none;
        outline: none;
        pointer-events: none;
        z-index: 0;
    }

    .booking-form-details .time-picker-popover--pickup .time-picker-wheel-colon {
        position: absolute;
        left: 33.33%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.35rem;
        font-weight: 600;
        color: #111;
        z-index: 2;
        pointer-events: none;
        line-height: 1;
    }

    .vehicle-sidebar-card .time-picker-popover--pickup .time-picker-wheel-colon {
        position: absolute;
        left: 33.33%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.35rem;
        font-weight: 600;
        color: #111;
        z-index: 2;
        pointer-events: none;
        line-height: 1;
    }

    .booking-form-details .time-picker-popover--pickup .time-picker-wheel,
    .booking-form-details .time-picker-popover--duration .time-picker-wheel {
        position: relative;
        z-index: 1;
        height: 220px;
        overflow: hidden;
        mask-image: linear-gradient(to bottom,
                transparent 0%,
                rgba(0, 0, 0, 0.35) 12%,
                #000 28%,
                #000 72%,
                rgba(0, 0, 0, 0.35) 88%,
                transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom,
                transparent 0%,
                rgba(0, 0, 0, 0.35) 12%,
                #000 28%,
                #000 72%,
                rgba(0, 0, 0, 0.35) 88%,
                transparent 100%);
    }

    .vehicle-sidebar-card .time-picker-popover--pickup .time-picker-wheel,
    .vehicle-sidebar-card .time-picker-popover--duration .time-picker-wheel {
        position: relative;
        z-index: 1;
        height: 220px;
        overflow: hidden;
        mask-image: linear-gradient(to bottom,
                transparent 0%,
                rgba(0, 0, 0, 0.35) 12%,
                #000 28%,
                #000 72%,
                rgba(0, 0, 0, 0.35) 88%,
                transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom,
                transparent 0%,
                rgba(0, 0, 0, 0.35) 12%,
                #000 28%,
                #000 72%,
                rgba(0, 0, 0, 0.35) 88%,
                transparent 100%);
    }

    .booking-form-details .time-picker-popover--pickup .time-picker-wheel {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .vehicle-sidebar-card .time-picker-popover--pickup .time-picker-wheel {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .booking-form-details .time-picker-popover--duration .time-picker-wheel--single {
        display: grid;
        grid-template-columns: 1fr;
        max-width: 200px;
        margin: 0 auto;
    }

    .vehicle-sidebar-card .time-picker-popover--duration .time-picker-wheel--single {
        display: grid;
        grid-template-columns: 1fr;
        max-width: 200px;
        margin: 0 auto;
    }

    .booking-form-details .time-picker-popover--duration .time-picker-wheel-suffix {
        position: absolute;
        left: calc(50% + 2.5rem);
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.1rem;
        font-weight: 500;
        color: #888;
        z-index: 2;
        pointer-events: none;
        text-transform: lowercase;
    }

    .vehicle-sidebar-card .time-picker-popover--duration .time-picker-wheel-suffix {
        position: absolute;
        left: calc(50% + 2.5rem);
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.1rem;
        font-weight: 500;
        color: #888;
        z-index: 2;
        pointer-events: none;
        text-transform: lowercase;
    }

    .booking-form-details .time-picker-popover--duration .time-picker-wheel-highlight {
        left: 50%;
        right: auto;
        width: 4.5rem;
        transform: translate(-50%, -50%);
    }

    .vehicle-sidebar-card .time-picker-popover--duration .time-picker-wheel-highlight {
        left: 50%;
        right: auto;
        width: 4.5rem;
        transform: translate(-50%, -50%);
    }

    .booking-form-details .time-picker-popover--pickup .time-picker-column,
    .booking-form-details .time-picker-popover--duration .time-picker-column {
        position: relative;
        z-index: 1;
        border-right: none;
        overflow-y: auto;
        overflow-x: hidden;
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        outline: none !important;
        box-shadow: none !important;
        user-select: none;
        -webkit-user-select: none;
        height: 100%;
    }

    .vehicle-sidebar-card .time-picker-popover--pickup .time-picker-column,
    .vehicle-sidebar-card .time-picker-popover--duration .time-picker-column {
        position: relative;
        z-index: 1;
        border-right: none;
        overflow-y: auto;
        overflow-x: hidden;
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        outline: none !important;
        box-shadow: none !important;
        user-select: none;
        -webkit-user-select: none;
        height: 100%;
    }

    .vehicle-sidebar-card .time-picker-popover--pickup .time-picker-column::-webkit-scrollbar,
    .vehicle-sidebar-card .time-picker-popover--duration .time-picker-column::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .booking-form-details .time-picker-popover--pickup .time-picker-column::-webkit-scrollbar,
    .booking-form-details .time-picker-popover--duration .time-picker-column::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .booking-form-details .time-picker-popover--pickup .time-picker-scroll,
    .booking-form-details .time-picker-popover--duration .time-picker-scroll {
        padding: 88px 0;
    }

    .booking-form-details .time-picker-popover--pickup .time-picker-item,
    .booking-form-details .time-picker-popover--duration .time-picker-item {
        height: 44px;
        min-height: 44px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        font-weight: 400;
        color: #b0b0b0;
        background: transparent;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        transition: color 0.15s ease, font-weight 0.15s ease;
        width: 100%;
        border: none;
        cursor: default;
    }

    .booking-form-details .time-picker-popover--pickup .time-picker-item:hover,
    .booking-form-details .time-picker-popover--duration .time-picker-item:hover {
        background: transparent;
    }

    .booking-form-details .time-picker-popover--pickup .time-picker-item.is-selected,
    .booking-form-details .time-picker-popover--duration .time-picker-item.is-selected {
        color: #111;
        font-weight: 600;
        background: transparent;
    }

    .booking-form-details .time-picker-popover--pickup .time-picker-footer,
    .booking-form-details .time-picker-popover--duration .time-picker-footer {
        padding: 12px 16px 16px;
        background: #fff;
        border-top: 1px solid #eeeeee;
    }

    .booking-form-details .time-picker-popover--pickup .time-picker-confirm-btn,
    .booking-form-details .time-picker-popover--duration .time-picker-confirm-btn {
        border-radius: 12px;
    }
}

/*************************
 * Google Map Suggestions
 *************************/
.pac-container {
    width: 260px !important;
    padding: 8px 7px !important;
    z-index: 100030 !important;
}

.pac-container .pac-item:first-child {
    border-top: 1px solid transparent !important;
}

.pac-container.pac-logo:after {
    display: none !important;
}

.pac-container .pac-item {
    padding: 4px 4px 0 !important;
}

/* Google Places suggestions above fleet booking card / time picker */
.single-fleet .pac-container {
    z-index: 100000 !important;
    font-family: inherit;
}

.booking-form-details .pac-container {
    z-index: 100000 !important;
    font-family: inherit;
}

/* Mobile / tablet: ride-app stacked booking layout */
.booking-mobile-header {
    display: none;
}

/* Custom location pin (replaces Google autocomplete sprite) */
.pac-icon,
.hdpi .pac-icon,
.pac-icon-marker,
.pac-icon-geocode,
.pac-icon-establishment,
.pac-icon-region,
.pac-icon-locality,
.pac-icon-search {
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' focusable='false'%3E%3Cpath fill='%23000000' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zM7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.88-2.88 7.19-5 9.88C9.92 16.21 7 11.85 7 9z'/%3E%3Ccircle cx='12' cy='9' r='2.5' fill='%2306357a'/%3E%3C/svg%3E") !important;
    background-size: 20px 20px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

@media (max-width: 1024px) {
    #home-banner {
        justify-content: flex-start;
        padding-bottom: 1.5rem;
        gap: 0;
    }

    #home-banner .hero-content {
        order: 1;
        flex: 0 0 auto;
        padding: 1rem 1rem 0.75rem;
        max-width: none;
    }

    #home-banner .hero-content .hero-text h1 {
        margin-bottom: 0.5rem;
        line-height: 1.35;
        font-size: 1.5rem;
        margin: 20px 0;
    }

    #home-banner .hero-content .hero-text p {
        margin-bottom: 0.35rem;
        display: none;
    }

    #home-banner .hero-content .hero-text p:last-child {
        margin-bottom: 0;
    }

    #home-banner .booking-form-container {
        order: 2;
        padding: 0 1rem 0;
        flex: 0 0 auto;
        display: block;
        width: 100%;
    }

    #home-banner .booking-form-container .booking-form-wrapper {
        background: #ffffff;
        border-radius: 16px;
        padding: 1rem 1rem 1.1rem;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    }

    #home-banner .hero-content .hero-text p span {
        font-size: 0.95rem;
    }

    #home-banner .hero-content .hero-text p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .booking-mobile-header {
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin-bottom: 1rem;
        padding: 0;
    }

    .booking-fs-back {
        display: none;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 40px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: #111;
        cursor: pointer;
        flex-shrink: 0;
    }

    .booking-fs-back:hover {
        background: #f3f3f3;
    }

    .booking-fs-back:focus,
    .booking-fs-back:focus-visible {
        outline: none;
        background: transparent;
        box-shadow: none;
    }

    .booking-fs-header-spacer {
        width: 40px;
        flex-shrink: 0;
    }

    .booking-mobile-title {
        margin: 0;
        flex: 1;
        font-family: "Outfit", sans-serif;
        font-size: 1.35rem;
        font-weight: 600;
        color: #111;
        text-align: center;
        letter-spacing: -0.02em;
        text-transform: capitalize;
    }

    /* Full-screen booking (mobile/tablet focus or tab change) */
    body.is-booking-fullscreen {
        overflow: hidden;
    }

    #home-banner.is-booking-fullscreen {
        position: fixed;
        inset: 0;
        z-index: 100030;
        min-height: 100dvh;
        height: 100dvh;
        padding: 0;
        margin: 0;
        background: #ffffff;
        overflow: hidden;
    }

    #home-banner.is-booking-fullscreen .hero-background,
    #home-banner.is-booking-fullscreen .hero-content {
        display: none !important;
    }

    #home-banner.is-booking-fullscreen .booking-form-container {
        order: unset;
        position: static;
        flex: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    #home-banner.is-booking-fullscreen .booking-form-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        background: #ffffff;
    }

    #home-banner.is-booking-fullscreen .booking-mobile-header {
        display: flex;
        flex-shrink: 0;
        margin-bottom: 0;
        padding: 0.5rem 0;
        border-bottom: 1px solid #eeeeee;
    }

    #home-banner.is-booking-fullscreen .booking-fs-back {
        display: inline-flex;
    }

    #home-banner.is-booking-fullscreen .booking-form-details {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin-top: 0;
        padding: 1rem 1rem 1.25rem;
    }

    #home-banner.is-booking-fullscreen .booking-tabs {
        margin-bottom: 0.85rem;
    }

    #home-banner.is-booking-fullscreen .calendar-popover-shell,
    #home-banner.is-booking-fullscreen .time-picker-popover-shell,
    #home-banner.is-booking-fullscreen .duration-picker-shell {
        z-index: 100040;
    }

    /* #home-banner.is-booking-fullscreen .calendar-backdrop {
        z-index: 100035;
    } */

    #home-banner.is-booking-fullscreen .booking-form-details .pac-container {
        z-index: 100050 !important;
    }

    #home-banner .booking-form-container .booking-form-wrapper {
        position: relative;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-tabs {
        display: flex;
        gap: 0.5rem;
        text-align: center;
        margin: 0 0 10px;
    }

    #home-banner.is-booking-fullscreen .booking-form-container .booking-form-wrapper .booking-tabs {
        padding: 1rem 0 0;
        margin: 0;
        z-index: 99999999;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-tabs .tab-btn {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 11px 16px 10px;
        background: #f3f3f3;
        border-radius: 6px;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-tabs .tab-btn svg {
        float: none;
        margin: 0 8px 0 0;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-tabs .tab-btn:hover {
        color: #000;
        background-color: #e8e8e8;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-tabs .tab-btn.active {
        color: #000000;
        background-color: #ececec;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details {
        margin-top: 0;
        z-index: inherit;
    }

    #home-banner.is-booking-fullscreen .booking-form-container .booking-form-wrapper .booking-form-details {
        padding: 0.5rem 0 0;
        z-index: 999999;
        position: relative;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form {
        flex-direction: column;
        background: transparent;
        border-radius: 0;
        padding: 0;
        gap: 0.5rem;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .booking-form-separator {
        display: none !important;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group.booking-stack-field,
    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group.duration-section.booking-stack-field {
        padding: 0;
        border-radius: 6px;
        background: #f3f3f3;
        transition: box-shadow 0.2s ease, background 0.2s ease;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group.booking-stack-field.is-active,
    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group.duration-section.booking-stack-field.is-active {
        background: #ececec;
        box-shadow: none;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group.booking-stack-field:hover,
    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group.duration-section.booking-stack-field:hover {
        background: #ececec;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group.booking-stack-field fieldset,
    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group.duration-section.booking-stack-field fieldset {
        padding: 0.85rem 1rem;
        gap: 0.75rem;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group.booking-stack-field fieldset input,
    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group.duration-section.booking-stack-field fieldset input {
        height: auto;
        font-size: 0.9rem;
        color: #111;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group.booking-stack-field fieldset input::placeholder,
    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group.duration-section.booking-stack-field fieldset input::placeholder {
        color: #6b6b6b;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group.booking-stack-field.booking-location-field:first-of-type {
        order: 1;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group.booking-field-date {
        order: 4;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group[data-segment="pickup-time"] {
        order: 5;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .input-group.duration-section.booking-stack-field {
        order: 6;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .search-search-btn.booking-mobile-submit {
        order: 7;
    }

    #home-banner .booking-form-container .booking-form-wrapper .location-switch-wrap {
        order: 2;
        position: static;
        transform: none;
        align-self: flex-end;
        padding: 0;
        margin: -20px 0;
        z-index: 2;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .where-to-section.transfer-only-section {
        order: 3;
    }

    #home-banner .booking-form-container .booking-form-wrapper .location-switch-wrap .location-switch-btn {
        width: 32px;
        height: 32px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .search-clear-btn {
        right: 0.75rem;
        width: 24px;
        height: 24px;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .search-search-btn.booking-mobile-submit {
        width: 100%;
        height: 52px;
        margin-top: 0.35rem;
        border-radius: 12px;
        font-size: 1rem;
        justify-content: center;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .search-search-btn.booking-mobile-submit .search-search-icon {
        margin-right: 0.35rem;
    }

    #home-banner .booking-form-container .booking-form-wrapper .booking-form-details form .search-search-btn.booking-mobile-submit::after {
        content: "Search";
        font-family: "Outfit", sans-serif;
        font-weight: 600;
    }

    .booking-location-field .pickup-icon svg path {
        fill: #111;
    }

    .booking-location-field .pickup-icon svg {
        filter: none;
    }

    .booking-location-field .dropoff-icon {
        position: relative;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    /* Bottom-sheet popovers on small screens */
    .calendar-popover-shell,
    .time-picker-popover-shell,
    .duration-picker-shell {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        transform: none !important;
        z-index: 100020;
    }

    .calendar-popover,
    .time-picker-popover,
    .duration-picker-popover {
        width: 100% !important;
        max-width: none;
        border-radius: 16px 16px 0 0;
    }

    .calendar-popover {
        max-height: 85vh;
        overflow-y: auto;
        padding: 16px 16px 14px;
    }

    .calendar-content {
        flex-direction: column;
        gap: 0;
    }

    .calendar-month[data-month-index="1"] {
        display: none !important;
    }

    .calendar-nav-next--mobile {
        display: flex;
    }

    .calendar-nav-next--desktop {
        display: none !important;
    }

    .calendar-month[data-month-index="0"] {
        flex: none;
        width: 100%;
    }

    .calendar-month-header {
        margin-bottom: 10px;
    }

    .calendar-month-title {
        font-size: 1rem;
    }

    .calendar-grid {
        gap: 2px;
    }

    .calendar-footer {
        padding-top: 12px;
    }

    .calendar-backdrop {
        background: rgba(0, 0, 0, 0.4);
        z-index: 100015;
    }

    /* Booking popovers: no browser focus ring / tap flash (calendar, time, duration) */
    .booking-popover-surface {
        accent-color: #888;
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
    }

    .booking-popover-surface :is(.calendar-cell,
        .calendar-nav-btn,
        .calendar-clear,
        .calendar-done-btn,
        .calendar-tab,
        .calendar-flex-chip,
        .time-picker-item,
        .time-picker-column,
        .time-picker-confirm-btn) {
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
        -webkit-focus-ring-color: transparent;
        outline: none !important;
    }

    .booking-popover-surface :is(.calendar-cell,
        .calendar-nav-btn,
        .calendar-clear,
        .calendar-done-btn,
        .calendar-tab,
        .calendar-flex-chip,
        .time-picker-item,
        .time-picker-column,
        .time-picker-confirm-btn):focus,
    .booking-popover-surface :is(.calendar-cell,
        .calendar-nav-btn,
        .calendar-clear,
        .calendar-done-btn,
        .calendar-tab,
        .calendar-flex-chip,
        .time-picker-item,
        .time-picker-column,
        .time-picker-confirm-btn):focus-visible,
    .booking-popover-surface :is(.calendar-cell,
        .calendar-nav-btn,
        .calendar-clear,
        .calendar-done-btn,
        .calendar-tab,
        .calendar-flex-chip,
        .time-picker-item,
        .time-picker-column,
        .time-picker-confirm-btn):active {
        outline: none !important;
    }

    .booking-popover-surface .calendar-cell:not(.is-selected):focus .calendar-cell-inner,
    .booking-popover-surface .calendar-cell:not(.is-selected):focus-visible .calendar-cell-inner,
    .booking-popover-surface .calendar-nav-btn:focus,
    .booking-popover-surface .calendar-nav-btn:focus-visible,
    .booking-popover-surface .calendar-clear:focus,
    .booking-popover-surface .calendar-clear:focus-visible,
    .booking-popover-surface .calendar-tab:focus,
    .booking-popover-surface .calendar-tab:focus-visible,
    .booking-popover-surface .calendar-flex-chip:focus,
    .booking-popover-surface .calendar-flex-chip:focus-visible {
        box-shadow: none !important;
        background-color: transparent;
    }

    .booking-popover-surface .calendar-cell.is-selected .calendar-cell-inner,
    .booking-popover-surface .calendar-cell.is-selected:focus .calendar-cell-inner,
    .booking-popover-surface .calendar-cell.is-selected:focus-visible .calendar-cell-inner {
        background: #222222;
        color: #ffffff !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
    }

    .booking-popover-surface .calendar-cell::selection,
    .booking-popover-surface .calendar-cell-inner::selection {
        background: transparent;
        color: inherit;
    }

    /* Pickup time & duration: iOS-style drum wheel */
    .time-picker-popover--pickup .time-picker-header,
    .time-picker-popover--duration .time-picker-header {
        display: none;
    }

    .time-picker-popover--pickup,
    .time-picker-popover--duration {
        padding-bottom: 0;
    }

    .time-picker-popover--pickup .time-picker-wheel-wrap,
    .time-picker-popover--duration .time-picker-wheel-wrap {
        position: relative;
        padding: 0.5rem 0 0;
    }

    .time-picker-popover--pickup .time-picker-wheel-highlight,
    .time-picker-popover--duration .time-picker-wheel-highlight {
        position: absolute;
        left: 0.75rem;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        height: 44px;
        border-radius: 10px;
        background: #ededed;
        border: none;
        box-shadow: none;
        outline: none;
        pointer-events: none;
        z-index: 0;
    }

    .time-picker-popover--pickup .time-picker-wheel-colon {
        position: absolute;
        left: 33.33%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.35rem;
        font-weight: 600;
        color: #111;
        z-index: 2;
        pointer-events: none;
        line-height: 1;
    }

    .time-picker-popover--pickup .time-picker-wheel,
    .time-picker-popover--duration .time-picker-wheel {
        position: relative;
        z-index: 1;
        height: 220px;
        mask-image: linear-gradient(to bottom,
                transparent 0%,
                rgba(0, 0, 0, 0.35) 12%,
                #000 28%,
                #000 72%,
                rgba(0, 0, 0, 0.35) 88%,
                transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom,
                transparent 0%,
                rgba(0, 0, 0, 0.35) 12%,
                #000 28%,
                #000 72%,
                rgba(0, 0, 0, 0.35) 88%,
                transparent 100%);
    }

    .time-picker-popover--pickup .time-picker-wheel {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .time-picker-popover--duration .time-picker-wheel--single {
        grid-template-columns: 1fr;
        max-width: 200px;
        margin: 0 auto;
    }

    .time-picker-popover--duration .time-picker-wheel-suffix {
        position: absolute;
        left: calc(50% + 2.5rem);
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.1rem;
        font-weight: 500;
        color: #888;
        z-index: 2;
        pointer-events: none;
        text-transform: lowercase;
    }

    .time-picker-popover--duration .time-picker-wheel-highlight {
        left: 50%;
        right: auto;
        width: 4.5rem;
        transform: translate(-50%, -50%);
    }

    .time-picker-popover--pickup .time-picker-column,
    .time-picker-popover--duration .time-picker-column {
        position: relative;
        z-index: 1;
        border-right: none;
        overflow-y: auto;
        overflow-x: hidden;
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        outline: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
        -webkit-focus-ring-color: transparent;
        user-select: none;
        -webkit-user-select: none;
    }

    .time-picker-popover--pickup .time-picker-column:focus,
    .time-picker-popover--pickup .time-picker-column:focus-visible,
    .time-picker-popover--pickup .time-picker-column:focus-within,
    .time-picker-popover--duration .time-picker-column:focus,
    .time-picker-popover--duration .time-picker-column:focus-visible,
    .time-picker-popover--duration .time-picker-column:focus-within,
    .time-picker-popover--pickup .time-picker-wheel-wrap:focus,
    .time-picker-popover--pickup .time-picker-wheel-wrap:focus-within,
    .time-picker-popover--duration .time-picker-wheel-wrap:focus,
    .time-picker-popover--duration .time-picker-wheel-wrap:focus-within {
        outline: none !important;
        box-shadow: none !important;
        background-color: transparent;
    }

    .time-picker-popover--pickup .time-picker-column::-webkit-scrollbar,
    .time-picker-popover--duration .time-picker-column::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .time-picker-popover--pickup .time-picker-scroll,
    .time-picker-popover--duration .time-picker-scroll {
        padding: 88px 0;
    }

    .time-picker-popover--pickup .time-picker-wheel-spacer,
    .time-picker-popover--duration .time-picker-wheel-spacer {
        height: 44px;
        flex-shrink: 0;
        pointer-events: none;
    }

    .time-picker-popover--pickup .time-picker-item,
    .time-picker-popover--duration .time-picker-item {
        height: 44px;
        min-height: 44px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        font-weight: 400;
        color: #b0b0b0;
        background: transparent;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        transition: color 0.15s ease, font-weight 0.15s ease;
    }

    .time-picker-popover--pickup .time-picker-item:hover,
    .time-picker-popover--duration .time-picker-item:hover {
        background: transparent;
    }

    .time-picker-popover--pickup .time-picker-item.is-selected,
    .time-picker-popover--duration .time-picker-item.is-selected {
        color: #111;
        font-weight: 600;
        background: transparent;
    }

    .time-picker-popover--pickup .time-picker-item:focus,
    .time-picker-popover--pickup .time-picker-item:focus-visible,
    .time-picker-popover--pickup .time-picker-item:active,
    .time-picker-popover--duration .time-picker-item:focus,
    .time-picker-popover--duration .time-picker-item:focus-visible,
    .time-picker-popover--duration .time-picker-item:active,
    .time-picker-popover--pickup .time-picker-item.is-selected:focus,
    .time-picker-popover--pickup .time-picker-item.is-selected:focus-visible,
    .time-picker-popover--duration .time-picker-item.is-selected:focus,
    .time-picker-popover--duration .time-picker-item.is-selected:focus-visible {
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        border: none !important;
    }

    .time-picker-popover--pickup .time-picker-item::selection,
    .time-picker-popover--duration .time-picker-item::selection,
    .time-picker-popover--pickup .time-picker-column::selection,
    .time-picker-popover--duration .time-picker-column::selection {
        background: transparent;
        color: inherit;
    }

    .time-picker-popover--pickup,
    .time-picker-popover--duration {
        accent-color: #888;
    }

    .time-picker-popover--pickup .time-picker-footer,
    .time-picker-popover--duration .time-picker-footer {
        padding: 12px 16px 16px;
        background: #fff;
        border-top: 1px solid #eeeeee;
    }

    .time-picker-popover--pickup .time-picker-confirm-btn,
    .time-picker-popover--duration .time-picker-confirm-btn {
        border-radius: 12px;
    }

    .booking-form-details .pac-container {
        left: 1rem !important;
        right: 1rem !important;
        width: auto !important;
        max-width: none;
    }
}

@media (max-width: 640px) {
    #home-banner .booking-form-container .booking-form-wrapper {
        padding: 0.9rem 0.85rem 1rem;
    }

    #home-banner.hero-banner.is-booking-fullscreen .booking-form-container .booking-form-wrapper {
        padding: 0 0.85rem 1rem;
        z-index: 999999999;
    }

    .booking-mobile-title {
        font-size: 1.2rem;
    }

}

/***********************
 * Fleet Section
 ***********************/
#home-fleet {
    background: rgb(249, 249, 249);
    padding: 4rem 2rem;
    width: 100%;
    float: left;
}

#home-fleet.fleet-full-list {
    padding: 2rem 0 4rem;
}

#home-fleet h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
    line-height: 1.25;
    color: #111;
    margin-bottom: 48px;
    letter-spacing: -0.02em;
    text-wrap: balance;
    text-align: center;
}

#home-fleet h2 strong {
    color: #06357a;
    font-weight: 500;
}

#home-fleet .vehicle-card[data-fleet-hidden="true"] {
    display: none;
}

.fleet-filter-empty {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    background: #f4f7fb;
    color: #06357a;
    text-align: center;
    font-size: 0.95rem;
}

.fleet-filter-empty[hidden] {
    display: none !important;
}

/* Fleet category filter bar */
.fleet-filter-wrap {
    --fleet-accent: var(--primary-info, #395a93);
    position: relative;
    width: 100%;
    margin: 0 auto 2rem;
}

.fleet-filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
}

.fleet-filter-bar .fleet-filter-btn[data-fleet-filter="all"] {
    order: -1;
}

.fleet-filter-indicator {
    display: none;
}

.fleet-filter-scroll-hint {
    display: none;
}

.fleet-filter-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 108px;
    width: 108px;
    max-width: 108px;
    gap: 0.25rem;
    padding: 0.875rem 0.5rem 0.75rem;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #333;
    font: inherit;
    text-align: center;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.fleet-filter-btn:hover {
    border-color: rgba(57, 90, 147, 0.45);
    background: #f8fafc;
    box-shadow: 0 4px 12px rgba(57, 90, 147, 0.1);
    transform: translateY(-1px);
}

.fleet-filter-btn:focus-visible {
    outline: 2px solid var(--fleet-accent);
    outline-offset: 2px;
}

.fleet-filter-btn.active {
    border-color: var(--fleet-accent);
    background: #fff;
    color: var(--fleet-accent);
    box-shadow: 0 4px 14px rgba(57, 90, 147, 0.14);
}

.fleet-filter-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    flex-shrink: 0;
}

.fleet-filter-btn__icon .fleet-filter-icon {
    display: block;
    width: auto;
    height: 100%;
    max-width: 72px;
    max-height: 44px;
}

.fleet-filter-btn__label {
    display: block;
    width: 100%;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.01em;
}

.fleet-filter-btn.active .fleet-filter-btn__label {
    font-weight: 600;
}

/* Fleet filter — All icon */
.fleet-filter-bar .fleet-icon-all .all-1,
.fleet-filter-bar .fleet-icon-all .all-2,
.fleet-filter-bar .fleet-icon-all .all-3,
.fleet-filter-bar .fleet-icon-all .all-5,
.fleet-filter-bar .fleet-icon-all .all-6,
.fleet-filter-bar .fleet-icon-all .all-7 {
    stroke: var(--fleet-accent);
    stroke-miterlimit: 10;
}

.fleet-filter-bar .fleet-icon-all .all-1,
.fleet-filter-bar .fleet-icon-all .all-5,
.fleet-filter-bar .fleet-icon-all .all-6 {
    fill: none;
}

.fleet-filter-bar .fleet-icon-all .all-2,
.fleet-filter-bar .fleet-icon-all .all-3,
.fleet-filter-bar .fleet-icon-all .all-4 {
    fill: var(--fleet-accent);
}

.fleet-filter-bar .fleet-icon-all .all-1,
.fleet-filter-bar .fleet-icon-all .all-6 {
    stroke-width: 9px;
}

.fleet-filter-bar .fleet-icon-all .all-2,
.fleet-filter-bar .fleet-icon-all .all-5 {
    stroke-width: 4px;
}

.fleet-filter-bar .fleet-icon-all .all-3 {
    stroke-width: 3px;
}

.fleet-filter-bar .fleet-icon-all .all-6,
.fleet-filter-bar .fleet-icon-all .all-7 {
    fill-rule: evenodd;
}

.fleet-filter-bar .fleet-icon-all .all-7 {
    fill: #fff;
    stroke-width: 7px;
}

/* Fleet filter SVG colors */
.fleet-filter-bar .cls-2,
.fleet-filter-bar .cls-3 {
    fill: var(--fleet-accent);
    stroke: var(--fleet-accent);
    stroke-miterlimit: 10;
}

.fleet-filter-bar .cls-4 {
    fill: none;
    stroke: var(--fleet-accent);
    stroke-miterlimit: 10;
    stroke-width: 4px;
}

.fleet-filter-bar .cls-1,
.fleet-filter-bar .cls-5,
.fleet-filter-bar .cls-6,
.fleet-filter-bar .cls-7 {
    fill: #fff;
    stroke: var(--fleet-accent);
    stroke-miterlimit: 10;
    fill-rule: evenodd;
}

.fleet-filter-bar .cls-1,
.fleet-filter-bar .cls-6 {
    stroke-width: 9px;
}

.fleet-filter-bar .cls-2,
.fleet-filter-bar .cls-5 {
    stroke-width: 4px;
}

.fleet-filter-bar .cls-3 {
    stroke-width: 3px;
}

.fleet-filter-bar .cls-7 {
    stroke-width: 7px;
}

/* Fleet filter — Standard icon */
.fleet-filter-bar .fleet-icon-first-class .standard-1,
.fleet-filter-bar .fleet-icon-first-class .standard-3,
.fleet-filter-bar .fleet-icon-first-class .standard-4,
.fleet-filter-bar .fleet-icon-first-class .standard-5 {
    stroke: var(--fleet-accent);
    stroke-miterlimit: 10;
}

.fleet-filter-bar .fleet-icon-first-class .standard-1,
.fleet-filter-bar .fleet-icon-first-class .standard-3,
.fleet-filter-bar .fleet-icon-first-class .standard-4 {
    fill: none;
}

.fleet-filter-bar .fleet-icon-first-class .standard-2 {
    fill: var(--fleet-accent);
}

.fleet-filter-bar .fleet-icon-first-class .standard-1,
.fleet-filter-bar .fleet-icon-first-class .standard-2,
.fleet-filter-bar .fleet-icon-first-class .standard-3,
.fleet-filter-bar .fleet-icon-first-class .standard-5 {
    fill-rule: evenodd;
}

.fleet-filter-bar .fleet-icon-first-class .standard-1 {
    stroke-width: 5px;
}

.fleet-filter-bar .fleet-icon-first-class .standard-3 {
    stroke-width: 9px;
}

.fleet-filter-bar .fleet-icon-first-class .standard-4 {
    stroke-width: 4px;
}

.fleet-filter-bar .fleet-icon-first-class .standard-5 {
    fill: #fff;
    stroke-width: 7px;
}

/* Fleet filter — Luxury SUV icon */
.fleet-filter-bar .fleet-icon-business-suv .luxurysuv-1,
.fleet-filter-bar .fleet-icon-business-suv .luxurysuv-3,
.fleet-filter-bar .fleet-icon-business-suv .luxurysuv-4,
.fleet-filter-bar .fleet-icon-business-suv .luxurysuv-5,
.fleet-filter-bar .fleet-icon-business-suv .luxurysuv-6 {
    stroke: var(--fleet-accent);
    stroke-miterlimit: 10;
}

.fleet-filter-bar .fleet-icon-business-suv .luxurysuv-1,
.fleet-filter-bar .fleet-icon-business-suv .luxurysuv-3,
.fleet-filter-bar .fleet-icon-business-suv .luxurysuv-5 {
    fill: none;
}

.fleet-filter-bar .fleet-icon-business-suv .luxurysuv-2,
.fleet-filter-bar .fleet-icon-business-suv .luxurysuv-4 {
    fill: var(--fleet-accent);
}

.fleet-filter-bar .fleet-icon-business-suv .luxurysuv-1,
.fleet-filter-bar .fleet-icon-business-suv .luxurysuv-2,
.fleet-filter-bar .fleet-icon-business-suv .luxurysuv-3,
.fleet-filter-bar .fleet-icon-business-suv .luxurysuv-4,
.fleet-filter-bar .fleet-icon-business-suv .luxurysuv-6 {
    fill-rule: evenodd;
}

.fleet-filter-bar .fleet-icon-business-suv .luxurysuv-1 {
    stroke-width: 9px;
}

.fleet-filter-bar .fleet-icon-business-suv .luxurysuv-3 {
    stroke-width: 5px;
}

.fleet-filter-bar .fleet-icon-business-suv .luxurysuv-4,
.fleet-filter-bar .fleet-icon-business-suv .luxurysuv-5 {
    stroke-width: 4px;
}

.fleet-filter-bar .fleet-icon-business-suv .luxurysuv-6 {
    fill: #fff;
    stroke-width: 7px;
}

/* Fleet filter — Luxury Vans icon */
.fleet-filter-bar .fleet-icon-luxury-vans .luxuryvans-1,
.fleet-filter-bar .fleet-icon-luxury-vans .luxuryvans-3,
.fleet-filter-bar .fleet-icon-luxury-vans .luxuryvans-4,
.fleet-filter-bar .fleet-icon-luxury-vans .luxuryvans-5,
.fleet-filter-bar .fleet-icon-luxury-vans .luxuryvans-6,
.fleet-filter-bar .fleet-icon-luxury-vans .luxuryvans-7 {
    stroke: var(--fleet-accent);
    stroke-miterlimit: 10;
}

.fleet-filter-bar .fleet-icon-luxury-vans .luxuryvans-1,
.fleet-filter-bar .fleet-icon-luxury-vans .luxuryvans-5,
.fleet-filter-bar .fleet-icon-luxury-vans .luxuryvans-6 {
    fill: none;
}

.fleet-filter-bar .fleet-icon-luxury-vans .luxuryvans-2,
.fleet-filter-bar .fleet-icon-luxury-vans .luxuryvans-3,
.fleet-filter-bar .fleet-icon-luxury-vans .luxuryvans-4 {
    fill: var(--fleet-accent);
}

.fleet-filter-bar .fleet-icon-luxury-vans .luxuryvans-6,
.fleet-filter-bar .fleet-icon-luxury-vans .luxuryvans-7 {
    fill-rule: evenodd;
}

.fleet-filter-bar .fleet-icon-luxury-vans .luxuryvans-1,
.fleet-filter-bar .fleet-icon-luxury-vans .luxuryvans-6 {
    stroke-width: 9px;
}

.fleet-filter-bar .fleet-icon-luxury-vans .luxuryvans-3,
.fleet-filter-bar .fleet-icon-luxury-vans .luxuryvans-5 {
    stroke-width: 4px;
}

.fleet-filter-bar .fleet-icon-luxury-vans .luxuryvans-4 {
    stroke-width: 3px;
}

.fleet-filter-bar .fleet-icon-luxury-vans .luxuryvans-7 {
    fill: #fff;
    stroke-width: 7px;
}

/* Fleet filter — Luxury Buses icon */
.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-wrap {
    isolation: isolate;
}

.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-2,
.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-3,
.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-5,
.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-7,
.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-8,
.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-9,
.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-10,
.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-11 {
    stroke: var(--fleet-accent);
    stroke-miterlimit: 10;
}

.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-11,
.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-2,
.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-3,
.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-9 {
    fill: none;
}

.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-4,
.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-5,
.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-6,
.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-7,
.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-8 {
    fill: var(--fleet-accent);
}

.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-2,
.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-9 {
    stroke-width: 9px;
}

.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-3 {
    stroke-width: 4px;
}

.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-5 {
    stroke-width: 3px;
}

.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-11,
.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-8 {
    stroke-width: 2px;
}

.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-6 {
    mix-blend-mode: multiply;
}

.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-10,
.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-9 {
    fill-rule: evenodd;
}

.fleet-filter-bar .fleet-icon-luxury-buses .luxurybuses-10 {
    fill: #fff;
    stroke-width: 7px;
}

/* Fleet filter — VIP Sedan icon */
.fleet-filter-bar .fleet-icon-vipsedan .vipsedan-1,
.fleet-filter-bar .fleet-icon-vipsedan .vipsedan-2,
.fleet-filter-bar .fleet-icon-vipsedan .vipsedan-4,
.fleet-filter-bar .fleet-icon-vipsedan .vipsedan-5,
.fleet-filter-bar .fleet-icon-vipsedan .vipsedan-6,
.fleet-filter-bar .fleet-icon-vipsedan .vipsedan-7 {
    stroke: var(--fleet-accent);
    stroke-miterlimit: 10;
}

.fleet-filter-bar .fleet-icon-vipsedan .vipsedan-1,
.fleet-filter-bar .fleet-icon-vipsedan .vipsedan-6 {
    fill: none;
}

.fleet-filter-bar .fleet-icon-vipsedan .vipsedan-2,
.fleet-filter-bar .fleet-icon-vipsedan .vipsedan-3,
.fleet-filter-bar .fleet-icon-vipsedan .vipsedan-4,
.fleet-filter-bar .fleet-icon-vipsedan .vipsedan-5 {
    fill: var(--fleet-accent);
}

.fleet-filter-bar .fleet-icon-vipsedan .vipsedan-1 {
    stroke-width: 8px;
}

.fleet-filter-bar .fleet-icon-vipsedan .vipsedan-2 {
    stroke-width: 3px;
}

.fleet-filter-bar .fleet-icon-vipsedan .vipsedan-4 {
    stroke-width: 2px;
}

.fleet-filter-bar .fleet-icon-vipsedan .vipsedan-6 {
    stroke-width: 9px;
}

.fleet-filter-bar .fleet-icon-vipsedan .vipsedan-6,
.fleet-filter-bar .fleet-icon-vipsedan .vipsedan-7 {
    fill-rule: evenodd;
}

.fleet-filter-bar .fleet-icon-vipsedan .vipsedan-7 {
    fill: #fff;
    stroke-width: 7px;
}

/* Fleet filter — VIP Vans icon */
.fleet-filter-bar .fleet-icon-vipvans .vipvans-1,
.fleet-filter-bar .fleet-icon-vipvans .vipvans-2,
.fleet-filter-bar .fleet-icon-vipvans .vipvans-3,
.fleet-filter-bar .fleet-icon-vipvans .vipvans-5,
.fleet-filter-bar .fleet-icon-vipvans .vipvans-6,
.fleet-filter-bar .fleet-icon-vipvans .vipvans-7 {
    stroke: var(--fleet-accent);
    stroke-miterlimit: 10;
}

.fleet-filter-bar .fleet-icon-vipvans .vipvans-1,
.fleet-filter-bar .fleet-icon-vipvans .vipvans-2,
.fleet-filter-bar .fleet-icon-vipvans .vipvans-3,
.fleet-filter-bar .fleet-icon-vipvans .vipvans-6 {
    fill: none;
}

.fleet-filter-bar .fleet-icon-vipvans .vipvans-4,
.fleet-filter-bar .fleet-icon-vipvans .vipvans-5 {
    fill: var(--fleet-accent);
}

.fleet-filter-bar .fleet-icon-vipvans .vipvans-1,
.fleet-filter-bar .fleet-icon-vipvans .vipvans-5 {
    stroke-width: 4px;
}

.fleet-filter-bar .fleet-icon-vipvans .vipvans-2,
.fleet-filter-bar .fleet-icon-vipvans .vipvans-6 {
    stroke-width: 9px;
}

.fleet-filter-bar .fleet-icon-vipvans .vipvans-3 {
    stroke-width: 5px;
}

.fleet-filter-bar .fleet-icon-vipvans .vipvans-6,
.fleet-filter-bar .fleet-icon-vipvans .vipvans-7 {
    fill-rule: evenodd;
}

.fleet-filter-bar .fleet-icon-vipvans .vipvans-7 {
    fill: #fff;
    stroke-width: 7px;
}

/* Fleet filter — Business Sedan icon */
.fleet-filter-bar .fleet-icon-business-class .businesssedan-1,
.fleet-filter-bar .fleet-icon-business-class .businesssedan-2,
.fleet-filter-bar .fleet-icon-business-class .businesssedan-4,
.fleet-filter-bar .fleet-icon-business-class .businesssedan-5,
.fleet-filter-bar .fleet-icon-business-class .businesssedan-6 {
    stroke: var(--fleet-accent);
    stroke-miterlimit: 10;
}

.fleet-filter-bar .fleet-icon-business-class .businesssedan-1,
.fleet-filter-bar .fleet-icon-business-class .businesssedan-4,
.fleet-filter-bar .fleet-icon-business-class .businesssedan-5 {
    fill: none;
}

.fleet-filter-bar .fleet-icon-business-class .businesssedan-2,
.fleet-filter-bar .fleet-icon-business-class .businesssedan-3 {
    fill: var(--fleet-accent);
}

.fleet-filter-bar .fleet-icon-business-class .businesssedan-1,
.fleet-filter-bar .fleet-icon-business-class .businesssedan-5 {
    stroke-width: 9px;
}

.fleet-filter-bar .fleet-icon-business-class .businesssedan-2,
.fleet-filter-bar .fleet-icon-business-class .businesssedan-4 {
    stroke-width: 4px;
}

.fleet-filter-bar .fleet-icon-business-class .businesssedan-5,
.fleet-filter-bar .fleet-icon-business-class .businesssedan-6 {
    fill-rule: evenodd;
}

.fleet-filter-bar .fleet-icon-business-class .businesssedan-6 {
    fill: #fff;
    stroke-width: 7px;
}

/* Fleet filter — Limo icon */
.fleet-filter-bar .fleet-icon-stretch-limo .limo-1,
.fleet-filter-bar .fleet-icon-stretch-limo .limo-2,
.fleet-filter-bar .fleet-icon-stretch-limo .limo-3,
.fleet-filter-bar .fleet-icon-stretch-limo .limo-4,
.fleet-filter-bar .fleet-icon-stretch-limo .limo-5 {
    stroke: var(--fleet-accent);
    stroke-miterlimit: 10;
}

.fleet-filter-bar .fleet-icon-stretch-limo .limo-1,
.fleet-filter-bar .fleet-icon-stretch-limo .limo-3,
.fleet-filter-bar .fleet-icon-stretch-limo .limo-4 {
    fill: none;
}

.fleet-filter-bar .fleet-icon-stretch-limo .limo-2 {
    fill: var(--fleet-accent);
}

.fleet-filter-bar .fleet-icon-stretch-limo .limo-1 {
    stroke-width: 8px;
}

.fleet-filter-bar .fleet-icon-stretch-limo .limo-2 {
    stroke-width: 2px;
}

.fleet-filter-bar .fleet-icon-stretch-limo .limo-3 {
    stroke-width: 5px;
}

.fleet-filter-bar .fleet-icon-stretch-limo .limo-4 {
    stroke-width: 9px;
}

.fleet-filter-bar .fleet-icon-stretch-limo .limo-4,
.fleet-filter-bar .fleet-icon-stretch-limo .limo-5 {
    fill-rule: evenodd;
}

.fleet-filter-bar .fleet-icon-stretch-limo .limo-5 {
    fill: #fff;
    stroke-width: 7px;
}

/* Fleet filter SVG colors */

#home-fleet .vehicle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
    gap: 1.5rem;
}

#home-fleet .vehicle-grid .vehicle-card {
    position: relative;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 8px;
    background: rgb(255, 255, 255);
    border-radius: 12px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(249, 249, 249);
    border-image: initial;
    overflow: hidden;
    transition: 0.3s;
    padding: 0px 0px 18px;
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 15px 15px;
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-card-header h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    color: rgb(51, 51, 51);
    line-height: 1.2;
    text-transform: capitalize;
    text-align: left;
    flex: 1 1 auto;
    min-width: 0;
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-card-header .vehicle-capacity {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-card-header .vehicle-capacity .capacity-item {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: rgb(0, 0, 0);
    gap: 0.5rem;
    white-space: nowrap;
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-image {
    width: 100%;
    text-align: center;
    overflow: hidden;
    margin: 0px auto;
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-image.vehicle-image-slider {
    position: relative;
    height: 300px;
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-image.vehicle-image-slider .vehicle-slider-track {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgb(245, 245, 245);
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-image.vehicle-image-slider .vehicle-slider-track img.active {
    opacity: 1;
    z-index: 2;
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-image.vehicle-image-slider .vehicle-slider-track img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.6s ease-in-out;
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-image.vehicle-image-slider .vehicle-slider-arrow.hidden {
    opacity: 0;
    pointer-events: none;
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-image.vehicle-image-slider .vehicle-slider-arrow-left {
    right: 45px;
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-image.vehicle-image-slider .vehicle-slider-arrow-right {
    right: 12px;
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-image.vehicle-image-slider .vehicle-slider-arrow {
    position: absolute;
    bottom: 0px;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    background-color: rgba(0, 0, 0, 0.5);
    color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    border-radius: 50%;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    transition: background-color 0.2s, opacity 0.2s;
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-image.vehicle-image-slider .vehicle-slider-arrow-left::before {
    transform: translateX(50%) rotate(-135deg) !important;
    right: 50%;
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-image.vehicle-image-slider .vehicle-slider-arrow-right::before {
    transform: translateX(-50%) rotate(45deg) !important;
    left: 50%;
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-image.vehicle-image-slider .vehicle-slider-arrow::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    position: absolute;
    border-top: 2px solid rgb(255, 255, 255);
    border-right: 2px solid rgb(255, 255, 255);
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-image.vehicle-image-slider .vehicle-slider-indicators {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    z-index: 2;
    gap: 6px;
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-image.vehicle-image-slider button {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    border-radius: 50%;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    padding: 0px;
    transition: background-color 0.2s, transform 0.2s;
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-image.vehicle-image-slider button.active {
    background-color: rgb(255, 255, 255);
    transform: scale(1.2);
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 7px 1rem 0px;
    gap: 3rem;
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-content .vehicle-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgb(51, 51, 51);
    margin-bottom: 0px;
    text-align: right;
    white-space: nowrap;
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-content .vehicle-price span {
    font-size: 12px;
}

#home-fleet .vehicle-grid .vehicle-card .vehicle-content .vehicle-price .vehicle-info {
    font-size: 0.6rem;
    color: rgb(153, 153, 153);
    font-weight: normal;
    margin: 0px;
    white-space: nowrap;
}

#home-fleet .vehicle-grid .vehicle-card .booking-btns {
    text-align: center;
    margin: 12px 0px 0px;
}

#home-fleet .vehicle-grid .vehicle-card .booking-btns .btn {
    display: inline-block;
    width: auto;
    margin: 0 3px;
    padding: 5px 20px;
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid;
    border-radius: 30px;
    transition: 0.3s;
}

#home-fleet .vehicle-grid .vehicle-card .booking-btns .btn-book-now {
    color: rgb(255, 255, 255);
    background: rgb(6, 53, 122);
    border-color: rgb(6, 53, 122);
}

#home-fleet .vehicle-grid .vehicle-card .booking-btns .btn-whatsapp-btn {
    color: rgb(0, 0, 0);
    background: transparent;
    border-color: rgb(37, 211, 102);
    border-radius: 60px;
    box-shadow: rgba(6, 53, 122, 0.3) 0 2px 8px;
    margin: 0 auto;
}

#home-fleet .vehicle-grid .vehicle-card .booking-btns .btn-email-btn {
    color: rgb(0, 0, 0);
    background: transparent;
    border-color: rgb(202, 201, 201);
    box-shadow: rgba(6, 53, 122, 0.3) 0 2px 8px;
}

#home-fleet .vehicle-grid .vehicle-card .booking-btns .btn-call-btn {
    color: rgb(0, 0, 0);
    background: transparent;
    border-color: rgb(202, 201, 201);
    box-shadow: rgba(6, 53, 122, 0.3) 0 2px 8px;
    display: none;
}

#home-fleet .full-list-button-container {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

#home-fleet .full-list-button-container .btn-full-list {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    color: #06357a;
    background: #fff;
    border: 1px solid #06357a;
    border-radius: 30px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(6, 53, 122, 0.12);
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

#home-fleet .full-list-button-container .btn-full-list::after {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.3s ease;
}

#home-fleet .full-list-button-container .btn-full-list:hover {
    color: #fff;
    background: #06357a;
    border-color: #06357a;
    box-shadow: 0 4px 16px rgba(6, 53, 122, 0.28);
}


#home-fleet .full-list-button-container .btn-full-list:focus-visible {
    outline: 2px solid #06357a;
    outline-offset: 3px;
}

#home-fleet .full-list-button-container .btn-full-list:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(6, 53, 122, 0.2);
}

/* Fleet — tablet */
@media (max-width: 1024px) {
    #home-fleet {
        padding: 3rem 0;
    }

    .fleet-filter-wrap {
        margin-bottom: 1.5rem;
    }

    .fleet-filter-bar {
        gap: 0.625rem;
    }

    .fleet-filter-btn {
        flex: 0 0 96px;
        width: 96px;
        max-width: 96px;
        padding: 0.75rem 0.375rem 0.625rem;
    }

    .fleet-filter-btn__icon {
        height: 40px;
    }

    .fleet-filter-btn__label {
        font-size: 0.75rem;
    }

    #home-fleet .vehicle-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    #home-fleet .vehicle-grid .vehicle-card .vehicle-card-header {
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 12px 12px 10px;
    }

    #home-fleet .vehicle-grid .vehicle-card .vehicle-card-header h4 {
        font-size: 18px;
    }

    #home-fleet .vehicle-grid .vehicle-card .vehicle-card-header .vehicle-capacity {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.5rem 0.65rem;
    }

    #home-fleet .vehicle-grid .vehicle-card .vehicle-card-header .vehicle-capacity .capacity-item {
        font-size: 0.85rem;
    }

    #home-fleet .vehicle-grid .vehicle-card .vehicle-image.vehicle-image-slider {
        height: 260px;
    }

    #home-fleet .vehicle-grid .vehicle-card .vehicle-content {
        gap: 2rem;
        padding: 7px 0.75rem 0;
    }

    #home-fleet .vehicle-grid .vehicle-card .vehicle-content .vehicle-price {
        font-size: 1.35rem;
    }

    #home-fleet .vehicle-grid .vehicle-card .booking-btns {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        padding: 0 0.75rem;
    }

    #home-fleet .vehicle-grid .vehicle-card .booking-btns .btn {
        margin: 0;
        padding: 8px 20px;
        font-size: 0.9375rem;
    }

    #home-fleet .full-list-button-container {
        margin-top: 2rem;
        padding: 0 0.75rem;
    }
}

/* Fleet — mobile carousel dock */
@media (max-width: 640px) {
    #home-fleet {
        padding: 2.5rem 0;
    }

    #home-fleet h2 {
        margin-bottom: 20px;
    }

    .fleet-filter-wrap {
        position: sticky;
        top: 0;
        z-index: 30;
        margin: 0 -0.75rem 1.25rem;
        padding: 0.875rem 0 1.125rem;
        background: rgba(249, 249, 249, 0.82);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: none;
        box-shadow: none;
        overflow: hidden;
    }

    .fleet-filter-wrap::before,
    .fleet-filter-wrap::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1.75rem;
        z-index: 2;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .fleet-filter-wrap::before {
        left: 0;
        background: linear-gradient(90deg, rgba(249, 249, 249, 0.98) 20%, transparent);
    }

    .fleet-filter-wrap::after {
        right: 0;
        background: linear-gradient(270deg, rgba(249, 249, 249, 0.98) 20%, transparent);
    }

    .fleet-filter-wrap.can-scroll-left::before,
    .fleet-filter-wrap.can-scroll-right::after {
        opacity: 1;
    }

    .fleet-filter-scroll-hint {
        display: block;
        position: absolute;
        top: 50%;
        z-index: 5;
        width: 1.75rem;
        height: 1.75rem;
        margin-top: -0.875rem;
        padding: 0;
        border: none;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 1px 6px rgba(57, 90, 147, 0.14);
        cursor: pointer;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .fleet-filter-scroll-hint::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0.4rem;
        height: 0.4rem;
        margin-top: -0.2rem;
        border-top: 2px solid var(--fleet-accent, #395a93);
        border-right: 2px solid var(--fleet-accent, #395a93);
    }

    .fleet-filter-scroll-hint--right {
        right: 0.3rem;
    }

    .fleet-filter-scroll-hint--right::before {
        margin-left: -0.28rem;
        transform: rotate(45deg);
    }

    .fleet-filter-scroll-hint--left {
        left: 0.3rem;
    }

    .fleet-filter-scroll-hint--left::before {
        margin-left: -0.12rem;
        transform: rotate(-135deg);
    }

    .fleet-filter-wrap.can-scroll-right .fleet-filter-scroll-hint--right {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        animation: fleet-hint-nudge-right 1.8s ease-in-out infinite;
    }

    .fleet-filter-wrap.can-scroll-left .fleet-filter-scroll-hint--left {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        animation: fleet-hint-nudge-left 1.8s ease-in-out infinite;
    }

    #home-fleet .vehicle-grid .vehicle-card .booking-btns .btn-call-btn {
        display: block;
    }

    @keyframes fleet-hint-nudge-right {

        0%,
        100% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(3px);
        }
    }

    @keyframes fleet-hint-nudge-left {

        0%,
        100% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(-3px);
        }
    }

    .fleet-filter-bar {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 0.625rem;
        padding: 0.25rem calc(50% - 48px) 0.75rem;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .fleet-filter-bar::-webkit-scrollbar {
        display: none;
    }

    .fleet-filter-indicator {
        display: block;
        position: absolute;
        left: 50%;
        bottom: 0.35rem;
        width: 52px;
        height: 3px;
        margin-left: -26px;
        border-radius: 999px;
        background: linear-gradient(90deg, transparent, var(--fleet-accent, #395a93) 20%, var(--fleet-accent, #395a93) 80%, transparent);
        box-shadow: 0 0 12px rgba(57, 90, 147, 0.45);
        pointer-events: none;
        transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), margin-left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .fleet-filter-btn {
        flex: 0 0 96px;
        width: 96px;
        max-width: 96px;
        padding: 0.625rem 0.375rem 0.5rem;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        opacity: 0.72;
        transform: scale(0.94);
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }

    .fleet-filter-btn.active {
        opacity: 1;
        transform: scale(1);
        border-color: var(--fleet-accent);
        background: #fff;
        box-shadow: none;
    }

    .fleet-filter-btn:hover {
        transform: scale(0.97);
    }

    .fleet-filter-btn.active:hover {
        transform: scale(1.02);
    }

    .fleet-filter-wrap.is-hinting .fleet-filter-bar {
        animation: fleet-filter-nudge 0.85s ease-in-out 2;
    }

    @keyframes fleet-filter-nudge {

        0%,
        100% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(-18px);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .fleet-filter-bar {
            scroll-behavior: auto;
        }

        .fleet-filter-btn,
        .fleet-filter-indicator,
        .fleet-filter-scroll-hint,
        .fleet-filter-wrap.is-hinting .fleet-filter-bar {
            transition: none;
            animation: none;
        }
    }

    .fleet-filter-btn__icon {
        height: 36px;
    }

    .fleet-filter-btn__icon .fleet-filter-icon {
        max-width: 64px;
        max-height: 36px;
    }

    .fleet-filter-btn__label {
        font-size: 0.6875rem;
    }

    #home-fleet .vehicle-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    #home-fleet .vehicle-grid .vehicle-card {
        padding-bottom: 14px;
    }

    #home-fleet .vehicle-grid .vehicle-card .vehicle-card-header {
        gap: 0.5rem;
        padding: 12px 12px 8px;
    }

    #home-fleet .vehicle-grid .vehicle-card .vehicle-card-header h4 {
        font-size: 17px;
    }

    #home-fleet .vehicle-grid .vehicle-card .vehicle-card-header .vehicle-capacity {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.4rem 0.75rem;
    }

    #home-fleet .vehicle-grid .vehicle-card .vehicle-card-header .vehicle-capacity .capacity-item {
        font-size: 0.8125rem;
        gap: 0.35rem;
    }

    #home-fleet .vehicle-grid .vehicle-card .vehicle-card-header .vehicle-capacity .capacity-item svg {
        width: 18px;
        height: 18px;
    }

    #home-fleet .vehicle-grid .vehicle-card .vehicle-image.vehicle-image-slider {
        height: 220px;
    }

    #home-fleet .vehicle-grid .vehicle-card .vehicle-content {
        gap: 0.75rem;
        padding: 10px 12px 0;
    }

    #home-fleet .vehicle-grid .vehicle-card .vehicle-content .vehicle-price {
        font-size: 1.25rem;
    }

    #home-fleet .vehicle-grid .vehicle-card .booking-btns {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 10px;
        padding: 0 12px;
    }

    #home-fleet .vehicle-grid .vehicle-card .booking-btns .btn {
        display: block;
        margin: 0;
        padding: 10px 16px;
        font-size: 0.9375rem;
        box-sizing: border-box;
    }

    #home-fleet .vehicle-grid .vehicle-card .booking-btns .btn-book-now {
        flex: 0 0 100%;
        width: 100%;
    }

    #home-fleet .vehicle-grid .vehicle-card .booking-btns .btn-call-btn,
    #home-fleet .vehicle-grid .vehicle-card .booking-btns .btn-whatsapp-btn,
    #home-fleet .vehicle-grid .vehicle-card .booking-btns .btn-email-btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    #home-fleet .full-list-button-container {
        margin-top: 1.5rem;
    }

    #home-fleet .full-list-button-container .btn-full-list {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        padding: 12px 24px;
    }
}

/* Fleet — small phones */
@media (max-width: 380px) {
    #home-fleet .vehicle-grid .vehicle-card .vehicle-card-header h4 {
        font-size: 16px;
    }

    #home-fleet .vehicle-grid .vehicle-card .vehicle-card-header .vehicle-capacity .capacity-item {
        font-size: 0.75rem;
    }

    #home-fleet .vehicle-grid .vehicle-card .vehicle-image.vehicle-image-slider {
        height: 200px;
    }

    #home-fleet .vehicle-grid .vehicle-card .booking-btns .btn {
        font-size: 0.875rem;
        padding: 9px 14px;
    }
}

/******************* 
 * Fleet Detail Page
 *******************/
.vehicle-single-section {
    padding: 3rem 2rem 4rem;
    background: #f9f9f9;
    width: 100%;
    float: left;
}

.vehicle-single-container {
    max-width: 1400px;
    margin: 0 auto;
}

.vehicle-single-detail-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 3rem;
    align-items: start;
}

.vehicle-single-detail-main {
    min-width: 0;
}

.vehicle-single-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    overflow: hidden;
}

.vehicle-single-gallery--featured-only {
    grid-template-columns: 1fr;
}

.vehicle-single-gallery-main {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vehicle-single-main-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.vehicle-single-gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

.vehicle-single-thumb-img {
    width: 100%;
    flex: 1;
    min-height: 0;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.vehicle-single-info {
    padding: 0;
}

.vehicle-single-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.vehicle-single-title-meta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    flex: 1 1 420px;
}

.vehicle-single-prices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    flex: 0 0 auto;
    justify-content: flex-end;
}

.vehicle-single-prices .vehicle-price {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.vehicle-single-prices .vehicle-price span {
    font-size: 11px;
}

.vehicle-single-prices .vehicle-info {
    font-size: 0.8rem;
    margin: 0;
    color: #999;
    font-weight: 400;
}

.vehicle-single-title {
    font-family: "Outfit", sans-serif;
    font-size: clamp(1.75rem, 4vw, 2rem);
    font-weight: 700;
    color: #000;
    margin: 0;
    line-height: 1.2;
}

.vehicle-single-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9375rem;
    color: #333;
    margin: -22px 0 1rem;
}

.vehicle-single-sep {
    color: #999;
    font-weight: 400;
    user-select: none;
}

.vehicle-single-year-trim {
    font-weight: 400;
    color: #000;
}

.vehicle-single-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.vehicle-single-rating strong {
    font-weight: 700;
    color: #000;
}

.vehicle-single-star {
    color: #e6b800;
    font-size: 0.875rem;
}

.vehicle-single-trips {
    font-weight: 400;
    color: #666;
}

.vehicle-single-host {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 400;
    color: #000;
}

.vehicle-single-host-icon {
    color: #7c3aed;
    font-size: 0.875rem;
}

.vehicle-single-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.vehicle-single-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 400;
    color: #000;
}

.vehicle-single-tags .vehicle-single-tag:first-child {
    padding-left: 0;
}

.vehicle-features-block {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: clamp(1.25rem, 3vw, 2rem);
}

/* Excerpt above block editor content */
.vehicle-features-block>p:not(.wp-block-paragraph) {
    margin: 0 0 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.65;
    color: #333;
}

.vehicle-features-block .wp-block-heading,
.vehicle-features-block h2,
.vehicle-features-block h3,
.vehicle-features-block h4 {
    font-family: "Outfit", sans-serif;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 600;
    line-height: 1.35;
    color: #000;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin: 1rem 0 0.75rem;
}

.vehicle-features-block>.wp-block-heading:first-child,
.vehicle-features-block>h2:first-child,
.vehicle-features-block>h3:first-child,
.vehicle-features-block>h4:first-child {
    margin-top: 0;
}

.vehicle-features-block .wp-block-paragraph,
.vehicle-features-block p.wp-block-paragraph {
    margin: 15px 0 0;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.7;
    color: #555;
}

.vehicle-features-block .wp-block-paragraph:last-child,
.vehicle-features-block p.wp-block-paragraph:last-of-type {
    margin-bottom: 0;
}

.vehicle-features-block .wp-block-list,
.vehicle-features-block ul:not(.vehicle-single-tags) {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.vehicle-features-block .wp-block-list li,
.vehicle-features-block ul:not(.vehicle-single-tags) li {
    position: relative;
    margin: 0 0 0.4rem;
    padding: 0 0 0 1.25rem;
    font-size: 0.9875rem;
    font-weight: 300;
    line-height: 1.65;
    color: #555;
}

.vehicle-features-block .wp-block-list li:last-child,
.vehicle-features-block ul:not(.vehicle-single-tags) li:last-child {
    margin-bottom: 0;
}

.vehicle-features-block .wp-block-list li::before,
.vehicle-features-block ul:not(.vehicle-single-tags) li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #000;
}

.vehicle-features-block a {
    color: #000;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.vehicle-features-block a:hover {
    color: #555;
}

.vehicle-features-block strong,
.vehicle-features-block b {
    font-weight: 600;
    color: #000;
}

.vehicle-features-block img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
}

/* Fleet single — compact vehicle summary (tablet + mobile) */
@media (max-width: 1024px) {
    .vehicle-single-info {
        background: #fff;
        border: 1px solid #e8e8e8;
        border-radius: 12px;
        padding: 0.75rem 0.875rem 0.875rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    }

    /* Row 1: title + tags | Row 2: prices (compact) */
    .vehicle-single-title-row {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title tags"
            "prices prices";
        align-items: center;
        column-gap: 0.5rem;
        row-gap: 0.5rem;
        margin-bottom: 0;
    }

    .vehicle-single-title-meta {
        display: contents;
    }

    .vehicle-single-title {
        grid-area: title;
        font-size: 1.4375rem;
        letter-spacing: -0.02em;
        line-height: 1.15;
        margin: 0;
        min-width: 0;
    }

    .vehicle-single-tags {
        grid-area: tags;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 0.35rem;
        margin: 0;
    }

    .vehicle-single-tag {
        padding: 0.35rem 0.5rem;
        font-size: 0.8125rem;
        border-radius: 6px;
        gap: 0.35rem;
    }

    .vehicle-single-tags .vehicle-single-tag:first-child {
        padding-left: 0;
    }

    .vehicle-single-tag i {
        font-size: 0.75rem;
    }

    .vehicle-single-prices {
        grid-area: prices;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 0.5rem 1rem;
        width: auto;
        justify-content: flex-start;
    }

    .vehicle-single-prices .vehicle-price {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.2rem;
        row-gap: 0;
        font-size: 1.125rem;
        line-height: 1.15;
        white-space: nowrap;
        max-width: fit-content;
    }

    .vehicle-single-prices .vehicle-price+.vehicle-price {
        padding-left: 1rem;
        border-left: 1px solid #e5e5e5;
    }

    .vehicle-single-prices .vehicle-price span {
        font-size: 0.6875rem;
        font-weight: 700;
    }

    .vehicle-single-prices .vehicle-info {
        flex: 0 0 100%;
        font-size: 0.6875rem;
        color: #999;
        margin: 0;
        line-height: 1.2;
    }

    .vehicle-single-detail-grid {
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .vehicle-single-detail-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .vehicle-single-title {
        font-size: 1.375rem;
    }

    .vehicle-single-gallery {
        grid-template-columns: 1fr;
    }

    .vehicle-single-gallery-thumbs {
        flex-direction: row;
    }

    .vehicle-single-gallery-thumbs .vehicle-single-thumb-img {}

    .vehicle-features-block {
        padding: 1.25rem 1rem;
    }

    .vehicle-features-block .wp-block-heading,
    .vehicle-features-block h2,
    .vehicle-features-block h3,
    .vehicle-features-block h4 {
        margin-top: 1.5rem;
        font-size: 1.0625rem;
    }

    .vehicle-features-block>.wp-block-heading:first-child,
    .vehicle-features-block>h2:first-child,
    .vehicle-features-block>h3:first-child,
    .vehicle-features-block>h4:first-child {
        margin-top: 0;
    }
}

/************************************************
 * Seller / Contact CTA card (right sidebar)
 *************************************************/
.vehicle-seller-cta-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin: 1rem 0;
}

.vehicle-seller-cta-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.vehicle-seller-cta-brand {
    flex: 1;
    min-width: 0;
}

.vehicle-seller-cta-name {
    font-size: 1.125rem;
    font-weight: 500;
    color: #121214;
    margin: -4px 0 0.25rem 0;
    line-height: 1.3;
    text-transform: capitalize;
}

.vehicle-seller-cta-more-ads {
    font-size: 0.9375rem;
    color: #1a73e8;
    text-decoration: none;
}

.vehicle-seller-cta-more-ads:hover {
    text-decoration: underline;
}

.vehicle-seller-cta-logo {
    flex-shrink: 0;
}

.vehicle-seller-cta-logo img {
    display: block;
    height: auto;
    max-height: 28px;
}

.vehicle-seller-cta-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.vehicle-seller-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: #5f6368;
    background: #f1f3f4;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
}

.vehicle-seller-cta-badge i {
    font-size: 0.75rem;
}

.vehicle-seller-cta-badge-responsive i {
    color: #1e8e3e;
}

.vehicle-seller-cta-badge-verified i {
    color: #1a73e8;
}

.vehicle-seller-cta-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.vehicle-seller-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 300;
    text-decoration: none;
    border-radius: 999px;
    transition: opacity 0.2s;
}

.vehicle-seller-cta-btn:hover {
    opacity: 0.9;
}

.vehicle-seller-cta-btn-whatsapp {
    background: #25d366;
    color: #fff;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
}

.vehicle-seller-cta-btn-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vehicle-seller-cta-btn-call {
    background: #06357a;
    color: #fff;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
}

.vehicle-seller-cta-btn-email {
    background: #fff;
    color: #06357a;
    border: 1px solid #06357a;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
}

.vehicle-seller-cta-btn svg {
    display: block;
    width: 20px;
    height: 20px;
}

.vehicle-detail-right {
    position: sticky;
    /* Clear sticky header so sidebar title ("Start Your Trip") is not cut off when scrolling */
    top: 7rem;
}

.vehicle-sidebar-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem;
}

.vehicle-sidebar-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 1.25rem 0;
}

.vehicle-sidebar-pricing {
    margin-bottom: 0;
}

.vehicle-sidebar-price-line {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
}

.vehicle-sidebar-price-old {
    color: #999;
    text-decoration: line-through;
    margin-right: 0.5rem;
}

.vehicle-sidebar-price-total {
    font-weight: 700;
    color: #333;
}

.vehicle-sidebar-price-amount {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.vehicle-sidebar-price-note {
    font-size: 0.875rem;
    color: #999;
    margin: 0;
}

.vehicle-sidebar-block {
    margin: 0;
}

.vehicle-sidebar-block .vehicle-detail-heading {
    margin-bottom: 0.75rem;
}

.vehicle-booking-step {
    margin: 10px 0 0;
}

.vehicle-sidebar-field {
    margin-bottom: 0.5rem;
}

.vehicle-sidebar-field:last-child {
    margin-bottom: 0;
}

.vehicle-sidebar-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: #333;
    margin-bottom: 0.3rem;
}

.vehicle-sidebar-input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.vehicle-sidebar-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.vehicle-sidebar-input {
    width: 100%;
    padding: 0.6rem 2rem 0.625rem 1.8rem;
    font-size: 0.8rem;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 6px;
    appearance: none;
}

.vehicle-sidebar-input-arrow {
    position: absolute;
    right: 0.75rem;
    font-size: 0.75rem;
    color: #666;
    pointer-events: none;
}

.vehicle-sidebar-location-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.vehicle-sidebar-location-text {
    font-size: 0.9375rem;
    color: #333;
}

.vehicle-sidebar-edit-btn {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #f0f0f0;
    border: none;
    border-radius: 6px;
    color: #666;
    cursor: pointer;
    font-size: 0.75rem;
}

.vehicle-sidebar-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
}

.vehicle-sidebar-alert-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #c00;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
}

.vehicle-sidebar-alert-text {
    font-size: 0.9375rem;
    color: #c00;
    font-weight: 500;
}

.vehicle-detail-continue-btn {
    display: block;
    width: 100%;
    padding: 0.8rem 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    background: #06357a;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin: 0;
}

/************************************************
 * Fleet single: Booking type tabs (same structure as index.php)
 *************************************************/
.vehicle-sidebar-card .booking-tabs {
    margin-bottom: 0;
    text-align: left;
}

.vehicle-sidebar-card .booking-tabs .tabs-left {
    display: flex;
    gap: 0.25rem;
}

.vehicle-sidebar-card .booking-tabs .tabs-left .tab-btn {
    flex: 1;
    padding: 8px 12px;
    background: #f5f5f5;
    color: #b0b0b0;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 400;
    font-family: "Outfit", sans-serif;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.vehicle-sidebar-card .booking-tabs .tabs-left .tab-btn svg {
    flex-shrink: 0;
}

.vehicle-sidebar-card .booking-tabs .tabs-left .tab-btn:hover {
    color: #000;
}

.vehicle-sidebar-card .booking-tabs .tabs-left .tab-btn.active {
    background: #fff;
    color: #000000;
    border-color: #ddd;
}

.vehicle-sidebar-card .booking-tabs .tabs-left .tab-btn.active svg,
.vehicle-sidebar-card .booking-tabs .tabs-left .tab-btn:hover svg {
    fill: #000000;
}

.vehicle-sidebar-input.full-width {
    width: 100%;
}

.vehicle-booking-step .vehicle-sidebar-field {
    margin-bottom: 0.5rem;
}

.vehicle-booking-next-btn,
.vehicle-booking-back-btn,
.vehicle-booking-submit-btn {
    margin-top: 1rem;
}

.vehicle-booking-step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.vehicle-booking-step-actions .vehicle-detail-continue-btn {
    flex: 1;
    min-width: 120px;
}

.vehicle-payment-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vehicle-payment-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: #333;
    cursor: pointer;
}

.vehicle-payment-option input {
    margin: 0;
}

.vehicle-sidebar-field .required {
    color: #c00;
}

.vehicle-booking-payment-note {
    font-size: 0.875rem;
    color: #666;
    margin: 0 0 1rem;
}

/************************************************
 * Fleet booking - payment step (checkout-style)
 *************************************************/
.vehicle-payment-step {
    margin-top: 0.25rem;
}

.vehicle-payment-step-head {
    margin-bottom: 1rem;
}

.vehicle-payment-step-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #06357a;
    background: rgba(6, 53, 122, 0.08);
    border: 1px solid rgba(6, 53, 122, 0.15);
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
    margin-bottom: 0.5rem;
}

.vehicle-payment-step .vehicle-payment-step-title {
    margin-bottom: 0.4rem;
}

.vehicle-payment-step-lead {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #5f6368;
    margin: 0;
}

.vehicle-payment-trust-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

@media (max-width: 420px) {
    .vehicle-payment-trust-bar {
        grid-template-columns: 1fr;
    }
}

.vehicle-payment-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.7rem;
    background: linear-gradient(180deg, #fafbfc 0%, #f4f6f8 100%);
    border: 1px solid #e8eaed;
    border-radius: 8px;
    min-height: 100%;
}

.vehicle-payment-trust-icon {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e0e3e7;
    border-radius: 6px;
    color: #06357a;
}

.vehicle-payment-trust-icon .vehicle-payment-svg {
    width: 0.875rem;
    height: 0.875rem;
    display: block;
}

.vehicle-payment-trust-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.75rem;
    line-height: 1.3;
    color: #3c4043;
}

.vehicle-payment-trust-text strong {
    font-weight: 600;
    font-size: 0.8125rem;
    color: #202124;
}

.vehicle-payment-trust-sub {
    font-size: 0.6875rem;
    color: #80868b;
}

.vehicle-payment-card-panel {
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08), 0 2px 8px rgba(60, 64, 67, 0.06);
    padding: 1rem 1rem 0.85rem;
    margin-bottom: 0.85rem;
}

.vehicle-payment-card-panel-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #eceff1;
}

.vehicle-payment-card-label {
    margin: 0 0 0.2rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #202124;
}

.vehicle-payment-card-hint {
    margin: 0;
    font-size: 0.75rem;
    color: #80868b;
    line-height: 1.35;
}

.vehicle-payment-brands {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.vehicle-payment-brand {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.45rem;
    border-radius: 4px;
    border: 1px solid #e8eaed;
    background: #f8f9fa;
    color: #5f6368;
}

.vehicle-payment-brand--visa {
    color: #1a1f71;
    border-color: rgba(26, 31, 113, 0.2);
    background: rgba(26, 31, 113, 0.06);
}

.vehicle-payment-brand--mc {
    color: #eb001b;
    border-color: rgba(235, 0, 27, 0.2);
    background: rgba(235, 0, 27, 0.05);
}

.vehicle-payment-brand--amex {
    color: #006fcf;
    border-color: rgba(0, 111, 207, 0.2);
    background: rgba(0, 111, 207, 0.06);
}

.vehicle-payment-stripe-field {
    margin-bottom: 0;
}

.vehicle-payment-fine-print {
    font-size: 0.75rem;
    line-height: 1.45;
    color: #80868b;
    margin: 0 0 0.25rem;
}

.vehicle-payment-step-actions .vehicle-payment-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.vehicle-payment-step-actions .vehicle-payment-primary-btn .vehicle-payment-svg--btn {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    opacity: 0.95;
    display: block;
}

.vehicle-stripe-element {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    min-height: 44px;
}

.vehicle-payment-card-panel .vehicle-stripe-element {
    padding: 0.85rem 0.95rem;
    border-color: #ced4da;
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vehicle-payment-card-panel .vehicle-stripe-element:focus-within {
    border-color: #06357a;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(6, 53, 122, 0.12);
}

.vehicle-stripe-errors {
    font-size: 0.875rem;
    color: #c00;
    margin-top: 0.5rem;
}

#vehicle-booking-sidebar {
    position: relative;
}

/************************************************
 * Similar Fleet Section (fleet single page)
 *************************************************/
#similar-fleet.similar-fleet-section {
    background: #fff;
    padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem) clamp(2.5rem, 5vw, 4rem);
    width: 100%;
    float: left;
}

#similar-fleet h3 {
    text-align: center;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
    line-height: 1.25;
    color: #111;
    margin-bottom: 48px;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

#similar-fleet h3 strong {
    color: #06357a;
    font-weight: 500;
}

.similar-fleet-inner {
    margin-top: 0;
    padding: 0;
}

.similar-fleet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    max-width: 100%;
}

.similar-fleet-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #eee;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 0 0 1.25rem;
}

.similar-fleet-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

#similar-fleet .similar-fleet-card-title {
    font-size: 1.125rem;
    font-weight: 500;
    color: #333;
    margin: 0;
    padding: 1rem;
    text-align: center;
    line-height: 1.2;
}

#similar-fleet .similar-fleet-card-desc {
    font-size: 0.9375rem;
    color: #666;
    margin: 0 0 0.5rem;
    padding: 0 1rem;
    text-align: center;
}

.similar-fleet-card-image {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
    aspect-ratio: 16 / 10;
}

.similar-fleet-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.similar-fleet-card-content {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

#similar-fleet .vehicle-capacity {
    display: flex;
    gap: 1rem;
    margin-bottom: 0;
}

#similar-fleet .vehicle-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0;
    white-space: nowrap;
}

#similar-fleet .vehicle-price span {
    font-size: 11px;
}

#similar-fleet .vehicle-info {
    font-size: 0.6rem;
    margin: 0;
    color: #666;
}

.similar-fleet-card-link {
    display: block;
    text-align: center;
    margin: 0 1rem;
    padding: 0.5rem 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #06357a;
    text-decoration: none;
    border: 1px solid #06357a;
    border-radius: 6px;
    transition: background 0.2s ease, color 0.2s ease;
}

.similar-fleet-card-link:hover {
    background: #06357a;
    color: #fff;
}

/* Similar fleet slider (reuse vehicle slider height) */
#similar-fleet .vehicle-image-slider {
    height: 300px;
}

@media (max-width: 992px) {
    .similar-fleet-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (max-width: 768px) {
    .similar-fleet-grid {
        gap: 1rem;
    }

    #similar-fleet h3 {
        font-size: 1.5rem;
    }

    .similar-fleet-card-content {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    #similar-fleet .vehicle-price {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    #similar-fleet .vehicle-image-slider {
        height: 200px;
    }
}

/* Fleet single: Book Now — phones only (hidden on tablet 768px+ and desktop) */
.vehicle-single-booking-cta {
    display: none;
}

@media (min-width: 768px) {
    .vehicle-single-booking-cta {
        display: none !important;
    }
}

.vehicle-single-booking-cta .btn-book-now {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #fff;
    background: #06357a;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(6, 53, 122, 0.25);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.vehicle-single-booking-cta .btn-book-now:hover {
    background: #052a61;
}

.vehicle-single-booking-cta .btn-book-now:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(6, 53, 122, 0.2);
}

@media (max-width: 767px) {
    .vehicle-single-section {
        padding: 1.25rem 0 2.5rem;
    }

    .vehicle-single-gallery {
        margin-left: 1rem;
        margin-right: 1rem;
        margin-bottom: 0.75rem;
    }

    .vehicle-single-info {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0.75rem;
        padding: 1rem 1rem 0.875rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
    }

    .vehicle-single-title-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "tags"
            "prices";
        align-items: stretch;
        row-gap: 0.625rem;
        column-gap: 0;
    }

    .vehicle-single-title {
        font-size: 1.375rem;
        line-height: 1.25;
    }

    .vehicle-single-tags {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.4rem 0.65rem;
    }

    .vehicle-single-tags .vehicle-single-tag:first-child {
        padding-left: 0.35rem;
    }

    .vehicle-single-prices {
        width: 100%;
        padding-top: 0.5rem;
        margin-top: 0.125rem;
        border-top: 1px solid #f0f0f0;
    }

    .vehicle-detail-left,
    .vehicle-detail-right {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .vehicle-detail-right .vehicle-sidebar-card {
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin-left: -1rem;
        margin-right: -1rem;
        width: calc(100% + 2rem);
    }

    .vehicle-single-booking-cta {
        display: block !important;
        margin-top: 0.625rem;
        padding-top: 0;
    }

    .vehicle-single-booking-cta .btn-book-now {
        min-height: 44px;
        padding: 0.75rem 1rem;
        font-size: 0.9375rem;
    }
}

/***********************
 * Home content blocks (zigzag + excellence showcase)
 ***********************/
.content-blocks-section {
    background: #ffffff;
    padding: 4rem 2rem;
    width: 100%;
    float: left;
}

.content-blocks-section .container {
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(4rem, 8vw, 4rem);
}

.content-blocks-list {
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 6vw, 5rem);
}

/* Gutenberg block markup for home zigzag rows (matches .content-block layout; scoped to avoid affecting other pages) */
#home-content-blocks .wp-block-group.zigzag>.wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 6vw, 5rem);
}

#home-content-blocks .wp-block-group.zigzag .wp-block-columns {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: clamp(2rem, 5vw, 4.5rem);
}

#home-content-blocks .wp-block-group.zigzag .wp-block-columns .wp-block-list {
    margin: 0 0 15px 20px;
}

#home-content-blocks .wp-block-group.zigzag .wp-block-columns .wp-block-list li {
    margin: 0;
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    font-weight: 300;
    line-height: 1.65;
    color: #777777;
}

#home-content-blocks .wp-block-group.zigzag .wp-block-columns .wp-block-list li strong {
    font-weight: 500;
}

#home-content-blocks .wp-block-group.zigzag .wp-block-columns .wp-block-list li:not(:last-child) {
    margin-bottom: clamp(0.25rem, 3vw, 0.5rem) !important;
}

#home-content-blocks .wp-block-group.zigzag .wp-block-columns:nth-child(even) {
    flex-direction: row-reverse;
}

#home-content-blocks .wp-block-group.zigzag .wp-block-columns>.wp-block-column {
    flex: 1 1 50%;
    min-width: 0;
}

#home-content-blocks .wp-block-group.zigzag .wp-block-columns>.wp-block-column:has(.wp-block-heading) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#home-content-blocks .wp-block-group.zigzag .wp-block-columns>.wp-block-column:has(figure) {
    display: flex;
    flex-direction: column;
}

#home-content-blocks .wp-block-group.zigzag .wp-block-heading {
    margin: 0 0 1.25rem;
    font-size: clamp(1.5rem, 2.8vw, 1.25rem);
    font-weight: 500;
    line-height: 1.25;
    color: #000000;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

#home-content-blocks .wp-block-group.zigzag .wp-block-column:has(.wp-block-heading) .wp-block-paragraph {
    margin: 0;
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    font-weight: 300;
    line-height: 1.65;
    color: #777777;
}

#home-content-blocks .wp-block-group.zigzag .wp-block-column:has(.wp-block-heading) .wp-block-paragraph strong {
    font-weight: 600;
    color: #000;
    font-size: 20px;
}

#home-content-blocks .wp-block-group.zigzag .wp-block-column:has(.wp-block-heading) .wp-block-paragraph:not(:last-child) {
    margin-bottom: 1rem;
}

#home-content-blocks .wp-block-group.zigzag .wp-block-columns figure.wp-block-image,
#home-content-blocks .wp-block-group.zigzag .wp-block-columns figure.wp-block-image:where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    align-self: stretch;
    min-height: max(100%, 24rem);
}

#home-content-blocks .wp-block-group.zigzag .wp-block-columns figure.wp-block-image img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.content-block {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: clamp(2rem, 5vw, 4.5rem);
}

.content-block:nth-child(even) {
    flex-direction: row-reverse;
}

.content-block .content-block__body {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-block .content-block__body h2 {
    margin: 0 0 1.25rem;
    font-size: clamp(1.5rem, 2.8vw, 2.25rem);
    font-weight: 500;
    line-height: 1.25;
    color: #000000;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.content-block .content-block__body .content-block__text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.content-block .content-block__body .content-block__text p {
    margin: 0;
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    font-weight: 300;
    line-height: 1.65;
    color: #777777;
}

.content-blocks-list .content-block__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: content-block-step;
    text-align: left;
    width: 100%;
}

.content-blocks-list .content-block__steps li {
    counter-increment: content-block-step;
}

.content-blocks-list .content-block__steps li:not(:last-child) {
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.content-blocks-list .content-block__steps li h3 {
    margin: 0 0 0.5rem;
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    font-weight: 500;
    line-height: 1.4;
    color: #17171a;
}

.content-blocks-list .content-block__steps li h3::before {
    content: counter(content-block-step) ". ";
}

.content-blocks-list .content-block__steps li p {
    margin: 0;
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    font-weight: 300;
    line-height: 1.65;
    color: #777777;
}

/* .content-blocks-list .content-block__services {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

.content-blocks-list .content-block__services li:not(:last-child) {
    margin-bottom: clamp(0.25rem, 3vw, 1rem);
}

.content-blocks-list .content-block__services li h3 {
    margin: 0 0 0.5rem;
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    font-weight: 500;
    line-height: 1.4;
    color: #17171a;
}

.content-blocks-list .content-block__services li p {
    margin: 0;
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    font-weight: 300;
    line-height: 1.65;
    color: #777777;
} */

.content-block figure {
    flex: 1 1 50%;
    min-width: 0;
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    align-self: stretch;
    min-height: max(100%, 24rem);
}

.content-block figure img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Tablet */
@media (max-width: 1024px) {
    .content-blocks-section {
        padding: 3rem 1.5rem 0;
    }

    .content-block {
        gap: 2rem;
    }

    .content-block figure {
        border-radius: 20px;
    }

    #home-content-blocks .wp-block-group.zigzag .wp-block-columns {
        gap: 2rem;
    }

    #home-content-blocks .wp-block-group.zigzag .wp-block-columns figure.wp-block-image {
        border-radius: 20px;
    }
}

/* Mobile: stack with image above text */
@media (max-width: 768px) {
    .content-blocks-section {
        padding: 2.5rem 1rem 0;
    }

    .content-blocks-list {
        gap: 1.5rem;
    }

    #home-content-blocks .wp-block-group.zigzag>.wp-block-group__inner-container {
        gap: 1.5rem;
    }

    #home-content-blocks .wp-block-group.zigzag .wp-block-columns,
    #home-content-blocks .wp-block-group.zigzag .wp-block-columns:nth-child(even) {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
    }

    #home-content-blocks .wp-block-group.zigzag .wp-block-columns>.wp-block-column:has(figure) {
        order: -1;
    }

    #home-content-blocks .wp-block-group.zigzag .wp-block-columns>.wp-block-column {
        flex: none;
        width: 100%;
    }

    #home-content-blocks .wp-block-group.zigzag .wp-block-columns>.wp-block-column:has(.wp-block-heading) {
        justify-content: flex-start;
    }

    #home-content-blocks .wp-block-group.zigzag .wp-block-heading {
        margin-bottom: 1rem;
        font-size: 1.375rem;
    }

    #home-content-blocks .wp-block-group.zigzag .wp-block-columns figure.wp-block-image {
        flex: none;
        width: 100%;
        position: static;
        border-radius: 18px;
        min-height: 0;
        align-self: auto;
    }

    #home-content-blocks .wp-block-group.zigzag .wp-block-columns figure.wp-block-image img {
        position: static;
        width: 100%;
        height: auto;
        min-height: 12.5rem;
        object-fit: cover;
        object-position: center;
    }

    .content-block,
    .content-block:nth-child(even) {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
    }

    .content-block .content-block__body {
        order: 0;
        flex: none;
        width: 100%;
        justify-content: flex-start;
    }

    .content-block .content-block__body h2 {
        margin-bottom: 1rem;
        font-size: 1.375rem;
    }

    .content-block>figure {
        order: -1;
        flex: none;
        width: 100%;
        position: static;
        border-radius: 18px;
        min-height: 0;
        align-self: auto;
    }

    .content-block>figure img {
        position: static;
        width: 100%;
        height: auto;
        min-height: 12.5rem;
        object-fit: cover;
        object-position: center;
    }

    .content-blocks-section .container {
        gap: clamp(2rem, 8vw, 2rem);
    }
}

/* Excellence showcase (title, hero image, feature grid) */
.content-showcase {
    width: 100%;
    text-align: center;
}

.content-showcase h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 500;
    line-height: 1.25;
    color: #111;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.content-showcase h2 strong {
    color: #06357a;
    font-weight: 500;
}

.content-showcase p {
    margin: 0;
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    font-weight: 300;
    line-height: 1.65;
    color: #777777;
}

.content-showcase figure {
    margin: clamp(1.5rem, 5vw, 1rem) 0 clamp(2.5rem, 5vw, 2rem);
    border-radius: 24px;
    overflow: hidden;
}

.content-showcase figure img {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    object-position: center;
}

.content-showcase .content-showcase__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 2vw, 3.5rem) clamp(2rem, 5vw, 4rem);
    max-width: 56rem;
    margin: 0 auto;
    text-align: center;
}

.content-showcase .content-showcase__grid div {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.content-showcase .content-showcase__grid div h3 {
    margin: 0;
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 500;
    line-height: 1.35;
    color: #17171a;
    text-wrap: balance;
}

.content-showcase .content-showcase__grid div p {
    margin: 0;
    font-size: clamp(0.9375rem, 1.4vw, 1rem);
    font-weight: 300;
    line-height: 1.65;
    color: #777777;
}

@media (max-width: 1024px) {
    .content-showcase figure {
        border-radius: 20px;
    }

    .content-showcase figure img {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 768px) {
    .content-showcase h2 {
        margin-bottom: 1.5rem;
    }

    .content-showcase h2 {
        font-size: 1.5rem;
    }

    .content-showcase figure {
        margin-bottom: 2rem;
        border-radius: 18px;
    }

    .content-showcase figure img {
        aspect-ratio: 4 / 3;
    }

    .content-showcase .content-showcase__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 100%;
    }

    .content-showcase .content-showcase__grid article h3 {
        font-size: 1.125rem;
    }
}


/* ***********************
 * 5 Features Section
 ***********************/
.five-features-section {
    width: 100%;
    background: #ffffff;
}

.five-features-grid,
.wp-block-group.five-features-section .wp-block-columns {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(1.5rem, 3vw, 2rem);
    text-align: center;
    margin: 0;
}

.five-feature-item,
.wp-block-group.five-features-section .wp-block-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 0;
}

.five-feature-icon {
    margin: 0 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.five-feature-icon img,
.five-feature-icon svg {
    width: 100%;
    height: auto;
    display: block;
}

.five-feature-icon svg {
    color: #000;
}

.five-feature-icon svg path {
    fill: currentColor;
}

.five-feature-heading,
.wp-block-group.five-features-section .wp-block-heading {
    margin: 0 0 0.75rem;
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    font-weight: 500;
    line-height: 1.4;
    color: #17171a;
    text-wrap: balance;
}

.five-feature-text,
.wp-block-group.five-features-section .wp-block-paragraph {
    margin: 0;
    font-size: clamp(0.9375rem, 1.4vw, 1rem);
    font-weight: 300;
    line-height: 1.65;
    color: #777777;
}

/* Responsive Design for Five Features Section */
@media (max-width: 1200px) {

    .five-features-grid,
    .wp-block-group.five-features-section .wp-block-columns {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(1.25rem, 3vw, 2rem);
    }
}

@media (max-width: 1024px) {

    .five-features-grid,
    .wp-block-group.five-features-section .wp-block-columns {
        grid-template-columns: repeat(2, 1fr);
    }

    .five-features-grid .five-feature-item:last-child:nth-child(odd),
    .wp-block-group.five-features-section .wp-block-columns .wp-block-column:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 1rem);
        max-width: 100%;
    }
}

@media (max-width: 768px) {

    .five-features-grid,
    .wp-block-group.five-features-section .wp-block-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .five-features-grid .five-feature-item:last-child:nth-child(odd),
    .wp-block-group.five-features-section .wp-block-columns .wp-block-column:last-child:nth-child(odd) {
        width: calc(50% - 0.75rem);
    }

    .five-feature-heading,
    .wp-block-group.five-features-section .wp-block-heading {
        font-size: 1.0625rem;
    }
}

@media (max-width: 640px) {

    .five-features-grid,
    .wp-block-group.five-features-section .wp-block-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 0.75rem;
    }

    .five-features-grid .five-feature-item:last-child:nth-child(odd),
    .wp-block-group.five-features-section .wp-block-columns .wp-block-column:last-child:nth-child(odd) {
        width: calc(50% - 0.375rem);
    }

    .five-feature-heading,
    .wp-block-group.five-features-section .wp-block-heading {
        font-size: 0.9375rem;
    }

    .five-feature-text,
    .wp-block-group.five-features-section .wp-block-paragraph {
        font-size: 0.875rem;
    }

    .five-feature-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 0.75rem;
    }
}

/***********************
 * Reviews Section
 ***********************/
.reviews-section {
    background: #f5f5f5;
    padding: 4rem 0;
    overflow: hidden;
    float: left;
    width: 100%;
}

.reviews-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 3rem;
    gap: 2rem;
}

.reviews-header-content {
    flex: 1;
}

.reviews-header-content h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 500;
    line-height: 1.25;
    color: #111;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.reviews-header-content h2 strong {
    color: #06357a;
    font-weight: 500;
}

.reviews-header-content p {
    margin: 0;
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    font-weight: 300;
    line-height: 1.65;
    color: #777777;
}

.trustpilot-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.rating-text {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.rating-star {
    color: #00b67a;
    font-size: 1.2rem;
}

.trustpilot-text {
    font-size: 1rem;
    font-weight: 600;
    color: #00b67a;
}

.reviews-scroll-container {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.reviews-track {
    display: flex;
    gap: 1.5rem;
    animation: scroll-reviews 40s linear infinite;
    width: fit-content;
}

.review-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    min-width: 380px;
    max-width: 380px;
    border: 1px solid #e8eaed;
    flex-shrink: 0;
}

.review-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e8eaed;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.author-avatar i {
    color: #5f6368;
    font-size: 1.2rem;
}

.author-info {
    flex: 1;
}

.author-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.review-stars {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.review-star {
    display: block;
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.review-star--filled {
    color: #ff9500;
}

.review-star--filled path {
    fill: currentColor;
}

.review-star--empty {
    color: #f5ebe0;
}

.review-star--empty path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

/* Infinite Scroll Animation */
@keyframes scroll-reviews {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Pause animation on hover */
.reviews-scroll-container:hover .reviews-track {
    animation-play-state: paused;
}

/* Responsive Design for Reviews Section */
@media (max-width: 1200px) {
    .reviews-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .trustpilot-rating {
        margin-top: 1rem;
    }
}

@media (max-width: 968px) {
    .reviews-section {
        padding: 3rem 0;
        margin-top: 3rem;
    }

    .reviews-container {
        padding: 0 1.5rem;
    }

    .review-card {
        min-width: 320px;
        max-width: 320px;
        padding: 1.5rem;
    }
}

@media (max-width: 640px) {
    .reviews-section {
        padding: 2rem 0;
        margin-top: 2rem;
    }

    .reviews-container {
        padding: 0 1rem;
    }

    .reviews-header {
        margin-bottom: 2rem;
    }

    .review-card {
        min-width: 280px;
        max-width: 280px;
        padding: 1.25rem;
    }

    .review-text {
        font-size: 0.875rem;
    }

    .author-name {
        font-size: 0.875rem;
    }
}

/***********************
 * FAQ Section
 ***********************/
.faq-section {
    background: #ffffff;
    padding: 80px 0 100px;
    width: 100%;
    max-width: 100%;
    float: left;
}

.faq-section .container {
    width: 100%;
    max-width: 900px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.faq-list,
.faq-item,
.faq-question,
.faq-answer,
.faq-answer-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.faq-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
    line-height: 1.25;
    color: #111;
    margin-bottom: 48px;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.faq-title strong {
    color: var(--primary-info);
    font-weight: 500;
}

.faq-list {
    border-top: 1px solid var(--border);
}

.faq-empty {
    margin: 0;
    padding: 28px 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #666;
}

.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 28px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    white-space: normal;
    transition: opacity 0.2s ease;
}

.faq-question:hover {
    opacity: 0.75;
}

@media (hover: none) {
    .faq-question:hover {
        opacity: 1;
    }

    .faq-question:active {
        opacity: 0.7;
    }
}

.faq-question-text {
    display: block;
    font-size: clamp(1rem, 2vw, 1.125rem);
    font-weight: 600;
    line-height: 1.45;
    color: #17171a;
    flex: 1;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.faq-icon {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.faq-icon-line {
    position: absolute;
    top: 50%;
    left: 50%;
    background: #17171a;
    border-radius: 1px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-icon-line--horizontal {
    width: 14px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.faq-icon-line--vertical {
    width: 2px;
    height: 14px;
    transform: translate(-50%, -50%) scaleY(1);
    transform-origin: center;
}

.faq-item.active .faq-icon-line--vertical {
    transform: translate(-50%, -50%) scaleY(0);
    opacity: 0;
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}

.faq-answer-inner {
    overflow: hidden;
    min-height: 0;
}

.faq-answer-inner p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--tertiary);
    font-weight: 400;
    padding-bottom: 28px;
    margin: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s,
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
}

.faq-item.active .faq-answer-inner p {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1024px) {
    .faq-section {
        padding: 64px 0 80px;
    }

    .faq-title {
        margin-bottom: 36px;
    }

    .faq-question {
        align-items: flex-start;
        padding: 24px 0;
        gap: 16px;
        min-height: 48px;
    }

    .faq-icon {
        margin-top: 3px;
    }
}

@media (max-width: 640px) {
    .faq-section {
        padding: 48px 0 64px;
    }

    .faq-section .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .faq-title {
        font-size: clamp(1.625rem, 7vw, 2rem);
        margin-bottom: 28px;
        line-height: 1.3;
    }

    .faq-question {
        padding: 20px 0;
        gap: 14px;
    }

    .faq-question-text {
        font-size: 1rem;
        line-height: 1.5;
        padding-right: 4px;
    }

    .faq-icon {
        width: 22px;
        height: 22px;
        margin-top: 2px;
    }

    .faq-icon-line--horizontal {
        width: 12px;
    }

    .faq-icon-line--vertical {
        height: 12px;
    }

    .faq-answer-inner p {
        padding-bottom: 20px;
        font-size: 0.9375rem;
        line-height: 1.65;
    }
}

@media (prefers-reduced-motion: reduce) {

    .faq-answer,
    .faq-answer-inner p,
    .faq-icon-line {
        transition: none;
    }
}

/***********************
 * Footer
 ***********************/
.main-footer {
    background: #ffffff;
    color: #333333;
    margin-top: auto;
    border-top: 1px solid #e8e8e8;
    width: 100%;
    float: left;
}

.footer-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem 2.5rem;
}

.footer-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Top row: logo + social */
.footer-social-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1.75rem 0 1.5rem;
    border-bottom: 1px solid #e8e8e8;
}

.footer-social-logo {
    display: inline-flex;
    flex-shrink: 0;
}

.footer-social-logo img {
    display: block;
    width: auto;
    max-width: 160px;
    height: auto;
}

.footer-social-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.footer-social-label {
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    user-select: none;
}

.footer-social-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #17171a;
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.footer-social-icon:hover {
    color: #06357a;
}

.footer-email-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #17171a;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    transition: color 0.2s ease;
}

.footer-email-link:hover {
    color: #06357a;
}

/* Link columns */
.footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 2rem 0;
    border-bottom: 1px solid #e8e8e8;
}

.footer-column {
    min-width: 0;
}

.footer-title {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #333;
    line-height: 1.35;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    user-select: none;
}

.footer-title span:first-child {
    flex: 1;
}

.accordion-icon {
    display: none;
    font-size: 1.25rem;
    font-weight: 300;
    color: #17171a;
    line-height: 1;
    transition: transform 0.25s ease;
}

.footer-column.active .accordion-icon {
    transform: rotate(45deg);
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.footer-links a {
    color: #777777;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.6;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #06357a;
}

.footer-links li:last-child a {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #06357a;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Map */
.footer-brand-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    padding-top: 2rem;
}

.main-footer .map-section {
    width: 100%;
}

.main-footer .map-wrapper {
    width: 100%;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    background: #ffffff;
}

.main-footer .map-wrapper iframe {
    display: block;
    width: 100%;
    height: 200px;
    border: 0;
}

/* Bottom: legal, contact, copyright */
.footer-bottom-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    text-align: center;
}

.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.5rem;
    max-width: 100%;
}

.footer-legal-links a {
    color: #777777;
    font-size: 0.8125rem;
    font-weight: 300;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-legal-links a:hover {
    color: #06357a;
}

.footer-legal-links .separator {
    color: #d0d0d0;
    font-weight: 300;
    user-select: none;
}

.footer-contact-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    max-width: 52rem;
}

.footer-contact-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: #17171a;
    line-height: 1.35;
}

.footer-contact-address,
.footer-contact-phone {
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.6;
    color: #777777;
    text-align: left;
}

.footer-contact-address svg,
.footer-contact-phone svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: #17171a;
}

.footer-contact-phone a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact-phone a:hover {
    color: #06357a;
}

.main-footer .copyright {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    font-weight: 300;
    color: #777777;
}

/* Tablet */
@media (max-width: 1024px) {
    .footer-main {
        padding: 0 1.5rem 2rem;
    }

    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem 1.5rem;
    }

    .main-footer .map-wrapper iframe {
        height: 260px;
    }
}

@media (max-width: 768px) {
    .footer-social-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.5rem 0 1.25rem;
    }

    .footer-social-actions {
        justify-content: center;
    }

    .main-footer .map-wrapper iframe {
        height: 240px;
    }

    .footer-contact-address,
    .footer-contact-phone {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-contact-address svg,
    .footer-contact-phone svg {
        margin-top: 0;
    }
}

/* Mobile: accordion columns */
@media (max-width: 640px) {
    .footer-main {
        padding: 0 1rem 1.75rem;
    }

    .footer-social-logo img {
        max-width: 140px;
    }

    .footer-columns {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
    }

    .footer-column {
        border-bottom: 1px solid #e8e8e8;
    }

    .footer-column:last-child {
        border-bottom: none;
    }

    .footer-title {
        margin-bottom: 0;
        padding: 1rem 0;
        cursor: pointer;
    }

    .accordion-icon {
        display: block;
    }

    .footer-links {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0;
        transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.25s ease;
    }

    .footer-column.active .footer-links {
        max-height: 500px;
        opacity: 1;
        padding-bottom: 1rem;
    }

    .footer-brand-section {
        padding-top: 1.5rem;
        gap: 1.25rem;
    }

    .main-footer .map-wrapper iframe {
        height: 220px;
    }

    .footer-legal-links {
        gap: 0.25rem 0.4rem;
    }

    .footer-legal-links a {
        font-size: 0.75rem;
    }

    .footer-contact-title {
        font-size: 1rem;
    }
}



/***************************
Booking Form Search Page
***************************/
.trip-plan-section {
    background: #f5f5f5;
    padding: 3rem 2rem;
}

.trip-plan-section .trip-plan-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.trip-plan-section .trip-plan-container .trip-plan-left {
    position: sticky;
    top: 2rem;
    align-self: start;
    z-index: 50;
}

/* Form Breadcrumb Navigation */
.trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-breadcrumb-wrap {
    margin-bottom: 1.5rem;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-breadcrumb-wrap .trip-plan-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-breadcrumb-wrap .trip-plan-breadcrumb .trip-plan-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-breadcrumb-wrap .trip-plan-breadcrumb .trip-plan-breadcrumb-link {
    color: #06357a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-breadcrumb-wrap .trip-plan-breadcrumb .trip-plan-breadcrumb-link:hover {
    color: #06357a;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-breadcrumb-wrap .trip-plan-breadcrumb .trip-plan-breadcrumb-link svg {
    float: left;
    flex-shrink: 0;
    opacity: 0.85;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-breadcrumb-wrap .trip-plan-breadcrumb .trip-plan-breadcrumb-link span {
    margin: -2px 0 0 12px;
    float: left;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-breadcrumb-wrap .trip-plan-breadcrumb .trip-plan-breadcrumb-sep {
    color: #b0b0b0;
    font-weight: 300;
    user-select: none;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-breadcrumb-wrap .trip-plan-breadcrumb .trip-plan-breadcrumb-current {
    color: #333;
    font-weight: 500;
    font-size: 1.5rem;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-type-container {
    border-radius: 8px;
}

/* Trip Type Tabs */
.trip-plan-section .trip-plan-container .trip-plan-left .trip-type-container .trip-type-tabs {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 0.75rem;
    padding: 4px;
    border-radius: 999px;
    background: #e8e8e8;
    isolation: isolate;
    width: 65%;
    margin: 0 auto;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-type-container .trip-type-tabs .trip-type-tabs-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 999px;
    background: #ffffff;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    pointer-events: none;
    z-index: 0;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-type-container.by-transfer-active .trip-type-tabs-indicator {
    transform: translateX(100%);
}

@media (prefers-reduced-motion: reduce) {
    .trip-plan-section .trip-plan-container .trip-plan-left .trip-type-container .trip-type-tabs .trip-type-tabs-indicator {
        transition: none;
    }
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-type-container .trip-type-tabs button {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 0.65rem 1rem;
    border: none;
    background: transparent;
    color: #5f6368;
    font-size: 0.9rem;
    font-weight: 400;
    cursor: pointer;
    transition: color 0.25s ease, font-weight 0.25s ease;
    font-family: inherit;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: -0.02em;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-type-container .trip-type-tabs button:hover:not(.active) {
    color: #3c4043;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-type-container .trip-type-tabs button.active {
    color: #1a1a1a;
    font-weight: 500;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-type-container .trip-type-info {
    display: none;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #e8f0fe;
    color: #1967d2;
    font-size: 0.875rem;
    border-radius: 8px;
    margin-top: 0.5rem;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-type-container.by-transfer-active .trip-type-info {
    display: flex;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-type-container .trip-type-info svg {
    flex-shrink: 0;
    margin-top: 3px;
}

/* Trip Plan Pickup */
.trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-pickup {
    background: #fff;
    margin: 15px 0 0;
    border-radius: 8px;
    padding: 15px;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-pickup .trip-plan-locations {
    display: flex;
    flex-direction: column;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-pickup .trip-plan-field {
    margin: 10px 0 0;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-pickup .trip-plan-field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.35rem;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-pickup .trip-plan-field .trip-plan-input {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #333;
    background: #fff;
    box-sizing: border-box;
    font-family: "Outfit", sans-serif;
    font-weight: 300;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-pickup .trip-plan-input:focus {
    outline: none;
    border-color: #06357a;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-pickup .trip-plan-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-pickup .trip-plan-input-wrap .trip-plan-input {
    padding-right: 2.75rem;
}

.trip-plan-location-clear,
.trip-plan-input-clear {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: none;
    background: #eaecf0;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: #000;
    padding: 0 0 1px;
    transition: background 0.2s ease, color 0.2s ease;
}

.trip-plan-location-clear:hover,
.trip-plan-input-clear:hover {
    background: #f0f0f0;
    color: #555;
}

.trip-plan-location-clear.is-visible,
.trip-plan-input-clear.is-visible {
    display: inline-flex;
}

.trip-plan-field-date .trip-plan-input,
.trip-plan-field-time .trip-plan-input,
#trip-duration-display {
    cursor: pointer;
}

.trip-plan-date-time {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/*
 * Fleet single sidebar: trip plan markup lives under .trip-plan-section--sidebar
 * without .trip-plan-container, so scoped "search page" input rules do not apply.
 * Without width: 100% + min-width: 0 on grid tracks, date/time and flight columns overflow.
 */
.trip-plan-section--sidebar {
    position: relative;
    background: transparent;
    padding: 0;
}

.trip-plan-section--sidebar h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #121214;
    margin: 6px 0 1.25rem 0;
    line-height: 1.3;
    text-transform: capitalize;
}

.trip-plan-section--sidebar .trip-plan-left {
    position: static;
    top: auto;
    align-self: stretch;
    max-width: 100%;
}

.trip-plan-section--sidebar .trip-plan-left-form {
    max-width: 100%;
}

.trip-plan-section--sidebar .trip-plan-pickup {
    background: #fff;
    margin: 0;
    border-radius: 8px;
    padding: 12px;
    max-width: 100%;
    box-sizing: border-box;
}

.trip-plan-section--sidebar .trip-plan-pickup .trip-plan-field {
    margin: 10px 0 0;
    min-width: 0;
    max-width: 100%;
}

.trip-plan-section--sidebar .trip-plan-pickup .trip-plan-field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.35rem;
}

.trip-plan-section--sidebar .trip-plan-pickup .trip-plan-field .trip-plan-input,
.trip-plan-section--sidebar .trip-plan-pickup .trip-plan-input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.65rem 0.9rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #333;
    background: #fff;
    font-family: "Outfit", sans-serif;
    font-weight: 300;
}

.trip-plan-section--sidebar .trip-plan-pickup .trip-plan-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.trip-plan-section--sidebar .trip-plan-pickup .trip-plan-input-wrap .trip-plan-input {
    padding-right: 2.75rem;
}

.trip-plan-section--sidebar .trip-plan-date-time,
.trip-plan-section--sidebar .trip-plan-flight-fields,
.trip-plan-section--sidebar .trip-plan-counts {
    min-width: 0;
}

.trip-plan-section--sidebar .trip-plan-date-time {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.trip-plan-section--sidebar .trip-plan-flight-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.trip-plan-section--sidebar .trip-plan-date-time>*,
.trip-plan-section--sidebar .trip-plan-flight-fields>*,
.trip-plan-section--sidebar .trip-plan-counts>* {
    min-width: 0;
}

.trip-plan-section--sidebar .trip-plan-flight {
    margin-top: 1rem;
}

.trip-plan-section--sidebar #trip-plan-dropoff-wrap {
    margin: 0;
}

.trip-plan-section--sidebar .trip-type-container .trip-type-tabs {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.trip-plan-section--sidebar .trip-type-container {
    border-radius: 8px;
}

.trip-plan-section--sidebar .trip-type-container .trip-type-tabs {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 4px;
    border-radius: 999px;
    background: #e8e8e8;
    isolation: isolate;
    margin: 0;
}

.trip-plan-section--sidebar .trip-type-container .trip-type-tabs .trip-type-tabs-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    pointer-events: none;
    z-index: 0;
}

.trip-plan-section--sidebar .trip-type-container.by-transfer-active .trip-type-tabs .trip-type-tabs-indicator {
    transform: translateX(100%);
}

.trip-plan-section--sidebar .trip-type-container .trip-type-tabs button {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    padding: 0.65rem 0.75rem;
    border: none;
    background: transparent;
    color: #5f6368;
    font-size: 0.9rem;
    font-weight: 400;
    cursor: pointer;
    transition: color 0.25s ease, font-weight 0.25s ease;
    font-family: inherit;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: -0.02em;
}

.trip-plan-section--sidebar .trip-type-container .trip-type-tabs button:hover:not(.active) {
    color: #3c4043;
}

.trip-plan-section--sidebar .trip-type-container .trip-type-tabs button.active {
    color: #1a1a1a;
    font-weight: 500;
}

.trip-plan-section--sidebar .trip-type-container .trip-type-info {
    display: none;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 0.9rem;
    background: #e8f0fe;
    color: #1967d2;
    font-size: 0.875rem;
    border-radius: 8px;
    margin-top: 0.6rem;
    line-height: 1.4;
}

.trip-plan-section--sidebar .trip-type-container.by-transfer-active .trip-type-info {
    display: flex;
}

.trip-plan-section--sidebar .trip-type-container .trip-type-info svg {
    flex-shrink: 0;
    margin-top: 3px;
}

.trip-plan-section--sidebar .trip-plan-pickup-popovers {
    max-width: 100%;
}

/* Fleet sidebar — tablet: duration + passengers + luggage on one row */
@media (min-width: 768px) and (max-width: 1024px) {
    .trip-plan-section--sidebar .trip-plan-pickup {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 0.5rem;
        row-gap: 0.35rem;
        padding: 10px;
    }

    .trip-plan-section--sidebar .trip-plan-locations,
    .trip-plan-section--sidebar .trip-plan-date-time,
    .trip-plan-section--sidebar .trip-plan-flight,
    .trip-plan-section--sidebar .trip-plan-toggles {
        grid-column: 1 / -1;
    }

    .trip-plan-section--sidebar .trip-plan-pickup .trip-plan-field {
        margin: 0.35rem 0 0;
    }

    .trip-plan-section--sidebar #trip-plan-duration-wrap {
        grid-column: 1;
        min-width: 0;
    }

    .trip-plan-section--sidebar .trip-plan-counts {
        grid-column: 2 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.5rem;
        margin: 0.35rem 0 0;
    }

    .trip-plan-section--sidebar .trip-plan-date-time {
        gap: 0.5rem;
    }
}

/* Fleet single sidebar booking wizard (trip → passenger → checkout) */
.fleet-sidebar-booking {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fleet-sidebar-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    list-style: none;
    margin: 0 0 0.25rem;
    padding: 0;
}

.fleet-sidebar-progress-step {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.72rem;
    line-height: 1.2;
}

.fleet-sidebar-progress-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    color: #6b7280;
}

.fleet-sidebar-progress-step.is-current {
    color: #06357a;
    font-weight: 600;
}

.fleet-sidebar-progress-step.is-current .fleet-sidebar-progress-marker {
    border-color: #06357a;
    background: #06357a;
    color: #fff;
}

.fleet-sidebar-progress-step.is-complete {
    color: #06357a;
}

.fleet-sidebar-progress-step.is-complete .fleet-sidebar-progress-marker {
    border-color: #06357a;
    background: #e8eef7;
    color: #06357a;
}

.fleet-sidebar-panel[hidden] {
    display: none !important;
}

.fleet-sidebar-selected-vehicle {
    margin-top: 0.75rem;
}

.fleet-sidebar-selected-label {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #06357a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fleet-sidebar-actions {
    margin-top: 0.75rem;
}

.fleet-sidebar-actions .trip-plan-continue {
    width: 100%;
}

.fleet-sidebar-thank-you-card {
    margin: 0;
}

/* Passenger step — fleet sidebar compact layout */
.fleet-sidebar-booking .passenger-step-section--sidebar {
    background: transparent;
    padding: 0;
    margin: 0;
}

.fleet-sidebar-booking .passenger-step-section--sidebar .passenger-step-container,
.fleet-sidebar-booking .passenger-step-section--sidebar .passenger-step-container--sidebar {
    display: block;
    max-width: none;
    margin: 0;
    grid-template-columns: 1fr;
    gap: 0;
}

.fleet-sidebar-booking .passenger-step-section--sidebar .passenger-step-left {
    width: 100%;
    min-width: 0;
}

.fleet-sidebar-booking .passenger-step-sidebar-title {
    margin: 0 0 0.85rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #06357a;
    line-height: 1.25;
}

.fleet-sidebar-booking .passenger-step-section--sidebar .passenger-booking-type-container {
    margin-bottom: 0.85rem;
}

.fleet-sidebar-booking .passenger-step-section--sidebar .passenger-booking-type-tabs {
    width: 100%;
    margin: 0;
}

.fleet-sidebar-booking .passenger-step-section--sidebar .passenger-booking-type-tab {
    padding: 0.55rem 0.45rem;
    font-size: 0.78rem;
    line-height: 1.2;
}

.fleet-sidebar-booking .passenger-step-section--sidebar .passenger-form-card {
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.fleet-sidebar-booking .passenger-step-section--sidebar .passenger-field-row {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}

.fleet-sidebar-booking .passenger-step-section--sidebar .passenger-field-row:last-of-type {
    margin-bottom: 0;
}

.fleet-sidebar-booking .passenger-step-section--sidebar .passenger-input,
.fleet-sidebar-booking .passenger-step-section--sidebar .passenger-textarea,
.fleet-sidebar-booking .passenger-step-section--sidebar .passenger-phone-wrap,
.fleet-sidebar-booking .passenger-step-section--sidebar .passenger-input-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.fleet-sidebar-booking .passenger-step-section--sidebar .passenger-toggle-row {
    margin: 0.65rem 0 0.85rem;
}

.fleet-sidebar-booking .passenger-step-actions--sidebar {
    margin-top: 1rem;
    gap: 0.5rem;
}

.fleet-sidebar-booking .passenger-step-actions--sidebar .passenger-step-continue,
.fleet-sidebar-booking .passenger-step-actions--sidebar .passenger-step-back-btn {
    width: 100%;
}

/* Checkout step — fleet sidebar compact layout */
.fleet-sidebar-booking .checkout-section--sidebar {
    background: transparent;
    padding: 0;
    margin: 0;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-container {
    padding: 0;
    max-width: none;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-page-header {
    margin-bottom: 0.65rem;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-page-title {
    margin: 0 0 0.65rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.25;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-layout {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-left,
.fleet-sidebar-booking .checkout-section--sidebar .checkout-right {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-review-heading {
    margin: 0 0 0.65rem;
    font-size: 0.9375rem;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-card {
    margin-bottom: 0.65rem;
    border-radius: 8px;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-card-head {
    padding: 0.65rem 0.75rem;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-card-body,
.fleet-sidebar-booking .checkout-section--sidebar .checkout-notes-text {
    padding: 0.75rem;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-vehicle-hero {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.75rem;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-vehicle-title {
    font-size: 0.9375rem;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-vehicle-price-line {
    font-size: 0.875rem;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-schedule-chips {
    gap: 0.35rem;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-schedule-chip {
    flex: 1 1 calc(50% - 0.35rem);
    min-width: 0;
    padding: 0.45rem 0.5rem;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-contact-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-alert {
    margin-bottom: 0.65rem;
    padding: 0.65rem 0.75rem;
    font-size: 0.8125rem;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-cost-card--sidebar-hidden {
    display: none !important;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-sidebar-sticky {
    position: static;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-total-summary-card,
.fleet-sidebar-booking .checkout-section--sidebar .checkout-payment-card,
.fleet-sidebar-booking .checkout-section--sidebar .checkout-confirm-card {
    margin-bottom: 0.65rem;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-total-summary-card {
    padding: 0.875rem;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-payment-choice-fieldset {
    padding: 0.65rem 0.75rem 0.75rem;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-confirm-card {
    padding: 0.75rem;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-footer-links {
    display: none;
}

.fleet-sidebar-booking .checkout-section--sidebar .checkout-card-edit.checkout-swap-btn {
    display: none;
}

.passenger-step-section--sidebar .passenger-step-container--sidebar,
.passenger-step-section--sidebar .passenger-step-container {
    flex-direction: column;
    gap: 1rem;
}

.passenger-step-section--sidebar .passenger-step-left,
.passenger-step-section--sidebar .passenger-step-right {
    width: 100%;
    max-width: none;
}

.passenger-step-actions--sidebar {
    margin-top: 1rem;
}

.passenger-step-actions--sidebar .passenger-step-continue {
    width: 100%;
}

.checkout-section--sidebar .checkout-layout {
    flex-direction: column;
    gap: 1rem;
}

.checkout-section--sidebar .checkout-left,
.checkout-section--sidebar .checkout-right {
    width: 100%;
    max-width: none;
}

.checkout-section--sidebar .checkout-progress,
.checkout-section--sidebar .checkout-page-lead {
    display: none;
}

.checkout-section--sidebar .checkout-page-title {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.checkout-section--sidebar .checkout-page-header {
    margin-bottom: 0.75rem;
}

.checkout-section--sidebar .checkout-container {
    padding: 0;
}

.checkout-section--sidebar .checkout-card-edit.checkout-swap-btn {
    display: none;
}

.trip-plan-location-switch-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0.25rem;
    margin: 0;
    z-index: 2;
}

.trip-plan-location-switch-wrap[hidden] {
    display: none !important;
}

.trip-plan-location-switch-wrap .location-switch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #eaeaea;
    color: #06357a;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.trip-plan-location-switch-wrap .location-switch-btn:hover {
    background: #d0cfcf;
    color: #06357a;
}

.trip-plan-section .pac-container {
    z-index: 100050 !important;
    font-family: inherit;
}

.trip-plan-pickup-popovers {
    position: relative;
}

.trip-plan-section .calendar-popover-shell,
.trip-plan-section .time-picker-popover-shell {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 30;
    pointer-events: none;
}

.trip-plan-section .calendar-popover.is-open,
.trip-plan-section .time-picker-popover.is-open {
    pointer-events: auto;
}

.trip-plan-section .calendar-popover {
    width: 870px;
    max-width: 100%;
}

.trip-plan-section .calendar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 25;
}

.trip-plan-section .calendar-backdrop.is-visible {
    display: block;
}

/* Trip plan: drum-wheel time & duration (all breakpoints) */
.trip-plan-section .time-picker-popover--pickup .time-picker-header,
.trip-plan-section .time-picker-popover--duration .time-picker-header {
    display: none;
}

.trip-plan-section .time-picker-popover--pickup,
.trip-plan-section .time-picker-popover--duration {
    padding-bottom: 0;
    width: 100%;
    max-width: 360px;
}

.trip-plan-section .time-picker-popover--pickup .time-picker-wheel-wrap,
.trip-plan-section .time-picker-popover--duration .time-picker-wheel-wrap {
    position: relative;
    padding: 0.5rem 0 0;
}

.trip-plan-section .time-picker-popover--pickup .time-picker-wheel-highlight,
.trip-plan-section .time-picker-popover--duration .time-picker-wheel-highlight {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
    border-radius: 10px;
    background: #ededed;
    border: none;
    box-shadow: none;
    outline: none;
    pointer-events: none;
    z-index: 0;
}

.trip-plan-section .time-picker-popover--pickup .time-picker-wheel-colon {
    position: absolute;
    left: 33.33%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.35rem;
    font-weight: 600;
    color: #111;
    z-index: 2;
    pointer-events: none;
    line-height: 1;
}

.trip-plan-section .time-picker-popover--pickup .time-picker-wheel,
.trip-plan-section .time-picker-popover--duration .time-picker-wheel {
    position: relative;
    z-index: 1;
    height: 220px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.35) 12%,
            #000 28%,
            #000 72%,
            rgba(0, 0, 0, 0.35) 88%,
            transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.35) 12%,
            #000 28%,
            #000 72%,
            rgba(0, 0, 0, 0.35) 88%,
            transparent 100%);
}

.trip-plan-section .time-picker-popover--pickup .time-picker-wheel {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.trip-plan-section .time-picker-popover--duration .time-picker-wheel--single {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 200px;
    margin: 0 auto;
}

.trip-plan-section .time-picker-popover--duration .time-picker-wheel-suffix {
    position: absolute;
    left: calc(50% + 2.5rem);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    font-weight: 500;
    color: #888;
    z-index: 2;
    pointer-events: none;
    text-transform: lowercase;
}

.trip-plan-section .time-picker-popover--duration .time-picker-wheel-highlight {
    left: 50%;
    right: auto;
    width: 4.5rem;
    transform: translate(-50%, -50%);
}

.trip-plan-section .time-picker-popover--pickup .time-picker-column,
.trip-plan-section .time-picker-popover--duration .time-picker-column {
    position: relative;
    z-index: 1;
    border-right: none;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    height: 100%;
}

.trip-plan-section .time-picker-popover--pickup .time-picker-column::-webkit-scrollbar,
.trip-plan-section .time-picker-popover--duration .time-picker-column::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.trip-plan-section .time-picker-popover--pickup .time-picker-scroll,
.trip-plan-section .time-picker-popover--duration .time-picker-scroll {
    padding: 88px 0;
}

.trip-plan-section .time-picker-popover--pickup .time-picker-item,
.trip-plan-section .time-picker-popover--duration .time-picker-item {
    height: 44px;
    min-height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 400;
    color: #b0b0b0;
    background: transparent;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transition: color 0.15s ease, font-weight 0.15s ease;
    width: 100%;
    border: none;
    cursor: default;
}

.trip-plan-section .time-picker-popover--pickup .time-picker-item:hover,
.trip-plan-section .time-picker-popover--duration .time-picker-item:hover {
    background: transparent;
}

.trip-plan-section .time-picker-popover--pickup .time-picker-item.is-selected,
.trip-plan-section .time-picker-popover--duration .time-picker-item.is-selected {
    color: #111;
    font-weight: 600;
    background: transparent;
}

.trip-plan-section .time-picker-popover--pickup .time-picker-footer,
.trip-plan-section .time-picker-popover--duration .time-picker-footer {
    padding: 12px 16px 16px;
    background: #fff;
    border-top: 1px solid #eeeeee;
}

.trip-plan-section .time-picker-popover--pickup .time-picker-confirm-btn,
.trip-plan-section .time-picker-popover--duration .time-picker-confirm-btn {
    border-radius: 12px;
}

#trip-plan-dropoff-wrap {
    margin: -28px 0 0;
}

.trip-plan-flight {
    margin: 20px 0 0;
}

.trip-plan-flight-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.trip-plan-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #333;
    margin: 0 0 1.5rem;
}

.trip-plan-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.trip-plan-counts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 0.5rem 0;
}

.trip-plan-stepper label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.5rem;
}

.trip-plan-stepper-control {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.25rem;
}

.trip-plan-stepper-btn {
    width: 20px;
    height: 20px;
    border: none;
    background: #06357a;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.trip-plan-stepper-btn:hover {
    background: #06357a;
}

.trip-plan-stepper-value {
    min-width: 1.5rem;
    text-align: center;
    font-weight: 600;
    color: #333;
}

.trip-plan-toggles {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}

.trip-plan-toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: #333;
}

.trip-plan-toggle-item>span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

.trip-plan-toggle-item svg {
    flex-shrink: 0;
}

.trip-plan-child-options {
    margin-top: 0.5rem;
    padding-left: 0;
    display: none;
}

.trip-plan-child-options[hidden] {
    display: none !important;
}

.trip-plan-child-options:not([hidden]) {
    display: block;
}

.trip-plan-child-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.trip-plan-child-row:last-child {
    margin-bottom: 0;
}

.trip-plan-child-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    margin: 0;
}

.trip-plan-info-icon {
    color: #9aa0a6;
    font-size: 0.8rem;
    margin-left: 0.25rem;
}

.trip-plan-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.trip-plan-switch-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.trip-plan-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e0e0e0;
    border-radius: 24px;
    transition: 0.3s;
}

.trip-plan-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.trip-plan-switch-input:checked+.trip-plan-switch-slider {
    background: #06357a;
}

.trip-plan-switch-input:checked+.trip-plan-switch-slider:before {
    transform: translateX(20px);
}

.trip-plan-vehicles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Compact vehicle cards: mobile only — see @media (max-width: 1024px) */
.trip-plan-vehicle-card {
    position: relative;
    display: block;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
}

.trip-plan-vehicle-card:hover {
    border-color: #ccc;
}

.trip-plan-vehicle-card.selected,
.trip-plan-vehicle-card:has(input:checked) {
    border-color: #06357a;
    background: #f3f7fc;
}

.trip-plan-vehicle-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.trip-plan-vehicle-check {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 22px;
    height: 22px;
    border: 2px solid #e0e0e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: transparent;
    transition: all 0.2s;
}

.trip-plan-vehicle-check svg {
    flex-shrink: 0;
    display: block;
}

.trip-plan-vehicle-card.selected .trip-plan-vehicle-check,
.trip-plan-vehicle-card:has(input:checked) .trip-plan-vehicle-check {
    background: #06357a;
    border-color: #06357a;
    color: #fff;
}

.trip-plan-vehicle-name {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 0.8rem;
    padding-right: 1.75rem;
}

.trip-plan-vehicle-image {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.trip-plan-vehicle-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

.trip-plan-vehicle-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #5f6368;
    margin: 16px 0 0.5rem;
}

.trip-plan-vehicle-meta i {
    margin-right: 0.25rem;
}

.trip-plan-vehicle-price {
    float: right;
    text-align: right;
}

.trip-plan-vehicle-price p {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin: -30px 0 0;
}

.trip-plan-vehicle-note {
    font-size: 0.75rem;
    color: #9aa0a6;
    margin: -4px 0 0;
    display: block;
}

.trip-plan-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.trip-plan-continue {
    width: 100%;
    padding: 0.875rem 2rem;
    background: #06357a;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.trip-plan-continue:hover {
    background: #06357a;
}

/* Booking flow validation / status messages */
.vehicle-booking-message {
    margin: 0;
}

.vehicle-booking-message[hidden] {
    display: none !important;
}

.vehicle-booking-message:not([hidden]) {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 1rem 0.5rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.5;
    animation: vehicle-booking-message-in 0.28s ease-out;
}

@keyframes vehicle-booking-message-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vehicle-booking-message:not([hidden])::before {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    color: #fff;
}

.vehicle-booking-message--error:not([hidden]) {
    color: #9b1c1c;
    background: var(--foreground-error);
    border: 1px solid rgba(255, 0, 68, 0.28);
    box-shadow: 0 2px 10px rgba(255, 0, 68, 0.1);
}

.vehicle-booking-message--error:not([hidden])::before {
    content: "!";
    background: var(--primary-error);
}

.vehicle-booking-message--success:not([hidden]) {
    color: var(--primary-success);
    background: var(--foreground-success);
    border: 1px solid rgba(85, 107, 47, 0.25);
    box-shadow: 0 2px 10px rgba(85, 107, 47, 0.08);
}

.vehicle-booking-message--success:not([hidden])::before {
    content: "✓";
    background: var(--primary-success);
    font-size: 0.75rem;
}

.vehicle-booking-message--info:not([hidden]) {
    color: var(--primary-info);
    background: var(--highlight-info);
    border: 1px solid rgba(43, 69, 147, 0.2);
    box-shadow: 0 2px 10px rgba(26, 133, 255, 0.08);
}

.vehicle-booking-message--info:not([hidden])::before {
    content: "i";
    background: var(--primary-info);
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
}

.trip-plan-right .trip-plan-booking-message:not([hidden]),
.trip-plan-right .search-booking-message:not([hidden]) {
    margin: 0.7rem 0;
}

.passenger-step-left>.search-booking-message:not([hidden]) {
    margin-bottom: 1.25rem;
}

.checkout-right>.checkout-booking-message:not([hidden]) {
    margin-bottom: 1.25rem;
}

.checkout-confirm-actions .checkout-action-message:not([hidden]) {
    margin: 0;
    width: 100%;
}

.trip-plan-footer-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
}

.trip-plan-footer-links a {
    color: #5f6368;
    text-decoration: none;
}

.trip-plan-footer-links a:hover {
    color: #06357a;
}

/* Mobile booking summary card (hidden on desktop) */
.trip-plan-mobile-summary {
    display: none;
}

.trip-plan-mobile-summary-toggle {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: linear-gradient(145deg, #ffffff 0%, #f4f7fc 100%);
    box-shadow:
        0 1px 2px rgba(6, 53, 122, 0.06),
        0 4px 16px rgba(6, 53, 122, 0.08);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}

.trip-plan-mobile-summary-toggle:hover {
    box-shadow:
        0 2px 4px rgba(6, 53, 122, 0.08),
        0 8px 24px rgba(6, 53, 122, 0.12);
}

.trip-plan-section.trip-plan-form-has-changes .trip-plan-mobile-summary-toggle {
    box-shadow:
        0 0 0 2px rgba(6, 53, 122, 0.15),
        0 4px 16px rgba(6, 53, 122, 0.1);
}

.trip-plan-mobile-summary-inner {
    padding: 1rem 1rem 0.9rem;
    border: 1px solid rgba(6, 53, 122, 0.1);
    border-radius: 14px;
}

.trip-plan-mobile-summary-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(6, 53, 122, 0.08);
}

.trip-plan-mobile-summary-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.trip-plan-mobile-summary-title-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #06357a;
    color: #fff;
}

.trip-plan-mobile-summary-title-text {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.trip-plan-mobile-summary-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.2;
}

.trip-plan-mobile-summary-type-pill {
    display: inline-flex;
    align-self: flex-start;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #06357a;
    background: #e8f0fe;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    line-height: 1.3;
}

.trip-plan-mobile-summary-top-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.trip-plan-mobile-summary-edit {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #06357a;
    white-space: nowrap;
}

.trip-plan-mobile-summary-badge {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: #06357a;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    line-height: 1.2;
}

.trip-plan-mobile-summary-badge[hidden] {
    display: none;
}

.trip-plan-mobile-summary-chevron {
    flex-shrink: 0;
    color: #06357a;
    transition: transform 0.25s ease;
}

.trip-plan-section.trip-plan-form-expanded .trip-plan-mobile-summary-chevron {
    transform: rotate(180deg);
}

/* Route: pickup → dropoff */
.trip-plan-mobile-summary-route {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0.85rem;
    padding: 0.65rem 0.75rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    border: 1px solid rgba(6, 53, 122, 0.06);
}

.trip-plan-mobile-route-stop {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.trip-plan-mobile-route-marker {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.trip-plan-mobile-route-marker--from {
    background: #e8f0fe;
    color: #06357a;
}

.trip-plan-mobile-route-marker--to {
    background: #f0f4f8;
    color: #5f6368;
}

.trip-plan-mobile-route-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-top: 0.15rem;
}

.trip-plan-mobile-detail-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5f6368;
    line-height: 1.2;
}

.trip-plan-mobile-detail-value,
.trip-plan-mobile-meta-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.35;
    word-break: break-word;
}

.trip-plan-mobile-detail-value.is-empty,
.trip-plan-mobile-meta-value.is-empty {
    font-weight: 400;
    color: #9aa0a6;
    font-style: italic;
}

.trip-plan-mobile-route-connector {
    display: flex;
    padding: 0.15rem 0 0.15rem 15px;
}

.trip-plan-mobile-route-connector[hidden] {
    display: none !important;
}

.trip-plan-mobile-route-connector-line {
    display: block;
    width: 2px;
    height: 14px;
    margin-left: 0;
    background: linear-gradient(180deg, #06357a 0%, #c5d4e8 100%);
    border-radius: 2px;
}

/* Meta grid: date, time, duration, passengers, luggage */
.trip-plan-mobile-summary-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.trip-plan-mobile-meta-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.5rem;
    row-gap: 0.1rem;
    align-items: start;
    padding: 0.55rem 0.6rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(6, 53, 122, 0.06);
    border-radius: 10px;
}

.trip-plan-mobile-meta-icon {
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f0f4fa;
    color: #06357a;
}

.trip-plan-mobile-meta-label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5f6368;
    line-height: 1.2;
}

.trip-plan-mobile-meta-value {
    grid-column: 2;
    font-size: 0.8125rem;
}

.trip-plan-mobile-meta-item[data-summary="duration"][hidden] {
    display: none !important;
}

#tripPlanMobileSummaryDropoffWrap[hidden] {
    display: none !important;
}

@media (max-width: 1024px) {
    .trip-plan-section .trip-plan-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .trip-plan-section .trip-plan-container .trip-plan-right {
        order: -1;
    }

    .trip-plan-section .trip-plan-container .trip-plan-left {
        position: static;
    }

    .trip-plan-mobile-summary {
        display: block;
        margin-bottom: 0.75rem;
        position: sticky;
        top: 0;
        z-index: 20;
    }

    .trip-plan-section.trip-plan-form-expanded .trip-plan-mobile-summary {
        position: static;
        top: auto;
        z-index: auto;
    }

    .trip-plan-section:not(.trip-plan-form-expanded) .trip-plan-breadcrumb-wrap,
    .trip-plan-section:not(.trip-plan-form-expanded) .trip-plan-left-form {
        display: none;
    }

    /* Fleet single sidebar: no mobile summary toggle — keep form visible */
    .trip-plan-section--sidebar:not(.trip-plan-form-expanded) .trip-plan-left-form {
        display: block;
    }

    .trip-plan-section.trip-plan-form-expanded .trip-plan-left-form {
        display: block;
        margin-top: 0;
        margin-bottom: 1rem;
        scroll-margin-top: calc(var(--trip-plan-sticky-offset, 72px) + 12px);
    }

    .trip-plan-section.trip-plan-form-expanded .trip-plan-breadcrumb-wrap {
        display: block;
    }

    .trip-plan-vehicles,
    .trip-plan-vehicles--compact {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    /* Compact horizontal vehicle cards (mobile only) */
    .trip-plan-vehicles--compact .trip-plan-vehicle-card {
        position: relative;
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 0.75rem;
        row-gap: 0.35rem;
        align-items: start;
        padding: 0.65rem 0.7rem;
        border: 2px solid #e8eaed;
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
    }

    .trip-plan-vehicles--compact .trip-plan-vehicle-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: transparent;
        border-radius: 12px 0 0 12px;
        transition: background 0.2s ease;
    }

    .trip-plan-vehicles--compact .trip-plan-vehicle-card:hover {
        border-color: #c5d4e8;
        box-shadow: 0 2px 10px rgba(6, 53, 122, 0.08);
    }

    .trip-plan-vehicles--compact .trip-plan-vehicle-card.selected,
    .trip-plan-vehicles--compact .trip-plan-vehicle-card:has(input:checked) {
        border-color: #06357a;
        background: linear-gradient(135deg, #f8fafc 0%, #eef4fc 100%);
        box-shadow: 0 2px 12px rgba(6, 53, 122, 0.12);
    }

    .trip-plan-vehicles--compact .trip-plan-vehicle-card.selected::before,
    .trip-plan-vehicles--compact .trip-plan-vehicle-card:has(input:checked)::before {
        background: #06357a;
    }

    .trip-plan-vehicles--compact .trip-plan-vehicle-card>.trip-plan-vehicle-check {
        grid-column: 3;
        grid-row: 1;
        position: relative;
        top: auto;
        right: auto;
        justify-self: end;
    }

    .trip-plan-vehicles--compact .trip-plan-vehicle-card>.trip-plan-vehicle-name {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        padding: 0.15rem 0.35rem 0 0;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #1a1a1a;
        line-height: 1.35;
        align-self: center;
    }

    .trip-plan-vehicles--compact .trip-plan-vehicle-card>.trip-plan-vehicle-desc {
        display: none;
    }

    .trip-plan-vehicles--compact .trip-plan-vehicle-card>.trip-plan-vehicle-image {
        grid-column: 1;
        grid-row: 1 / span 2;
        margin: 0;
        align-self: center;
        border-radius: 10px;
        overflow: hidden;
        background: #f0f4f8;
        min-height: 66px;
    }

    .trip-plan-vehicles--compact .trip-plan-vehicle-image img {
        display: block;
        width: 88px;
        height: 66px;
        object-fit: cover;
        border-radius: 10px;
    }

    .trip-plan-vehicles--compact .trip-plan-vehicle-card>.trip-plan-vehicle-meta {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.75rem;
        margin: 0;
        padding: 0 0.35rem 0 0;
    }

    .trip-plan-vehicles--compact .trip-plan-vehicle-meta-item {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.75rem;
        font-weight: 500;
        color: #5f6368;
    }

    .trip-plan-vehicles--compact .trip-plan-vehicle-meta-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 6px;
        background: #f0f4fa;
        color: #06357a;
        flex-shrink: 0;
    }

    .trip-plan-vehicles--compact .trip-plan-vehicle-meta-icon svg {
        width: 14px;
        height: 14px;
    }

    .trip-plan-vehicles--compact .trip-plan-vehicle-card>.trip-plan-vehicle-price {
        grid-column: 3;
        grid-row: 2;
        float: none;
        text-align: right;
        align-self: end;
        justify-self: end;
        margin: 0;
    }

    .trip-plan-vehicles--compact .trip-plan-vehicle-price p {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: #06357a;
        white-space: nowrap;
    }

    .trip-plan-vehicles--compact .trip-plan-vehicle-price p .trip-plan-vehicle-price-from {
        display: block;
        font-size: 0.625rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #9aa0a6;
        margin-bottom: 0.1rem;
    }

    .trip-plan-vehicles--compact .trip-plan-vehicle-note {
        display: none;
    }

    .trip-plan-section .calendar-popover-shell,
    .trip-plan-section .time-picker-popover-shell,
    .trip-plan-section .duration-picker-shell {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        transform: none !important;
        z-index: 100020;
    }

    .trip-plan-section .calendar-popover,
    .trip-plan-section .time-picker-popover {
        width: 100% !important;
        max-width: none;
        border-radius: 16px 16px 0 0;
    }

    .trip-plan-section .calendar-content {
        flex-direction: column;
        gap: 0;
    }

    .trip-plan-section .calendar-month[data-month-index="1"] {
        display: none !important;
    }

    .trip-plan-section .calendar-nav-next--mobile {
        display: flex;
    }

    .trip-plan-section .calendar-nav-next--desktop {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .trip-plan-section {
        padding: 1.5rem 1rem;
    }

    .trip-plan-section .trip-plan-container .trip-plan-left .trip-type-container .trip-type-tabs {
        width: 100%;
    }

    .trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-breadcrumb-wrap .trip-plan-breadcrumb .trip-plan-breadcrumb-current {
        font-size: 1.25rem;
    }

    .trip-plan-section .trip-plan-container .trip-plan-left .trip-type-container .trip-type-tabs button {
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 640px) {
    .trip-plan-section {
        padding: 1rem 0.75rem;
    }

    .trip-plan-section .trip-plan-container {
        gap: 0;
    }

    .trip-plan-mobile-summary-inner {
        padding: 0.85rem 0.85rem 0.75rem;
    }

    .trip-plan-mobile-summary-title-icon {
        width: 36px;
        height: 36px;
    }

    .trip-plan-mobile-summary-title {
        font-size: 0.9375rem;
    }

    .trip-plan-mobile-summary-meta {
        gap: 0.4rem;
    }

    .trip-plan-mobile-meta-item {
        padding: 0.5rem;
    }

    .trip-plan-mobile-detail-value,
    .trip-plan-mobile-meta-value {
        font-size: 0.8125rem;
    }

    .trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-breadcrumb-wrap {
        margin-bottom: 1rem;
    }

    .trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-breadcrumb-wrap .trip-plan-breadcrumb {
        font-size: 0.8125rem;
    }

    .trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-breadcrumb-wrap .trip-plan-breadcrumb .trip-plan-breadcrumb-link {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }

    .trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-breadcrumb-wrap .trip-plan-breadcrumb .trip-plan-breadcrumb-link svg,
    .trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-breadcrumb-wrap .trip-plan-breadcrumb .trip-plan-breadcrumb-link span {
        float: none;
        margin: 0;
    }

    .trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-breadcrumb-wrap .trip-plan-breadcrumb .trip-plan-breadcrumb-current {
        font-size: 1.125rem;
        line-height: 1.35;
    }

    .trip-plan-section .trip-plan-container .trip-plan-left .trip-type-container .trip-type-info {
        font-size: 0.8125rem;
        line-height: 1.45;
        padding: 0.65rem 0.75rem;
    }

    .trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-pickup {
        margin-top: 0.75rem;
        padding: 1rem;
    }

    .trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-pickup .trip-plan-field .trip-plan-input,
    .trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-pickup .trip-plan-input {
        font-size: 12px;
        padding: 0.75rem 0.85rem;
    }

    .trip-plan-date-time,
    .trip-plan-flight-fields,
    .trip-plan-counts {
        grid-template-columns: 1fr;
        gap: 0rem;
    }

    .trip-plan-counts {
        margin: 0.75rem 0;
    }

    .trip-plan-stepper-control {
        width: 100%;
        justify-content: space-between;
        padding: 0.35rem;
    }

    .trip-plan-stepper-btn {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
        font-size: 1.125rem;
    }

    .trip-plan-location-switch-wrap .location-switch-btn {
        width: 40px;
        height: 40px;
    }

    .trip-plan-location-clear,
    .trip-plan-input-clear {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
    }

    .trip-plan-toggle-item {
        align-items: flex-start;
        padding: 0.35rem 0;
        min-height: 44px;
    }

    .trip-plan-toggle-item>span {
        align-items: flex-start;
    }

    .trip-plan-switch {
        flex-shrink: 0;
        margin-top: 2px;
    }

    .trip-plan-child-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .trip-plan-child-row .trip-plan-stepper-control {
        align-self: flex-end;
    }

    .trip-plan-child-label {
        line-height: 1.4;
    }

    .trip-plan-section .time-picker-popover--pickup .time-picker-confirm-btn,
    .trip-plan-section .time-picker-popover--duration .time-picker-confirm-btn {
        width: 100%;
        min-height: 48px;
        font-size: 1rem;
    }

    .trip-plan-section .calendar-popover {
        max-height: min(85vh, 100dvh);
        padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
    }

    .trip-plan-section .calendar-footer {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .trip-plan-section .calendar-done-btn {
        width: 100%;
        min-height: 48px;
        font-size: 1rem;
        float: none;
        text-align: center;
    }

    .trip-plan-toggles {
        gap: 0rem;
        margin: 0.5rem 0;
    }

    .trip-plan-stepper {
        margin: 0 0 8px;
    }

    .trip-plan-title {
        font-size: 1.2rem;
        margin: 0 0 8px;
    }
}

@media (max-width: 380px) {
    .trip-plan-section {
        padding: 0.75rem 0.5rem;
    }

    .trip-plan-section .trip-plan-container .trip-plan-left .trip-plan-breadcrumb-wrap .trip-plan-breadcrumb .trip-plan-breadcrumb-current {
        font-size: 1rem;
    }

    .trip-plan-section .trip-plan-container .trip-plan-left .trip-type-container .trip-type-tabs button {
        padding: 0.7rem 0.35rem;
        font-size: 0.8125rem;
    }
}


.help-us-improve {
    margin-top: 1rem;
    text-align: center;
}

/* Help us improve modal */
.help-us-improve-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.help-us-improve-overlay[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.help-us-improve-overlay[hidden] {
    display: none !important;
}

.help-us-improve-modal {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    padding: 2rem 2rem 1.75rem;
    text-align: center;
}

.help-us-improve-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(165, 165, 165, 0.12);
    color: #06357a;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.help-us-improve-icon-wrap {
    margin-bottom: 1rem;
}

.help-us-improve-icon {
    font-size: 2.5rem;
    background: #06357a;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.help-us-improve-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 0.75rem;
}

.help-us-improve-text {
    font-size: 0.9rem;
    color: #5f6368;
    line-height: 1.5;
    margin: 0 0 1.5rem;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.help-us-improve-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.help-us-improve-textarea {
    width: 100%;
    min-height: 120px;
    padding: 0.875rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #333;
    resize: vertical;
    box-sizing: border-box;
}

.help-us-improve-textarea::placeholder {
    color: #9aa0a6;
}

.help-us-improve-textarea:focus {
    outline: none;
    border-color: #06357a;
}

.help-us-improve-submit {
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: #06357a;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.help-us-improve-submit:hover {
    background: #06357a;
}

/***************************
Passenger step (matches trip plan section)
***************************/
.passenger-step-section {
    background: #f5f5f5;
    padding: 3rem 2rem;
}

.passenger-step-section[hidden] {
    display: none !important;
}

.passenger-step-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.passenger-step-left {
    align-self: start;
}

.passenger-step-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.passenger-step-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    background: none;
    padding: 0;
    font-size: 0.9rem;
    font-family: inherit;
    color: #06357a;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.passenger-step-back-link:hover {
    opacity: 0.8;
}

.passenger-step-breadcrumb-sep {
    color: #b0b0b0;
    font-weight: 300;
    user-select: none;
}

.passenger-step-breadcrumb-current {
    color: #333;
    font-weight: 500;
    font-size: 1.5rem;
}

.passenger-booking-type-container {
    margin-bottom: 1rem;
}

.passenger-booking-type-tabs {
    position: relative;
    display: flex;
    align-items: stretch;
    padding: 4px;
    border-radius: 999px;
    background: #e8e8e8;
    isolation: isolate;
    width: 65%;
    margin: 0 auto;
}

.passenger-booking-tabs-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
}

.passenger-booking-type-container.is-other-active .passenger-booking-tabs-indicator {
    transform: translateX(100%);
}

.passenger-booking-type-tab {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 0.65rem 1rem;
    border: none;
    background: transparent;
    color: #5f6368;
    font-size: 0.9rem;
    font-weight: 400;
    font-family: inherit;
    cursor: pointer;
    border-radius: 999px;
    transition: color 0.25s ease;
}

.passenger-booking-type-tab.active {
    color: #1a1a1a;
    font-weight: 500;
}

.passenger-form-card {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-top: 0;
}

.passenger-form .passenger-field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.35rem;
}

.passenger-form .passenger-field .required {
    color: #c5221f;
}

.passenger-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.passenger-input,
.passenger-textarea {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #333;
    background: #fff;
    box-sizing: border-box;
    font-family: "Outfit", sans-serif;
    font-weight: 300;
}

.passenger-input:focus,
.passenger-textarea:focus {
    outline: none;
    border-color: #06357a;
}

.passenger-input-wrap {
    position: relative;
}

.passenger-input-wrap .passenger-input {
    padding-right: 2.5rem;
}

.passenger-input-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa0a6;
    display: flex;
    pointer-events: none;
}

.passenger-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
    flex-wrap: wrap;
}

.passenger-toggle-label {
    font-size: 0.9rem;
    color: #333;
}

.passenger-switch-wrap {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.passenger-switch-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.passenger-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #ccc;
    border-radius: 24px;
    transition: 0.3s;
}

.passenger-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.passenger-switch-input:checked+.passenger-switch-slider {
    background: #06357a;
}

.passenger-switch-input:checked+.passenger-switch-slider:before {
    transform: translateX(20px);
}

.passenger-info-tooltip-wrap {
    position: relative;
    display: inline-flex;
    color: #9aa0a6;
}

.passenger-info-tooltip-wrap:focus .passenger-info-tooltip,
.passenger-info-tooltip-wrap:hover .passenger-info-tooltip {
    opacity: 1;
    visibility: visible;
}

.passenger-info-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    width: max-content;
    max-width: 220px;
    padding: 0.5rem 0.65rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #fff;
    background: #333;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 5;
    pointer-events: none;
}

/* Right: booking summary panel */
.passenger-summary-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 2rem;
}

.passenger-summary-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.passenger-summary-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

.passenger-choose-vehicle-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background: none;
    padding: 0.35rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    color: #06357a;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.passenger-choose-vehicle-link:hover {
    opacity: 0.85;
}

.passenger-trip-summary {
    padding: 1rem;
    border-radius: 12px;
    background: linear-gradient(145deg, #fff 0%, #f4f7fc 100%);
    border: 1px solid rgba(6, 53, 122, 0.1);
    box-shadow: 0 1px 2px rgba(6, 53, 122, 0.06);
}

.passenger-trip-summary-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(6, 53, 122, 0.08);
}

.passenger-trip-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #06357a;
    color: #fff;
    flex-shrink: 0;
}

.passenger-trip-summary-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #06357a;
    margin-bottom: 0.2rem;
}

.passenger-trip-type-pill {
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 600;
    color: #06357a;
    background: #e8f0fe;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.passenger-trip-summary-route {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0.75rem;
}

.passenger-trip-route-row {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}

.passenger-trip-route-marker {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #e8f0fe;
    color: #06357a;
}

.passenger-trip-route-marker--to {
    background: #f0f4f8;
    color: #5f6368;
}

.passenger-trip-route-label {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5f6368;
}

.passenger-trip-route-value {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.35;
    word-break: break-word;
}

.passenger-trip-route-connector {
    width: 2px;
    height: 12px;
    margin: 0.15rem 0 0.15rem 13px;
    background: linear-gradient(180deg, #06357a 0%, #c5d4e8 100%);
    border-radius: 2px;
}

.passenger-trip-route-connector[hidden] {
    display: none !important;
}

#passenger-summary-dropoff-wrap[hidden] {
    display: none !important;
}

.passenger-trip-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.passenger-trip-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.55rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(6, 53, 122, 0.08);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #333;
}

.passenger-trip-meta-icon {
    display: flex;
    color: #06357a;
}

#passenger-summary-duration-wrap[hidden] {
    display: none !important;
}

.passenger-trip-summary-block {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(6, 53, 122, 0.08);
}

.passenger-trip-summary-block[hidden] {
    display: none !important;
}

.passenger-trip-summary-block-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #06357a;
}

.passenger-trip-summary-block-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #06357a;
}

.passenger-trip-detail-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.75rem;
    margin: 0;
}

.passenger-trip-detail-item {
    margin: 0;
}

.passenger-trip-detail-item dt {
    margin: 0 0 0.15rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5f6368;
}

.passenger-trip-detail-item dd {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1a1a1a;
    word-break: break-word;
}

.passenger-trip-options-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.passenger-trip-option-item {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1a1a1a;
    padding: 0.4rem 0.55rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(6, 53, 122, 0.08);
    border-radius: 8px;
}

.passenger-trip-option-item[hidden] {
    display: none !important;
}

.passenger-trip-option-icon {
    display: flex;
    flex-shrink: 0;
    color: #0d8050;
    margin-top: 0.1rem;
}

.passenger-trip-option-sub {
    font-size: 0.75rem;
    font-weight: 400;
    color: #5f6368;
    width: 100%;
    padding-left: 1.35rem;
}

.passenger-trip-option-item--none {
    color: #5f6368;
    font-weight: 400;
    font-style: italic;
    background: transparent;
    border-style: dashed;
}

.passenger-vehicle-card {
    background: #fff;
    border: 2px solid #e8eaed;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.passenger-vehicle-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e8eaed;
}

.passenger-vehicle-card-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #5f6368;
}

.passenger-vehicle-price-line {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #06357a;
    text-align: right;
    white-space: nowrap;
}

.passenger-vehicle-card-body {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    align-items: flex-start;
}

.passenger-vehicle-media {
    flex-shrink: 0;
    width: 120px;
    border-radius: 10px;
    overflow: hidden;
    background: #f0f4f8;
}

.passenger-vehicle-media img {
    display: block;
    width: 120px;
    height: 88px;
    object-fit: cover;
}

.passenger-vehicle-details {
    flex: 1;
    min-width: 0;
}

.passenger-vehicle-name {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
}

.passenger-vehicle-desc {
    display: none;
}

.passenger-vehicle-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.passenger-vehicle-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #5f6368;
}

.passenger-vehicle-meta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: #f0f4fa;
    color: #06357a;
}

.passenger-vehicle-meta-icon svg {
    width: 14px;
    height: 14px;
}

.passenger-vehicle-features {
    list-style: none;
    margin: 0;
    padding: 0.75rem 1rem 0.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem 0.75rem;
    border-top: 1px solid #f0f0f0;
}

.passenger-vehicle-features li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: #5f6368;
    line-height: 1.3;
}

.passenger-feature-icon {
    flex-shrink: 0;
    display: flex;
    color: #06357a;
    opacity: 0.9;
}

.passenger-step-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.passenger-step-continue {
    width: 100%;
    padding: 0.875rem 2rem;
    background: #06357a;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease;
}

.passenger-step-continue:hover {
    background: #052a63;
}

.passenger-step-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    color: #333;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.passenger-step-back-btn:hover {
    border-color: #06357a;
    background: #f8fafc;
}

.passenger-step-footer-links {
    text-align: center;
}

.passenger-help-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    color: #06357a;
    text-decoration: none;
}

.passenger-help-link:hover {
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .passenger-step-container {
        grid-template-columns: 1fr;
    }

    .passenger-summary-panel {
        position: static;
    }

    .passenger-booking-type-tabs {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .passenger-step-section {
        padding: 1rem 0.75rem;
    }

    .passenger-trip-detail-list {
        grid-template-columns: 1fr;
    }

    .passenger-step-breadcrumb-current {
        font-size: 1.125rem;
    }

    .passenger-field-row {
        grid-template-columns: 1fr;
    }

    .passenger-vehicle-card-body {
        flex-direction: column;
    }

    .passenger-vehicle-media,
    .passenger-vehicle-media img {
        width: 100%;
        height: 140px;
    }

    .passenger-vehicle-features {
        grid-template-columns: 1fr;
    }

    .passenger-vehicle-price-line {
        font-size: 1rem;
    }
}






































/* Reusable page breadcrumb (same design, use on any page) */
.page-breadcrumb-section {
    background: #f9f9f9;
    padding: 1.5rem 2rem 0;
    width: 100%;
    float: left;
}

.page-breadcrumb-container {
    max-width: 1400px;
    margin: 0 auto;
}

.page-breadcrumb-inner {
    margin: 0;
}

.page-breadcrumb-nav {
    margin-bottom: 0;
}

.page-breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
}

.page-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.page-breadcrumb-link {
    color: #06357a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.page-breadcrumb-link:hover {
    color: #06357a;
}

.page-breadcrumb-link svg {
    float: left;
}

.page-breadcrumb-link span {
    margin: -2px 0 0 12px;
    float: left;
}

.page-breadcrumb-icon {
    flex-shrink: 0;
    opacity: 0.85;
}

.page-breadcrumb-sep {
    color: #b0b0b0;
    font-weight: 300;
    user-select: none;
}

.page-breadcrumb-current {
    color: #333;
}

/* Generic WordPress page content (page.php) */
.page-content-section .page-content-header {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.page-content-section .page-content-title {
    margin: 0;
    color: #06357a;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
}

.page-content-section .page-content-body {
    color: #333;
    font-size: 1rem;
    line-height: 1.7;
}

.page-content-section .page-content-body p.wp-block-paragraph {
    margin: 0 0 8px;
}

.page-content-section .page-content-body wp-block-heading {
    margin: 0 0 10px;
}

.page-content-section .page-content-body> :first-child {
    margin-top: 0;
}

.page-content-section .page-content-body> :last-child {
    margin-bottom: 0;
}

.page-content-section .page-content-pagination {
    margin-top: 2rem;
}

/* Legal / policy pages */
.legal-page-section {
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2rem) clamp(3rem, 6vw, 4.5rem);
    background: #fff;
}

.legal-page-container {
    max-width: 820px;
    margin: 0 auto;
}

.legal-page-updated {
    margin: 0 0 1.5rem;
    color: #666;
    font-size: 0.95rem;
}

.legal-page-intro {
    margin: 0 0 2rem;
    color: #333;
    font-size: 1.05rem;
    line-height: 1.75;
}

.legal-page-block {
    margin-bottom: 1.75rem;
}

.legal-page-block:last-child {
    margin-bottom: 0;
}

.legal-page-heading {
    margin: 0 0 0.65rem;
    color: #06357a;
    font-size: clamp(1.15rem, 2.5vw, 1.35rem);
    font-weight: 700;
    line-height: 1.35;
}

.legal-page-body p {
    margin: 0 0 1rem;
    color: #333;
    font-size: 1rem;
    line-height: 1.75;
}

.legal-page-body p:last-child {
    margin-bottom: 0;
}

.legal-page-body h2,
.legal-page-body h3,
.legal-page-body h4 {
    font-weight: 500;
    line-height: 1.25;
    color: #000000;
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin: 0 0 12px;
}

.legal-page-body h2 {
    font-size: clamp(1.15rem, 2.5vw, 1.35rem);
}

.legal-page-body h3 {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
}

.legal-page-body ul,
.legal-page-body ol {
    margin: 0 0 1rem;
    padding-left: 1.35rem;
    color: #333;
    line-height: 1.75;
}

.legal-page-body li+li {
    margin-top: 0.35rem;
}

.legal-page-body a {
    color: #06357a;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-page-body a:hover {
    color: #0a4a9e;
}

/************************************************
 * Vehicle booking — Checkout step
 *************************************************/
.checkout-section {
    background: #f0f2f5;
    padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 3vw, 2rem) clamp(2.5rem, 5vw, 4rem);
}

.checkout-section[hidden] {
    display: none !important;
}

.checkout-container {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
}

.checkout-page-header {
    margin-bottom: 1.75rem;
}

.checkout-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin-bottom: 1rem;
}

.checkout-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: none;
    background: none;
    color: #06357a;
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
}

.checkout-back-link:hover {
    text-decoration: underline;
}

.checkout-breadcrumb-sep {
    color: #9aa0a6;
}

.checkout-breadcrumb-current {
    color: #5f6368;
    font-size: 0.9375rem;
}

.checkout-page-title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    color: #06357a;
    line-height: 1.2;
}

.checkout-page-lead {
    margin: 0;
    max-width: 42rem;
    font-size: 0.9375rem;
    color: #5f6368;
    line-height: 1.5;
}

.checkout-progress {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    max-width: 28rem;
}

.checkout-progress-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    font-size: 0.8125rem;
    color: #80868b;
}

.checkout-progress-step:not(:last-child)::after {
    content: "";
    flex: 1;
    height: 2px;
    margin: 0 0.5rem;
    background: #dadce0;
}

.checkout-progress-step.is-complete:not(:last-child)::after {
    background: #06357a;
}

.checkout-progress-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    background: #e8eaed;
    color: #5f6368;
}

.checkout-progress-step.is-complete .checkout-progress-marker {
    background: #06357a;
    color: #fff;
}

.checkout-progress-step.is-current .checkout-progress-marker {
    background: #e19500;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(225, 149, 0, 0.25);
}

.checkout-progress-step.is-current {
    color: #202124;
    font-weight: 600;
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: 1.5rem;
    align-items: start;
}

.checkout-review-heading {
    margin: 0 0 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #202124;
}

.checkout-card {
    background: #fff;
    border: 1px solid #e0e3e7;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.06), 0 4px 16px rgba(60, 64, 67, 0.04);
    margin-bottom: 1rem;
    overflow: hidden;
}

.checkout-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid #eceff1;
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}

.checkout-card-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #202124;
}

.checkout-card-edit,
.checkout-swap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.75rem;
    border: 1px solid #dadce0;
    border-radius: 6px;
    background: #fff;
    color: #06357a;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.checkout-card-edit:hover,
.checkout-swap-btn:hover {
    border-color: #06357a;
    background: #f8fafc;
}

.checkout-card-body {
    padding: 1rem 1.125rem 1.125rem;
}

.checkout-vehicle-hero {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1rem;
    padding: 1rem 1.125rem 1.125rem;
}

.checkout-vehicle-media {
    border-radius: 10px;
    overflow: hidden;
    background: #f4f6f8;
    aspect-ratio: 4 / 3;
}

.checkout-vehicle-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.checkout-trip-type-pill {
    display: inline-block;
    margin-bottom: 0.35rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #06357a;
    background: rgba(6, 53, 122, 0.08);
    border: 1px solid rgba(6, 53, 122, 0.12);
    border-radius: 999px;
}

.checkout-vehicle-title {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #202124;
    line-height: 1.3;
}

.checkout-vehicle-price-line {
    margin: 0.5rem 0 0.15rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #06357a;
}

.checkout-vehicle-price-note {
    margin: 0;
    font-size: 0.75rem;
    color: #80868b;
}

.checkout-route {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1rem;
}

.checkout-route-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.checkout-route-marker {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-top: 0.35rem;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #dadce0;
}

.checkout-route-marker--pickup {
    background: #e19500;
}

.checkout-route-marker--dropoff {
    background: #0d8050;
}

.checkout-route-connector {
    width: 2px;
    min-height: 1.25rem;
    margin: 0.15rem 0 0.15rem 5px;
    background: linear-gradient(180deg, #e19500 0%, #0d8050 100%);
    border-radius: 1px;
}

.checkout-route-connector[hidden] {
    display: none !important;
}

.checkout-route-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #80868b;
    margin-bottom: 0.15rem;
}

.checkout-route-value {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #202124;
    line-height: 1.4;
    word-break: break-word;
}

.checkout-schedule-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.checkout-schedule-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    background: #f8f9fa;
    border: 1px solid #e8eaed;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: #3c4043;
}

.checkout-schedule-chip[hidden] {
    display: none !important;
}

.checkout-schedule-icon {
    display: inline-flex;
    color: #06357a;
}

.checkout-schedule-label {
    font-weight: 600;
    color: #5f6368;
}

.checkout-schedule-value {
    font-weight: 500;
    color: #202124;
}

.checkout-extras-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 1rem;
    margin: 0;
}

.checkout-extras-grid--inline {
    padding-top: 0.25rem;
    border-top: 1px solid #eceff1;
}

.checkout-extras-item {
    margin: 0;
}

.checkout-extras-item dt {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #80868b;
    margin-bottom: 0.1rem;
}

.checkout-extras-item dd {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #202124;
}

.checkout-extras-item[hidden] {
    display: none !important;
}

.checkout-option-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

.checkout-option-tags[hidden] {
    display: none !important;
}

.checkout-option-tag {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #06357a;
    background: rgba(6, 53, 122, 0.08);
    border: 1px solid rgba(6, 53, 122, 0.12);
    border-radius: 999px;
}

.checkout-extras-empty {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: #9aa0a6;
    font-style: italic;
}

.checkout-extras-empty[hidden] {
    display: none !important;
}

.checkout-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
}

.checkout-contact-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.checkout-contact-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #80868b;
}

.checkout-contact-value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #202124;
    word-break: break-word;
}

.checkout-contact-item--notes {
    grid-column: 1 / -1;
}

.checkout-contact-item--notes .checkout-contact-value {
    white-space: pre-wrap;
}

.checkout-notes-text {
    margin: 0;
    padding: 1rem 1.125rem 1.125rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #3c4043;
    white-space: pre-wrap;
}

.checkout-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    background: #fff8e6;
    border: 1px solid rgba(225, 149, 0, 0.35);
    border-radius: 10px;
    font-size: 0.875rem;
    color: #5f4b00;
    line-height: 1.45;
}

.checkout-alert-icon {
    flex-shrink: 0;
    color: #e19500;
}

.checkout-cost-card {
    padding: 1rem 1.125rem;
}

.checkout-cost-card--mobile {
    display: none;
}

.checkout-cost-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.35rem 0;
    font-size: 0.9375rem;
    color: #3c4043;
}

.checkout-cost-row--fee {
    font-size: 0.875rem;
    color: #5f6368;
}

.checkout-cost-row--fee[hidden],
.checkout-cost-row.checkout-cost-row--fee[hidden] {
    display: none !important;
}

.checkout-cost-total {
    margin-top: 0.5rem;
    padding-top: 0.65rem;
    border-top: 1px solid #eceff1;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #202124;
}

.checkout-payment-sidebar .checkout-booking-message:not([hidden]) {
    margin-bottom: 0;
}

.checkout-stripe-charge-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    background: linear-gradient(135deg, #eef4fc 0%, #e3edfa 100%);
    border: 1px solid #b8cce8;
    border-left: 4px solid #06357a;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(6, 53, 122, 0.08);
}

.checkout-stripe-charge-notice[hidden] {
    display: none !important;
}

.checkout-stripe-charge-notice-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(6, 53, 122, 0.1);
    color: #06357a;
}

.checkout-stripe-charge-notice-text {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.45;
    color: #06357a;
}

/* .checkout-sidebar-sticky {
    position: sticky;
    top: calc(var(--trip-plan-sticky-offset, 80px) + 1rem);
} */

.checkout-total-summary-card {
    background: #fff;
    border: 1px solid #e0e3e7;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(6, 53, 122, 0.08);
    padding: 1.125rem;
    margin-bottom: 1rem;
}

.checkout-total-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.checkout-total-summary-title {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #5f6368;
}

.checkout-stripe-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #06357a;
    background: #f4f6f8;
    border: 1px solid #dadce0;
    border-radius: 4px;
}

.checkout-total-summary-header {
    cursor: pointer;
    user-select: none;
}

.checkout-total-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.9375rem;
}

.checkout-total-summary-header .checkout-total-summary-value {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 1.375rem;
    font-weight: 700;
    color: #06357a;
}

.checkout-total-summary-chevron {
    display: inline-flex;
    color: #5f6368;
    transition: transform 0.2s ease;
}

.checkout-total-summary-details {
    margin-top: 0.5rem;
}

.checkout-total-summary-details.is-collapsed {
    display: none;
}

.checkout-total-summary-header[aria-expanded="false"] .checkout-total-summary-chevron {
    transform: rotate(180deg);
}

.checkout-total-summary-divider {
    height: 1px;
    background: #eceff1;
    margin: 0.5rem 0;
}

.checkout-total-fee-divider[hidden],
.checkout-total-fee-row[hidden] {
    display: none !important;
}

.checkout-cost-disclaimer {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #80868b;
}

.checkout-payment-card {
    padding: 0;
}

.checkout-payment-card .checkout-payment-title {
    margin: 0;
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid #eceff1;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #202124;
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}

.checkout-payment-choice-fieldset {
    border: none;
    margin: 0;
    padding: 0.75rem 1.125rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.checkout-payment-choice-label {
    position: relative;
    display: block;
    cursor: pointer;
}

.checkout-payment-choice {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.checkout-payment-choice-label.is-stripe-unavailable .checkout-payment-choice-box {
    border-style: dashed;
}

.checkout-stripe-config-notice {
    margin: 0 1.125rem 0.75rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #5f6368;
    background: #fff8e6;
    border: 1px solid #f0d78c;
    border-radius: 8px;
}

.checkout-payment-choice-box {
    display: block;
    padding: 0.85rem 1rem;
    border: 2px solid #e0e3e7;
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.checkout-payment-choice:checked+.checkout-payment-choice-box {
    border-color: #06357a;
    background: rgba(6, 53, 122, 0.04);
    box-shadow: 0 0 0 1px rgba(6, 53, 122, 0.08);
}

.checkout-payment-choice-title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #202124;
    margin-bottom: 0.15rem;
}

.checkout-payment-choice-desc {
    display: block;
    font-size: 0.8125rem;
    color: #5f6368;
    line-height: 1.35;
}

.checkout-stripe-panel,
.checkout-stripe-redirect-panel {
    margin: 0 1.125rem 1.125rem;
    padding: 1rem;
    background: #f8f9fa;
    border: 1px solid #e0e3e7;
    border-radius: 10px;
}

.checkout-stripe-panel[hidden],
.checkout-stripe-redirect-panel[hidden] {
    display: none !important;
}

.checkout-stripe-redirect-lead {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #3c4043;
}

.checkout-payment-brands--inline {
    margin-top: 0.25rem;
}

.checkout-stripe-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.checkout-stripe-label {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #202124;
}

.checkout-payment-brands {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.checkout-payment-brand {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.4rem;
    border-radius: 4px;
    border: 1px solid #e8eaed;
    background: #fff;
    color: #5f6368;
}

.checkout-payment-brand--visa {
    color: #1a1f71;
}

.checkout-payment-brand--mc {
    color: #eb001b;
}

.checkout-payment-brand--amex {
    color: #006fcf;
}

.checkout-stripe-card-wrap {
    position: relative;
}

.checkout-stripe-card-wrap.is-loading .checkout-stripe-card-element {
    visibility: hidden;
}

.checkout-stripe-card-loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 8px;
}

.checkout-stripe-card-loader[hidden] {
    display: none !important;
}

.checkout-stripe-card-loader-spinner {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid rgba(6, 53, 122, 0.18);
    border-top-color: #06357a;
    border-radius: 50%;
    animation: checkout-loader-spin 0.7s linear infinite;
}

.checkout-stripe-card-loader-text {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #5f6368;
}

.checkout-stripe-card-element {
    padding: 0.85rem 0.95rem;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 8px;
    min-height: 46px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.checkout-stripe-card-element:focus-within {
    border-color: #06357a;
    box-shadow: 0 0 0 3px rgba(6, 53, 122, 0.12);
}

.checkout-stripe-errors {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--primary-error, #f04);
}

.checkout-confirm-card {
    background: #fff;
    border: 1px solid #e0e3e7;
    border-radius: 12px;
    padding: 1.125rem;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.06);
}

.checkout-consent-text {
    margin: 0 0 0.85rem;
    font-size: 0.8125rem;
    color: #5f6368;
    line-height: 1.45;
}

.checkout-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #3c4043;
    cursor: pointer;
}

.checkout-checkbox {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.15rem;
    accent-color: #06357a;
}

.checkout-terms-text {
    margin: 0 0 0.85rem;
    font-size: 0.8125rem;
}

.checkout-terms-link {
    color: #06357a;
    font-weight: 500;
}

.checkout-confirm-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.checkout-book-btn {
    width: 100%;
    padding: 0.9rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.checkout-book-btn-spinner {
    display: none;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: checkout-loader-spin 0.7s linear infinite;
}

.checkout-book-btn.is-loading .checkout-book-btn-spinner {
    display: inline-block;
}

.checkout-book-btn.is-loading {
    pointer-events: none;
    opacity: 0.92;
}

.checkout-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #dadce0;
    border-radius: 8px;
    background: #fff;
    color: #3c4043;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
}

.checkout-back-btn:hover {
    border-color: #06357a;
    color: #06357a;
}

.checkout-security-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-top: 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #9aa0a6;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.checkout-footer-links {
    margin-top: 1rem;
    text-align: center;
}

.checkout-help-link {
    font-size: 0.875rem;
    color: #06357a;
    text-decoration: none;
}

.checkout-help-link:hover {
    text-decoration: underline;
}

.checkout-segment-container--sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

#checkout-main-container .vehicle-booking-loader-overlay {
    border-radius: 12px;
}

.vehicle-booking-loader-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(2px);
}

.vehicle-booking-loader-overlay[hidden] {
    display: none !important;
}

.vehicle-booking-loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    text-align: center;
}

.vehicle-booking-loader-spinner {
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid rgba(6, 53, 122, 0.15);
    border-top-color: #06357a;
    border-radius: 50%;
    animation: checkout-loader-spin 0.8s linear infinite;
}

.vehicle-booking-loader-text {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #3c4043;
}

@keyframes checkout-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

#checkout-main-container.is-checkout-loading {
    pointer-events: none;
}

.booking-thank-you-section {
    padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem clamp(3rem, 8vw, 5rem);
    background: #f5f5f5;
    min-height: min(70vh, 640px);
    display: flex;
    align-items: center;
}

.booking-thank-you-section[hidden] {
    display: none !important;
}

.booking-thank-you-container {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.booking-thank-you-card {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: #fff;
    border: 1px solid #e0e3e7;
    border-radius: 20px;
    padding: 0 0 2rem;
    box-shadow:
        0 1px 2px rgba(60, 64, 67, 0.06),
        0 12px 40px rgba(6, 53, 122, 0.12);
}

.booking-thank-you-card-accent {
    height: 6px;
    background: linear-gradient(90deg, #06357a 0%, #1a5fbf 50%, #06357a 100%);
}

.booking-thank-you-card.is-error .booking-thank-you-card-accent {
    background: linear-gradient(90deg, #c5221f 0%, #f04 50%, #c5221f 100%);
}

.booking-thank-you-card.is-loading .booking-thank-you-card-accent {
    background: linear-gradient(90deg,
            #06357a 0%,
            #4a7ec4 25%,
            #06357a 50%,
            #4a7ec4 75%,
            #06357a 100%);
    background-size: 200% 100%;
    animation: booking-thank-you-accent-shimmer 1.8s linear infinite;
}

@keyframes booking-thank-you-accent-shimmer {
    to {
        background-position: 200% 0;
    }
}

.booking-thank-you-hero {
    padding: 2.25rem 2rem 1.5rem;
    background: linear-gradient(180deg, #f4f7fc 0%, #fff 55%);
}

.booking-thank-you-card.is-error .booking-thank-you-hero {
    background: linear-gradient(180deg, #fff5f5 0%, #fff 55%);
}

.booking-thank-you-icon-wrap {
    position: relative;
    width: 5.5rem;
    height: 5.5rem;
    margin: 0 auto 1rem;
}

.booking-thank-you-icon {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 999px;
    background: #fff;
    color: #06357a;
    border: 2px solid rgba(6, 53, 122, 0.12);
    box-shadow: 0 4px 16px rgba(6, 53, 122, 0.12);
}

.booking-thank-you-icon--error {
    color: var(--primary-error, #f04);
    border-color: rgba(255, 68, 0, 0.2);
    box-shadow: 0 4px 16px rgba(255, 68, 0, 0.12);
}

.booking-thank-you-card.is-success .booking-thank-you-icon--success {
    display: inline-flex;
    animation: booking-thank-you-pop 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

.booking-thank-you-card.is-error .booking-thank-you-icon--error {
    display: inline-flex;
}

@keyframes booking-thank-you-pop {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.booking-thank-you-spinner {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 5.5rem;
    height: 5.5rem;
    border: 3px solid rgba(6, 53, 122, 0.12);
    border-top-color: #06357a;
    border-radius: 50%;
    animation: checkout-loader-spin 0.8s linear infinite;
}

.booking-thank-you-card.is-loading .booking-thank-you-icon--success,
.booking-thank-you-card.is-loading .booking-thank-you-icon--error {
    display: none;
}

.booking-thank-you-card.is-loading .booking-thank-you-spinner {
    display: block;
}

.booking-thank-you-card:not(.is-loading) .booking-thank-you-spinner {
    display: none;
}

.booking-thank-you-eyebrow {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #06357a;
    background: rgba(6, 53, 122, 0.08);
    border-radius: 999px;
}

.booking-thank-you-card.is-error .booking-thank-you-eyebrow {
    color: var(--primary-error, #f04);
    background: rgba(255, 68, 0, 0.08);
}

.booking-thank-you-body {
    padding: 0 2rem;
}

.booking-thank-you-title {
    margin: 0 0 0.65rem;
    font-size: clamp(1.5rem, 4vw, 1.875rem);
    font-weight: 700;
    color: #06357a;
    line-height: 1.2;
}

.booking-thank-you-card.is-error .booking-thank-you-title {
    color: #202124;
}

.booking-thank-you-message {
    margin: 0 auto;
    max-width: 26rem;
    font-size: 1rem;
    line-height: 1.55;
    color: #3c4043;
}

.booking-thank-you-details {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    text-align: left;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    background: #f8f9fa;
    overflow: hidden;
}

.booking-thank-you-details[hidden] {
    display: none !important;
}

.booking-thank-you-detail {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.95rem 1.1rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #3c4043;
}

.booking-thank-you-detail+.booking-thank-you-detail {
    border-top: 1px solid #e8eaed;
}

.booking-thank-you-detail-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: #fff;
    color: #06357a;
    border: 1px solid #e0e3e7;
}

.booking-thank-you-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
    padding: 0 2rem;
}

.booking-thank-you-actions[hidden] {
    display: none !important;
}

.booking-thank-you-btn {
    display: inline-block;
    width: 100%;
    max-width: 200px;
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    pointer-events: auto;
    color: #fff;
    background: #06357a;
    text-transform: capitalize;
}

.booking-thank-you-link {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #06357a;
    text-decoration: none;
}

.booking-thank-you-link:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .booking-thank-you-hero {
        padding: 1.75rem 1.25rem 1.25rem;
    }

    .booking-thank-you-body,
    .booking-thank-you-actions {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

@media (max-width: 1024px) {
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-sidebar-sticky {
        position: static;
    }

    .checkout-cost-card--mobile {
        display: block;
        background: #fff;
        border: 1px solid #e0e3e7;
        border-radius: 12px;
        margin-bottom: 1rem;
    }
}

@media (max-width: 640px) {
    .checkout-section {
        padding: 1rem 0.75rem 2rem;
    }

    .checkout-progress-label {
        display: none;
    }

    .checkout-vehicle-hero {
        grid-template-columns: 1fr;
    }

    .checkout-vehicle-media {
        max-height: 200px;
    }

    .checkout-extras-grid {
        grid-template-columns: 1fr;
    }

    .checkout-contact-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Inner page banner (e.g. Fleet, inner pages) ===== */
.inner-banner-section {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.inner-banner-image {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.inner-banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.inner-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 53, 122, 0.85) 0%, rgba(6, 53, 122, 0.4) 45%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 1;
}

.inner-banner-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 1.75rem;
}

.inner-banner-content {
    margin-bottom: 1rem;
}

.inner-banner-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.35em;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.inner-banner-subtitle {
    font-size: clamp(0.9rem, 2vw, 1.05rem);
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-weight: 400;
    max-width: 420px;
}

.inner-banner-content h1,
.inner-banner-content .wp-block-heading {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.35em;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.inner-banner-content>p,
.inner-banner-content .wp-block-paragraph {
    font-size: clamp(0.9rem, 2vw, 1.05rem);
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-weight: 400;
    max-width: 420px;
}

/* Inner banner breadcrumb */
.inner-banner-section .breadcrumb-wrap {
    margin: 0;
}

/* Fleet single page only: center breadcrumb */
.inner-banner-section.fleet-single-banner .breadcrumb-wrap {
    display: flex;
    justify-content: center;
}

/* Fleet single page only: solid blue background instead of image */
.inner-banner-section.fleet-single-banner .inner-banner-image {
    background: linear-gradient(135deg, #06357a 0%, #0a4a9e 50%, #06357a 100%);
}

.inner-banner-section.fleet-single-banner .inner-banner-image img {
    display: none;
}

.inner-banner-section.fleet-single-banner .inner-banner-overlay {
    background: rgba(0, 0, 0, 0.15);
}

.inner-banner-section.fleet-single-banner .booking-form-container {
    padding: 0rem 3rem 0;
}

.inner-banner-section.fleet-single-banner .inner-banner-inner {
    padding: 0rem 2rem 1.5rem;
}

.inner-banner-section.fleet-single-banner {
    min-height: 252px;
}

.inner-banner-section .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    font-family: "Outfit", sans-serif;
}

.inner-banner-section .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.inner-banner-section .breadcrumb-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.inner-banner-section .breadcrumb-link:hover {
    color: #fff;
}

.inner-banner-section .breadcrumb-icon {
    flex-shrink: 0;
    opacity: 0.9;
}

.inner-banner-section .breadcrumb-sep {
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    user-select: none;
}

.inner-banner-section .breadcrumb-current {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

@media (min-width: 768px) {
    .inner-banner-section {
        min-height: 380px;
    }

    .inner-banner-inner {
        padding: 3rem 2rem 2rem;
    }

    .inner-banner-content {
        margin-bottom: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .inner-banner-section {
        min-height: 300px;
    }

    .inner-banner-inner {
        padding: 3.5rem 2rem 2.25rem;
    }
}

/*************
* Contact Page
*************/

.contact-help-section {
    background: #fff;
    padding-bottom: 2.5rem;
}

.contact-help-hero {
    background: linear-gradient(180deg, #031a35 0%, #06357a 55%, #06357a 100%);
    padding: 2.75rem 1.5rem 6.5rem;
    text-align: center;
}

.contact-help-hero-inner {
    max-width: 640px;
    margin: 0 auto;
}

.contact-help-title {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.contact-help-lede {
    margin: 0;
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.55;
}

.contact-help-cards-wrap {
    max-width: 1200px;
    margin: -1.2rem auto 0;
    padding: 0 1.25rem;
    position: relative;
    z-index: 1;
}

.contact-help-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.contact-help-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem 1.35rem 1.4rem;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 100%;
}

.contact-help-card-icon {
    color: #06357a;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-help-card-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #06357a;
    margin: 0 0 0.65rem;
    line-height: 1.25;
}

.contact-help-card-text {
    font-size: 0.9375rem;
    color: var(--tertiary, #5c6470);
    line-height: 1.55;
    margin: 0 0 1.25rem;
    flex: 1 1 auto;
}

.contact-help-card-link {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #06357a;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    transition: color 0.2s ease, gap 0.2s ease;
}

.contact-help-card-link:hover {
    color: #0a4a9e;
}

.contact-help-card-link:hover .contact-help-card-arrow {
    transform: translateX(3px);
}

.contact-help-card-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

@media (max-width: 1024px) {
    .contact-help-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-help-cards-wrap {
        margin-top: -3.5rem;
    }
}

@media (max-width: 640px) {
    .contact-help-hero {
        padding: 2.25rem 1rem 5rem;
    }

    .contact-help-cards {
        grid-template-columns: 1fr;
    }

    .contact-help-cards-wrap {
        margin-top: 2rem;
        padding: 0 1rem;
    }

    .contact-help-card {
        padding: 1.35rem 1.2rem;
    }
}

/* Contact main content */
.contact-main {
    padding: 2.5rem 1.5rem 3rem;
}

.contact-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

/* Contact form card */
.contact-form-card {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
}

.contact-form-card h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary, #333);
    margin: 0 0 0.5rem;
}

.contact-form-card .form-desc {
    font-size: 0.9375rem;
    color: var(--tertiary, #74747a);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

.contact-form-message {
    margin: 0 0 1.25rem;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.contact-form-message[hidden] {
    display: none !important;
}

.contact-form-message--success {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    color: #1b5e20;
}

.contact-form-message--error {
    background: #fdecea;
    border: 1px solid #f5c6c0;
    color: #b71c1c;
}

.contact-form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.contact-form .form-row.is-invalid input,
.contact-form .form-row.is-invalid select,
.contact-form .form-row.is-invalid textarea {
    border-color: var(--primary-error, #f04);
}

.contact-form .form-field-error {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    color: var(--primary-error, #f04);
    line-height: 1.4;
}

.contact-form .form-row {
    margin-bottom: 1.25rem;
}

.contact-form .form-row:last-of-type {
    margin-bottom: 1.5rem;
}

.contact-form label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--secondary, #333);
    margin-bottom: 0.4rem;
}

.contact-form .required {
    color: var(--primary-error, #f04);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: "Outfit", sans-serif;
    font-size: 1rem;
    color: var(--secondary, #333);
    background: #fff;
    border: 1px solid var(--border, #dddfe4);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--muted-foreground, #999);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: #06357a;
}

.contact-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-form .btn-submit {
    background: #06357a;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    width: 100%;
    height: auto;
    padding: 0.875rem 1.5rem;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1rem;
    border-radius: 8px;
}

.contact-form .btn-submit i {
    font-size: 1rem;
}

.contact-form .btn-submit-spinner {
    display: none;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: checkout-loader-spin 0.7s linear infinite;
}

.contact-form .btn-submit.is-loading .btn-submit-spinner {
    display: inline-block;
}

.contact-form .btn-submit:disabled,
.contact-form .btn-submit.is-loading {
    opacity: 0.85;
    cursor: wait;
    pointer-events: none;
}

.contact-form .btn-submit.is-loading .btn-submit-label i {
    display: none;
}

/* Contact info side */
.contact-info-side {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-primary, 0 8px 24px rgba(70, 70, 77, 0.08));
}

.contact-info-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #06357a;
    border-radius: 10px;
    font-size: 1.125rem;
}

.contact-info-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--secondary, #333);
    margin: 0 0 0.35rem;
}

.contact-info-card p {
    font-size: 0.9375rem;
    color: var(--tertiary, #74747a);
    margin: 0;
    line-height: 1.5;
}

.contact-info-card a {
    color: #06357a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-info-card a:hover {
    color: #0a4a9e;
    text-decoration: underline;
}

.contact-cta-box {
    padding: 1.5rem;
    background: linear-gradient(135deg, #06357a 0%, #0a4a9e 100%);
    border-radius: 12px;
    color: #fff;
}

.contact-cta-box h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.contact-cta-box p {
    font-size: 0.9375rem;
    opacity: 0.95;
    margin: 0 0 1rem;
    line-height: 1.5;
}

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: #25d366;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.btn-whatsapp:hover {
    background: #20bd5a;
    transform: translateY(-1px);
}

.btn-whatsapp i {
    font-size: 1.25rem;
}

.contact-map-wrap {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-primary, 0 8px 24px rgba(70, 70, 77, 0.08));
    background: #eee;
}

.contact-map-wrap iframe {
    display: block;
    width: 100%;
    height: 205px;
    border: none;
}

@media (min-width: 768px) {
    .contact-page-banner.contact-banner {
        min-height: 260px;
    }

    .contact-banner-inner {
        padding: 2.5rem 2rem 1.75rem;
    }
}

@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-main {
        padding: 2rem 1rem 2.5rem;
    }
}

@media (max-width: 640px) {

    .contact-form-card,
    .contact-info-card {
        padding: 1.25rem;
    }

    .contact-map-wrap iframe {
        height: 220px;
    }
}

/* ===== 404 Page ===== */
.error-404-section {
    padding: 3.5rem 1.5rem 4.5rem;
    background: var(--background, #f2f3f5);
}

.error-404-card {
    max-width: 640px;
    margin: 0 auto;
    padding: 2.5rem 2rem 2.75rem;
    text-align: center;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(6, 53, 122, 0.08);
    border: 1px solid rgba(6, 53, 122, 0.06);
}

.error-404-code {
    font-size: clamp(4.5rem, 14vw, 7rem);
    font-weight: 700;
    line-height: 1;
    margin: 0 0 0.5rem;
    background: linear-gradient(135deg, #06357a 0%, #0a4a9e 50%, #662442 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.04em;
}

.error-404-title {
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 700;
    color: #06357a;
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}

.error-404-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #46464d;
    margin: 0 0 2rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.error-404-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.error-404-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border-radius: 30px;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.2s ease;
}

.error-404-btn--primary {
    color: #fff;
    background: #06357a;
    border: 1px solid #06357a;
    box-shadow: 0 2px 12px rgba(6, 53, 122, 0.25);
}

.error-404-btn--primary:hover {
    background: #0a4a9e;
    border-color: #0a4a9e;
    box-shadow: 0 4px 16px rgba(6, 53, 122, 0.32);
    transform: translateY(-1px);
}

.error-404-btn--secondary {
    color: #06357a;
    background: #fff;
    border: 1px solid #06357a;
    box-shadow: 0 2px 10px rgba(6, 53, 122, 0.1);
}

.error-404-btn--secondary:hover {
    color: #fff;
    background: #06357a;
    box-shadow: 0 4px 16px rgba(6, 53, 122, 0.28);
    transform: translateY(-1px);
}

.error-404-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid #e5e5e5;
}

.error-404-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #46464d;
    text-decoration: none;
    border-radius: 10px;
    transition: background 0.2s ease, color 0.2s ease;
}

.error-404-link:hover {
    background: rgba(6, 53, 122, 0.06);
    color: #06357a;
}

.error-404-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(6, 53, 122, 0.08);
    color: #06357a;
    transition: background 0.2s ease, color 0.2s ease;
}

.error-404-link:hover .error-404-link-icon {
    background: #06357a;
    color: #fff;
}

.error-404-link-label {
    line-height: 1.3;
}

@media (max-width: 640px) {
    .error-404-section {
        padding: 2.5rem 1rem 3.5rem;
    }

    .error-404-card {
        padding: 2rem 1.25rem 2.25rem;
    }

    .error-404-actions {
        flex-direction: column;
    }

    .error-404-btn {
        width: 100%;
    }

    .error-404-links {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .error-404-link {
        flex-direction: row;
        justify-content: flex-start;
        padding: 0.875rem 1rem;
    }
}

/* ==========================================================================
   Login / Sign-up auth pages
   ========================================================================== */

.auth-section {
    padding: 3rem 1.5rem 4.5rem;
    background: linear-gradient(180deg, #f8f9fb 0%, #fff 100%);
}

.auth-grid {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.auth-card {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
}

.auth-card-header {
    margin-bottom: 1.5rem;
}

.auth-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(6, 53, 122, 0.08);
    color: #06357a;
    margin-bottom: 1rem;
}

.auth-card h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary, #333);
    margin: 0 0 0.35rem;
}

.auth-card-desc {
    font-size: 0.9375rem;
    color: var(--tertiary, #74747a);
    margin: 0;
    line-height: 1.5;
}

.auth-message {
    margin: 0 0 1.25rem;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.auth-message--success {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    color: #1b5e20;
}

.auth-message--error {
    background: #fdecea;
    border: 1px solid #f5c6c0;
    color: #b71c1c;
}

.auth-form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.auth-form .form-row {
    margin-bottom: 1.25rem;
}

.auth-form .form-row:last-of-type {
    margin-bottom: 1.5rem;
}

.auth-form label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--secondary, #333);
    margin-bottom: 0.4rem;
}

.auth-form .required {
    color: var(--primary-error, #f04);
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="tel"],
.auth-form input[type="password"] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: "Outfit", sans-serif;
    font-size: 1rem;
    color: var(--secondary, #333);
    background: #fff;
    border: 1px solid var(--border, #dddfe4);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s ease;
}

.auth-form input::placeholder {
    color: var(--muted-foreground, #999);
}

.auth-form input:focus {
    border-color: #06357a;
}

.auth-form-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.auth-form-row--inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.auth-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--secondary, #333);
    cursor: pointer;
    margin: 0;
}

.auth-checkbox input {
    width: 1rem;
    height: 1rem;
    accent-color: #06357a;
}

.auth-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: #06357a;
    text-decoration: none;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-form .btn-submit.auth-submit {
    background: #06357a;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
    width: 100%;
    padding: 0.875rem 1.5rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.auth-form .btn-submit.auth-submit:hover {
    background: #052d66;
}

.auth-terms {
    font-size: 0.8125rem;
    color: var(--tertiary, #74747a);
    line-height: 1.5;
    margin: -0.5rem 0 1.25rem;
}

.auth-switch {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border, #dddfe4);
    text-align: center;
    font-size: 0.9375rem;
    color: var(--tertiary, #74747a);
}

.auth-switch a {
    color: #06357a;
    font-weight: 600;
    text-decoration: none;
}

.auth-switch a:hover {
    text-decoration: underline;
}

.auth-aside {
    background: #06357a;
    color: #fff;
    padding: 2rem;
    border-radius: 12px;
    position: sticky;
    top: 7rem;
}

.auth-aside h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: #fff;
}

.auth-aside>p {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
    color: rgba(255, 255, 255, 0.88);
}

.auth-benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

.auth-benefit-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.auth-aside-cta {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.auth-aside-cta p {
    margin: 0 0 0.35rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
}

.auth-aside-link {
    color: #fff;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-aside-link:hover {
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 900px) {
    .auth-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
    }

    .auth-aside {
        position: static;
        order: -1;
    }
}

@media (max-width: 540px) {
    .auth-section {
        padding: 2rem 1rem 3rem;
    }

    .auth-card {
        padding: 1.5rem;
    }

    .auth-form-row-split {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .auth-form-row--inline {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   Customer dashboard
   ========================================================================== */

.customer-dashboard {
    padding: 2.5rem 1.5rem 4rem;
    background: linear-gradient(180deg, #f8f9fb 0%, #fff 100%);
}

.customer-dashboard__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.75rem;
    align-items: start;
}

.customer-dashboard__sidebar {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
    position: sticky;
    top: 6.5rem;
}

.dashboard-user-card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e8eaed;
}

.dashboard-user-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #06357a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.dashboard-user-card__name {
    margin: 0 0 0.15rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #17171a;
}

.dashboard-user-card__email {
    margin: 0;
    font-size: 0.8125rem;
    color: #777;
    word-break: break-word;
}

.dashboard-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dashboard-nav__link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    color: #3c4043;
    text-decoration: none;
    font-size: 0.9375rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.dashboard-nav__link svg {
    color: #5f6368;
    flex-shrink: 0;
}

.dashboard-nav__link:hover,
.dashboard-nav__link.is-active {
    background: rgba(6, 53, 122, 0.08);
    color: #06357a;
}

.dashboard-nav__link.is-active svg {
    color: #06357a;
}

.dashboard-nav__logout {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    color: #b71c1c;
    text-decoration: none;
    font-size: 0.875rem;
    transition: background 0.2s ease;
}

.dashboard-nav__logout:hover {
    background: #fdecea;
}

.customer-dashboard__main {
    min-width: 0;
}

.dashboard-panel {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}

.dashboard-panel__header {
    margin-bottom: 1.5rem;
}

.dashboard-panel__header h2 {
    margin: 0 0 0.35rem;
    font-size: 1.375rem;
    font-weight: 700;
    color: #17171a;
}

.dashboard-panel__header p {
    margin: 0;
    font-size: 0.9375rem;
    color: #74747a;
    line-height: 1.5;
}

.dashboard-notice {
    margin: 0 0 1rem;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    font-size: 0.9375rem;
}

.dashboard-notice--success {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    color: #1b5e20;
}

.dashboard-notice--error {
    background: #fdecea;
    border: 1px solid #f5c6c0;
    color: #b71c1c;
}

.dashboard-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #74747a;
}

.dashboard-empty__cta {
    display: inline-flex;
    margin-top: 1rem;
    width: auto;
    padding: 0.75rem 1.5rem;
}

.dashboard-bookings-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dashboard-booking-card {
    border: 1px solid #e8eaed;
    border-radius: 10px;
    overflow: hidden;
}

.dashboard-booking-card.is-editing {
    border-color: #06357a;
    box-shadow: 0 0 0 1px rgba(6, 53, 122, 0.15);
    overflow: visible;
}

.dashboard-booking-card__summary {
    padding: 1.25rem;
}

.dashboard-booking-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.dashboard-booking-card__top h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #17171a;
}

.dashboard-booking-meta {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.35rem;
    font-size: 0.875rem;
    color: #3c4043;
}

.dashboard-booking-meta strong {
    color: #17171a;
}

.dashboard-booking-card__actions {
    display: flex;
    gap: 0.75rem;
}

.dashboard-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
    background: #f1f3f4;
    color: #3c4043;
}

.dashboard-badge--paid,
.dashboard-badge--succeeded {
    background: #e8f5e9;
    color: #1b5e20;
}

.dashboard-badge--awaiting-pickup,
.dashboard-badge--due-on-pickup {
    background: #fff8e1;
    color: #e65100;
}

.dashboard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.dashboard-btn--primary,
.dashboard-form .btn-submit.dashboard-btn--primary {
    background: #06357a;
    color: #fff;
}

.dashboard-btn--primary:hover,
.dashboard-form .btn-submit.dashboard-btn--primary:hover {
    background: #052d66;
}

.dashboard-btn--ghost {
    background: #fff;
    color: #06357a;
    border: 1px solid #c8d0da;
}

.dashboard-booking-edit {
    padding: 0;
    border-top: 1px solid #e8eaed;
    background: #f8f9fb;
}

.dashboard-booking-edit>h4 {
    margin: 0;
    padding: 1.25rem 1.25rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #06357a;
}

.dashboard-booking-trip-section {
    padding: 1rem 1.25rem 0;
    background: transparent;
}

.dashboard-booking-trip-section .trip-type-container {
    margin-bottom: 1rem;
}

.dashboard-booking-trip-section .trip-type-container .trip-type-tabs {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 4px;
    border-radius: 999px;
    background: #e8e8e8;
    isolation: isolate;
    margin: 0;
}

.dashboard-booking-trip-section .trip-type-container .trip-type-tabs .trip-type-tabs-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    pointer-events: none;
    z-index: 0;
}

.dashboard-booking-trip-section .trip-type-container.by-transfer-active .trip-type-tabs .trip-type-tabs-indicator {
    transform: translateX(100%);
}

.dashboard-booking-trip-section .trip-type-container .trip-type-tabs button {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    padding: 0.65rem 0.75rem;
    border: none;
    background: transparent;
    color: #5f6368;
    font-size: 0.9rem;
    font-weight: 400;
    cursor: pointer;
    transition: color 0.25s ease, font-weight 0.25s ease;
    font-family: inherit;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: -0.02em;
}

.dashboard-booking-trip-section .trip-type-container .trip-type-tabs button:hover:not(.active) {
    color: #3c4043;
}

.dashboard-booking-trip-section .trip-type-container .trip-type-tabs button.active {
    color: #1a1a1a;
    font-weight: 500;
}

.dashboard-booking-trip-section .trip-type-container .trip-type-info {
    display: none;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 0.9rem;
    background: #e8f0fe;
    color: #1967d2;
    font-size: 0.875rem;
    border-radius: 8px;
    margin-top: 0.6rem;
    line-height: 1.4;
}

.dashboard-booking-trip-section .trip-type-container.by-transfer-active .trip-type-info {
    display: flex;
}

.dashboard-booking-trip-section .trip-type-container .trip-type-info svg {
    flex-shrink: 0;
    margin-top: 3px;
}

.dashboard-booking-trip-section .trip-plan-pickup {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    padding: 1rem;
}

.dashboard-booking-trip-section .trip-plan-field {
    margin-bottom: 1rem;
}

.dashboard-booking-trip-section .trip-plan-input {
    width: 100%;
}

.dashboard-booking-trip-section .trip-plan-pickup-popovers {
    position: relative;
    z-index: 30;
}

.dashboard-booking-edit-extra {
    padding: 1rem 1.25rem 0;
}

.dashboard-booking-edit .dashboard-form-actions {
    padding: 1rem 1.25rem 1.25rem;
}

.dashboard-booking-card.is-editing .dashboard-booking-card__summary {
    border-bottom: 1px solid #e8eaed;
}

.dashboard-form .form-row {
    margin-bottom: 1rem;
}

.dashboard-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
    color: #333;
}

.dashboard-form input,
.dashboard-form textarea,
.dashboard-form select {
    width: 100%;
    padding: 0.65rem 0.875rem;
    border: 1px solid #dddfe4;
    border-radius: 8px;
    font-family: "Outfit", sans-serif;
    font-size: 0.9375rem;
}

.dashboard-form input:focus,
.dashboard-form textarea:focus {
    outline: none;
    border-color: #06357a;
}

.dashboard-form-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.dashboard-form-actions {
    margin-top: 0.5rem;
}

.dashboard-table-wrap {
    overflow-x: auto;
}

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.dashboard-table th,
.dashboard-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e8eaed;
}

.dashboard-table th {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #06357a;
    background: #f8f9fb;
}

.dashboard-table tbody tr:hover {
    background: #fafbfc;
}

.dashboard-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.dashboard-card {
    border: 1px solid #e8eaed;
    border-radius: 10px;
    padding: 1.25rem;
    background: #fafbfc;
}

.dashboard-card h3 {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #17171a;
}

@media (max-width: 960px) {
    .customer-dashboard__inner {
        grid-template-columns: 1fr;
    }

    .customer-dashboard__sidebar {
        position: static;
    }

    .dashboard-profile-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-form-row-split {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 640px) {
    .customer-dashboard {
        padding: 1.5rem 1rem 3rem;
    }

    .dashboard-panel {
        padding: 1.25rem;
    }

    .dashboard-table thead {
        display: none;
    }

    .dashboard-table tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #e8eaed;
        border-radius: 8px;
        overflow: hidden;
    }

    .dashboard-table td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid #f1f3f4;
    }

    .dashboard-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #5f6368;
    }
}

.about-pillars-section {
    background: #f7f7f7;
    padding-bottom: 2.5rem;
}

.about-pillars-hero {
    background: #f7f7f7;
    padding: 2.75rem 1.5rem 6.5rem;
    text-align: center;
}

.about-pillars-hero-inner {
    max-width: 640px;
    margin: 0 auto;
}

.about-pillars-title {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    color: #222;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.about-pillars-lede {
    margin: 0;
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    color: #222;
    line-height: 1.55;
}

.about-pillars-cards-wrap {
    max-width: 1200px;
    margin: -4.75rem auto 0;
    padding: 0 1.25rem;
    position: relative;
    z-index: 1;
}

.about-pillars-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.about-pillar-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem 1.35rem 1.4rem;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 100%;
}

.about-pillar-icon {
    color: #06357a;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-pillar-card-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #06357a;
    margin: 0 0 0.65rem;
    line-height: 1.25;
}

.about-pillar-card-text {
    font-size: 0.9375rem;
    color: var(--tertiary, #5c6470);
    line-height: 1.55;
    margin: 0;
}

/* Impact band (stats + CTA) — light editorial block */
.about-impact {
    background: #f7f7f7;
    padding: 4rem 1.5rem 3.5rem;
    text-align: center;
}

.about-impact-inner {
    max-width: 900px;
    margin: 0 auto;
}

.about-impact-title {
    font-size: clamp(1.75rem, 4vw, 2.35rem);
    font-weight: 700;
    color: #222;
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.about-impact-sub {
    margin: 0 auto 1.75rem;
    max-width: 520px;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: #717171;
}

.about-impact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: #222;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.about-impact-btn:hover {
    background: #000;
    transform: translateY(-1px);
}

.about-impact-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1.5rem;
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.about-impact-stat {
    text-align: center;
}

.about-impact-value {
    display: block;
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 700;
    color: #222;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 0.4rem;
}

.about-impact-label {
    display: block;
    font-size: 0.9375rem;
    color: #717171;
    line-height: 1.4;
}

.about-main {
    padding: 0 1.5rem 3rem;
    background: #fff;
}

.about-main-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding-top: 0.5rem;
}

/* Centered statement + large rounded image */
.about-statement {
    text-align: center;
    padding: 3.5rem 0 2.5rem;
}

.about-statement-title {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 auto 1rem;
    max-width: 720px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.about-statement-lede {
    margin: 0 auto 2.25rem;
    max-width: 560px;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #6a6a6a;
}

.about-statement-visual {
    border-radius: 28px;
    overflow: hidden;
    max-width: 100%;
    margin: 0 auto;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1);
}

.about-statement-visual img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(72vh, 560px);
    object-fit: cover;
    object-position: center;
}

/* Two-column “get involved” style */
.about-dual {
    padding: 3rem 0 2.5rem;
}

.about-dual-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.about-dual-title {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.65rem;
    letter-spacing: -0.02em;
}

.about-dual-sub {
    margin: 0 auto;
    max-width: 560px;
    font-size: 1rem;
    line-height: 1.55;
    color: #6a6a6a;
}

.about-dual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 2rem;
    align-items: start;
}

.about-dual-card {
    text-align: center;
}

.about-dual-media {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    aspect-ratio: 4 / 3;
    background: #eee;
}

.about-dual-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 25% center;
    display: block;
    transition: transform 0.45s ease;
}

.about-dual-media--alt img {
    object-position: 75% center;
}

.about-dual-card:hover .about-dual-media img {
    transform: scale(1.03);
}

.about-dual-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.65rem;
}

.about-dual-card-text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #6a6a6a;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* Team member grid */
.about-team {
    padding: 3rem 0 1rem;
}

.about-team-header {
    text-align: center;
    margin-bottom: 2rem;
}

.about-team-title {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.65rem;
    letter-spacing: -0.02em;
}

.about-team-sub {
    margin: 0 auto;
    max-width: 560px;
    font-size: 1rem;
    line-height: 1.55;
    color: #6a6a6a;
}

.about-team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem 1.25rem;
    row-gap: 1.75rem;
}

.about-team-member {
    margin: 0;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-team-member:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}

.about-team-member-visual {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #e8ecf2;
}

.about-team-member-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.about-team-member-photo--1 {
    object-position: 20% center;
}

.about-team-member-photo--2 {
    object-position: 45% center;
}

.about-team-member-photo--3 {
    object-position: 70% center;
}

.about-team-member-photo--4 {
    object-position: 55% 35%;
}

.about-team-member-photo--5 {
    object-position: 30% 25%;
}

.about-team-member-photo--6 {
    object-position: 60% 40%;
}

.about-team-member-photo--7 {
    object-position: 40% 60%;
}

.about-team-member-photo--8 {
    object-position: 75% 30%;
}

.about-team-member:hover .about-team-member-photo {
    transform: scale(1.05);
}

.about-team-member-body {
    padding: 1.15rem 1.1rem 1.1rem;
    text-align: center;
    border-top: 3px solid #06357a;
}

.about-team-member-name {
    margin: 0 0 0.35rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.about-team-member-role {
    margin: 0 0 0.85rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #06357a;
    line-height: 1.4;
}

.about-team-member-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.about-team-member-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #06357a;
    background: #eef2f8;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.about-team-member-social-link:hover {
    background: #06357a;
    color: #fff;
    transform: translateY(-1px);
}

.about-team-member-social-link:focus-visible {
    outline: 2px solid #06357a;
    outline-offset: 2px;
}

.about-page-prose {
    padding: 0 0 2rem;
}

.about-prose-card {
    background: #fff;
    border-radius: 12px;
    padding: 2rem 1.75rem;
    box-shadow: var(--shadow-primary, 0 8px 24px rgba(70, 70, 77, 0.08));
}

.about-prose-card.entry-content {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--secondary, #333);
}

.about-prose-card.entry-content>*:first-child {
    margin-top: 0;
}

.about-prose-card.entry-content>*:last-child {
    margin-bottom: 0;
}

.about-cta {
    padding: 0 0 0.5rem;
}

.about-cta-inner {
    background: linear-gradient(135deg, #06357a 0%, #0a4a9e 100%);
    border-radius: 12px;
    padding: 2rem 1.75rem;
    color: #fff;
    text-align: center;
}

.about-cta-title {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: #fff;
}

.about-cta-text {
    margin: 0 0 1.35rem;
    font-size: 0.9375rem;
    opacity: 0.95;
    line-height: 1.55;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.about-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
}

.about-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.35rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.about-cta-btn-primary {
    background: #fff;
    color: #06357a;
}

.about-cta-btn-primary:hover {
    background: #f0f4fa;
    transform: translateY(-1px);
}

.about-cta-btn-ghost {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.65);
}

.about-cta-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
}

@media (max-width: 1024px) {
    .about-pillars-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-pillars-cards-wrap {
        margin-top: -3.5rem;
    }

    .about-impact {
        padding: 3rem 1.25rem 3rem;
    }

    .about-impact-stats {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        margin-top: 2.25rem;
        padding-top: 2rem;
    }

    .about-dual-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .about-team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .about-pillars-hero {
        padding: 2.25rem 1rem 5rem;
    }

    .about-pillars-cards {
        grid-template-columns: 1fr;
    }

    .about-pillars-cards-wrap {
        margin-top: -3rem;
        padding: 0 1rem;
    }

    .about-pillar-card {
        padding: 1.35rem 1.2rem;
    }

    .about-main {
        padding: 0 1rem 2.5rem;
    }

    .about-impact {
        padding: 2.5rem 1rem 2.5rem;
    }

    .about-statement {
        padding: 2.25rem 0 1.75rem;
    }

    .about-statement-visual {
        border-radius: 20px;
    }

    .about-team-grid {
        grid-template-columns: 1fr;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }

    .about-prose-card {
        padding: 1.35rem 1.2rem;
    }

    .about-cta-inner {
        padding: 1.5rem 1.25rem;
    }

    .about-cta-actions {
        flex-direction: column;
    }

    .about-cta-btn {
        width: 100%;
    }
}

/************************************************
 * Blog — index, archive, single
 *************************************************/

/* Index / archive layout */
.blog-index-main {
    background: #f7f8fa;
    padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 1.5rem) clamp(3rem, 6vw, 4.5rem);
}

.blog-index-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.blog-category-nav {
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.blog-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-category-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    border: 1px solid #d8dee8;
    background: #fff;
    color: #06357a;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.blog-category-pill:hover {
    border-color: #06357a;
    box-shadow: 0 4px 14px rgba(6, 53, 122, 0.1);
}

.blog-category-pill.is-active {
    background: #06357a;
    border-color: #06357a;
    color: #fff;
}

/* Featured post (index page 1) */
.blog-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.1), 0 2px 8px rgba(15, 23, 42, 0.06);
    margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.blog-featured-media {
    position: relative;
    display: block;
    min-height: 280px;
    overflow: hidden;
}

.blog-featured-media img {
    width: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.blog-featured:hover .blog-featured-media img {
    transform: scale(1.04);
}

.blog-featured-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(6, 53, 122, 0.15) 0%, rgba(0, 0, 0, 0.05) 100%);
    pointer-events: none;
}

.blog-featured-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.blog-featured-badge {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.3rem 0.75rem;
    margin-bottom: 0.85rem;
    border-radius: 999px;
    background: #06357a;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.blog-featured-meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    color: #74747a;
    font-size: 0.875rem;
    min-width: 0;
}

.blog-featured-meta-sep {
    flex-shrink: 0;
    opacity: 0.6;
}

.blog-featured-meta time,
.blog-featured-read {
    flex-shrink: 0;
    white-space: nowrap;
}

.blog-featured-category {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: #06357a;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-featured-category:hover {
    color: #e19500;
}

.blog-featured-title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.blog-featured-title a {
    color: #222;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-featured-title a:hover {
    color: #06357a;
}

.blog-featured-excerpt {
    margin: 0 0 1.25rem;
    color: #5c6470;
    font-size: 0.975rem;
    line-height: 1.65;
}

.blog-featured-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    align-self: flex-start;
    padding: 0.7rem 1.25rem;
    border-radius: 10px;
    background: #06357a;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-featured-btn:hover {
    background: #0a4a9e;
    box-shadow: 0 8px 24px rgba(6, 53, 122, 0.22);
}

/* Blog cards grid */
.blog-grid,
.blog-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08), 0 1px 4px rgba(15, 23, 42, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
}

.blog-card-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-media img {
    transform: scale(1.06);
}

.blog-card-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 53, 122, 0.25) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.blog-card:hover .blog-card-media-overlay {
    opacity: 1;
}

.blog-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem 1.2rem 1.35rem;
}

.blog-card-meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
    color: #74747a;
    font-size: 0.8125rem;
    min-width: 0;
}

.blog-card-meta-sep {
    flex-shrink: 0;
    opacity: 0.6;
}

.blog-card-date,
.blog-card-read {
    flex-shrink: 0;
    white-space: nowrap;
}

.blog-card-category {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: #06357a;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-card-title {
    margin: 0 0 0.6rem;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
}

.blog-card-title a {
    color: #222;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-card-title a:hover {
    color: #06357a;
}

.blog-card-excerpt {
    margin: 0 0 1rem;
    color: #5c6470;
    font-size: 0.9rem;
    line-height: 1.6;
    flex: 1;
}

.blog-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    color: #06357a;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}

.blog-card-link:hover {
    color: #e19500;
    gap: 0.55rem;
}

/* Pagination */
.blog-pagination {
    margin-top: clamp(2rem, 4vw, 2.75rem);
}

.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    color: #06357a;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.blog-pagination .page-numbers.current {
    background: #06357a;
    border-color: #06357a;
    color: #fff;
}

.blog-pagination ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-pagination li {
    margin: 0;
}

/* Empty state */
.blog-empty {
    text-align: center;
    padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
}

.blog-empty-title {
    margin: 0 0 0.65rem;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    color: #06357a;
}

.blog-empty-text {
    margin: 0 0 1.25rem;
    color: #5c6470;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}

.blog-empty-btn {
    display: inline-flex;
    padding: 0.7rem 1.35rem;
    border-radius: 10px;
    background: #06357a;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.blog-empty-btn:hover {
    background: #0a4a9e;
}

/* CTA band */
.blog-cta-band {
    background: linear-gradient(135deg, #06357a 0%, #0a4a9e 55%, #06357a 100%);
    padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1rem, 3vw, 1.5rem);
}

.blog-cta-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.blog-cta-title {
    margin: 0 0 0.65rem;
    color: #fff;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.blog-cta-text {
    margin: 0 0 1.5rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    line-height: 1.6;
}

.blog-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.blog-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.blog-cta-btn--primary {
    background: #e19500;
    color: #fff;
}

.blog-cta-btn--primary:hover {
    background: #f0a814;
    transform: translateY(-1px);
}

.blog-cta-btn--ghost {
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #fff;
}

.blog-cta-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

/* Single post hero */
.blog-single-hero {
    min-height: clamp(320px, 55vh, 520px);
}

.blog-single-hero-overlay {
    background: linear-gradient(to top, rgba(6, 53, 122, 0.92) 0%, rgba(6, 53, 122, 0.55) 42%, rgba(0, 0, 0, 0.25) 100%);
}

.blog-single-hero-inner {
    padding-bottom: 2rem;
}

.blog-single-hero-content {
    max-width: 820px;
}

.blog-single-category {
    display: inline-flex;
    margin-bottom: 0.85rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(225, 149, 0, 0.18);
    color: #ffd27a;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
}

.blog-single-category:hover {
    background: rgba(225, 149, 0, 0.3);
    color: #fff;
}

.blog-single-title {
    max-width: none;
}

.blog-single-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.9375rem;
}

.blog-single-meta-sep {
    opacity: 0.65;
}

/* Single article layout */
.blog-single-article {
    background: #f7f8fa;
    padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 1.5rem) clamp(2.5rem, 5vw, 3.5rem);
}

.blog-single-layout {
    display: grid;
    grid-template-columns: 72px minmax(0, 760px);
    gap: clamp(1.5rem, 4vw, 3rem);
    max-width: 920px;
    margin: 0 auto;
    align-items: start;
}

.blog-single-share {
    position: sticky;
    top: 7rem;
}

.blog-single-share-label {
    margin: 0 0 0.75rem;
    color: #74747a;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.blog-single-share-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-single-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #d8dee8;
    border-radius: 50%;
    background: #fff;
    color: #06357a;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.blog-single-share-link:hover {
    background: #06357a;
    border-color: #06357a;
    color: #fff;
    transform: translateY(-2px);
}

.blog-single-share-copy.is-copied {
    background: #556b2f;
    border-color: #556b2f;
    color: #fff;
}

.blog-single-content-wrap {
    background: #fff;
    border-radius: 16px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
}

.blog-single-lede {
    margin: 0 0 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e8eaed;
    color: #333;
    font-size: clamp(1.05rem, 2.2vw, 1.2rem);
    font-weight: 500;
    line-height: 1.65;
}

.blog-single-content {
    color: #333;
    font-size: 1.025rem;
    line-height: 1.8;
}

.blog-single-content> :first-child {
    margin-top: 0;
}

.blog-single-content> :last-child {
    margin-bottom: 0;
}

.blog-single-content h2,
.blog-single-content h3,
.blog-single-content h4 {
    color: #06357a;
    margin: 2rem 0 0.85rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.blog-single-content h2 {
    font-size: clamp(1.35rem, 3vw, 1.65rem);
}

.blog-single-content h3 {
    font-size: clamp(1.15rem, 2.5vw, 1.35rem);
}

.blog-single-content p {
    margin: 0 0 1.15rem;
}

.blog-single-content a {
    color: #06357a;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.blog-single-content a:hover {
    color: #e19500;
}

.blog-single-content ul,
.blog-single-content ol {
    margin: 0 0 1.15rem;
    padding-left: 1.35rem;
}

.blog-single-content li {
    margin-bottom: 0.45rem;
}

.blog-single-content blockquote {
    margin: 1.75rem 0;
    padding: 1.25rem 1.35rem;
    border-left: 4px solid #e19500;
    border-radius: 0 12px 12px 0;
    background: #f7f8fa;
    color: #06357a;
    font-size: 1.05rem;
    font-style: italic;
}

.blog-single-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1.5rem 0;
}

.blog-single-content figure {
    margin: 1.5rem 0;
}

.blog-single-content figcaption {
    margin-top: 0.5rem;
    color: #74747a;
    font-size: 0.875rem;
    text-align: center;
}

.blog-single-pages {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e8eaed;
}

.blog-single-pages-label {
    margin: 0 0 0.5rem;
    font-weight: 600;
    color: #06357a;
}

.blog-single-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e8eaed;
}

.blog-single-tags-label {
    color: #74747a;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.blog-single-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-single-tags-list a {
    display: inline-flex;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: #f0f2f5;
    color: #06357a;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.blog-single-tags-list a:hover {
    background: #06357a;
    color: #fff;
}

.blog-single-author {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.35rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(6, 53, 122, 0.04) 0%, rgba(225, 149, 0, 0.06) 100%);
    border: 1px solid #e8eaed;
}

.blog-single-author-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-single-author-label {
    margin: 0 0 0.15rem;
    color: #74747a;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.blog-single-author-name {
    margin: 0 0 0.35rem;
    color: #06357a;
    font-size: 1rem;
    font-weight: 700;
}

.blog-single-author-bio {
    margin: 0;
    color: #5c6470;
    font-size: 0.9rem;
    line-height: 1.6;
}

.blog-single-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e8eaed;
}

.blog-single-nav-link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    border: 1px solid #e8eaed;
    background: #f7f8fa;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.blog-single-nav-link:hover {
    border-color: #06357a;
    background: #fff;
    transform: translateY(-2px);
}

.blog-single-nav-link--next {
    text-align: right;
}

.blog-single-nav-kicker {
    color: #e19500;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.blog-single-nav-title {
    color: #06357a;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Related posts */
.blog-related-section {
    background: #fff;
    padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1rem, 3vw, 1.5rem);
}

.blog-related-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.blog-related-header {
    text-align: center;
    max-width: 560px;
    margin: 0 auto clamp(2rem, 4vw, 2.5rem);
}

.blog-related-title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    color: #222;
    letter-spacing: -0.02em;
}

.blog-related-title strong {
    color: #06357a;
}

.blog-related-lede {
    margin: 0;
    color: #5c6470;
    font-size: 0.975rem;
    line-height: 1.6;
}

.blog-related-footer {
    display: flex;
    justify-content: center;
    margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

.blog-related-all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #06357a;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}

.blog-related-all:hover {
    color: #e19500;
    gap: 0.6rem;
}

.blog-cta-band--single {
    margin-top: 0;
}

/* Tablet */
@media (max-width: 1024px) {

    .blog-grid,
    .blog-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-featured {
        grid-template-columns: 1fr;
    }

    .blog-featured-media {
        min-height: 240px;
    }

    .blog-single-layout {
        grid-template-columns: 1fr;
    }

    .blog-single-share {
        position: static;
        order: 2;
        margin-top: 1.5rem;
    }

    .blog-single-share-list {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Mobile */
@media (max-width: 767px) {

    .blog-index-main,
    .blog-single-article {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .blog-grid,
    .blog-related-grid {
        grid-template-columns: 1fr;
    }

    .blog-category-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.35rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .blog-category-list::-webkit-scrollbar {
        display: none;
    }

    .blog-category-pill {
        flex-shrink: 0;
    }

    .blog-featured-body {
        padding: 1.25rem;
    }

    .blog-single-content-wrap {
        padding: 1.25rem;
    }

    .blog-single-nav {
        grid-template-columns: 1fr;
    }

    .blog-single-nav-link--next {
        text-align: left;
    }

    .blog-cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .blog-cta-btn {
        width: 100%;
    }

    .blog-single-hero {
        min-height: 300px;
    }
}