/**
 * WaterJet mobile modern UI — glass header, floating bottom nav, search card.
 * Matches the Tailwind mockup; scoped to max-width 768px only.
 */

@media (max-width: 768px) {
    html {
        --wj-header-h: 52px;
        --wj-nav-float-bottom: 16px;
        --wj-nav-h: 56px;
        --bc-mobile-header-h: 52px;
        --bc-mobile-chrome-top: 52px;
        --wj-primary: #2563eb;
        --wj-primary-dark: #1d4ed8;
        --wj-surface: #ffffff;
        --wj-muted: #64748b;
        --wj-border: rgba(15, 23, 42, 0.08);
    }

    body.frontend-page {
        background: #f9fafb !important;
        font-family: 'Inter', 'Poppins', system-ui, sans-serif !important;
        padding-bottom: calc(var(--wj-nav-h) + var(--wj-nav-float-bottom) + env(safe-area-inset-bottom, 0) + 12px) !important;
    }

    .bc_wrap {
        padding-top: var(--wj-header-h) !important;
        background: #f9fafb;
    }

    /* ── Mobile header bar (Tailwind in blade; layout only) ── */
    .wj-mobile-header-bar {
        display: flex !important;
        width: 100% !important;
        max-width: 448px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .wj-mobile-header-bar .bc-more-menu {
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .wj-mobile-header-bar .bc-more-menu .hamburger-icon {
        display: none !important;
    }

    /* ── Glass header ── */
    .bc_header {
        background: rgba(255, 255, 255, 0.88) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.55) !important;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
        padding: 6px 0 !important;
    }

    .bc_header .container {
        max-width: 448px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .bc_header .content {
        height: 40px !important;
        min-height: 40px !important;
    }

    .bc_header .mobile-logo-link {
        width: 40px !important;
        height: 40px !important;
        border-radius: 9999px !important;
        background: #fff !important;
        border: 1px solid #f3f4f6 !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
        padding: 4px !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .bc_header .mobile-logo-img {
        height: 32px !important;
        width: 32px !important;
        max-width: 32px !important;
        border-radius: 9999px !important;
        object-fit: contain !important;
    }

    .bc_header .store-badges {
        gap: 8px !important;
    }

    .bc_header .store-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f3f4f6 !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 9999px !important;
        padding: 4px 8px !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
        line-height: 0 !important;
    }

    .bc_header .store-badge__img,
    .bc_header .header-store-img {
        height: 24px !important;
        max-width: 72px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .bc_header .bc-more-menu {
        width: 36px !important;
        height: 36px !important;
        border-radius: 9999px !important;
        color: #4b5563 !important;
        background: transparent !important;
    }

    .bc_header .bc-more-menu:hover {
        background: #f3f4f6 !important;
    }

    .bc_header .bc-more-menu .hamburger-icon {
        display: none !important;
    }

    .bc_header .bc-more-menu .wj-menu-icon {
        font-size: 24px !important;
        line-height: 1 !important;
    }

    /* ── Side drawer (legacy selectors — see full mockup block below) ── */
    /* ── Floating bottom nav ── */
    .mobile-bottom-nav {
        position: fixed !important;
        bottom: var(--wj-nav-float-bottom) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 16px) !important;
        max-width: 448px !important;
        height: var(--wj-nav-h) !important;
        padding: 0 !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.92) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(226, 232, 240, 0.55) !important;
        border-radius: 24px !important;
        box-shadow: 0 8px 32px rgba(15, 23, 42, 0.1) !important;
        z-index: 1030 !important;
    }

    body.mobile-chrome-scroll-hidden:not(.mobile-chrome-menu-open):not(.wj-ui) .mobile-bottom-nav {
        transform: translateX(-50%) translate3d(0, 120%, 0) !important;
    }

    .mobile-bottom-nav .nav-container {
        display: flex !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        height: 100% !important;
        padding: 4px 4px !important;
        gap: 2px !important;
    }

    .mobile-bottom-nav .nav-item {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        padding: 8px 2px !important;
        margin: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        border: none !important;
        border-radius: 16px !important;
        background: transparent !important;
        color: var(--wj-muted) !important;
        text-decoration: none !important;
        position: relative !important;
        transition: color 0.18s ease, background 0.18s ease !important;
    }

    .mobile-bottom-nav .nav-item i,
    .mobile-bottom-nav .nav-item .wj-nav-icon {
        font-size: 22px !important;
        line-height: 1 !important;
        margin: 0 0 2px !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
        color: inherit !important;
    }

    .mobile-bottom-nav .nav-item span {
        font-size: 9px !important;
        font-weight: 500 !important;
        line-height: 1.1 !important;
        max-width: 64px !important;
        color: inherit !important;
    }

    .mobile-bottom-nav .nav-item.active {
        color: var(--wj-primary) !important;
        background: rgba(37, 99, 235, 0.08) !important;
    }

    .mobile-bottom-nav .nav-item.active::after {
        display: none !important;
    }

    .mobile-bottom-nav .nav-item.active i.ph,
    .mobile-bottom-nav .nav-item.active .wj-nav-icon {
        font-weight: 400 !important;
    }

    /* ── Homepage hero + search card ── */
    .bc-form-search-all {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .wj-mobile-hero-wrap {
        display: block !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .wj-mobile-hero-inner {
        position: relative;
        margin: 0 -12px;
        padding: calc(var(--wj-header-h) + 8px) 12px 24px;
        border-radius: 0 0 40px 40px;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }

    .wj-mobile-hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        z-index: 0;
    }

    .wj-mobile-hero-gradient {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.6));
        z-index: 1;
    }

    .wj-mobile-hero-card {
        position: relative;
        z-index: 2;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-radius: 32px !important;
        padding: 20px !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    }

    @media (min-width: 768px) {
        .wj-mobile-header-bar,
        .wj-mobile-hero-wrap {
            display: none !important;
        }
    }

    .wj-mobile-hero-wrap.is-hidden {
        display: none !important;
    }

    body.wj-ui.request-is-flight-search .wj-mobile-hero-wrap {
        display: block !important;
    }

    body.wj-ui.request-is-flight-search .wj-mobile-hero-wrap--results .wj-mobile-hero-inner {
        min-height: auto !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        border-radius: 0 0 32px 32px !important;
    }

    body.wj-ui.request-is-flight-search .wj-mobile-hero-wrap--results .mobile-boat-image-container {
        display: none !important;
    }

    body.wj-ui.request-is-flight-search .wj-transfers-mobile-header {
        display: block !important;
    }

    @media (min-width: 992px) {
        .wj-mobile-hero-wrap,
        .wj-transfers-mobile-header {
            display: none !important;
        }
    }

    .wj-mobile-hero {
        position: relative;
        margin: 0 -12px 0 !important;
        padding: calc(var(--wj-header-h) + 12px) 12px 8px !important;
        border-radius: 0 0 40px 40px !important;
        overflow: hidden !important;
    }

    .wj-mobile-hero__bg {
        position: absolute;
        inset: 0;
        background-size: cover !important;
        background-position: center top !important;
        z-index: 0;
    }

    .wj-mobile-hero__bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.55));
    }

    .wj-mobile-hero__content {
        position: relative;
        z-index: 1;
        padding-top: 8px;
    }

    .home-search-form-panel {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-radius: 32px !important;
        padding: 20px !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2) !important;
        background-image: none !important;
    }

    .searchbox.border-round {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .searchbox .input-from,
    .searchbox .input-to,
    .searchbox .input-date,
    .searchbox .input-pax {
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 16px !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }

    .searchbox .input-from-wrapper,
    .searchbox .input-to-wrapper {
        padding: 12px 16px !important;
    }

    .searchbox .input label {
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: #9ca3af !important;
        padding: 0 !important;
    }

    .searchbox .input label i {
        display: none !important;
    }

    .searchbox .mobile-text-departure-port,
    .searchbox .input span.from,
    .searchbox .input span.to {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #111827 !important;
        padding: 0 !important;
        margin-top: 2px !important;
        line-height: 1.2 !important;
    }

    .searchbox .inline-swap-btn {
        right: 12px !important;
        top: 52px !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 9999px !important;
        background: #4b5563 !important;
        border: 4px solid #fff !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }

    .searchbox .input-btn-search,
    .searchbox button[type="submit"].input-btn-search {
        width: 100% !important;
        margin-top: 8px !important;
        padding: 16px !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        border-radius: 16px !important;
        background: #2563eb !important;
        border: none !important;
        box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .searchbox .input-btn-search i {
        font-size: 20px !important;
    }

    .mobile-boat-image-after-form {
        margin-top: 16px !important;
    }

    .mobile-boat-image-container {
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    .mobile-boat-image-after-form .mobile-boat-img {
        border-radius: 16px !important;
        max-height: 128px !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
    }

    /* Popular routes */
    .home-routes-section {
        padding: 24px 0 32px !important;
        background: transparent !important;
    }

    .home-routes-section .section-title {
        font-size: 22px !important;
        font-weight: 800 !important;
        margin-bottom: 4px !important;
    }

    .home-routes-section .section-subtitle {
        font-size: 14px !important;
        color: var(--wj-muted) !important;
        margin-bottom: 20px !important;
    }

    .routes-buttons-container {
        display: block !important;
        overflow: visible !important;
    }

    .home-routes-section .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 16px !important;
        margin: 0 !important;
        padding: 0 4px 8px !important;
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }

    .home-routes-section .row::-webkit-scrollbar {
        display: none !important;
    }

    .home-routes-section .row > [class*='col-'] {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .route-button {
        flex: 0 0 auto !important;
        min-width: 220px !important;
        border-radius: 24px !important;
        padding: 20px !important;
        background: #fff !important;
        color: #111827 !important;
        border: 1px solid #f3f4f6 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-align: left !important;
    }

    .route-button:hover {
        background: #f9fafb !important;
        color: var(--wj-primary) !important;
    }

    /* Passenger counter pills */
    .searchbox .input-pax .input-number-group {
        padding: 8px 12px !important;
    }

    .searchbox .input-pax .input-number-group button,
    .searchbox .input-pax .btn-number {
        width: 40px !important;
        height: 40px !important;
        border-radius: 9999px !important;
        background: #eef2ff !important;
        color: #4f46e5 !important;
        border: none !important;
    }

    .searchbox .input-pax .input-number-group .input,
    .searchbox .input-pax input[type="number"] {
        font-size: 20px !important;
        font-weight: 700 !important;
    }

    /* ── Drawer overlay + side menu (mockup) ── */
    body.mobile-chrome-menu-open .bc-effect-bg {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 10040 !important;
    }

    .bc_header .bc-menu-mobile,
    .bc-menu-mobile.wj-drawer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        width: min(288px, 92vw) !important;
        max-width: 288px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-out !important;
        z-index: 10050 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .bc-menu-mobile.active {
        transform: translateX(0) !important;
    }

    .bc-menu-mobile .user-profile,
    .bc-menu-mobile .user-profile_custom_style {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        width: 100% !important;
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .bc-menu-mobile__main {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .wj-drawer__head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 20px !important;
        border-bottom: 1px solid #f3f4f6 !important;
    }

    .wj-drawer__brand {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
        text-decoration: none !important;
        color: inherit !important;
    }

    .wj-drawer__brand-icon {
        display: none !important;
    }

    .wj-drawer__brand-name {
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        color: #111827 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .wj-drawer__head .b-close {
        width: 36px !important;
        height: 36px !important;
        border-radius: 9999px !important;
        background: #f3f4f6 !important;
        border: none !important;
        color: #6b7280 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        padding: 0 !important;
    }

    .wj-drawer__nav ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 12px !important;
    }

    .wj-drawer__nav ul li {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    .wj-drawer__nav ul li a {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 16px !important;
        border-radius: 16px !important;
        font-weight: 500 !important;
        font-size: 15px !important;
        color: #1f2937 !important;
        text-decoration: none !important;
    }

    .wj-drawer__nav ul li a i {
        font-size: 20px !important;
        color: var(--wj-primary) !important;
        width: 24px !important;
        text-align: center !important;
    }

    .wj-drawer__nav ul li a.bc-menu-mobile__link--whatsapp i {
        color: #22c55e !important;
    }

    .wj-drawer__footer {
        border-top: 1px solid #f3f4f6 !important;
        padding: 16px !important;
        background: #fff !important;
    }

    .wj-drawer__auth-btns {
        display: flex !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .wj-drawer__btn {
        flex: 1 !important;
        text-align: center !important;
        padding: 12px 16px !important;
        border-radius: 12px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        text-decoration: none !important;
    }

    .wj-drawer__btn--primary {
        background: #111827 !important;
        color: #fff !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    }

    .wj-drawer__btn--secondary {
        background: #fff !important;
        color: #111827 !important;
        border: 1px solid #e5e7eb !important;
    }

    .wj-drawer__stores {
        display: flex !important;
        gap: 10px !important;
        padding-top: 8px !important;
    }

    .wj-drawer__store-link {
        display: none !important;
    }

    .wj-drawer__account {
        list-style: none !important;
        padding: 0 0 8px !important;
        margin: 0 0 8px !important;
    }

    .wj-drawer__account li a {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 4px !important;
        color: #374151 !important;
        font-size: 14px !important;
        text-decoration: none !important;
    }

    /* ── Popular routes cards ── */
    .hide-scrollbar::-webkit-scrollbar { display: none !important; }
    .hide-scrollbar { -ms-overflow-style: none !important; scrollbar-width: none !important; }

    .wj-routes-scroll {
        display: flex !important;
        gap: 16px !important;
        overflow-x: auto !important;
        padding: 0 4px 12px !important;
        scroll-snap-type: x mandatory !important;
    }

    .wj-route-card {
        flex: 0 0 auto !important;
        min-width: 240px !important;
        scroll-snap-align: center !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 20px !important;
        background: #fff !important;
        border-radius: 24px !important;
        border: 1px solid #f3f4f6 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
        text-decoration: none !important;
        color: #111827 !important;
    }

    .wj-route-card__icon {
        width: 48px !important;
        height: 48px !important;
        border-radius: 9999px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 24px !important;
        flex-shrink: 0 !important;
    }

    .wj-route-card--blue .wj-route-card__icon {
        background: #eff6ff !important;
        color: #2563eb !important;
    }

    .wj-route-card--indigo .wj-route-card__icon {
        background: #eef2ff !important;
        color: #4f46e5 !important;
    }

    .wj-route-card__title {
        font-size: 14px !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
        line-height: 1.3 !important;
    }

    .wj-route-card__title .ph-arrow-right {
        color: #d1d5db !important;
        font-size: 12px !important;
    }

    .routes-grid-desktop { display: none !important; }

    .route-button--desktop {
        display: block !important;
        padding: 15px 20px !important;
        background: #2563eb !important;
        color: #fff !important;
        border-radius: 12px !important;
        text-align: center !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }

    /* ── Flight search / results page ── */
    .wj-flight-search-page {
        background: #f9fafb !important;
    }

    .wj-flight-search-page .bc_form_search {
        display: none !important;
    }

    .wj-flight-results-wrap {
        max-width: 448px !important;
        margin: 0 auto !important;
        padding: 0 12px 24px !important;
    }

    .wj-flight-results-wrap .col-lg-3 {
        display: none !important;
    }

    .wj-flight-results-wrap .col-lg-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .wj-flight-results-wrap .filter-search,
    .wj-flight-results-wrap .bc-form-order {
        display: none !important;
    }

    .wj-flight-results-wrap .topbar-search {
        margin-bottom: 16px !important;
    }

    .wj-flight-results-wrap .result-count {
        font-size: 24px !important;
        font-weight: 800 !important;
        color: #111827 !important;
    }

    .day-selector-wrapper {
        margin-bottom: 8px !important;
    }

    .day-selector-scroll {
        display: flex !important;
        gap: 12px !important;
        overflow-x: auto !important;
        padding-bottom: 8px !important;
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }

    .day-selector-scroll::-webkit-scrollbar { display: none !important; }

    .day-selector-btn {
        flex: 0 0 auto !important;
        min-width: 88px !important;
        padding: 10px 24px !important;
        border-radius: 16px !important;
        border: 1px solid #e5e7eb !important;
        background: #fff !important;
        color: #4b5563 !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .day-selector-btn.active {
        background: #2563eb !important;
        border-color: #2563eb !important;
        color: #fff !important;
        box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35) !important;
    }

    .day-selector-btn .day-name {
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        opacity: 0.8 !important;
    }

    .day-selector-btn .day-label {
        font-size: 18px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
    }

    /* Ticket cards */
    .ticket-card {
        background: #fff !important;
        border-radius: 32px !important;
        border: 1px solid #f3f4f6 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
        overflow: hidden !important;
        margin-bottom: 24px !important;
    }

    .ticket-header {
        padding: 20px !important;
        background: rgba(249, 250, 251, 0.8) !important;
        border-bottom: 1px solid #f3f4f6 !important;
    }

    .ticket-header .operator {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .ticket-header .logo img {
        width: 48px !important;
        height: 32px !important;
        object-fit: contain !important;
        border-radius: 4px !important;
    }

    .ticket-header .seats-left {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        background: #dcfce7 !important;
        color: #15803d !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        padding: 6px 12px !important;
        border-radius: 9999px !important;
    }

    .ticket-header .price .total {
        font-size: 20px !important;
        font-weight: 900 !important;
        color: #2563eb !important;
    }

    .ticket-header .price .small {
        font-size: 9px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: #6b7280 !important;
    }

    .ticket-body {
        padding: 20px !important;
    }

    .ticket-body .journey .time {
        font-size: 24px !important;
        font-weight: 900 !important;
        color: #2563eb !important;
        display: block !important;
    }

    .ticket-body .journey .port {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #111827 !important;
    }

    .ticket-body .journey .date {
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        color: #9ca3af !important;
    }

    .ticket-body .journey-duration {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #6b7280 !important;
    }

    .ticket-body .journey-stops {
        font-size: 9px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        color: #16a34a !important;
    }

    .ticket-body .journey-line {
        height: 4px !important;
        background: #e5e7eb !important;
        border-radius: 9999px !important;
        position: relative !important;
        margin: 8px 0 !important;
    }

    .ticket-body .journey-line::before {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background: #2563eb !important;
        border-radius: 9999px !important;
    }

    .ticket-body .journey-line .point {
        width: 10px !important;
        height: 10px !important;
        background: #2563eb !important;
        border: 4px solid #eff6ff !important;
        border-radius: 9999px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .ticket-cta-mobile .btn-select,
    .ticket-cta-desktop .btn-select {
        width: 100% !important;
        padding: 16px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        border-radius: 16px !important;
        background: #2563eb !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35) !important;
        text-decoration: none !important;
    }

    .flight-gallery-slider,
    .ticket-body .img-operator img {
        border-radius: 16px !important;
        max-height: 144px !important;
        object-fit: cover !important;
        width: 100% !important;
    }

    /* ── Rental pages ── */
    .rental-hero-banner,
    .hero-section.rental-hero-banner {
        display: none !important;
    }

    .wj-rental-list {
        padding: 0 12px 24px !important;
        max-width: 448px !important;
        margin: 0 auto !important;
    }

    .wj-login-banner {
        background: #eff6ff !important;
        border: 1px solid #dbeafe !important;
        border-radius: 16px !important;
        padding: 16px !important;
        margin-bottom: 24px !important;
    }

    .wj-login-banner p {
        font-size: 14px !important;
        color: #1e40af !important;
        margin-bottom: 12px !important;
    }

    .wj-login-banner__actions {
        display: flex !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .wj-login-banner__btn {
        background: #2563eb !important;
        color: #fff !important;
        padding: 8px 20px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }

    .wj-login-banner__link {
        color: #2563eb !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        text-decoration: none !important;
    }

    .wj-section-title {
        font-size: 24px !important;
        font-weight: 700 !important;
        color: #111827 !important;
        margin-bottom: 16px !important;
    }

    .wj-equipment-card {
        display: block !important;
        background: #fff !important;
        border-radius: 24px !important;
        border: 1px solid #f3f4f6 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
        overflow: hidden !important;
        margin-bottom: 20px !important;
        text-decoration: none !important;
        color: inherit !important;
    }

    .wj-equipment-card__media {
        position: relative !important;
        height: 192px !important;
        background: #e5e7eb !important;
        overflow: hidden !important;
    }

    .wj-equipment-card__media img {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .wj-equipment-card__placeholder {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #94a3b8 !important;
        font-size: 48px !important;
    }

    .wj-equipment-card__badge {
        position: absolute !important;
        top: 12px !important;
        left: 12px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: blur(4px) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        padding: 6px 12px !important;
        border-radius: 9999px !important;
        color: #374151 !important;
    }

    .wj-equipment-card__body {
        padding: 20px !important;
    }

    .wj-equipment-card__title {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #111827 !important;
        margin-bottom: 12px !important;
    }

    .wj-equipment-card__rate {
        background: #f9fafb !important;
        border-radius: 16px !important;
        padding: 16px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 12px !important;
    }

    .wj-equipment-card__rate-label {
        font-size: 14px !important;
        color: #6b7280 !important;
    }

    .wj-equipment-card__rate-value {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #16a34a !important;
    }

    .wj-equipment-card__avail {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #16a34a !important;
        background: #f0fdf4 !important;
        padding: 6px 12px !important;
        border-radius: 9999px !important;
        margin-bottom: 16px !important;
    }

    .wj-equipment-card__cta {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        background: #2563eb !important;
        color: #fff !important;
        font-weight: 700 !important;
        padding: 14px !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3) !important;
    }

    /* Rental detail + book */
    .rental-item-show,
    .rental-book-page {
        max-width: 448px !important;
        margin: 0 auto !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .rental-item-show__main-photo,
    .rental-media-carousel {
        border-radius: 24px !important;
        overflow: hidden !important;
        margin-bottom: 16px !important;
    }

    .rental-item-show h1,
    .rental-book-page h1 {
        font-size: 28px !important;
        font-weight: 700 !important;
        color: #111827 !important;
    }

    .rental-item-show__btn-book,
    .rental-item-show__btn-cta {
        position: fixed !important;
        bottom: calc(var(--wj-nav-h) + var(--wj-nav-float-bottom) + 12px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 24px) !important;
        max-width: 424px !important;
        z-index: 1020 !important;
        background: #2563eb !important;
        color: #fff !important;
        border: none !important;
        border-radius: 16px !important;
        padding: 16px !important;
        font-weight: 700 !important;
        font-size: 18px !important;
        box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4) !important;
        text-align: center !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .rental-book-card,
    .rental-type-card,
    .rental-book-page .card {
        background: #fff !important;
        border-radius: 24px !important;
        border: 1px solid #e5e7eb !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    }

    .rental-book-back {
        color: #6b7280 !important;
        text-decoration: none !important;
        font-size: 14px !important;
        margin-bottom: 16px !important;
    }

    .rental-book-page .alert-info {
        background: #eff6ff !important;
        border: 1px solid #dbeafe !important;
        border-radius: 16px !important;
        color: #1e40af !important;
    }

    .rental-book-page .form-control,
    .rental-book-page select.form-control {
        border-radius: 16px !important;
        border: 1px solid #e5e7eb !important;
        background: #f9fafb !important;
        padding: 12px 16px !important;
    }

    .rental-book-page .btn-primary,
    .rental-book-page button[type="submit"].btn-primary {
        width: 100% !important;
        background: #2563eb !important;
        border: none !important;
        border-radius: 16px !important;
        padding: 16px !important;
        font-weight: 700 !important;
        font-size: 17px !important;
        box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35) !important;
    }

    .rental-book-breadcrumb {
        display: none !important;
    }

    .rental-item-show__btn-back,
    .rental-item-show__actions .btn-secondary:not(.rental-item-show__btn-book) {
        display: none !important;
    }

    .rental-item-show__actions {
        position: static !important;
        padding-bottom: 80px !important;
    }

    .rental-item-show__btn-book i.fa {
        display: none !important;
    }

    .rental-item-show__btn-book::before {
        content: none !important;
    }

    /* AI chat FAB */
    #ai-chat-widget-trigger,
    .ai-chat-widget-trigger {
        bottom: calc(var(--wj-nav-h) + var(--wj-nav-float-bottom) + 8px) !important;
        right: 16px !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 9999px !important;
        background: #3b82f6 !important;
        box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4) !important;
    }

    /* Hide legacy mobile chrome noise */
    .bc_topbar {
        display: none !important;
    }

    .mobile-form-title {
        display: none !important;
    }

    /* ── wj-ui: match static prototype (ui/index.html) ── */
    body.wj-ui {
        background: #f9fafb !important;
    }

    body.wj-ui .bc_wrap {
        max-width: 448px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        padding-top: var(--wj-header-h) !important;
    }

    body.wj-ui .bc_header {
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.55) !important;
        background: rgba(255, 255, 255, 0.92) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        padding: 0 !important;
    }

    body.wj-ui .home-search-carousel-bleed-lg {
        display: none !important;
    }

    body.wj-ui .bc-form-search-all.carousel,
    body.wj-ui .bc-form-search-all.bc-form-search-slider {
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.wj-ui .bc_header .container {
        display: none !important;
    }

    body.wj-ui .mobile-bottom-nav {
        position: fixed !important;
        bottom: 16px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 16px) !important;
        max-width: 448px !important;
        margin: 0 !important;
        padding: 4px 4px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        backdrop-filter: blur(12px) !important;
        border-radius: 24px !important;
        border: 1px solid rgba(226, 232, 240, 0.55) !important;
        box-shadow: 0 8px 32px rgba(15, 23, 42, 0.1) !important;
        height: auto !important;
    }

    body.wj-ui .bc_footer {
        display: none !important;
    }

    /* Homepage template blocks (newsletter, destinations, etc.) — show with modern styling */
    body.wj-ui.request-is-home .template-children-wrapper > * {
        display: block !important;
    }

    body.wj-ui.request-is-home .bc-form-search-all ~ * {
        display: block !important;
    }

    body.wj-ui.request-is-home .home-after-form-separator ~ * {
        display: block !important;
    }

    body.wj-ui .home-search-form-panel {
        background: transparent !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    body.wj-ui .wj-search-prototype .searchbox-input-wrapper .row.no-gutters {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        position: relative !important;
    }

    body.wj-ui .wj-search-prototype .input-from,
    body.wj-ui .wj-search-prototype .input-to {
        position: relative !important;
        border: none !important;
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.wj-ui .wj-search-prototype .input-from-wrapper,
    body.wj-ui .wj-search-prototype .input-to-wrapper,
    body.wj-ui .wj-search-prototype .input-departure-date-wrapper {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 16px !important;
    }

    body.wj-ui .wj-search-prototype .input-from-wrapper,
    body.wj-ui .wj-search-prototype .input-to-wrapper {
        border-bottom: 1px solid #f3f4f6 !important;
    }

    body.wj-ui .wj-search-prototype .input-from {
        border: 1px solid #e5e7eb !important;
        border-radius: 16px 16px 0 0 !important;
        overflow: visible !important;
        background: #fff !important;
    }

    body.wj-ui .wj-search-prototype .input-to {
        border: 1px solid #e5e7eb !important;
        border-top: none !important;
        border-radius: 0 0 16px 16px !important;
        background: #fff !important;
        margin-bottom: 12px !important;
    }

    body.wj-ui .wj-search-prototype .input-from-wrapper .mobile-text-departure-port,
    body.wj-ui .wj-search-prototype .input-to-wrapper .mobile-text-departure-port {
        display: block !important;
        padding: 0 !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #111827 !important;
        line-height: 1.2 !important;
    }

    body.wj-ui .wj-search-prototype .input-from-wrapper .mobile-text-departure-port::before,
    body.wj-ui .wj-search-prototype .input-to-wrapper .mobile-text-departure-port::before {
        display: block !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: #9ca3af !important;
        margin-bottom: 2px !important;
    }

    body.wj-ui .wj-search-prototype .input-from-wrapper .mobile-text-departure-port::before {
        content: 'From' !important;
    }

    body.wj-ui .wj-search-prototype .input-to-wrapper .mobile-text-departure-port::before {
        content: 'To' !important;
    }

    body.wj-ui .wj-search-prototype .wj-route-group {
        position: relative !important;
        padding: 0 !important;
        margin-bottom: 12px !important;
    }

    body.wj-ui .wj-search-prototype .inline-swap-btn {
        position: absolute !important;
        right: 24px !important;
        top: 50% !important;
        left: auto !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 9999px !important;
        background: #2563eb !important;
        border: 4px solid #fff !important;
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35) !important;
        z-index: 20 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #fff !important;
    }

    body.wj-ui .wj-search-prototype .inline-swap-btn:active {
        background: #1d4ed8 !important;
        transform: translateY(-50%) scale(0.96) !important;
    }

    body.wj-ui .wj-search-prototype .inline-swap-btn i {
        display: block !important;
        font-size: 22px !important;
        color: #fff !important;
        line-height: 1 !important;
    }

    body.wj-ui .wj-search-prototype .inline-swap-btn .route-dir,
    body.wj-ui .wj-search-prototype .inline-swap-btn .route-icon {
        display: none !important;
    }

    body.wj-ui .wj-search-prototype .input-pax {
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.wj-ui .wj-search-prototype .input-pax-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px !important;
        gap: 12px !important;
        margin: 0 !important;
        min-height: 0 !important;
    }

    body.wj-ui .wj-search-prototype .wj-pax-left {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    body.wj-ui .wj-search-prototype .pax-controls-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 16px !important;
    }

    body.wj-ui .wj-search-prototype .input-departure-date,
    body.wj-ui .wj-search-prototype .input-pax {
        border: 1px solid #e5e7eb !important;
        border-radius: 16px !important;
        background: #fff !important;
        margin-bottom: 12px !important;
    }

    body.wj-ui .wj-search-prototype .wj-mobile-date-display::before {
        display: block !important;
        content: 'When' !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: #9ca3af !important;
        margin-bottom: 2px !important;
    }

    body.wj-ui .wj-search-prototype .wj-mobile-date-display {
        display: block !important;
        padding: 0 !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #111827 !important;
        line-height: 1.2 !important;
    }

    body.wj-ui .wj-search-prototype .wj-pax-label {
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: #9ca3af !important;
    }

    body.wj-ui .wj-search-prototype .btn-pax-minus,
    body.wj-ui .wj-search-prototype .btn-pax-plus {
        width: 40px !important;
        height: 40px !important;
        border-radius: 9999px !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
    }

    body.wj-ui .wj-search-prototype .btn-pax-minus {
        background: #eef2ff !important;
        color: #4f46e5 !important;
    }

    body.wj-ui .wj-search-prototype .btn-pax-plus {
        background: #6366f1 !important;
        color: #fff !important;
        box-shadow: 0 10px 15px rgba(99, 102, 241, 0.35) !important;
    }

    body.wj-ui .wj-search-prototype .pax-count-input {
        font-size: 20px !important;
        font-weight: 700 !important;
        border: none !important;
        background: transparent !important;
        width: 24px !important;
        padding: 0 !important;
    }

    body.wj-ui .wj-search-prototype .input-btn-search {
        width: 100% !important;
        margin-top: 8px !important;
        padding: 16px !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        border-radius: 16px !important;
        background: #2563eb !important;
        border: none !important;
        box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35) !important;
        text-transform: uppercase !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        color: #fff !important;
    }

    body.wj-ui .wj-search-prototype .mobile-boat-image-after-form {
        margin-top: 16px !important;
    }

    body.wj-ui .wj-search-prototype .mobile-boat-image-container,
    body.wj-ui .wj-search-prototype .mobile-boat-img {
        width: 100% !important;
        height: 128px !important;
        object-fit: cover !important;
        border-radius: 16px !important;
    }

    body.wj-ui.request-is-flight-search .wj-flight-results-wrap {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    body.wj-ui .wj-flight-has-results .wj-transfers-mobile-header {
        padding-top: 0 !important;
        margin-top: 8px !important;
    }

    body.wj-ui .day-selector-wrapper {
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 0 8px !important;
        margin-bottom: 8px !important;
    }

    body.wj-ui .day-selector-scroll {
        gap: 12px !important;
        margin: 0 -16px !important;
        padding: 0 16px 8px !important;
    }

    body.wj-ui .day-selector-btn {
        min-width: auto !important;
        padding: 10px 24px !important;
        border-radius: 16px !important;
        border: 1px solid #e5e7eb !important;
        background: #fff !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    }

    body.wj-ui .day-selector-btn.active {
        background: #2563eb !important;
        border-color: #2563eb !important;
        color: #fff !important;
        box-shadow: 0 10px 15px rgba(37, 99, 235, 0.25) !important;
    }

    body.wj-ui .topbar-search .result-count {
        font-size: 24px !important;
        font-weight: 800 !important;
        color: #111827 !important;
    }

    body.wj-ui .ticket-cta-mobile .btn-select {
        background: #2563eb !important;
        color: #fff !important;
        font-weight: 700 !important;
        border-radius: 16px !important;
        padding: 16px !important;
        border: none !important;
        box-shadow: 0 10px 15px rgba(37, 99, 235, 0.25) !important;
    }

    body.wj-ui .routes-grid-desktop,
    body.wj-ui .wj-hide-on-mobile {
        display: none !important;
    }

    body.wj-ui .home-routes-section .hidden.lg\:block {
        display: none !important;
    }

    body.wj-ui .home-routes-section .container {
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.wj-ui .wj-rental-list {
        padding: 72px 16px 96px !important;
        max-width: 448px !important;
        margin: 0 auto !important;
    }

    body.wj-ui .wj-flight-results-wrap {
        max-width: 100% !important;
        padding: 0 0 24px !important;
    }

    body.wj-ui.request-is-home .bc-form-search-all {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }
}