@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Playfair+Display:wght@400;600&family=DM+Sans:wght@300;400;500;700&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --navy: #0a1628;
    --navy-light: #162040;
    --gold: #c8a94a;
    --gold-light: #f0d98a;
    --cream: #faf8f3;
    --muted: #6b7280;
    --border: rgba(200, 169, 74, 0.25);
    --text: #1a1a2e;
    --primary: var(--navy);
    --primary-light: rgba(10, 22, 40, 0.04);
    --bg-color: #ffffff;
    --section-alt: #f0f4fb;
    --text-dark: #1e293b;
    --text-muted: #64748b;
    --white: #ffffff;
    --danger: #ef4444;
    --warning: #f59e0b;
    --success: #10b981;
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg-color);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content-area {
    flex-grow: 1;
}

/* ========== HEADER ========== */
.header {
    background: #0a1628;
    border-bottom: 2px solid var(--gold);
    position: sticky;
    top: 0;
    z-index: 9999;
    align-self: flex-start;
    width: 100%;
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

/* --- Scroll state: shrink + blur. Scoped to .site-header so standalone pages
       that style their own .header (manual_ticket) stay untouched. --- */
.site-header {
    border-bottom: 0;
    transition: box-shadow 0.3s ease;
}

/* A 1px gradient hairline reads far more expensive than a flat 2px gold rule. */
.site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    pointer-events: none;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    background: linear-gradient(90deg,
            rgba(200, 169, 74, 0) 0%,
            rgba(200, 169, 74, 0.35) 18%,
            rgba(200, 169, 74, 0.9) 50%,
            rgba(200, 169, 74, 0.35) 82%,
            rgba(200, 169, 74, 0) 100%);
}

.site-header.scrolled::after {
    opacity: 1;
}

.site-header .header-inner {
    transition: height 0.28s ease;
}

.site-header .logo img {
    height: 44px;
    transition: height 0.28s ease;
}

/* Scrolled: same solid navy as the top of the page, so the bar never changes
   colour under the logo. Only the depth cue changes -- the header shrinks and
   lifts a shadow over the content sliding beneath it. */
.site-header.scrolled {
    box-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.55);
}

.site-header.scrolled .header-inner {
    height: 56px;
}

.site-header.scrolled .logo img {
    height: 38px;
}

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

    .site-header,
    .site-header .header-inner,
    .site-header .logo img,
    .nav-link,
    .nav-link::after,
    .nav-panel {
        transition: none !important;
    }
}

/* --- Desktop navigation --- */
.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 11px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.22s ease, background 0.22s ease, text-shadow 0.22s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 3px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
    transform: scaleX(1);
}

/* --- Services dropdown --- */
.nav-dropdown {
    position: relative;
    display: inline-flex;
}

.nav-caret {
    opacity: 0.65;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-dropdown:hover > .nav-link,
.nav-dropdown:focus-within > .nav-link {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret {
    transform: rotate(180deg);
    opacity: 1;
}

.nav-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    width: 340px;
    padding: 8px;
    background: linear-gradient(180deg, #14243e 0%, #0c1a2e 100%);
    border: 1px solid rgba(200, 169, 74, 0.28);
    border-radius: 14px;
    box-shadow: 0 26px 60px -18px rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    z-index: 10000;
}

/* Invisible bridge so the pointer can travel from the trigger down to the panel */
.nav-panel::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
}

/* Small arrow pointing back at the Services trigger */
.nav-panel::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    margin-left: -6px;
    width: 11px;
    height: 11px;
    background: #14243e;
    border-left: 1px solid rgba(200, 169, 74, 0.28);
    border-top: 1px solid rgba(200, 169, 74, 0.28);
    transform: rotate(45deg);
}

.nav-dropdown:hover .nav-panel,
.nav-dropdown:focus-within .nav-panel,
.nav-dropdown .nav-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-panel-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.nav-panel-item:hover,
.nav-panel-item:focus-visible {
    background: rgba(200, 169, 74, 0.1);
}

.nav-panel-ico {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(200, 169, 74, 0.12);
    border: 1px solid rgba(200, 169, 74, 0.22);
    color: var(--gold);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.nav-panel-item:hover .nav-panel-ico {
    background: var(--gold);
    border-color: var(--gold);
    color: #0a1628;
}

.nav-panel-item > span:last-child {
    min-width: 0;
}

.nav-panel-title {
    display: block;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.nav-panel-desc {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11.5px;
    line-height: 1.45;
    margin-top: 2px;
}

.header-divider {
    width: 1px;
    height: 22px;
    flex: 0 0 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-login-btn {
    color: rgba(255, 255, 255, 0.85) !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 7px 18px !important;
    border-radius: 9px !important;
    transition: all 0.25s ease !important;
    display: inline-block;
}

.header-login-btn:hover {
    color: var(--gold) !important;
    border-color: var(--gold) !important;
    background: rgba(200, 169, 74, 0.1) !important;
}

.header-register-btn {
    color: var(--navy) !important;
    background: linear-gradient(135deg, #dcbf62 0%, #c8a94a 55%, #b8983c 100%) !important;
    border: 1px solid rgba(200, 169, 74, 0.9) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    padding: 7px 20px !important;
    border-radius: 9px !important;
    box-shadow: 0 4px 14px -5px rgba(200, 169, 74, 0.65) !important;
    transition: all 0.25s ease !important;
    display: inline-block;
}

.header-register-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -6px rgba(200, 169, 74, 0.8) !important;
    filter: brightness(1.06);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.logo img {
    display: block;
}

.logo-text {
    color: var(--gold);
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* Narrow laptops: tighten the nav before it has a chance to wrap */
@media (max-width: 1050px) and (min-width: 769px) {
    .header-inner {
        padding: 0 1.25rem;
    }

    .nav-link {
        font-size: 13px;
        padding: 8px 8px;
    }

    .nav-link::after {
        left: 8px;
        right: 8px;
    }

    .header-right {
        gap: 8px;
    }
}

/* --- Active page indicator --- */
.nav-link.active {
    color: var(--gold-light);
}

.nav-link.active::after {
    transform: scaleX(1);
}

.nav-panel-item.active {
    background: rgba(200, 169, 74, 0.12);
}

.nav-panel-item.active .nav-panel-ico {
    background: var(--gold);
    border-color: var(--gold);
    color: #0a1628;
}

.nav-panel-item.active .nav-panel-title {
    color: var(--gold-light);
}

/* --- Logged-in name in the bar --- */
.header-user-name {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* --- Hamburger: a framed button that folds into an X --- */
.td-menu-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.td-burger {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid rgba(200, 169, 74, 0.35);
    border-radius: 11px;
    background: rgba(200, 169, 74, 0.08);
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.td-burger:hover {
    background: rgba(200, 169, 74, 0.16);
    border-color: rgba(200, 169, 74, 0.6);
}

.td-burger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--gold);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.td-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.td-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.td-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* --- Dropdown menus (account + mobile nav), same dark panel styling
       as the desktop Services panel --- */
.td-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 260px;
    padding: 8px;
    display: none;
    flex-direction: column;
    gap: 1px;
    background: linear-gradient(180deg, #14243e 0%, #0c1a2e 100%);
    border: 1px solid rgba(200, 169, 74, 0.28);
    border-radius: 14px;
    box-shadow: 0 26px 60px -18px rgba(0, 0, 0, 0.8);
    text-align: left;
    z-index: 10000;
    /* A logged-in menu carries the account links AND the whole mobile nav, which
       runs past the fold on a short phone. Cap it and let it scroll instead. */
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 169, 74, 0.45) transparent;
}

/* dvh tracks the shrinking mobile toolbar; vh above is the fallback. */
@supports (max-height: 100dvh) {
    .td-menu {
        max-height: calc(100dvh - 100px);
    }
}

.td-menu::-webkit-scrollbar {
    width: 6px;
}

.td-menu::-webkit-scrollbar-track {
    background: transparent;
}

.td-menu::-webkit-scrollbar-thumb {
    background: rgba(200, 169, 74, 0.4);
    border-radius: 3px;
}

.td-menu.open {
    display: flex;
    animation: tdMenuIn 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}

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

    to {
        opacity: 1;
        transform: none;
    }
}

.td-menu-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.td-menu-item svg {
    flex: 0 0 18px;
    color: var(--gold);
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.td-menu-item:hover,
.td-menu-item:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.td-menu-item:hover svg {
    opacity: 1;
}

.td-menu-item.active {
    background: rgba(200, 169, 74, 0.12);
    color: var(--gold-light);
}

.td-menu-item.active svg {
    opacity: 1;
}

.td-menu-logout,
.td-menu-logout svg {
    color: #f87171;
}

.td-menu-logout:hover {
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
}

.td-menu-sep {
    height: 1px;
    margin: 6px 10px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}

.td-menu-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px 4px;
}

.td-menu-avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dcbf62 0%, #b8983c 100%);
    color: var(--navy);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.td-menu-headtext {
    min-width: 0;
}

.td-menu-name {
    display: block;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.td-menu-role {
    display: block;
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    margin-top: 2px;
}

/* The guest menu only carries what the header bar cannot. Register is always a
   button in the bar and Login joins it above 360px, so both stay out of the
   menu until the bar drops Login at the narrowest widths. */
.guest-menu-login,
.guest-menu-sep {
    display: none;
}

/* ========== FOOTER ========== */
.footer {
    background: var(--navy);
    color: rgba(255, 255, 255, 0.7);
    padding: 4rem 2rem 0;
    margin-top: 4rem;
}

/* Home page: its last section is a tinted band, so the footer's top margin
   showed as a white strip between the two. Butt the footer against it there,
   and move the same space into the results area (white), which shares the page
   with #homepageContent and relied on that margin for breathing room. */
#homepageContent ~ .footer { margin-top: 0 !important; }
#resultsSection { padding-bottom: 4rem; }
@media (max-width: 768px) {
    #resultsSection { padding-bottom: 2rem; }
}

.footer-inner {
    max-width: 1136px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 2.5rem;
    padding-bottom: 3rem;
}

.footer-col h4 {
    font-family: 'Outfit', sans-serif;
    color: var(--gold);
    font-size: 16px;
    margin-bottom: 1.2rem;
}

.footer-col.about p {
    font-size: 13px;
    line-height: 1.6;
    max-width: 300px;
}

.footer-col.links ul {
    list-style: none;
}

/* Chevron marker on every footer link. Drawn as an inline SVG background rather
   than an icon font or a CSS mask so it renders identically in every browser and
   degrades to nothing (not a coloured box) if the data URI ever fails to load. */
.footer-col.links li {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.footer-col.links li::before {
    content: "";
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin-top: 4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8a94a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") no-repeat center / contain;
}

.footer-col.links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.footer-col.links a:hover {
    color: var(--gold);
}

.social-icons {
    display: flex;
    gap: 12px;
}

.social-icons a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}

.social-icons a:hover {
    color: var(--gold);
}

.social-icons svg {
    width: 22px;
    height: 22px;
}

.footer-bottom {
    border-top: 1px solid rgba(200, 169, 74, 0.2);
    text-align: center;
    padding: 1.5rem 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

@media(max-width: 900px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }
    .footer-col.about {
        grid-column: span 2;
    }
}

@media(max-width: 600px) {
    /* Single column, but left-aligned: centred text made the chevron markers sit
       at a different indent on every row, which read as a ragged edge. */
    .footer-inner {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .footer-col.about {
        grid-column: span 1;
    }

    .footer-col.about p {
        margin: 0 0 1rem;
        max-width: none;
    }

    /* Drop the browser default ul indent so the links line up under their
       heading instead of sitting 40px in from it. */
    .footer-col.links ul {
        padding-left: 0;
    }
}

/* ========== PAGE CONTAINERS (Legal, FAQ) ========== */
.page-container {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 2rem;
}

.page-container h1 {
    font-family: 'Playfair Display', serif;
    color: var(--navy);
    font-size: 32px;
    margin-bottom: 2.5rem;
    text-align: center;
}

.page-container .subtitle {
    color: var(--muted);
    text-align: center;
    font-size: 16px;
    margin-bottom: 4rem;
}

.legal-container {
    max-width: 850px;
    margin: 3rem auto;
    padding: 2rem;
}

.legal-card {
    background: white;
    border-radius: 16px;
    padding: 2.5rem 3rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(200, 169, 74, 0.15);
}

.legal-card h1 {
    font-family: 'Playfair Display', serif;
    color: var(--navy);
    font-size: 32px;
    margin-bottom: 1rem;
}

.legal-card h2 {
    font-family: 'Outfit', sans-serif;
    color: var(--navy);
    font-size: 20px;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.legal-card p,
.legal-card li {
    font-size: 15px;
    color: #333;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.legal-card ul {
    list-style-position: inside;
    padding-left: 1rem;
}

.legal-card a {
    color: var(--navy);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
}

.legal-card a:hover {
    color: var(--gold);
}

.last-updated {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 2rem;
}

@media(max-width: 600px) {

    .legal-container,
    .page-container {
        padding: 1rem;
        margin: 1.5rem auto;
    }

    .legal-card {
        padding: 1.5rem;
    }

    .legal-card h1,
    .page-container h1 {
        font-size: 26px;
    }
}

/* ========== FAQ ACCORDION ========== */
.accordion-item {
    border-bottom: 1px solid #e5e7eb;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 0;
    cursor: pointer;
}

.accordion-header h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    color: var(--navy);
    font-weight: 600;
}

.accordion-icon {
    font-size: 20px;
    color: var(--gold);
    transition: transform 0.3s;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-content p {
    font-size: 14px;
    color: #333;
    line-height: 1.7;
    padding-bottom: 1.2rem;
}

.accordion-item.active .accordion-icon {
    transform: rotate(45deg);
}

/* ========== HOW IT WORKS STEPS ========== */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.step-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(200, 169, 74, 0.1);
}

.step-icon {
    width: 60px;
    height: 60px;
    background: rgba(200, 169, 74, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--gold);
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 600;
}

.step-card h3 {
    font-family: 'Outfit', sans-serif;
    color: var(--navy);
    font-size: 18px;
    margin-bottom: 0.5rem;
}

.step-card p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

/* ========== PRICING ========== */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
    margin-bottom: 4rem;
    align-items: stretch;
}

.price-card {
    background: white;
    border-radius: 24px;
    padding: 3.5rem 1.8rem;
    text-align: center;
    border: 1.5px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.price-card:hover {
    border-color: var(--gold);
    box-shadow: 0 20px 45px rgba(200, 169, 74, 0.15);
    transform: translateY(-8px) scale(1.02);
}

.price-card.popular {
    border: 3px solid var(--gold);
    box-shadow: 0 15px 35px rgba(200, 169, 74, 0.18);
    transform: scale(1.04);
    z-index: 2;
}

.price-card.popular:hover {
    transform: scale(1.07) translateY(-8px);
    box-shadow: 0 30px 60px rgba(200, 169, 74, 0.3);
}

.price-badge {
    position: absolute;
    top: 20px;
    right: -35px;
    background: var(--gold);
    color: var(--navy);
    font-size: 9.5px;
    font-weight: 800;
    width: 130px;
    text-align: center;
    padding: 5px 0;
    transform: rotate(45deg);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.price-name {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    color: var(--navy);
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.price-amount {
    font-family: 'Outfit', sans-serif;
    font-size: 38px;
    color: var(--navy);
    font-weight: 800;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.original-price {
    text-decoration: line-through;
    font-size: 18px;
    color: #94a3b8;
    font-weight: 500;
}

.price-suffix {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
    font-family: 'DM Sans', sans-serif;
}

.bundle-subtitle {
    font-size: 14.5px;
    color: var(--gold);
    font-weight: 700;
    margin-top: 8px;
    margin-bottom: 24px;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.enterprise-custom {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 700;
    background: rgba(10, 22, 40, 0.05);
    border: 1.5px dashed rgba(10, 22, 40, 0.2);
    color: #64748b;
    padding: 6px 18px;
    border-radius: 12px;
    display: inline-block;
    letter-spacing: -0.01em;
}

.price-highlight {
    color: var(--navy);
    font-weight: 800;
    font-size: 38px;
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.02em;
}


.price-features {
    list-style: none;
    margin-bottom: 2.2rem;
    text-align: left;
    flex-grow: 1;
}

.price-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 14px;
}

.price-features li svg {
    color: #10b981;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.price-btn {
    display: inline-block;
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}

.btn-outline {
    background: transparent;
    color: var(--navy);
    border: 2px solid var(--navy);
}

.btn-outline:hover {
    background: var(--navy);
    color: white;
    box-shadow: 0 8px 20px rgba(10, 22, 40, 0.15);
}

.btn-solid {
    background: var(--navy);
    color: white;
    border: 2px solid var(--navy);
}

.btn-solid:hover {
    background: #112240;
    border-color: #112240;
    color: white;
    box-shadow: 0 8px 20px rgba(10, 22, 40, 0.15);
}

/* ========== BLOGS ========== */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.blog-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid rgba(200, 169, 74, 0.1);
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border-color: var(--gold);
}

.blog-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-category {
    font-size: 11px;
    font-weight: 600;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

.blog-title {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    color: var(--navy);
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.blog-title a {
    text-decoration: none;
    color: inherit;
}

.blog-excerpt {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    flex-grow: 1;
}

.blog-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

.blog-author {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--muted);
}

.author-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eee;
}

.author-name {
    font-weight: 500;
    color: var(--text-dark);
}

.read-more-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    transition: color 0.2s;
}

.read-more-link:hover {
    color: var(--gold);
}

.post-container {
    max-width: 850px;
    margin: 3rem auto;
    padding: 0 2rem;
}

.post-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(200, 169, 74, 0.15);
    overflow: hidden;
}

.post-image {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.post-content {
    padding: 2.5rem 3rem;
}

.post-category {
    font-size: 12px;
    font-weight: 600;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

.post-title {
    font-family: 'Playfair Display', serif;
    color: var(--navy);
    font-size: 32px;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 2rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}

.post-body {
    font-size: 16px;
    color: #333;
    line-height: 1.8;
}

.post-body p {
    margin-bottom: 1.5rem;
}

.post-body h2 {
    font-family: 'Outfit', sans-serif;
    color: var(--navy);
    font-size: 22px;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.post-body ul {
    list-style-position: inside;
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}

.post-body li {
    margin-bottom: 0.5rem;
}

.back-link {
    display: inline-block;
    margin-bottom: 1.5rem;
    color: var(--navy);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.back-link:hover {
    color: var(--gold);
}

@media(max-width: 600px) {
    .post-container {
        padding: 0 1rem;
        margin: 1.5rem auto;
    }

    .post-content {
        padding: 1.5rem;
    }

    .post-title {
        font-size: 26px;
    }
}

/* ========== AUTHENTICATION (Login / Register) ========== */
.auth-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(135deg, var(--navy) 0%, #162040 100%);
    position: relative;
}

.auth-card {
    background: white;
    width: 100%;
    max-width: 440px;
    border-radius: 24px;
    padding: 3.5rem 2.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
    position: relative;
    z-index: 1;
}

.auth-card h2 {
    font-family: 'Outfit', sans-serif;
    color: var(--navy);
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-align: center;
    letter-spacing: -0.02em;
}

.auth-card p.subtitle {
    color: var(--muted);
    text-align: center;
    font-size: 14.5px;
    margin-bottom: 2.2rem;
}

.auth-card .field {
    margin-bottom: 1.6rem;
}

.auth-card .field label {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 8px;
    display: block;
}

.auth-card .field input {
    width: 100%;
    padding: 13px 16px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-family: 'DM Sans', sans-serif !important;
    color: var(--text) !important;
    background: #f8fafc !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.auth-card .field input::placeholder {
    color: var(--muted) !important;
}

.auth-card .field input:focus {
    border-color: var(--gold) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(200, 169, 74, 0.18) !important;
}

.field {
    margin-bottom: 1.2rem;
}

.field label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.field input,
.field select {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.2s;
    outline: none;
}

.field input:focus,
.field select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(200, 169, 74, 0.1);
}

/* iOS Safari fix: date input appears too thick on iPhone */
.field input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    height: 46px;
    line-height: 1.2;
    min-height: unset;
}

.field input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.btn-submit {
    width: 100%;
    padding: 14px 24px;
    background: var(--navy);
    color: var(--gold);
    border: 2px solid var(--navy);
    border-radius: 12px;
    font-size: 15px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 12px;
    box-shadow: 0 4px 12px rgba(10, 22, 40, 0.15);
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
}

.btn-submit:hover {
    background: var(--gold);
    color: var(--navy);
    border-color: var(--gold);
    box-shadow: 0 6px 20px rgba(200, 169, 74, 0.35);
    transform: translateY(-1.5px);
}

.btn-submit:active {
    transform: translateY(0);
}

.auth-footer {
    text-align: center;
    margin-top: 2.2rem;
    font-size: 14px;
    color: var(--muted);
    font-family: 'Outfit', sans-serif;
}

.auth-footer a {
    color: var(--navy);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
    border-bottom: 1.5px solid var(--gold);
    padding-bottom: 2px;
}

.auth-footer a:hover {
    color: var(--gold);
    border-bottom-color: var(--navy);
}

.msg-error {
    background: #fef2f2;
    border-left: 4px solid #ef4444;
    color: #b91c1c;
    padding: 12px;
    font-size: 13px;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.msg-success {
    background: #f0fdf4;
    border-left: 4px solid #10b981;
    color: #047857;
    padding: 12px;
    font-size: 13px;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

/* ========== PAGINATION ========== */
.pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 3rem;
    padding-bottom: 2rem;
}

.pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: var(--navy);
    background: var(--white);
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.pg-btn:hover:not(.pg-disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    border-color: var(--gold);
    color: var(--navy);
}

.pg-btn.pg-active {
    background: var(--navy);
    color: var(--gold);
    border-color: var(--navy);
    box-shadow: 0 6px 16px rgba(10, 22, 40, 0.2);
    transform: translateY(-2px);
}

.pg-btn.pg-disabled {
    opacity: 0.5;
    background: #f8fafc;
    color: #94a3b8;
    border-color: #e2e8f0;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.pg-ellipsis {
    color: var(--text-muted);
    font-size: 14px;
    padding: 0 4px;
    line-height: 42px;
    font-weight: 600;
}

/* ========== CUSTOM RESPONSIVE TITLES ========== */
.custom-mt {
    margin-top: 4rem;
}

.custom-subtitle {
    text-align: center;
    color: var(--muted);
    margin-top: -1.5rem;
    margin-bottom: 3rem;
    font-size: 14px;
    padding: 0 1rem;
}

@media(max-width: 768px) {
    .custom-mt {
        margin-top: 2.5rem !important;
    }

    .custom-subtitle {
        margin-top: -0.3rem !important;
        margin-bottom: 2rem !important;
        font-size: 13px;
    }
}

/* ========== POPULAR ROUTES ========== */
.routes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.route-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.route-card::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3px;
    height: 100%;
    background: var(--gold);
    transform: scaleY(0);
    transition: transform 0.3s;
    transform-origin: bottom;
}

.route-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(10, 22, 40, 0.06);
    border-color: var(--gold);
}

.route-card:hover::after {
    transform: scaleY(1);
}

.route-city {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 4px;
}

.route-country {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

@media(max-width: 768px) {
    .routes-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
        gap: 1rem !important;
    }

    .route-card {
        padding: 1rem !important;
    }

    .route-city {
        font-size: 13px !important;
    }

    .route-country {
        font-size: 11px !important;
    }
}

/* ========== VERIFIED AIRLINES ========== */
/* Two rows drifting right to left. The gap is a margin on the card rather than
   flex `gap`, so a copy is exactly half the track and the -50% loop has no
   seam; with `gap` the reset would be off by half a gap and visibly jump. */
.airlines-marquee {
    /* It owns its band now, so .info-section's bottom padding is the spacing. */
    margin-bottom: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.airlines-row {
    overflow: hidden;
    /* room for the card's hover lift and shadow, which the clip would eat */
    padding: 9px 0;
}

.airlines-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: airlinesScroll 45s linear infinite;
}

.airlines-track-alt {
    animation-duration: 62s;
}

/* Let people actually read a logo: hovering a row holds just that row. */
.airlines-row:hover .airlines-track {
    animation-play-state: paused;
}

@keyframes airlinesScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

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

    .airlines-row {
        overflow-x: auto;
    }
}

/* Landscape cards holding a wordmark, so no name label underneath. */
.airline-action-card {
    flex: 0 0 124px;
    margin-right: 0.65rem;
    height: 62px;
    padding: 0.4rem;
    background: #ffffff;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s, box-shadow 0.3s;
}

.airline-action-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(200, 169, 74, 0.08), transparent);
    opacity: 0;
    transition: opacity 0.4s;
}

.airline-action-card:hover {
    transform: translateY(-3px);
    border-color: var(--gold);
    box-shadow: 0 8px 18px rgba(10, 22, 40, 0.07);
    z-index: 2;
}

.airline-action-card:hover::before {
    opacity: 1;
}

.airline-action-card img {
    max-width: 94%;
    max-height: 44px;
    object-fit: contain;
    position: relative;
}

/* Shown by the img's onerror when a logo will not load. */
.airline-fallback {
    display: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--navy);
}

/* The band carries its own tighter rhythm: the shared .info-section and
   .section-title spacing left a lot of empty air around a strip this short. */
.airlines-band .info-section {
    padding: 2rem 2rem 2.25rem;
}

.airlines-band .section-title {
    margin-bottom: 0.5rem;
}

.airlines-band .custom-subtitle {
    margin-top: 0;
    margin-bottom: 1.6rem;
}

@media(max-width: 900px) {
    .airline-action-card {
        flex-basis: 118px;
    }
}

@media(max-width: 768px) {
    .airline-action-card {
        flex-basis: 110px;
        height: 56px;
        padding: 0.35rem;
    }

    .airline-action-card img {
        max-height: 38px;
    }

    /* Touch devices get no hover, so shorten the loop instead. */
    .airlines-track {
        animation-duration: 34s;
    }

    .airlines-track-alt {
        animation-duration: 46s;
    }

    .airlines-band .info-section {
        padding: 1.5rem 1rem 1.75rem;
    }

    .airlines-band .custom-subtitle {
        margin-bottom: 1.2rem;
    }
}

@media(max-width: 480px) {
    .airlines-row {
        padding: 7px 0;
    }

    .airline-action-card {
        flex-basis: 98px !important;
        margin-right: 0.45rem !important;
        height: 50px !important;
        padding: 0.3rem !important;
    }

    .airline-action-card img {
        max-height: 33px !important;
    }

    .airline-fallback {
        font-size: 10px;
    }
}

/* ========== GLOBAL MOBILE RESPONSIVENESS (ALL PAGES) ========== */
@media (max-width: 992px) {

    .pricing-grid,
    .blog-grid,
    .steps-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {

    /* Global Header Fix */
    .header-inner {
        flex-direction: row;
        flex-wrap: nowrap;
        height: auto;
        padding: 12px 1rem;
        gap: 10px;
        justify-content: space-between;
        align-items: center;
    }

    .header-inner .logo img {
        height: 38px !important;
    }

    .header-inner>div {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px !important;
    }

    .header-inner>div>a,
    .header-inner>div>div {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    /* Typography Fix */
    .section-title,
    .page-container h1,
    .legal-card h1,
    .post-title {
        font-size: 24px !important;
        margin-bottom: 1.5rem !important;
        line-height: 1.3;
    }

    .subtitle,
    .section-subtitle,
    .custom-subtitle {
        font-size: 13.5px !important;
        margin-bottom: 2rem !important;
        padding: 0 15px;
    }

    /* Containers & Spacing */
    .page-container,
    .legal-container,
    .post-container {
        padding: 1.2rem !important;
        margin: 1rem auto !important;
    }

    .legal-card,
    .post-content,
    .step-card,
    .price-card,
    .blog-card-content {
        padding: 1.5rem !important;
    }

    /* Grids to Single Column */
    .pricing-grid,
    .steps-grid,
    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 1.2rem !important;
    }

    .price-card.popular {
        transform: none !important;
    }
    .price-card:hover {
        transform: translateY(-4px) !important;
    }
    .price-card.popular:hover {
        transform: translateY(-4px) !important;
    }

    /* Auth Forms */
    .auth-container {
        padding: 1.5rem 1rem;
    }

    .auth-card {
        padding: 2rem 1.5rem;
    }

    .auth-card h2 {
        font-size: 24px;
    }

    .form-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Modals & Popups */
    .modal-header {
        padding: 1.2rem 1.5rem 1rem;
    }

    .modal-body {
        padding: 0 1.5rem 1rem;
    }

    .modal-footer {
        padding: 1rem 1.5rem;
        flex-direction: column;
        gap: 10px;
    }

    .modal-footer button {
        width: 100%;
        margin: 0;
    }

    /* Footer Compact for Mobile */
    .footer {
        padding: 2.5rem 1.2rem 0 !important;
        margin-top: 2rem !important;
    }

    .footer-inner {
        gap: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .footer-col h4 {
        margin-bottom: 0.6rem !important;
    }

    .footer-bottom {
        padding: 1rem 0 !important;
    }

    /* Form Mobile Responsiveness */
    .search-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .search-card {
        padding: 1.2rem !important;
    }

    .route-wrap, 
    .route-wrap-3, 
    .dates-row, 
    .dates-row-1, 
    .dates-row-2 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .swap-btn {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) rotate(90deg) !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
    }

    .service-toggle-wrap {
        gap: 2px !important;
        padding: 3px !important;
    }

    .service-tab-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
        gap: 4px !important;
    }

    .service-tab-btn svg {
        width: 14px !important;
        height: 14px !important;
    }

    .trip-toggle {
        padding: 3px !important;
        gap: 1px !important;
        margin-bottom: 1rem !important;
        width: 100% !important;
        display: flex !important;
    }

    .trip-btn {
        padding: 5px 8px !important;
        font-size: 11.5px !important;
        flex: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 480px) {
    .header-inner {
        flex-direction: row;
        justify-content: space-between;
        gap: 8px;
    }

    .header-inner>div {
        justify-content: flex-end;
        gap: 6px !important;
    }

    .header-inner .logo img {
        height: 34px !important;
    }

    .header-inner>div>a,
    .header-inner>div>div {
        font-size: 11px !important;
        padding: 5px 8px !important;
    }

    .btn-submit,
    .price-btn,
    .search-btn,
    .gen-btn {
        padding: 12px;
        font-size: 14px;
    }

    .price-amount {
        font-size: 32px;
    }

    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .routes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
    }

    .route-card {
        padding: 0.6rem !important;
        border-radius: 8px !important;
    }

    .route-city {
        font-size: 11px !important;
    }

    .route-country {
        font-size: 9px !important;
    }

    /* Prevents squeezed dashboard cards */
}

/* ==========================================================================
   INDEX/LANDING PAGE STYLES (MIGRATED FROM INDEX.PHP INLINE STYLES)
   ========================================================================== */

body.modal-open { overflow: hidden !important; }
.header-badge { background: rgba(200,169,74,0.15); border: 1px solid var(--border); color: var(--gold-light); font-size: 11px; padding: 4px 10px; border-radius: 20px; letter-spacing: 0.08em; }

.hero { background: linear-gradient(rgba(10, 22, 40, 0.45), rgba(10, 22, 40, 0.65)), url('hero-bg.png') no-repeat center center; background-size: cover; padding: 2.4rem 2rem 6.5rem; text-align: center; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient(45deg, transparent, transparent 60px, rgba(200,169,74,0.03) 60px, rgba(200,169,74,0.03) 61px); pointer-events: none; display: none; }
.hero-tag { color: var(--gold); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.5rem; position: relative; z-index: 1; }
.hero h1 { font-family: 'Outfit', sans-serif; color: white; font-size: 34px; font-weight: 700; margin-bottom: 0.5rem; line-height: 1.25; position: relative; z-index: 1; letter-spacing: -0.02em; }
.hero p { color: rgba(255,255,255,0.6); font-size: 13px; font-weight: 300; margin-bottom: 1.5rem; position: relative; z-index: 1; }

/* Segmented Trip Toggle Pill Controls */
.trip-toggle {
  display: inline-flex;
  background: #f1f5f9;
  border-radius: 4px;
  padding: 4px;
  margin-bottom: 1rem;
  border: none;
  position: relative;
  z-index: 10;
  gap: 2px;
}
.trip-btn {
  padding: 6px 16px;
  border-radius: 4px !important;
  font-size: 13px;
  cursor: pointer;
  color: #64748b;
  border: none;
  background: transparent;
  font-family: 'Outfit', sans-serif;
  transition: all 0.2s;
  font-weight: 600;
}
.trip-btn:hover {
  color: var(--navy);
}
.trip-btn.active {
  background: var(--navy) !important;
  color: #ffffff !important;
  font-weight: 600;
}

.search-container {
    max-width: 1200px;
    margin: -6.4rem auto 0 auto; /* Negative margin pulls search box closer over hero background */
    padding-left: 2rem;
    padding-right: 2rem;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 20;
}

/* Header Row for Toggles & Dropdowns */
.flight-search-header, .hotel-search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.flight-meta-dropdowns {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Dropdown Pill Styling */
.pax-pill, .cabin-pill {
  background: rgba(10, 22, 40, 0.04) !important;
  color: var(--navy) !important;
  border: 1.5px solid rgba(200, 169, 74, 0.25) !important;
  border-radius: 4px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: 'Outfit', sans-serif !important;
  cursor: pointer;
  height: 34px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  outline: none;
  transition: all 0.2s;
}
.pax-pill {
  background-image: none !important;
  padding-left: 14px !important;
  width: auto !important;
}
.cabin-pill {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230a1628' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 28px !important;
  background-color: rgba(10, 22, 40, 0.04) !important;
}
.pax-pill:hover, .cabin-pill:hover {
  background: rgba(200, 169, 74, 0.08) !important;
  border-color: rgba(200, 169, 74, 0.5) !important;
}

/* Compact Search Row */
.search-fields-row {
  display: flex;
  align-items: stretch;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  background: #ffffff;
  position: relative;
  box-shadow: 0 4px 20px rgba(10,22,40,0.06);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-fields-row:focus-within {
  border-color: var(--navy);
  box-shadow: 0 4px 25px rgba(10,22,40,0.1);
}

.route-fields-wrap {
  display: flex;
  flex: 2.2;
  position: relative;
  align-items: stretch;
}

.date-fields-wrap {
  display: flex;
  flex: 1.8;
  align-items: stretch;
}

.field-group {
  flex: 1;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1.5px solid #e2e8f0;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  min-width: 0;
}
.field-group:hover {
  background: #f8fafc;
}
.field-group:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.compact-label {
  font-size: 9px !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 2px !important;
  font-weight: 700 !important;
  pointer-events: none;
}

/* Airport Display details */
.airport-display-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.airport-code-large {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.01em;
}
.airport-info-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}
.airport-city-display {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.airport-name-display {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* Hidden input fields that overlap for editing */
.airport-input-hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  background: #ffffff !important;
  border: none !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-family: 'Outfit', sans-serif !important;
  box-sizing: border-box !important;
  border-radius: inherit;
}
.field-group.is-editing .airport-input-hidden {
  opacity: 1;
  z-index: 10;
  pointer-events: auto;
}
.field-group.is-editing .airport-display-box {
  opacity: 0;
}

/* Hidden date input field rules (visually hidden but accessible to Flatpickr) */
.date-input-hidden {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Swap button inside single box layout */
.compact-swap-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  font-size: 14px;
  color: var(--navy);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: all 0.2s;
  padding: 0;
}
.compact-swap-btn:hover {
  background: var(--navy);
  color: #ffffff;
  border-color: var(--navy);
  transform: translate(-50%, -50%) scale(1.1);
}

/* Date Display details */
.date-display-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.date-day-large {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.01em;
}
.date-info-details {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.date-month-display {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.date-weekday-display {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.2;
  margin-top: 1px;
}

/* Search Action Button */
.search-action-wrap {
  display: flex;
  align-items: stretch;
  background: transparent;
  padding: 0;
}
.compact-search-btn {
  background: #f97316;
  color: #ffffff;
  border: none;
  border-radius: 0 4px 4px 0;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s;
  font-family: 'Outfit', sans-serif;
  height: 100%;
}
.compact-search-btn:hover {
  background: #ea580c;
}
.compact-search-btn svg {
  stroke-width: 2.5;
}

.search-card { background: #ffffff !important; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(200, 169, 74, 0.15) !important; border-radius: 16px; padding: 1.8rem 1.8rem 2.8rem 1.8rem; box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08), 0 0 100px rgba(200, 169, 74, 0.05) !important; position: relative; z-index: 1; max-width: 100%; width: 100%; margin: 0 auto; }

.route-wrap { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.route-wrap-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.dates-row { display: grid; gap: 12px; margin-bottom: 12px; }
.dates-row-2 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.dates-row-1 { grid-template-columns: 1fr 1fr 1fr; }

.autocomplete-wrap { position: relative; }
.autocomplete-list { 
  position: absolute; 
  top: calc(100% + 6px); 
  left: 0; 
  right: 0; 
  background: #ffffff;
  border: 1.5px solid rgba(200, 169, 74, 0.3); 
  border-radius: 16px; 
  max-height: 280px; 
  overflow-y: auto; 
  z-index: 1000; 
  box-shadow: 
    0 20px 60px rgba(10, 22, 40, 0.18),
    0 4px 16px rgba(10, 22, 40, 0.08);
  display: none; 
  margin-top: 0;
  overflow: hidden;
  overflow-y: auto;
}
.autocomplete-list::-webkit-scrollbar {
  width: 5px;
}
.autocomplete-list::-webkit-scrollbar-track {
  background: #f1f5f9;
}
.autocomplete-list::-webkit-scrollbar-thumb {
  background: rgba(200,169,74,0.35);
  border-radius: 10px;
}
.autocomplete-list::-webkit-scrollbar-thumb:hover {
  background: rgba(200,169,74,0.6);
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.autocomplete-list.show { 
  display: block; 
  animation: dropdownFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Each suggestion row ── */
.ac-item { 
  padding: 11px 14px; 
  cursor: pointer; 
  border-bottom: 1px solid #f1f5f9; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  transition: background 0.18s ease, padding-left 0.18s ease;
  border-left: 3px solid transparent;
  gap: 10px;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { 
  background: linear-gradient(90deg, rgba(10,29,55,0.04) 0%, rgba(200,169,74,0.04) 100%);
  border-left-color: var(--gold, #c8a94a);
  padding-left: 17px; 
}

/* ── Text left side ── */
.ac-text-wrap { 
  display: flex; 
  flex-direction: column; 
  align-items: flex-start; 
  text-align: left; 
  min-width: 0; 
  flex: 1; 
}
.ac-city { 
  font-weight: 700; 
  color: var(--navy, #0a1d37); 
  font-size: 13.5px; 
  margin-bottom: 2px; 
  text-align: left; 
  width: 100%; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}
.ac-country, .ac-airport { 
  font-size: 11px; 
  color: #94a3b8; 
  text-align: left; 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

/* ── Airport code badge (right side) ── */
.ac-code { 
  font-weight: 800; 
  color: var(--navy, #0a1d37);
  font-size: 12px; 
  background: linear-gradient(135deg, #0a1d37 0%, #1a3558 100%);
  color: var(--gold, #c8a94a);
  border: 1px solid rgba(200,169,74,0.2);
  padding: 5px 10px; 
  border-radius: 8px; 
  flex-shrink: 0; 
  margin-left: 8px;
  letter-spacing: 0.04em;
  transition: all 0.18s;
  box-shadow: 0 2px 8px rgba(10,29,55,0.15);
}
.ac-item:hover .ac-code {
  background: linear-gradient(135deg, #c8a94a 0%, #d4b862 100%);
  color: #0a1d37;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(200,169,74,0.3);
}

/* ── Hotel city flag badge ── */
.hc-flag-badge {
  font-size: 22px;
  flex-shrink: 0;
  margin-left: 8px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

/* ── Hotel autocomplete section divider label ── */
.hc-section-label {
  padding: 7px 14px 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94a3b8;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  user-select: none;
}
.hc-section-label:not(:first-child) {
  border-top: 1px solid #f1f5f9;
}


.field label { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-bottom: 5px; }
.field select, .field input { width: 100%; padding: 10px 12px; border: 1.5px solid #e5e7eb; border-radius: 8px; font-size: 14px; font-family: 'DM Sans', sans-serif; color: var(--text); background: #fafafa; transition: border-color 0.2s; outline: none; appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; background-color: #fafafa; }
.field select:focus, .field input:focus { border-color: var(--gold); background-color: white; }

.field input[type="date"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 16px;
  padding-left: 36px;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  height: 42px;
  line-height: 1.2;
  min-height: unset;
  display: block;
}

.field input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

.field input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.field input.flatpickr-input, .booking-field input.flatpickr-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
  background-size: 16px !important;
  padding-left: 36px !important;
}

.field input.airport-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 16px;
  padding-left: 36px !important;
}

.swap-btn { position: absolute; left: 50%; transform: translateX(-50%); width: 36px; height: 36px; background: var(--navy); border: 2px solid white; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; color: var(--gold); top: 26px; z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: 0.2s; }
.swap-btn:hover { background: var(--gold); color: var(--navy); border-color: var(--navy); transform: translateX(-50%) scale(1.1); }

/* Pax Selector */
.pax-selector { position: relative; }
.field input.pax-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; background-size: 16px; padding-left: 36px; cursor: pointer; background-color: white; }
.pax-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: 0 12px 30px rgba(0,0,0,0.12); z-index: 100; display: none; margin-top: 4px; }
.pax-dropdown.show { display: block; }
.pax-dropdown.align-right { left: auto; right: 0; }
.pax-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pax-row:last-of-type { margin-bottom: 16px; }
.pax-label { font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.2; text-align: left; text-transform: none; letter-spacing: 0; }
.pax-label small { font-size: 11px; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.pax-ctrl { display: flex; align-items: center; gap: 12px; }
.pax-ctrl button { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: #f8fafc; color: var(--navy); font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; padding: 0; line-height: 0; }
.pax-ctrl button:hover { background: rgba(200,169,74,0.1); color: var(--gold); border-color: var(--gold); }
.pax-ctrl span { font-size: 14px; font-weight: 600; min-width: 12px; text-align: center; color: var(--text); }
.pax-done-btn { width: 100%; padding: 8px; background: var(--navy); color: var(--gold); border: none; border-radius: 6px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: 0.2s; }
.pax-done-btn:hover { background: var(--gold); color: var(--navy); }

/* Multi-city */
.multi-leg {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 8px !important;
  position: relative;
}
.remove-leg-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}
.remove-leg-btn:hover {
  background: #ef4444;
  color: #ffffff;
  transform: scale(1.1);
}
.remove-leg-placeholder {
  width: 28px;
  flex-shrink: 0;
}
.add-leg-btn { width: 100%; padding: 9px; background: transparent; border: 1.5px dashed var(--gold); border-radius: 8px; color: var(--gold); font-family: 'DM Sans', sans-serif; font-size: 13px; cursor: pointer; margin-bottom: 12px; transition: background 0.2s; }
.add-leg-btn:hover { background: rgba(200,169,74,0.07); }

.search-btn { width: 100%; padding: 13px; background: var(--navy); color: var(--gold); border: 2px solid var(--gold); border-radius: 10px; font-size: 15px; font-family: 'Playfair Display', serif; cursor: pointer; letter-spacing: 0.06em; transition: all 0.2s; }
.search-btn:hover { background: var(--gold); color: var(--navy); }
.mc-search-btn-wrap { display: flex; align-items: flex-end; }

.section-nav-wrap { background: white; border-bottom: 2px solid #eee; }
.section-nav {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.section-nav::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}
.nav-tab { padding: 12px 18px; font-size: 13px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; white-space: nowrap; }
.nav-tab.active { color: var(--navy); border-bottom-color: var(--gold); font-weight: 500; }
.section { display: none; }
.section.active { display: block; }

.results { padding: 1.5rem 2rem; max-width: 1200px; margin: 0 auto; }
.results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 12px; }
.results-title { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.results-count { font-size: 13px; font-weight: 600; color: var(--muted); background: #f1f5f9; padding: 4px 12px; border-radius: 20px; border: 1px solid #e2e8f0; }

.leg-tabs { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.leg-tab { padding: 8px 18px; border-radius: 24px; font-size: 13px; font-weight: 600; border: 1.5px solid #e2e8f0; background: #ffffff; cursor: pointer; color: #64748b; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 1px 3px rgba(0,0,0,0.03); }
.leg-tab:hover { border-color: var(--gold); color: var(--navy); }
.leg-tab.active { border-color: var(--gold); background: linear-gradient(135deg, rgba(200, 169, 74, 0.12) 0%, rgba(200, 169, 74, 0.04) 100%); color: var(--navy); font-weight: 700; box-shadow: 0 4px 12px rgba(200, 169, 74, 0.15); }
.leg-tab.done { border-color: #10b981; background: #ecfdf5; color: #047857; }

/* Premium Flight Card Container */
.flight-card { background: #ffffff; border-radius: 16px; border: 1px solid #e2e8f0; padding: 1.15rem 1.4rem; margin-bottom: 16px; display: grid; grid-template-columns: 1fr 85px 150px 85px; justify-content: space-between; align-items: center; gap: 0.8rem; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 16px -4px rgba(10, 22, 40, 0.05), 0 2px 6px -2px rgba(10, 22, 40, 0.03); position: relative; overflow: hidden; }
.flight-card::before { z-index: 1; content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; border-top-left-radius: 16px; border-bottom-left-radius: 16px; background: transparent; transition: background 0.25s ease; }
.flight-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(10, 22, 40, 0.12), 0 4px 10px -4px rgba(10, 22, 40, 0.06); border-color: #cbd5e1; }
/* No gold side-bar on hover (looked unprofessional, removed 2026-10-05) - hover is a neutral lift only. */
.flight-card.selected { border-color: var(--gold); background: #fffdf9; box-shadow: 0 8px 25px -4px rgba(200, 169, 74, 0.25), 0 0 0 1.5px var(--gold); }
/* .selected keeps its full gold ring; the side-bar was dropped there too so the two states look consistent. */

/* Airline Block */
.airline { display: flex; align-items: center; gap: 12px; min-width: 0; }
.airline-logo { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 1px solid #f1f5f9; overflow: hidden; padding: 2px; background: #f8fafc; }
.airline-name { font-family: 'Outfit', sans-serif; font-size: 14.5px; font-weight: 700; color: var(--navy); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.airline-num { font-size: 11.5px; font-weight: 500; color: #64748b; margin-top: 2px; }

/* Route Info (Dep / Arr Times) */
.route-info { text-align: center; width: 100%; }
.time { font-family: 'Outfit', 'DM Sans', sans-serif; font-size: 21px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.airport { font-size: 11.5px; font-weight: 600; color: #64748b; margin-top: 3px; display: inline-block; background: #f1f5f9; padding: 2px 8px; border-radius: 6px; letter-spacing: 0.04em; }

/* Duration Column & Timeline Line */
.duration-col { text-align: center; padding: 0 0.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.duration-text { font-size: 12.5px; font-weight: 600; color: #475569; margin-bottom: 4px; white-space: nowrap; }
.duration-line { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 130px; margin-bottom: 5px; }
.duration-line .line { flex: 1; height: 1.5px; background: #cbd5e1; border-radius: 2px; }
.duration-line svg.flight-plane-icon { color: var(--gold); flex-shrink: 0; transform: rotate(90deg); filter: drop-shadow(0 2px 4px rgba(200, 169, 74, 0.3)); transition: transform 0.3s ease; }
.flight-card:hover .duration-line svg.flight-plane-icon { transform: rotate(90deg) translateY(-2px); }

/* Standard Stops & Transit Info (Clean Text, No Harsh Boxes) */
.stops-info { font-size: 11.5px; font-weight: 500; color: #64748b; white-space: nowrap; margin-top: 1px; }
.stops-info.nonstop-info { color: #059669; font-weight: 600; }
.stops-info.one-stop-info { color: #d97706; font-weight: 500; }

/* One-way price footer, styled like the round-trip .rt-footer: full-width grey
   strip under the flight row. The card's padding differs per breakpoint (several
   !important overrides), so instead of negative margins the strip bleeds out with
   a spread shadow + clip-path and the card's overflow:hidden trims it. */
.fc-action { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; position: relative; margin-top: 4px; padding-top: 12px; background: #f8fafc; box-shadow: 0 0 0 200px #f8fafc; clip-path: inset(0 -200px -200px -200px); }
.fc-action::before { content: ''; position: absolute; top: 0; left: -200px; right: -200px; height: 1px; background: #e2e8f0; }
.fc-action > .flight-price-wrap { text-align: left; white-space: nowrap; }
@media (max-width: 400px) { .flight-our-charge .fc-long { display: none; } }
.flight-price-wrap { text-align: right; line-height: 1.15; }
.flight-price { font-family: 'Outfit', 'DM Sans', sans-serif; font-size: 15.5px; font-weight: 500; color: var(--navy); letter-spacing: -0.01em; }
.flight-price-sub { font-size: 10px; color: #64748b; font-weight: 500; display: block; }
/* Mirrors the fare block on the left: amount on top at the fare's size, small
   label under it, sitting just left of the book button. */
.flight-our-charge { display: block; text-align: right; line-height: 1.15; white-space: nowrap; }
.flight-our-charge b { display: block; font-family: 'Outfit', 'DM Sans', sans-serif; font-size: 15.5px; font-weight: 700; color: #a8832a; letter-spacing: -0.01em; }
.flight-our-charge small { display: block; font-size: 10px; font-weight: 500; color: #64748b; }
.flight-our-charge.included b { color: #059669; }
.rt-book { display: flex; flex-direction: row; align-items: center; gap: 12px; }

/* Action Button (Matches Search Button Style & Fits Container Perfectly) */
.select-btn { padding: 9px 16px; background: var(--navy); color: var(--gold); border: 2px solid var(--gold); border-radius: 10px; font-size: 13px; font-weight: 700; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; box-shadow: 0 3px 10px rgba(10, 22, 40, 0.12); }
.select-btn:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); box-shadow: 0 6px 18px rgba(200, 169, 74, 0.35); }
.select-btn.selected-btn { background: #10b981 !important; color: #ffffff !important; border-color: #10b981 !important; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important; }

/* Round-trip combined card */
.rt-card { background: white; border-radius: 16px; border: 1px solid #e2e8f0; margin-bottom: 16px; overflow: hidden; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 16px -4px rgba(10, 22, 40, 0.05); }
.rt-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -6px rgba(10, 22, 40, 0.1); border-color: var(--gold); }
.rt-card-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.rt-card-header .rt-route { font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700; color: var(--navy); }
.rt-card-header .rt-dates { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.rt-same-badge { font-size: 11px; color: #0284c7; background: #e0f2fe; border: 1px solid #bae6fd; padding: 3px 12px; border-radius: 20px; font-weight: 700; }
.rt-leg-label { font-size: 11px; color: var(--muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.06em; padding: 14px 22px 4px; }
.rt-flight-row { display: grid; grid-template-columns: 140px 95px 160px 95px 160px; justify-content: space-between; align-items: center; gap: 0.8rem; padding: 10px 22px 14px; }
.rt-airline-info { text-align: right; min-width: 0; }
.rt-airline-info .airline-name { font-family: 'Outfit', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-divider { border-top: 1px dashed #e2e8f0; margin: 0 22px; }
.rt-footer .flight-price-wrap { white-space: nowrap; }
.rt-footer { padding: 12px 22px; display: flex; justify-content: flex-end; align-items: center; gap: 12px; border-top: 1px solid #e2e8f0; background: #f8fafc; }

/* Results (2026-10-29): sort tabs + clean single-row flight cards. .fx-* replaced
   .flight-card / .rt-card in the results list; every value comes from the search
   response, see the helpers above renderRoundTripCombined() in index_js.php. */
.sort-bar { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
.sort-tab { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-right: 1px solid #eef2f6; padding: 10px 14px 9px; text-align: left; cursor: pointer; font-family: 'DM Sans', sans-serif; position: relative; min-width: 0; transition: background 0.2s ease; }
.sort-tab:last-child { border-right: 0; }
.sort-tab:hover { background: #f8fafc; }
.sort-tab-label { display: block; font-size: 12px; font-weight: 700; color: #64748b; }
.sort-tab-sub { display: block; font-family: 'Outfit', 'DM Sans', sans-serif; font-size: 14.5px; font-weight: 600; color: var(--navy); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.sort-tab.active { background: linear-gradient(180deg, #fffdf6 0%, #fbf5e2 100%); }
.sort-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); }
.sort-tab.active .sort-tab-label { color: #a8832a; }

.fx-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px 18px; margin-bottom: 12px; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.fx-card:hover { border-color: #cbd5e1; box-shadow: 0 8px 22px -12px rgba(10, 22, 40, 0.22); }
.fx-card.selected { border-color: var(--gold); background: #fffdf7; box-shadow: 0 0 0 1px var(--gold); }

.fx-row { display: grid; grid-template-columns: minmax(170px, 1.3fr) 86px minmax(110px, 1.5fr) 104px 150px; grid-template-areas: "air dep mid arr act"; align-items: center; gap: 14px; }
.fx-leg { grid-template-columns: minmax(170px, 1.3fr) 86px minmax(110px, 1.5fr) 104px; grid-template-areas: "air dep mid arr"; }
.fx-air-num .fc-tag { margin-left: 4px; vertical-align: 1px; }
.fx-air-fare { margin-top: 6px; line-height: 1.15; }
.fx-air-fare b { display: block; font-family: 'Outfit', 'DM Sans', sans-serif; font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; white-space: nowrap; }
.fx-air-fare span { display: block; font-size: 10.5px; color: #64748b; margin-top: 1px; }
.fx-arr .fx-more { margin-top: 5px; }
.fx-fare-m { display: none; }

.fx-air { grid-area: air; display: flex; align-items: center; gap: 11px; min-width: 0; }
.fx-logo { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; font-size: 12px; font-weight: 700; }
.fx-logo img { width: 100%; height: 100%; object-fit: contain; }
.fx-air-text { min-width: 0; }
.fx-air-name { font-family: 'Outfit', 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.2; }
.fx-air-num { font-size: 11.5px; color: #64748b; margin-top: 2px; }
.fx-more { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin-top: 4px; display: inline-flex; align-items: center; gap: 3px; font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 600; color: #a8832a; cursor: pointer; white-space: nowrap; }
.fx-more:hover { text-decoration: underline; }
.fx-more svg { transition: transform 0.2s ease; }
.fx-more[aria-expanded="true"] svg { transform: rotate(180deg); }

.fx-pt { min-width: 0; }
.fx-dep { grid-area: dep; }
.fx-arr { grid-area: arr; text-align: right; }
.fx-time { font-family: 'Outfit', 'DM Sans', sans-serif; font-size: 20px; font-weight: 600; color: var(--navy); line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-time .day-plus { font-size: 10.5px; font-weight: 700; color: #dc2626; margin-left: 2px; vertical-align: super; line-height: 0; }
.fx-sub { font-size: 11.5px; color: #64748b; margin-top: 3px; white-space: nowrap; }
.fx-mid { grid-area: mid; text-align: center; min-width: 0; }
.fx-dur { font-size: 11.5px; font-weight: 500; color: #64748b; }
.fx-line { border-top: 1.5px dashed #cbd5e1; margin: 5px 0; }
.fx-mid .stops-info { font-size: 11.5px; font-weight: 500; color: #64748b; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-mid .stops-info.nonstop-info { color: #059669; font-weight: 600; }

.fc-tag { font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; line-height: 1.3; border: 1px solid; }
.fc-tag-cheap { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.fc-tag-fast { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }

.fx-act { grid-area: act; align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 8px; padding-left: 16px; border-left: 1px solid #eef1f5; }
.select-btn.fx-btn { padding: 8px 12px; font-size: 12.5px; border-radius: 9px; box-shadow: none; }
.fx-charge { text-align: center; white-space: nowrap; line-height: 1.15; }
.fx-charge b { display: block; font-family: 'Outfit', 'DM Sans', sans-serif; font-size: 15px; font-weight: 700; color: #a8832a; letter-spacing: -0.01em; }
.fx-charge small { display: block; font-size: 10.5px; font-weight: 500; color: #64748b; }
.fx-charge b.inc { color: #059669; }

.fd-head { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; margin: 4px 0 8px; }
.fd-head ~ .fd-head { margin-top: 16px; }
.fx-card .flight-details { margin-top: 12px; padding: 12px 2px 2px; border-top: 1px dashed #e2e8f0; animation: fdIn 0.22s ease-out; }
.flight-details[hidden] { display: none; }
@keyframes fdIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fd-seg { display: flex; gap: 12px; }
.fd-rail { display: flex; flex-direction: column; align-items: center; width: 12px; padding: 5px 0; flex-shrink: 0; }
.fd-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--gold); background: #fff; box-sizing: border-box; }
.fd-track { flex: 1; width: 2px; min-height: 18px; margin: 3px 0; background: repeating-linear-gradient(#cbd5e1 0 4px, transparent 4px 8px); }
.fd-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.fd-point { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: #475569; min-width: 0; }
.fd-time { font-family: 'Outfit', 'DM Sans', sans-serif; font-size: 14.5px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.fd-code { font-size: 11.5px; font-weight: 700; color: var(--navy); background: #f1f5f9; padding: 1px 6px; border-radius: 5px; letter-spacing: 0.03em; }
.fd-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-date { font-size: 11.5px; color: #94a3b8; white-space: nowrap; margin-left: auto; }
.fd-meta { font-size: 11.5px; color: #64748b; }
.fd-layover { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0 10px 24px; padding: 7px 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 9px; font-size: 12px; color: #92400e; }
.fd-layover.long { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.fd-flag { font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 20px; background: #fff; border: 1px solid currentColor; }
.fd-flag.warn { color: #b91c1c; }

/* Round-trip: the two leg rows on the left, one divider column on the right with
   the combined fare, the service charge and Book Now (same look as one-way). */
.fx-rt { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; padding: 12px 18px; }
.fx-rt-legs { grid-column: 1; min-width: 0; }
.fx-rt-act { grid-area: auto; grid-column: 2; }
.fx-leg-label { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; }
.fx-leg-block + .fx-leg-block { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e2e8f0; }
.fx-same { font-size: 10.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #0369a1; background: #e0f2fe; padding: 1px 8px; border-radius: 20px; }

/* Narrow results column: airline + fare on top, the times below, and the same
   divider column on the right as desktop (owner wants phone cards to match the
   desktop card, 2026-10-31). The single row needs ~740px; the filter sidebar
   (shown above 992px) takes 284px, so the column is too narrow at 993-1060px
   and again below 800px. */
@media (max-width: 800px), (min-width: 993px) and (max-width: 1060px) {
  .fx-row { grid-template-columns: auto minmax(0, 1fr) auto 140px; grid-template-areas: "air air air act" "dep mid arr act"; gap: 12px 14px; }
  .fx-leg { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "air air air" "dep mid arr"; }
  .fx-dep, .fx-mid, .fx-arr { align-self: start; }
}
@media (max-width: 600px) {
  .sort-tab { padding: 9px 4px 8px; text-align: center; }
  .sort-tab-label { font-size: 10.5px; }
  .sort-tab-sub { font-size: 12px; }
  .fx-card { padding: 12px 12px 12px 14px; }
  .fx-rt { padding: 10px 12px 12px 14px; grid-template-columns: minmax(0, 1fr) 88px; gap: 10px; }
  .fx-row { grid-template-columns: auto minmax(0, 1fr) auto 88px; gap: 10px 10px; }
  .fx-leg { grid-template-columns: auto minmax(0, 1fr) auto; }
  .fx-act { padding-left: 10px; gap: 6px; }
  .fx-charge b { font-size: 14px; }
  .fx-charge small { font-size: 10px; }
  .select-btn.fx-btn { padding: 8px 4px; font-size: 12.5px; }
  .fx-long { display: none; }
  .fx-short-cap { text-transform: capitalize; }
  .fx-time { font-size: 17px; }
  .fx-sub, .fx-dur { font-size: 10.5px; }
  .fx-mid .stops-info { font-size: 10.5px; white-space: normal; line-height: 1.25; }
  .fx-air { gap: 9px; }
  .fx-logo { width: 32px; height: 32px; }
  .fx-air-fare b { font-size: 15px; }
  /* Phones: the fare moves from under the airline to its own line under the
     times, level with the Select button (owner, 2026-10-31). Desktop/tablet
     keep it under the airline. */
  .fx-air-fare { display: none; }
  .fx-row.has-fare { grid-template-areas: "air air air act" "dep mid arr act" "fare fare fare act"; }
  .fx-leg.has-fare { grid-template-areas: "air air air" "dep mid arr" "fare fare fare"; }
  .fx-fare-m { display: flex; grid-area: fare; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; padding-top: 8px; border-top: 1px dashed #e2e8f0; line-height: 1.2; }
  .fx-fare-m b { font-family: 'Outfit', 'DM Sans', sans-serif; font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; white-space: nowrap; }
  .fx-fare-m span { font-size: 10.5px; color: #64748b; }
  .fd-name { display: none; }
  .fd-layover { margin-left: 0; }
}
@media (max-width: 340px) {
  .fx-sub { white-space: normal; max-width: 50px; }
  .fx-arr .fx-sub { margin-left: auto; }
}

@media(max-width:768px) {
  .rt-flight-row { grid-template-columns: auto 1fr auto; gap: 12px 10px; text-align: left; }
  .rt-card-header { flex-direction: column; gap: 6px; align-items: flex-start; }
  .rt-flight-row > .airline { grid-column: 1; margin-bottom: 5px; }
  .rt-flight-row > div:nth-child(5) { grid-column: 2 / 4; align-self: center; margin-bottom: 5px; }
  .rt-flight-row > .route-info:nth-child(2) { grid-column: 1; text-align: left; }
  .rt-flight-row > .duration-col { grid-column: 2; padding: 0; }
  .rt-flight-row > .route-info:nth-child(4) { grid-column: 3; text-align: right; }

  .flight-card { grid-template-columns: 1fr auto 1fr; gap: 12px 10px; padding: 1.2rem; }
  .flight-card > .airline { grid-column: 1 / -1; margin-bottom: 5px; }
  .flight-card > .route-info:nth-child(2) { grid-column: 1; text-align: left; }
  .flight-card > .duration-col { grid-column: 2; padding: 0; }
  .flight-card > .route-info:nth-child(4) { grid-column: 3; text-align: right; }
}

/* Summary bar */
.summary-bar { background: var(--navy); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.summary-legs { display: flex; gap: 10px; flex-wrap: wrap; }
.summary-leg { font-size: 12px; color: rgba(255,255,255,0.7); display: flex; align-items: center; gap: 5px; }
.summary-leg.done { color: #6ee7b7; }
.summary-leg .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); flex-shrink: 0; }
.summary-leg.done .dot { background: #10b981; }
.summary-total { font-family: 'Playfair Display', serif; color: var(--gold); font-size: 16px; }

/* Modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(10,22,40,0.85); backdrop-filter: blur(4px); z-index: 100000; align-items: center; justify-content: center; padding: 1rem; opacity: 0; transition: opacity 0.3s ease; }
.modal-overlay.open { display: flex; animation: modalFadeIn 0.25s ease-out forwards; }
.modal { background: #f8f9fc; border-radius: 24px; width: 100%; max-width: 720px; overflow: hidden; position: relative; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4); display: flex; flex-direction: column; max-height: 90vh; opacity: 0; transform: translateY(20px) scale(0.96); }
.modal-overlay.open .modal { animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(25px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.modal-header { background: white; padding: 2rem 2.5rem 1.5rem; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
.modal-header h2 { font-family: 'Outfit', sans-serif; color: var(--navy); font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.modal-header h2 svg { width:22px; height:22px; color: var(--gold); }
.modal-header p { color: var(--muted); font-size: 13px; margin-top: 4px; }
.modal-body { padding: 1.5rem 2.5rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; }
.modal-footer { background: white; padding: 1.5rem 2.5rem; display: flex; justify-content: flex-end; gap: 12px; border-top: 1px solid #e5e7eb; flex-shrink: 0; }
.close-btn { position: absolute; top: 1.5rem; right: 1.5rem; width: 32px; height: 32px; background: #f1f5f9; border: none; border-radius: 50%; color: var(--muted); cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.close-btn:hover { background: rgba(0,0,0,0.1); }

.pax-card { background: white; border: 1.5px solid #cbd5e1; border-radius: 8px; padding: 1.2rem 1.4rem; box-shadow: 0 4px 15px rgba(0,0,0,0.03); position: relative; overflow: hidden; margin-bottom: 1rem; transition: all 0.25s ease; }
.pax-card:last-child { margin-bottom: 0; }
.pax-card:hover { border-color: var(--navy); box-shadow: 0 6px 20px rgba(10,22,40,0.06); }
#paxDetailsContainer .pax-card::before { display: none !important; }
.pax-card-title { font-size: 14.5px; font-weight: 700; color: var(--navy); font-family: 'Outfit', sans-serif; display: flex; align-items: center; gap: 8px; margin-bottom: 0.8rem; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9; }
.pax-card-title svg { width:18px; height:18px; color: var(--gold); }

.pax-suggestions-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1.5px solid #e5e7eb; border-radius: 6px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); z-index: 1000; max-height: 200px; overflow-y: auto; margin-top: 4px; display: none; }
.pax-suggestion-item { padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--navy); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; border-bottom: 1px solid #f1f5f9; }
.pax-suggestion-item:last-child { border-bottom: none; }
.pax-suggestion-item:hover { background: #f1f5f9; }
.pax-suggestion-name { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.pax-suggestion-pp { font-size: 11px; color: var(--muted); font-family: monospace; font-weight: 600; }

.title-group { margin-bottom: 10px; }
.title-group label { font-size: 12px; color: var(--navy); font-weight: 700; font-family: 'Outfit', sans-serif; display: block; margin-bottom: 4px; }
.title-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.title-pill { padding: 6px 14px; border-radius: 6px; border: 1.5px solid #cbd5e1; background: white; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; color: #475569; transition: all 0.2s ease; }
.title-pill.active { background: var(--navy); color: #ffffff; border-color: var(--navy); box-shadow: 0 2px 6px rgba(10,22,40,0.15); }
.title-pill:hover:not(.active) { border-color: var(--navy); color: var(--navy); background: #f8fafc; }
.booking-field { margin-bottom: 10px; position: relative; }
.booking-field label { font-size: 12px; font-weight: 700; font-family: 'Outfit', sans-serif; color: var(--navy); display: block; margin-bottom: 4px; }
.booking-field label .req { color: #ef4444; }
.booking-field input, .booking-field select { width: 100%; padding: 9px 12px; border: 1.5px solid #cbd5e1; border-radius: 6px; font-size: 13px; font-family: 'DM Sans', sans-serif; outline: none; transition: all 0.2s ease; background: #ffffff; color: #0f172a; box-sizing: border-box; }
.booking-field input:focus, .booking-field select:focus { border-color: var(--navy); background: white; box-shadow: 0 0 0 3px rgba(10,22,40,0.12); }
.booking-field .hint { font-size: 11px; color: var(--muted); margin-top: 2px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.booking-field .hint { font-size: 11px; color: var(--muted); margin-top: 3px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Payment methods responsive grid styles */
.payment-methods-grid { display: flex; justify-content: center; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
.payment-method-card { background: white; border: 1.5px solid #e5e7eb; padding: 16px 12px; border-radius: 12px; width: 46%; min-width: 150px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.02); transition: all 0.2s; position: relative; }
.payment-method-card:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.06); border-color: var(--hover-color) !important; }

.gen-btn { padding: 11px 24px; background: var(--navy); color: #ffffff; border: 1.5px solid var(--navy); border-radius: 6px; cursor: pointer; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(10,22,40,0.15); }
.gen-btn:hover { background: #172439; border-color: #172439; color: #ffffff; }
.cancel-btn { padding: 11px 20px; border: 1.5px solid #cbd5e1; border-radius: 6px; background: #ffffff; cursor: pointer; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; color: #475569; transition: all 0.2s ease; }
.cancel-btn:hover { border-color: var(--navy); color: var(--navy); background: #f8fafc; }

/* NEW TICKET FORMAT (Embassy Accepted, Clean Design) */
.ticket-wrap { padding: 2rem 0; display: flex; flex-direction: column; align-items: center; font-family: 'Helvetica Neue', Arial, sans-serif; width: 100%; box-sizing: border-box; }
.ticket-inner-wrap { width: 100%; max-width: 100vw; overflow-x: auto; display: flex; justify-content: center; padding-bottom: 20px; }
.ticket { background: white; padding: 1.8rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border: 1px solid #e5e7eb; position: relative; width: 800px; min-width: 800px; box-sizing: border-box; text-align: left; }
@media(max-width: 850px) { .ticket-inner-wrap { justify-content: flex-start; padding: 0 1rem; } }
.ticket > div, .t-segment, .t-top-row, .t-pax-bar, .t-pax-row, .t-notes, table, .t-flight-block { page-break-inside: avoid !important; break-inside: avoid !important; }
.t-header-text { border-bottom: 2px solid #1e293b; padding-bottom: 10px; margin-bottom: 15px; }
.t-trip-title { font-size: 16px; font-weight: 700; text-transform: uppercase; color: #1e293b; letter-spacing: 0.03em; }

.t-top-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 20px; line-height: 1.4; color: #334155; }
.t-pax-name { font-size: 14px; font-weight: 700; color: #0f172a; margin-top: 3px; margin-bottom: 10px; }
.t-res-code { font-size: 12px; margin-bottom: 5px; text-transform: uppercase; color: #475569; }
.t-res-code span { font-weight: 700; color: #c8a94a; }

.t-agency { text-align: right; }
.t-agency strong { color: #1e293b; font-size: 13px; display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-bottom: 4px; }
.t-agency strong span { font-weight: 700; font-family: 'Arial Black', sans-serif; letter-spacing: -0.5px; color: #c8a94a; }

.t-segment { margin-bottom: 25px; }
.t-seg-header { display: flex; align-items: center; background: #f8fafc; border-top: 2px solid #1e293b; border-bottom: 1px solid #e2e8f0; padding: 8px 12px; margin-bottom: 12px; font-size: 13px; color: #475569; font-weight: 600; }
.t-seg-header svg { width: 18px; height: 18px; margin-right: 8px; transform: rotate(45deg); fill: #c8a94a; }
.t-seg-header strong { font-size: 14px; margin-right: 5px; color: #1e293b; letter-spacing: 0.02em; }

.t-flight-block { display: flex; border: 1px solid #e2e8f0; font-size: 12px; color: #334155; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.t-fb-col { padding: 12px 15px; border-right: 1px solid #e2e8f0; flex: 1; }
.t-fb-col:last-child { border-right: none; flex: 0.8; }
.t-fb-1 { flex: 0.8; background: #f8fafc; border-left: 4px solid #c8a94a; }
.t-airline-title { font-size: 14px; font-weight: 700; margin-bottom: 2px; text-transform: uppercase; color: #1e293b; letter-spacing: 0.02em; }
.t-fb-col .label { color: #64748b; margin-bottom: 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.t-fb-col .val { font-size: 14px; color: #0f172a; margin-bottom: 10px; font-weight: 600; }

.t-baggage { font-size: 12px; color: #334155; margin-top: 15px; padding: 10px 15px; background: #f8fafc; border-radius: 6px; border: 1px dashed #cbd5e1; line-height: 1.5; font-weight: 500; }

.t-pax-bar { background: #1e293b; display: flex; font-size: 12px; font-weight: bold; padding: 10px 15px; margin-top: 15px; color: #ffffff; border-radius: 6px 6px 0 0; letter-spacing: 0.02em; }
.t-pax-row { display: flex; font-size: 12px; padding: 10px 15px; border: 1px solid #e2e8f0; border-top: none; border-radius: 0 0 6px 6px; color: #0f172a; font-weight: 500; background: #fafafa; }
.t-pax-name-col { flex: 1; text-transform: uppercase; }
.t-pax-seat-col { width: 180px; }

.t-notes { font-size: 10.5px; color: #475569; margin-top: 30px; line-height: 1.6; border-top: 2px solid #1e293b; padding-top: 15px; }
.t-notes strong { font-size: 12px; color: #1e293b; display: inline-block; margin-bottom: 6px; border-bottom: 2px solid #c8a94a; padding-bottom: 2px; text-transform: uppercase; letter-spacing: 0.02em; }

.t-notes-section { display: block !important; margin-top: 25px; page-break-inside: avoid !important; break-inside: avoid !important; }
.t-notes-inner-border { border-top: 2px solid #1e293b !important; margin-bottom: 15px !important; width: 100% !important; display: block !important; page-break-after: avoid !important; break-after: avoid !important; }
.t-notes-text { display: inline-block !important; width: 78% !important; vertical-align: top !important; font-size: 10.5px; color: #475569; line-height: 1.6; text-align: justify; padding-right: 15px; }
.t-notes-text strong { font-size: 12px; color: #1e293b; display: table; margin-bottom: 8px; border-bottom: 2px solid #c8a94a; padding-bottom: 2px; text-transform: uppercase; letter-spacing: 0.02em; }
.t-notes-qr { display: inline-block !important; width: 20% !important; vertical-align: top !important; text-align: right !important; margin-top: 10px !important; }
.t-notes-qr img { width: 90px; height: 90px; border: 2px solid #0a1628; padding: 4px; border-radius: 8px; background: white; box-shadow: 0 4px 12px rgba(10,22,40,0.25); display: inline-block !important; }

/* Overrides for inline JS tables */
/* No overflow:hidden here: with collapsed borders half of the outer border sits outside
   the table box, and clipping it made the frame vanish. (border-radius has no effect
   on a collapsed table anyway.) */
.ticket table { border: 1px solid #64748b !important; overflow: visible !important; border-collapse: collapse !important; }
.ticket table th { background: #eef1f5 !important; color: #0f172a !important; border: 1px solid #94a3b8 !important; font-weight: 700 !important; padding: 6px 10px !important; text-transform: uppercase; font-size: 11px !important; letter-spacing: 0.03em; }
.ticket table td { border: 1px solid #94a3b8 !important; color: #334155 !important; padding: 6px 10px !important; font-size: 12px !important; }
/* Collapsed borders: a cell's border wins over the table's, so the dark outer frame
   and the line under the header row have to be set on the edge cells themselves. */
.ticket table tr > :first-child { border-left-color: #64748b !important; }
.ticket table tr > :last-child { border-right-color: #64748b !important; }
.ticket table tr:first-child > * { border-top-color: #64748b !important; }
.ticket table tr:last-child > td { border-bottom-color: #64748b !important; }
.ticket table th { border-bottom-color: #64748b !important; }
.ticket .t-flight-block-card, .ticket .t-reminders-box { border-color: #64748b !important; }
.ticket .t-fb-header { border-bottom-color: #cbd5e1 !important; }
.ticket table td[style*="font-weight: bold"] { color: #0f172a !important; font-weight: 600 !important; }
.ticket div[style*="color: #0056b3"], .ticket div[style*="color:#0056b3"] { color: #1e293b !important; }
.ticket div[style*="color: #111"], .ticket div[style*="color:#111"] { color: #1e293b !important; }
.ticket div[style*="color:#059669"], .ticket div[style*="color: #059669"] { color: #10b981 !important; font-weight: 600 !important; }
.ticket div[style*="color:#c8192a"], .ticket div[style*="color: #c8192a"] { color: #e11d48 !important; }
.print-btn { width: 100%; padding: 11px; background: var(--navy); color: var(--gold); border: 2px solid var(--gold); border-radius: 10px; font-size: 14px; font-family: 'Playfair Display', serif; cursor: pointer; margin-top: 12px; letter-spacing: 0.05em; transition: all 0.2s; }
.print-btn:hover { background: var(--gold); color: var(--navy); }

/* ── COMPACT TICKET LAYOUT OVERRIDES ── */
.ticket-wrap.t-compact { padding: 4mm 8mm !important; }
.ticket.t-compact { padding: 0px 5px !important; }
.ticket.t-compact .t-header-text { margin-bottom: 2px !important; padding-bottom: 2px !important; }
.ticket.t-compact .t-top-row { margin-bottom: 2px !important; }
.ticket.t-compact > div[style*="margin-bottom"] { margin-bottom: 6px !important; }
.ticket.t-compact .t-segment { margin-bottom: 8px !important; }
.ticket.t-compact .t-seg-header { margin-bottom: 4px !important; padding: 4px 8px !important; font-size: 13px !important; }
.ticket.t-compact .t-seg-header strong { font-size: 14px !important; }
.ticket.t-compact .t-flight-block { margin-bottom: 4px !important; }
.ticket.t-compact .t-fb-col { padding: 6px 12px !important; }
.ticket.t-compact .t-fb-col .label { margin-bottom: 2px !important; font-size: 10.5px !important; }
.ticket.t-compact .t-fb-col .val { margin-bottom: 4px !important; font-size: 14px !important; }
.ticket.t-compact .t-airline-title { font-size: 14px !important; margin-bottom: 2px !important; }
.ticket.t-compact .t-baggage { margin-top: 5px !important; padding: 6px 10px !important; font-size: 12px !important; }
.ticket.t-compact table th { padding: 5px 8px !important; font-size: 11px !important; }
.ticket.t-compact table td { padding: 5px 8px !important; font-size: 12px !important; }
/* Hide redundant intermediate baggage tables */
.ticket.t-compact .t-segment table { display: none !important; }
.ticket.t-compact .t-segment.t-show-baggage table { display: table !important; margin-top: 6px !important; }
.ticket.t-compact .t-notes-section { margin-top: 10px !important; padding-top: 10px !important; }
.ticket.t-compact .t-notes-text { font-size: 10.5px !important; line-height: 1.5 !important; }
.ticket.t-compact .t-notes-text strong { font-size: 12px !important; margin-bottom: 4px !important; }
.ticket.t-compact .t-notes-qr img { width: 75px !important; height: 75px !important; }
.ticket.t-compact .t-notes-qr span { font-size: 8px !important; }
.ticket.t-compact .t-transit-connection { margin: 4px 0 !important; padding: 4px 10px !important; font-size: 11px !important; }
.ticket.t-compact > div[style*="margin-bottom"] { margin-bottom: 6px !important; }

/* Extra-compact overrides for 4-flight Roundway tickets to fit 100% on 1 page */
.ticket.t-compact.t-roundway { padding: 0px 2px !important; }
.ticket.t-compact.t-roundway .t-header-text { margin-bottom: 1px !important; padding-bottom: 1px !important; }
.ticket.t-compact.t-roundway .t-top-row { margin-bottom: 1px !important; }
.ticket.t-compact.t-roundway > div[style*="margin-bottom"] { margin-bottom: 2px !important; }
.ticket.t-compact.t-roundway .t-segment { margin-bottom: 2px !important; }
.ticket.t-compact.t-roundway .t-seg-header { margin-bottom: 2px !important; padding: 2px 4px !important; font-size: 10px !important; }
.ticket.t-compact.t-roundway .t-seg-header strong { font-size: 11.5px !important; }
.ticket.t-compact.t-roundway .t-flight-block { margin-bottom: 2px !important; }

/* Flight block column compression */
.ticket.t-compact.t-roundway .t-fb-col { padding: 3px 5px !important; }
.ticket.t-compact.t-roundway .t-fb-col .label { margin-bottom: 1px !important; font-size: 9px !important; }
.ticket.t-compact.t-roundway .t-fb-col .val { margin-bottom: 1px !important; font-size: 11px !important; line-height: 1.1 !important; }
.ticket.t-compact.t-roundway .t-airline-title { font-size: 11px !important; margin-bottom: 1px !important; }

/* Override inline styling for flight blocks */
.ticket.t-compact.t-roundway .t-fb-col div[style*="margin-bottom"] { margin-bottom: 2px !important; }
.ticket.t-compact.t-roundway .t-fb-col div[style*="font-size:14px"], 
.ticket.t-compact.t-roundway .t-fb-col div[style*="font-size: 14px"] { font-size: 11.5px !important; }
.ticket.t-compact.t-roundway .t-fb-col div[style*="margin-bottom:12px"], 
.ticket.t-compact.t-roundway .t-fb-col div[style*="margin-bottom: 12px"] { margin-bottom: 2px !important; font-size: 8.5px !important; }
.ticket.t-compact.t-roundway .t-fb-col div[style*="color:#0056b3"], 
.ticket.t-compact.t-roundway .t-fb-col div[style*="color: #0056b3"] { margin-bottom: 2px !important; font-size: 11px !important; }
.ticket.t-compact.t-roundway .t-fb-col div[style*="color:#475569"], 
.ticket.t-compact.t-roundway .t-fb-col div[style*="color: #475569"] { margin-bottom: 2px !important; font-size: 9.5px !important; }
.ticket.t-compact.t-roundway .t-fb-col div[style*="color:#059669"], 
.ticket.t-compact.t-roundway .t-fb-col div[style*="color: #059669"] { font-size: 9.5px !important; }

/* Baggage table overrides */
.ticket.t-compact.t-roundway .t-baggage { margin-top: 2px !important; padding: 2px 4px !important; font-size: 9.5px !important; }
.ticket.t-compact.t-roundway table th { padding: 2px 4px !important; font-size: 9px !important; }
.ticket.t-compact.t-roundway table td { padding: 2px 4px !important; font-size: 9.5px !important; }
.ticket.t-compact.t-roundway .t-segment table { display: none !important; }
.ticket.t-compact.t-roundway .t-segment.t-show-baggage table { display: table !important; margin-top: 2px !important; }

/* Notes section overrides */
.ticket.t-compact.t-roundway .t-notes-section { margin-top: 2px !important; padding-top: 2px !important; }
.ticket.t-compact.t-roundway .t-notes-inner-border { margin-bottom: 2px !important; }
.ticket.t-compact.t-roundway .t-notes-text { font-size: 8.5px !important; line-height: 1.15 !important; }
.ticket.t-compact.t-roundway .t-notes-text strong { font-size: 9.5px !important; margin-bottom: 1px !important; }
.ticket.t-compact.t-roundway .t-notes-qr img { width: 50px !important; height: 50px !important; margin-top: 0 !important; }
.ticket.t-compact.t-roundway .t-notes-qr span { font-size: 6px !important; }
.ticket.t-compact.t-roundway .t-transit-connection { margin: 1px 0 !important; padding: 1px 4px !important; font-size: 9.5px !important; }

/* Force page break helper for print/PDF */
.html2pdf__page-break {
    page-break-before: always !important;
    break-before: page !important;
    display: block !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.t-transit-connection {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 8px 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #0a1628 !important;
    background: #faf7ee !important;
    border: 1px dashed #c8a94a !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    gap: 8px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
}
.t-transit-connection svg {
    width: 14px !important;
    height: 14px !important;
    fill: none !important;
    stroke: #c8a94a !important;
    stroke-width: 2px !important;
    margin-right: 0 !important;
    transform: none !important;
}

/* ── COMPACT SEARCH BAR ── */
#compactSearch { display:none; background:white; border-bottom:1px solid #e5e7eb; padding:14px 2rem; }
#compactSearch.show { display:block; }
.cs-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cs-chip { display:flex; align-items:center; gap:6px; background:#f8f9fc; border:1px solid #e5e7eb; border-radius:8px; padding:8px 14px; font-size:13px; color:var(--navy); font-weight:500; cursor:pointer; transition:all 0.2s; }
.cs-chip:hover { border-color:var(--gold); background:rgba(200,169,74,0.06); }
.cs-chip svg { width:16px; height:16px; color:var(--muted); flex-shrink:0; }
.cs-chip .cs-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-right:4px; }
.cs-arrow { color:var(--gold); font-size:16px; font-weight:bold; }
.cs-modify { padding:8px 18px; background:var(--gold); color:var(--navy); border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all 0.2s; margin-left:auto; display:flex; align-items:center; gap:5px; }
.cs-modify:hover { background:var(--navy); color:var(--gold); }

/* Compact Hero State for Flight Results Page */
.hero.hero-compact {
  background-image: none !important;
  background-color: var(--navy) !important;
  padding: 1.5rem 1rem !important;
  min-height: auto !important;
}
.hero.hero-compact #hero-title,
.hero.hero-compact .hero-tag,
.hero.hero-compact p,
.hero.hero-compact .service-toggle-container {
  display: none !important;
}
.hero.hero-compact .search-container {
  margin-top: 0 !important;
}

/* ── COVER LETTER AUTOCOMPLETE DROPDOWNS (SMALL & PROFESSIONAL) ── */
.cl-autocomplete-wrap {
  position: relative;
  width: 100%;
}
.cl-autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  max-height: 180px;
  overflow-y: auto;
  z-index: 999;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  display: none;
  margin-top: 4px;
}
.cl-autocomplete-list.show {
  display: block;
}
.cl-ac-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  color: var(--navy);
  font-family: 'Outfit', sans-serif;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.cl-ac-item:last-child {
  border-bottom: none;
}
.cl-ac-item:hover {
  background: rgba(200, 169, 74, 0.08); /* Gold tint background */
  color: var(--gold);
}
.cl-ac-no-match {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  text-align: left;
}

@media(max-width:768px) {
  .cs-inner { gap:8px; }
  .cs-chip { padding:6px 10px; font-size:12px; }
  .cs-modify { margin-left:0; width:100%; justify-content:center; }
}

/* ── LOADING OVERLAY ── */
#loadingOverlay { display:none; position:fixed; inset:0; z-index:9999; background:linear-gradient(135deg,#0a1628 0%,#162040 60%,#1e3a6e 100%); flex-direction:column; align-items:center; justify-content:center; }
#loadingOverlay.show { display:flex; }
.lo-plane-track { position:relative; width:260px; height:60px; margin-bottom:2rem; }
.lo-plane { position:absolute; top:50%; transform:translateY(-50%); font-size:30px; animation:flyPlane 1.6s ease-in-out infinite; }
.lo-trail { position:absolute; top:50%; left:0; height:2px; background:linear-gradient(90deg,transparent,rgba(200,169,74,0.6)); border-radius:2px; animation:growTrail 1.6s ease-in-out infinite; transform:translateY(-50%); }

@keyframes flyPlane { 0%{left:0;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{left:230px;opacity:0} }
@keyframes growTrail { 0%{width:0;left:0} 100%{width:230px;left:0} }
.lo-title { font-family:'Playfair Display',serif; color:white; font-size:22px; margin-bottom:0.4rem; }
.lo-sub { color:rgba(255,255,255,0.5); font-size:13px; margin-bottom:2rem; }
.lo-dots { display:flex; gap:8px; }
.lo-dot { width:10px; height:10px; border-radius:50%; background:var(--gold); opacity:0.3; animation:dotPulse 1.2s ease-in-out infinite; }
.lo-dot:nth-child(2){ animation-delay:.2s; }
.lo-dot:nth-child(3){ animation-delay:.4s; }

@keyframes dotPulse { 0%,80%,100%{opacity:0.3;transform:scale(1)} 40%{opacity:1;transform:scale(1.3)} }

/* Mobile Responsive Updates */
@media (max-width: 768px) {
  .hero { padding: 2.5rem 1rem 5.5rem !important; }
  .hero h1 { font-size: 26px; }
  .search-card { padding: 1.2rem 1rem 1.8rem 1rem; }
  .search-container { padding-left: 1rem !important; padding-right: 1rem !important; margin-top: -5.4rem !important; }
  .active-indicator { top: 3px !important; bottom: 3px !important; border-radius: 20px !important; }
  .route-wrap { grid-template-columns: 1fr; gap: 8px; position: relative; }
  .route-wrap-3 { grid-template-columns: 1fr; gap: 8px; }
  .dates-row-1, .dates-row-2 { grid-template-columns: 1fr; gap: 8px; }
  
  /* Center the swap button on the boundary line between From & To inputs on mobile */
  .swap-btn { 
    position: absolute; 
    left: 50%; 
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg) !important; 
    margin: 0; 
    display: flex; 
    z-index: 10; 
  }
  .swap-btn:hover { transform: translate(-50%, -50%) rotate(90deg) scale(1.1) !important; }
  
  .form-row { grid-template-columns: 1fr; }
  .mc-search-btn-wrap { display: block; width: 100%; }

  /* Compact Search Box Mobile Styles */
  .flight-search-header, .hotel-search-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .flight-meta-dropdowns {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
  }
  .flight-meta-dropdowns > div {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .flight-meta-dropdowns .pax-pill,
  .flight-meta-dropdowns .cabin-pill {
    width: 100% !important;
  }

  /* Hotel header stays as row on mobile — title left, adults box right */
  #form-hotels .hotel-search-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  #form-hotels .hotel-search-header .flight-meta-dropdowns {
    width: auto !important;
    flex-shrink: 0 !important;
    justify-content: flex-end !important;
  }
  #form-hotels .pax-pill {
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: 160px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Multi-city: stack leg rows vertically on mobile */
  .multi-leg-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .multi-leg-row .search-fields-row {
    flex-direction: column !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
  }
  .multi-leg-row .route-fields-wrap,
  .multi-leg-row .date-fields-wrap {
    flex-direction: column !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(10,22,40,0.03) !important;
    width: 100% !important;
    flex: none !important;
  }
  .remove-leg-btn, .remove-leg-placeholder {
    align-self: flex-end !important;
  }
  .search-fields-row {
    flex-direction: column;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    gap: 10px;
  }
  .route-fields-wrap, .date-fields-wrap {
    flex-direction: column;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(10,22,40,0.03) !important;
    width: 100%;
    flex: none;
  }
  .field-group {
    border-right: none !important;
    padding: 12px 16px !important;
    width: 100%;
    box-sizing: border-box;
  }
  .route-fields-wrap .field-group:not(:last-child),
  .date-fields-wrap .field-group:not(:last-child) {
    border-bottom: 1.5px solid #e2e8f0 !important;
  }
  .compact-swap-btn {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg) !important;
  }
  .compact-swap-btn:hover {
    transform: translate(-50%, -50%) rotate(90deg) scale(1.1) !important;
  }
  .search-action-wrap {
    width: 100%;
    flex: none;
  }
  .compact-search-btn {
    border-radius: 4px !important;
    width: 100%;
    padding: 14px !important;
    height: 50px !important;
  }
  
  /* Autocomplete dropdown limits */
  .autocomplete-list { max-height: 200px; border-radius: 4px; }
  .pax-dropdown { padding: 12px; border-radius: 4px; }
  
  /* Modal responsive styling */
  .modal {
    max-height: 85vh;
    border-radius: 16px;
    width: 92%;
    margin: auto;
  }
  .modal-header {
    padding: 1rem 1rem 0.8rem;
  }
  .modal-header h2 {
    font-size: 16px;
  }
  .modal-header p {
    font-size: 12px;
  }
  .modal-body {
    padding: 1rem;
  }
  .modal-footer {
    padding: 0.8rem 1rem;
    flex-direction: row !important;
    gap: 10px;
  }
  .modal-footer button {
    flex: 1;
    width: auto !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    font-size: 13px;
    height: 40px;
  }
  .pax-card {
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 0.8rem;
  }
  .pax-card-title {
    font-size: 14px;
    margin-bottom: 0.8rem;
    padding-bottom: 8px;
  }
  .pax-card p {
    margin-bottom: 12px !important;
    font-size: 12px !important;
  }
  .booking-field {
    margin-bottom: 10px;
  }
  .booking-field label {
    margin-bottom: 4px;
    font-size: 11px;
  }
  .booking-field input, .booking-field select {
    padding: 8px 12px;
    font-size: 13px;
    height: 38px;
  }
  
  /* Passenger & Payment Modal enhancements */
  .title-pill {
    padding: 6px 12px;
    font-size: 12px;
  }
  .payment-methods-grid {
    gap: 10px;
  }
  .payment-method-card {
    width: 100% !important;
    min-width: 100% !important;
    padding: 12px;
  }
  
  /* Flight Cards adjustments */
  .flight-card {
    padding: 1rem;
    gap: 8px 8px;
  }
  .time {
    font-size: 18px;
  }
  .duration-text {
    font-size: 10px;
  }
}

/* ===== 2-Color Section Band System ===== */
.section-band {
  width: 100%;
}
.section-band-white {
  background: #ffffff;
}
.section-band-alt {
  background: var(--section-alt);
}

/* Services and Facilities styling */
.info-section { padding: 2.2rem 2rem 4rem; max-width: 1200px; margin: 0 auto; background: transparent; }
.section-title { text-align: center; font-family: 'Playfair Display', serif; color: var(--navy); font-size: 28px; margin-bottom: 2.5rem; position: relative; }
.section-title::after { display: none; }
.our-services-title { text-align: left; margin-bottom: 1rem; }

/* Services Grid (Smaller Cards) */
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-bottom: 3.5rem; }
.feature-card { background: white; border-radius: 10px; padding: 1.2rem 1rem; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.02); border: 1px solid rgba(200,169,74,0.12); transition: all 0.3s ease; }
.feature-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 8px 24px rgba(200, 169, 74, 0.08); }
.feature-icon { width: 40px; height: 40px; background: rgba(200,169,74,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.8rem; color: var(--gold); }
.feature-icon svg { width: 20px; height: 20px; }
.feature-card h3 { font-family: 'Outfit', sans-serif; color: var(--navy); font-size: 14px; margin-bottom: 0.4rem; font-weight: 700; }
.feature-card p { color: var(--muted); font-size: 12px; line-height: 1.35; }

/* Premium Photo Services Slider */
.premium-services-slider {
  overflow: hidden;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 3.5rem;
  position: relative;
  padding: 4px 0;
}
.premium-services-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  gap: 1rem;
}
.premium-service-card {
  flex: 0 0 calc((100% - (2 * 1rem)) / 3);
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(200, 169, 74, 0.12);
  box-shadow: 0 4px 15px rgba(10, 22, 40, 0.03);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  height: auto;
}
.premium-service-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: 0 12px 30px rgba(200, 169, 74, 0.12);
}
.premium-service-img-wrapper {
  width: 100%;
  height: 145px;
  overflow: hidden;
  position: relative;
  background: #f1f5f9;
}
.premium-service-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.premium-service-card:hover .premium-service-img-wrapper img {
  transform: scale(1.06);
}
.premium-service-card-info {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: left;
}
.premium-service-card-info h3 {
  font-family: 'Outfit', sans-serif;
  color: var(--navy);
  font-size: 15px;
  margin-bottom: 0.5rem;
  font-weight: 700;
  line-height: 1.25;
}
.premium-service-card-info p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

/* Facilities */
.facilities-wrap { background: var(--navy); border-radius: 20px; padding: 3rem 2rem; color: white; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; text-align: center; }
.facility-item h4 { font-family: 'Playfair Display', serif; font-size: 20px; color: var(--gold); margin-bottom: 0.5rem; }
.facility-item p { color: rgba(255,255,255,0.7); font-size: 13px; }

@media(max-width: 900px) {
  .features-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .premium-services-slider,
  .premium-services-track {
    gap: 1.2rem !important;
  }
  .premium-service-card {
    flex: 0 0 calc((100% - (1 * 1.2rem)) / 2) !important;
  }
}

@media(max-width: 768px) {
  .info-section { padding: 1.5rem 1rem; }
  .section-title { font-size: 24px; margin-bottom: 1.2rem; }
  .features-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.2rem !important; margin-bottom: 1.5rem !important; }
  .premium-services-slider { margin-bottom: 2rem !important; }
  .facilities-wrap { padding: 2rem 1.5rem; gap: 1.5rem; }
  .pricing-grid { grid-template-columns: 1fr !important; gap: 1.2rem !important; margin-bottom: 1.5rem !important; }
  .price-card { padding: 2rem 1.5rem !important; transform: none !important; }
  .price-card.popular { transform: none !important; }
  .price-card:hover { transform: translateY(-4px) !important; }
  .price-card.popular:hover { transform: translateY(-4px) !important; }
  .routes-grid { margin-bottom: 1.5rem !important; }
  
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .review-card {
    padding: 15px !important;
    border-radius: 12px !important;
  }
  .why-choose-title { margin-top: 1.5rem !important; }
}

@media(max-width: 480px) {
  .features-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.8rem !important; }
  .feature-card { padding: 1rem 0.8rem !important; }
  .feature-card h3 { font-size: 13px !important; }
  .feature-card p { font-size: 11px !important; line-height: 1.3 !important; }
  .feature-icon { width: 36px !important; height: 36px !important; margin: 0 auto 0.6rem !important; }
  .feature-icon svg { width: 18px !important; height: 18px !important; }

  .premium-services-slider { max-width: 100% !important; margin: 0 auto 2rem; }
  .premium-services-track { gap: 0.8rem !important; }
  .premium-service-card { flex: 0 0 100% !important; border-radius: 14px !important; }
  .premium-service-img-wrapper { height: 145px !important; }
  .premium-service-card-info h3 { font-size: 14px !important; }
  .premium-service-card-info p { font-size: 11px !important; }

  /* Cover Letter Form on very small screens — keep compact grids */
  #form-cover-letter .cl-row-names {
    grid-template-columns: 70px 1fr 1fr !important;
  }
  #form-cover-letter .cl-row-names > .field:last-child {
    grid-column: auto !important;
  }
  #form-cover-letter .cl-row-2-col {
    grid-template-columns: 1fr 1fr !important;
  }
  #form-cover-letter .cl-row-passport {
    grid-template-columns: 1fr 1fr !important;
  }
  #form-cover-letter .cl-row-passport > .field:first-child {
    grid-column: span 2 !important;
  }
  #form-cover-letter .cl-row-travel {
    grid-template-columns: 1fr 1fr !important;
  }
  #form-cover-letter .cl-row-travel > .field:first-child {
    grid-column: span 2 !important;
  }
  #form-cover-letter .cl-row-profession {
    grid-template-columns: 1fr 1fr !important;
  }
  #form-cover-letter .cl-row-profession > .field:last-child {
    grid-column: span 2 !important;
  }

  .reviews-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 0 8px !important;
  }
  .review-card {
    padding: 10px !important;
    border-radius: 10px !important;
  }
}

/* Pricing Notice Component styles */
.pricing-notice-wrap { padding: 2rem 1.5rem; display: flex; justify-content: center; margin-bottom: 2rem; }
.pricing-notice-card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0a1628 0%, #162040 60%, #1a2d5a 100%);
  border-radius: 20px;
  padding: 0;
  max-width: 900px; width: 100%;
  box-shadow: 0 15px 40px rgba(10,22,40,0.25), 0 4px 15px rgba(200,169,74,0.15);
  border: 1px solid rgba(200,169,74,0.2);
}
.pnc-blob1 { position:absolute; top:-60px; right:-60px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle, rgba(200,169,74,0.15) 0%, transparent 70%); pointer-events:none; }
.pnc-blob2 { position:absolute; bottom:-40px; left:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle, rgba(200,169,74,0.08) 0%, transparent 70%); pointer-events:none; }
.pnc-shimmer { height: 3px; background: linear-gradient(90deg, transparent, #c8a94a, #f0d080, #c8a94a, transparent); background-size: 200% 100%; animation: shimmerMove 2.5s linear infinite; }
@keyframes shimmerMove { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.pnc-body { position: relative; z-index: 2; padding: 1.5rem 2.5rem 1.8rem; text-align: center; }
.pnc-icon-wrap { width: 48px; height: 48px; background: rgba(200,169,74,0.15); border: 1.5px solid rgba(200,169,74,0.3); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; box-shadow: 0 6px 15px rgba(200,169,74,0.12); }
.pnc-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(200,169,74,0.12); border: 1px solid rgba(200,169,74,0.25); border-radius: 20px; padding: 4px 12px; font-size: 10.5px; font-weight: 700; color: #c8a94a; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.8rem; }
.pnc-badge::before { content:''; width:5px; height:5px; border-radius:50%; background:#c8a94a; animation: pulseDot 1.5s ease-in-out infinite; }
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} }
.pnc-message { font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.92); line-height: 1.6; max-width: 800px; margin: 0 auto; }
.pnc-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(200,169,74,0.3), transparent); margin: 1.2rem 0 1rem; }
.pnc-footer { font-size: 11.5px; color: rgba(255,255,255,0.35); display: flex; align-items: center; justify-content: center; gap: 5px; }

/* Dummy Ticket SEO Card Styles */
.dummy-info-card {
  background: white;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
  border: 1px solid rgba(200, 169, 74, 0.2);
  margin: 4rem auto;
  max-width: 1000px;
}
.dummy-info-title {
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
  font-size: 26px !important;
  text-align: center !important;
}
.dummy-info-title::after {
  display: none !important;
}
.dummy-info-text {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
  text-align: justify;
  margin-bottom: 1.2rem;
}
.dummy-info-text:last-of-type {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .dummy-info-card {
    padding: 1.8rem 1.2rem;
    margin: 2.5rem auto;
    border-radius: 12px;
  }
  .dummy-info-title {
    font-size: 20px !important;
    margin-bottom: 1rem !important;
  }
  .dummy-info-text {
    font-size: 13.5px;
    line-height: 1.6;
  }
}

/* ── TRUSTED BY TOP AGENCIES — infinite logo marquee ── */
.agency-section { padding-top: 2.6rem; padding-bottom: 2.8rem; }
.agency-head { text-align: center; }
.agency-eyebrow {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(200,169,74,0.12);
  border: 1px solid rgba(200,169,74,0.28);
  color: #9a7d2c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.agency-section .agency-title { margin: 0 0 0.5rem; }
.agency-section .agency-subtitle { margin: 0 0 1.6rem; }
.agency-marquee {
  position: relative;
  overflow: hidden;
  padding: 6px 0 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.agency-strip {
  display: flex;
  gap: 14px;
  width: max-content;
  padding: 0 7px;
  margin: 0;
  list-style: none;
  will-change: transform;
}
.agency-strip.agency-moving { transition: transform .7s cubic-bezier(.65,0,.35,1); }
.agency-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 84px;
  padding: 10px 14px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e6ecf5;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15,35,70,0.04);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.agency-chip:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 22px rgba(200,169,74,0.16);
  transform: translateY(-2px);
}
.agency-chip-logo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agency-chip-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
@media (max-width: 768px) {
  .agency-section { padding-top: 1.8rem !important; padding-bottom: 1.8rem !important; }
  .agency-section .agency-subtitle { margin: 0 0 1.1rem !important; }
  .agency-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .agency-strip { gap: 10px; padding: 0 5px; }
  .agency-chip { width: 132px; height: 70px; padding: 8px 10px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .agency-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .agency-chip[aria-hidden="true"] { display: none; }
}
/* ── CUSTOMER REVIEWS / TESTIMONIAL SLIDER ── */
.reviews-band {
  background: linear-gradient(180deg, #f6f9fd 0%, #eaf1fb 100%);
}
.rev-section { padding-bottom: 3.4rem; }
.rev-section .section-title { margin-bottom: 0.9rem; }
.rev-section .custom-subtitle { margin-top: 0; margin-bottom: 1.6rem; }

/* ── Rating summary chip ── */
.rev-summary {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 12px 22px;
  background: #ffffff;
  border: 1px solid rgba(200, 169, 74, 0.22);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(10, 22, 40, 0.05);
  margin: 0 auto;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}
.rev-summary-score {
  font-family: 'Playfair Display', serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  color: var(--navy);
}
.rev-summary-score span {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.rev-summary-right { text-align: left; }
.rev-summary-stars {
  color: var(--gold, #c8a94a);
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1.2;
}
.rev-summary-meta {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin-top: 3px;
}
.rev-summary-meta strong { color: var(--navy); font-weight: 700; }

/* ── Slider shell ── */
.rev-slider {
  position: relative;
  max-width: 1080px;
  margin: 2.2rem auto 0;
  padding: 0 52px;
  --rev-per-view: 3;
}
.rev-viewport {
  overflow: hidden;
  padding: 10px 0 16px;
  margin: -10px 0 -16px;
}
.rev-track {
  display: flex;
  align-items: stretch;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.rev-track.rev-no-anim { transition: none; }
.rev-slide {
  flex: 0 0 calc(100% / var(--rev-per-view, 3));
  max-width: calc(100% / var(--rev-per-view, 3));
  padding: 0 10px;
  display: flex;
  box-sizing: border-box;
}

/* ── Card ── */
.rev-card {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(200, 169, 74, 0.16);
  border-radius: 16px;
  padding: 24px 22px 20px;
  box-shadow: 0 2px 12px rgba(10, 22, 40, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
}
.rev-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold, #c8a94a), var(--gold-light, #f0d98a));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.rev-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 169, 74, 0.45);
  box-shadow: 0 14px 34px rgba(10, 22, 40, 0.10);
}
.rev-card:hover::before { opacity: 1; }

.rev-quote {
  position: absolute;
  top: 6px;
  right: 18px;
  font-family: Georgia, serif;
  font-size: 64px;
  line-height: 1;
  color: var(--gold, #c8a94a);
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
}
.rev-stars {
  color: var(--gold, #c8a94a);
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 12px;
}
.rev-star-off { color: #dfe4ec; }

.rev-comment {
  color: #33415a;
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0 0 18px 0;
  min-height: 74px;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rev-author {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #eef1f6;
  padding-top: 14px;
  margin-top: auto;
}
.rev-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy, #0a1628) 0%, #1d3054 100%);
  color: var(--gold-light, #f0d98a);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
}
.rev-author-info { min-width: 0; }
.rev-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy, #0a1628);
  line-height: 1.3;
}
.rev-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
  text-transform: capitalize;
}
.rev-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: #10b981;
  color: #fff;
  border-radius: 50%;
  font-size: 8px;
  line-height: 1;
  flex-shrink: 0;
}
.rev-meta {
  font-size: 11.5px;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.rev-sep { color: #cbd5e1; }

/* ── Arrows ── */
.rev-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(200, 169, 74, 0.5);
  background: #ffffff;
  color: var(--gold, #c8a94a);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(10, 22, 40, 0.08);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  z-index: 5;
  padding: 0 2px 3px;
}
.rev-arrow:hover {
  background: var(--gold, #c8a94a);
  color: #fff;
  box-shadow: 0 6px 18px rgba(200, 169, 74, 0.35);
}
.rev-arrow:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.rev-prev { left: 0; }
.rev-next { right: 0; }
.rev-single .rev-arrow { display: none; }
.rev-single { padding: 0; }

/* ── Dots (windowed) ── */
.rev-dots {
  overflow: hidden;
  margin: 24px auto 0;
  height: 10px;
}
.rev-dots-inner {
  display: flex;
  gap: 8px;
  transition: transform 0.35s ease;
}
.rev-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: #c9d4e3;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.rev-dot.active { background: var(--gold, #c8a94a); transform: scale(1.35); }
.rev-dot-edge { transform: scale(0.6); }
.rev-dot-edge.active { transform: scale(1.35); }

/* ── Responsive ── */
@media (max-width: 1000px) {
  .rev-slider { padding: 0 44px; }
  .rev-comment { min-height: 70px; -webkit-line-clamp: 6; }
}
@media (max-width: 640px) {
  .rev-section { padding-left: 1rem; padding-right: 1rem; }
  .rev-slider { padding: 0 36px; margin-top: 1.8rem; }
  .rev-slide { padding: 0 6px; }
  .rev-card { padding: 20px 18px 16px; }
  .rev-arrow { width: 34px; height: 34px; font-size: 20px; }
  .rev-summary { gap: 12px; padding: 10px 16px; }
  .rev-summary-score { font-size: 28px; }
  .rev-summary-meta { font-size: 11px; }
  .rev-comment { min-height: 68px; -webkit-line-clamp: 5; font-size: 14px; }
  .rev-name-text { max-width: 130px; }
}

.why-choose-title {
  margin-top: 3rem;
}



/* ========== RESULTS FILTERING & TRANSIT STYLING ========== */
.results-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 15px;
}

.filters-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  padding: 1.5rem;
  box-shadow: 0 8px 24px -4px rgba(10, 22, 40, 0.06), 0 2px 6px -2px rgba(10, 22, 40, 0.03);
  position: sticky;
  top: 85px;
  z-index: 10;
  transition: all 0.25s ease;
}

.results-main {
  flex: 1;
  min-width: 0;
}

.filter-group {
  user-select: none;
}

/* Custom Scrollbar for Airlines list */
.filter-options::-webkit-scrollbar {
  width: 4px;
}
.filter-options::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}
.filter-options::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.filter-options::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Custom Checkbox Label */
.filter-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-dark);
  cursor: pointer;
  position: relative;
  transition: color 0.15s;
}
.filter-checkbox-label:hover {
  color: var(--navy);
}

/* Mobile Filter Toggle */
.mobile-filter-toggle {
  display: none;
  width: auto;
  padding: 8px 16px;
  background: var(--navy);
  border: 1.5px solid var(--gold);
  border-radius: 8px;
  color: var(--gold);
  font-weight: 600;
  font-size: 13px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(10,22,40,0.15);
}
.mobile-filter-toggle:hover {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--navy);
}

/* Transit Point Display in Flight Cards */
.transit-text {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  font-weight: 500;
  white-space: normal;
  word-break: break-word;
  max-width: 180px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.2;
}

/* Custom range input styling */
#filter-price-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: #cbd5e1;
  border-radius: 9999px;
  outline: none;
  margin: 10px 0;
}
#filter-price-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--navy);
  cursor: pointer;
  border: 2px solid var(--gold);
  transition: transform 0.1s;
}
#filter-price-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

@media (max-width: 992px) {
  .results-layout {
    flex-direction: column;
    gap: 12px;
    align-items: stretch !important;
  }
  .filters-sidebar {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90% !important;
    max-width: 340px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    background: white !important;
    border: 1.5px solid var(--gold) !important;
    border-radius: 16px !important;
    z-index: 100000 !important; /* Overlays everything */
    padding: 1.5rem !important;
    display: none !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 0 100vmax rgba(10, 22, 40, 0.5) !important; /* Full-screen dimmer shadow */
  }
  .filters-sidebar.open {
    display: block !important;
  }
  .mobile-filter-toggle {
    display: flex !important;
    width: auto !important;
    max-width: max-content;
    margin-left: auto !important; /* Align right */
    padding: 8px 16px !important;
  }
  .close-filters-btn {
    display: block !important;
  }
}

/* ========== HOTEL BOOKING SERVICE STYLING ========== */

/* Service Toggle Switcher */
.service-toggle-container,
.trip-toggle-container {
  display: block;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 20;
}
.service-toggle-container {
  margin-top: 0.5rem;
  margin-bottom: 0.6rem;
}
.trip-toggle-container {
  margin-bottom: 1.2rem;
}
.service-toggle-wrap {
  display: inline-flex;
  background: rgba(10, 22, 40, 0.6); /* Dark semi-transparent navy */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 5px;
  border-radius: 30px; /* Capsule corners */
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
  user-select: none;
  border: 1px solid rgba(200, 169, 74, 0.35); /* Elegant gold border */
  gap: 4px;
  position: relative;
}
.active-indicator {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  height: auto !important; /* Driven by top and bottom offsets */
  background: linear-gradient(135deg, var(--gold), #ffd275);
  border-radius: 25px;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
  box-shadow: 0 3px 10px rgba(200, 169, 74, 0.35);
}
.service-tab-btn {
  padding: 10px 24px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75); /* Soft gray text */
  border: none;
  border-radius: 25px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Outfit', sans-serif;
  position: relative;
  z-index: 2; /* Text sits above active indicator */
}
.service-tab-btn svg {
  stroke: rgba(255, 255, 255, 0.75);
  transition: stroke 0.25s ease;
}
.service-tab-btn:hover {
  color: #ffffff;
}
.service-tab-btn:hover svg {
  stroke: #ffffff;
}
.service-tab-btn.active {
  color: var(--navy) !important; /* Navy text on gold pill background */
  font-weight: 700;
}
.service-tab-btn.active svg {
  stroke: var(--navy) !important;
}

/* Hotel Search Results List Card */
.hotel-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hotel-card {
  background: white;
  border-radius: 16px;
  border: 1px solid #eee;
  overflow: hidden;
  display: grid;
  grid-template-columns: 240px 1fr;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.01);
}
.hotel-card:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.hotel-image-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 180px;
  background: #f1f5f9;
  overflow: hidden;
}
.hotel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.hotel-image-wrap > img.hotel-image {
  transition: transform 0.4s ease;
}
.hotel-card:hover .hotel-image-wrap > img.hotel-image {
  transform: scale(1.05);
}
.hotel-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hotel-image-wrap:hover .slider-btn {
  opacity: 1;
}
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(10, 22, 40, 0.75);
  border: none;
  color: var(--gold);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
  opacity: 0;
  z-index: 5;
}
.slider-btn:hover {
  background: var(--navy);
  color: white;
}
.slider-btn.prev {
  left: 8px;
}
.slider-btn.next {
  right: 8px;
}
.slider-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 5;
}
.slider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
}
.slider-dot.active {
  background: var(--gold);
  width: 14px;
  border-radius: 3px;
}
.hotel-details {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.hotel-main-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.hotel-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
  font-family: 'Outfit', sans-serif;
  text-align: left;
}
.hotel-address {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  text-align: left;
}
.hotel-stars {
  color: #fbbf24;
  font-size: 13px;
  display: flex;
  gap: 2px;
}
.hotel-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
  text-align: left;
}
.hotel-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 15px;
}
.amenity-pill {
  background: #f1f5f9;
  color: #475569;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}
.hotel-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px dashed #e2e8f0;
  padding-top: 12px;
  margin-top: auto;
}
.hotel-price-wrap {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.hotel-price-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.hotel-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  font-family: 'Outfit', sans-serif;
}
.hotel-price-nights {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
/* Our service charge beside Book Room, same block as the flight cards
   (ourChargeLabelHTML). The room price on the left is what the voucher shows. */
.hotel-book { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.hotel-room-type {
  font-size: 12.5px;
  color: var(--navy);
  font-weight: 600;
  background: #fef3c7;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1.5px solid rgba(200, 169, 74, 0.25);
  margin-bottom: 8px;
  display: inline-block;
  align-self: flex-start;
}

/* Hotel Confirmation Voucher PDF Styles */
.hotel-voucher {
  background: white;
  padding: 1.8rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
  position: relative;
  width: 800px;
  min-width: 800px;
  box-sizing: border-box;
  text-align: left;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.hv-header {
  border-bottom: 2px solid #486078;
  padding-bottom: 12px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.hv-title-col h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #0a1628;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.hv-title-col p {
  font-size: 12px;
  color: #475569;
  font-weight: 600;
}
.hv-pnr-badge {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 16px;
  text-align: center;
}
.hv-pnr-label {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.hv-pnr-value {
  font-size: 18px;
  font-weight: 800;
  color: #0a1628;
  font-family: monospace;
  letter-spacing: 0.05em;
}
.hv-section {
  margin-bottom: 20px;
}
.hv-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: white;
  background: #486078;
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.hv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 15px;
  background: #fafafa;
  font-size: 12px;
  color: #334155;
}
.hv-grid-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hv-grid-item .label {
  font-size: 10.5px;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.hv-grid-item .val {
  font-size: 13px;
  color: #0f172a;
  font-weight: 700;
}
.hv-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 12px;
}
.hv-table th {
  background: #f1f5f9;
  border: 1px solid #486078;
  padding: 8px 12px;
  font-weight: 700;
  color: #1e293b;
  text-transform: uppercase;
  font-size: 11px;
  text-align: left;
}
.hv-table td {
  border: 1px solid #486078;
  padding: 10px 12px;
  color: #334155;
  vertical-align: top;
}
.hv-status-confirmed {
  background: #d1fae5;
  color: #065f46;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  display: inline-block;
}

@media (max-width: 768px) {
  .hotel-card {
    grid-template-columns: 1fr;
  }
  .hotel-image-wrap {
    height: 160px;
    min-height: auto;
  }
  .hotel-main-info {
    flex-direction: column;
    gap: 4px;
  }
}

/* Upgraded Hotel Card Styles */
.hv-booking-card {
  display: flex;
  border: 1px solid #486078;
  border-radius: 8px;
  margin-bottom: 20px;
  background: #ffffff;
  overflow: hidden;
}
.hv-hotel-summary {
  width: 50%;
  padding: 15px;
  display: flex;
  gap: 15px;
}
.hv-hotel-summary-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}
.hv-hotel-summary-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 11px;
  color: #475569;
  line-height: 1.4;
}
.hv-hotel-summary-info h3 {
  font-size: 15px;
  font-weight: 700;
  color: #0a1628;
  margin-bottom: 6px;
}
.hv-dates-container {
  width: 50%;
  display: flex;
  background: #f8fafc;
  border-left: 1px solid #486078;
}
.hv-date-box {
  flex: 1;
  padding: 15px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #e2e8f0;
}
.hv-date-box:last-child {
  border-right: none;
}
.hv-date-title {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}
.hv-date-day {
  font-size: 28px;
  font-weight: 800;
  color: #0a1628;
  line-height: 1;
  margin-bottom: 2px;
}
.hv-date-month-year {
  font-size: 11px;
  font-weight: 700;
  color: #0a1628;
  text-transform: uppercase;
}
.hv-date-weekday {
  font-size: 10px;
  color: #475569;
  margin-top: 3px;
}
.hv-date-time {
  font-size: 9px;
  color: #64748b;
  margin-top: 5px;
  font-weight: 600;
}
.hv-nights-box {
  flex: 0.8;
  padding: 15px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hv-nights-box .hv-nights-val {
  font-size: 22px;
  font-weight: 800;
  color: #0a1628;
  margin-bottom: 4px;
}
.hv-nights-box .hv-nights-val span {
  color: #94a3b8;
  font-weight: 400;
  font-size: 16px;
  margin: 0 4px;
}
.hv-nights-box .hv-nights-lbl {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Price Details Box */
.hv-price-container {
  border: 1px solid #486078;
  border-radius: 8px;
  margin-bottom: 20px;
  background: #ffffff;
  overflow: hidden;
  display: flex;
}
.hv-price-details {
  width: 55%;
  padding: 15px 20px;
  border-right: 1px solid #486078;
}
.hv-price-details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.hv-price-details-table td {
  padding: 4px 0;
  color: #475569;
}
.hv-price-details-table tr.total-row td {
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
  font-weight: 700;
  color: #0a1628;
  font-size: 14px;
}
.hv-price-details-table tr.total-row td.price-val {
  font-size: 18px;
}
.hv-price-payment-info {
  width: 45%;
  padding: 15px 20px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 11px;
  color: #475569;
  line-height: 1.5;
}
.hv-price-payment-info strong {
  color: #0a1628;
  font-size: 12px;
  margin-bottom: 5px;
}

/* Room Details Upgraded */
.hv-room-card {
  border: 1px solid #486078;
  border-radius: 8px;
  margin-bottom: 20px;
  background: #ffffff;
  overflow: hidden;
  display: flex;
}
.hv-room-info-side {
  width: 65%;
  padding: 15px 20px;
  border-right: 1px solid #486078;
  display: flex;
  gap: 15px;
}
.hv-room-img {
  width: 110px;
  height: 85px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}
.hv-room-details-text {
  flex: 1;
  font-size: 11px;
  color: #475569;
  line-height: 1.4;
}
.hv-room-details-text h3 {
  font-size: 14px;
  font-weight: 700;
  color: #0a1628;
  margin-bottom: 5px;
}
.hv-room-policy-side {
  width: 35%;
  padding: 15px 20px;
  background: #f8fafc;
  font-size: 11px;
  color: #475569;
  line-height: 1.5;
}
.hv-room-policy-side div {
  margin-bottom: 10px;
}
.hv-room-policy-side div:last-child {
  margin-bottom: 0;
}
.hv-room-policy-side strong {
  color: #0a1628;
  display: block;
  font-size: 12px;
  margin-bottom: 3px;
}
.hv-pin-badge {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  font-family: monospace;
}

/* Responsive fixes to prevent horizontal overflow/scroll on mobile */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
  }
  
  .results {
    padding: 1rem 0.5rem !important;
  }
  
  .section-nav {
    padding: 0 1rem !important;
  }
  
  #compactSearch {
    padding: 10px 0.75rem !important;
  }
  
  .flight-card {
    padding: 0.8rem 0.6rem !important;
    gap: 8px 6px !important;
  }
  
  .transit-text {
    white-space: normal !important;
    word-break: break-word !important;
    max-width: 130px !important;
    margin: 3px auto 0 !important;
    line-height: 1.2 !important;
  }
  
  /* Round trip card responsive padding adjustments */
  .rt-card-header {
    padding: 10px 12px !important;
  }
  
  .rt-leg-label {
    padding: 10px 12px 4px !important;
  }
  
  .rt-flight-row {
    padding: 8px 12px 12px !important;
    gap: 10px 6px !important;
  }
  
  .rt-divider {
    margin: 0 12px !important;
  }
  
  .rt-footer {
    padding: 10px 12px !important;
  }
  
  /* Hotel card responsive details and footer stacking */
  .hotel-details {
    padding: 1rem !important;
  }
  
  .hotel-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  
  .hotel-footer .select-btn {
    width: 100% !important;
    text-align: center !important;
  }
  .hotel-book { justify-content: space-between; }
  .hotel-book .select-btn { width: auto !important; flex: 1; }
}

/* ── QUICK SEARCH BAR RESPONSIVENESS & PREMIUM STYLING ── */
/* One-way / Round-trip pills above the results-page modify bar
   (same look as the home form's .trip-btn row) */
.qs-trip-toggle { display: inline-flex; gap: 4px; padding: 3px; margin-bottom: 12px; background: #f1f5f9; border-radius: 8px; }
.qs-trip-btn { padding: 6px 16px; border: none; border-radius: 6px; background: transparent; color: #64748b; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.qs-trip-btn:hover { color: var(--navy); }
.qs-trip-btn.active { background: var(--navy); color: #ffffff; }
.quick-search-bar-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  width: 100%;
}
.quick-search-bar-row .field {
  margin-bottom: 0 !important;
}
.quick-search-bar-row label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
  text-transform: none;
  letter-spacing: normal;
}
/* Ensure inputs and selects have matching heights */
.quick-search-bar-row .field input,
.quick-search-bar-row .field select,
.quick-multi-leg .field input,
.quick-multi-leg .field select {
  height: 42px !important;
  box-sizing: border-box !important;
}
.quick-search-bar-row .field.field-modify-btn {
  flex: 0.8;
  min-width: 120px;
  max-width: 180px;
  margin-left: auto;
}
.quick-search-modify-btn {
  width: 100%;
  padding: 10px 16px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  background: var(--gold);
  color: var(--navy);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  height: 42px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.quick-search-modify-btn:hover {
  background: var(--navy);
  color: var(--gold);
}
.quick-search-modify-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.5;
}
.swap-btn-quick {
  margin-bottom: 3px;
  cursor: pointer;
  font-size: 18px;
  color: var(--gold);
  font-weight: bold;
  user-select: none;
  display: flex;
  align-items: center;
  height: 36px;
  transition: transform 0.2s;
}
.swap-btn-quick:hover {
  transform: scale(1.1);
}

.quick-route-wrap {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex: 3;
  position: relative;
  width: 100%;
}
.quick-route-wrap .field {
  margin-bottom: 0 !important;
}

/* ── COVER LETTER FORM GRID ── */
.cl-row-names,
.cl-row-2-col,
.cl-row-passport,
.cl-row-contact,
.cl-row-travel,
.cl-row-profession {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  width: 100%;
}
.cl-row-names {
  grid-template-columns: 1fr 2fr 2fr;
}
.cl-row-2-col,
.cl-row-contact {
  grid-template-columns: 1fr 1fr;
}
.cl-row-passport,
.cl-row-profession {
  grid-template-columns: 1fr 1fr 1fr;
}
.cl-row-travel {
  grid-template-columns: 2fr 1fr 1fr;
}

@media (max-width: 768px) {
  .quick-route-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    flex: none !important;
    gap: 10px !important;
    position: relative !important;
  }
  .quick-route-wrap .field {
    width: 100% !important;
    flex: none !important;
  }
  .quick-route-wrap .swap-btn-quick {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    margin: 0 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    z-index: 10 !important;
  }
  .quick-route-wrap .swap-btn-quick:hover {
    transform: translate(-50%, -50%) rotate(90deg) scale(1.1) !important;
  }
  .quick-search-bar-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    gap: 10px !important;
    position: relative !important;
  }
  .quick-search-bar-row .field {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .quick-search-bar-row .field.quick-field-half {
    width: calc(50% - 5px) !important;
  }
  .quick-search-bar-row .field.quick-field-full {
    width: 100% !important;
  }
  .quick-search-bar-row .field.field-modify-btn {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  .quick-search-modify-btn {
    margin-top: 0 !important;
    width: 100% !important;
  }
  
  .quick-multi-leg {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 15px;
    margin-bottom: 15px !important;
  }
  .quick-multi-leg:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0 !important;
  }
  .quick-multi-leg .field {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .quick-multi-leg>div:first-child {
    margin-bottom: 0 !important;
  }

  /* Cover Letter Form Mobile Improvements */
  #form-cover-letter {
    padding: 1.2rem !important;
  }
  #form-cover-letter h3 {
    font-size: 15px !important;
  }
  #form-cover-letter .field {
    margin-bottom: 0 !important;
    min-width: 0;
  }
  #form-cover-letter .field label {
    margin-bottom: 4px !important;
    font-size: 10.5px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
  #form-cover-letter .field input,
  #form-cover-letter .field select,
  #form-cover-letter .field textarea {
    padding: 8px 8px !important;
    font-size: 12.5px !important;
    height: 38px !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #form-cover-letter .field textarea {
    height: auto !important;
    min-height: 50px !important;
  }
  #form-cover-letter .field input.flatpickr-input {
    padding-left: 32px !important;
  }
  /* Common grid reset */
  #form-cover-letter .cl-row-names,
  #form-cover-letter .cl-row-2-col,
  #form-cover-letter .cl-row-passport,
  #form-cover-letter .cl-row-contact,
  #form-cover-letter .cl-row-travel,
  #form-cover-letter .cl-row-profession {
    margin-top: 8px !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Title | First Name | Last Name — all 3 side by side */
  #form-cover-letter .cl-row-names {
    grid-template-columns: 80px 1fr 1fr !important;
  }
  #form-cover-letter .cl-row-names > .field:last-child {
    grid-column: auto !important;
  }
  
  /* Letter Date | Visa Purpose — equal columns */
  #form-cover-letter .cl-row-2-col {
    grid-template-columns: 1fr 1fr !important;
  }
  
  /* Passport Number (full) | Issue Date | Expiry */
  #form-cover-letter .cl-row-passport {
    grid-template-columns: 1fr 1fr !important;
  }
  #form-cover-letter .cl-row-passport > .field:first-child {
    grid-column: span 2 !important;
  }
  
  /* Contact Email | Mobile — stack vertically */
  #form-cover-letter .cl-row-contact {
    grid-template-columns: 1fr !important;
  }
  
  /* Cities (full) | Start Date | End Date */
  #form-cover-letter .cl-row-travel {
    grid-template-columns: 1fr 1fr !important;
  }
  #form-cover-letter .cl-row-travel > .field:first-child {
    grid-column: span 2 !important;
  }
  
  /* Employment | Occupation — side by side; Company below full */
  #form-cover-letter .cl-row-profession {
    grid-template-columns: 1fr 1fr !important;
  }
  #form-cover-letter .cl-row-profession > .field:last-child {
    grid-column: span 2 !important;
  }

  /* Autocomplete wrap should fill its parent */
  #form-cover-letter .cl-autocomplete-wrap {
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* ── PREMIUM LIGHT MODAL OVERRIDES ── */
#loginModal .modal,
#registerModal .modal,
#bookingModal .modal,
#paymentModal .modal {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 20px 40px -10px rgba(10, 22, 40, 0.25) !important;
  border-radius: 12px !important;
}
#loginModal .modal-header,
#registerModal .modal-header,
#bookingModal .modal-header,
#paymentModal .modal-header {
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 1.8rem 2.2rem 1.2rem;
}
#loginModal .modal-header h2,
#registerModal .modal-header h2,
#bookingModal .modal-header h2,
#paymentModal .modal-header h2 {
  color: var(--navy) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}
#loginModal .modal-header h2 svg,
#registerModal .modal-header h2 svg,
#bookingModal .modal-header h2 svg,
#paymentModal .modal-header h2 svg {
  color: var(--gold) !important;
}
#loginModal .modal-header p,
#registerModal .modal-header p,
#bookingModal .modal-header p,
#paymentModal .modal-header p {
  color: var(--muted) !important;
  font-size: 13.5px !important;
}
#loginModal .booking-field,
#registerModal .booking-field,
#bookingModal .booking-field,
#paymentModal .booking-field {
  margin-bottom: 1.2rem;
}
#loginModal .booking-field label,
#registerModal .booking-field label,
#bookingModal .booking-field label,
#paymentModal .booking-field label {
  color: var(--navy) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}
#loginModal .booking-field input,
#registerModal .booking-field input,
#bookingModal .booking-field input,
#bookingModal .booking-field select,
#paymentModal .booking-field input,
#paymentModal .booking-field select {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  padding: 11px 14px !important;
  border-radius: 6px !important;
  font-family: 'DM Sans', sans-serif !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#loginModal .booking-field input:focus,
#registerModal .booking-field input:focus,
#bookingModal .booking-field input:focus,
#bookingModal .booking-field select:focus,
#paymentModal .booking-field input:focus,
#paymentModal .booking-field select:focus {
  border-color: var(--navy) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(10, 22, 40, 0.12) !important;
}
#bookingModal .booking-field input.flatpickr-input,
#paymentModal .booking-field input.flatpickr-input {
  padding-left: 36px !important;
}
#bookingModal .booking-field select,
#paymentModal .booking-field select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 40px !important;
}
#loginModal .close-btn,
#registerModal .close-btn,
#bookingModal .close-btn,
#paymentModal .close-btn {
  background: #f1f5f9 !important;
  border-radius: 6px !important;
  color: var(--muted) !important;
  top: 1.5rem;
  right: 1.5rem;
}
#loginModal .close-btn:hover,
#registerModal .close-btn:hover,
#bookingModal .close-btn:hover,
#paymentModal .close-btn:hover {
  background: #e2e8f0 !important;
  color: var(--navy) !important;
}
#loginModal form div[style*="text-align: center"],
#registerModal form div[style*="text-align: center"] {
  color: var(--muted) !important;
}
#loginModal form div[style*="text-align: center"] a,
#registerModal form div[style*="text-align: center"] a {
  color: var(--navy) !important;
  font-weight: 600 !important;
  border-bottom: 1.5px solid var(--gold) !important;
  padding-bottom: 1px;
  transition: all 0.2s;
}
#loginModal form div[style*="text-align: center"] a:hover,
#registerModal form div[style*="text-align: center"] a:hover {
  color: var(--gold) !important;
  border-bottom-color: var(--navy) !important;
}

/* ── COMPACT BOOKING MODAL (No-Scroll Optimized) ── */
#bookingModal .modal {
  max-width: 680px !important;
  max-height: 96vh !important;
}
#bookingModal .modal-header {
  padding: 1.1rem 1.8rem 0.6rem !important;
}
#bookingModal .modal-header h2 {
  font-size: 18px !important;
}
#bookingModal .modal-header p {
  font-size: 12px !important;
  margin-top: 2px !important;
}
#bookingModal .modal-body {
  padding: 0.85rem 1.8rem !important;
}
#bookingModal .modal-footer {
  padding: 0.75rem 1.8rem !important;
}
#bookingModal .pax-card {
  padding: 0.9rem 1.2rem !important;
  margin-bottom: 0.6rem !important;
}
#bookingModal .pax-card-title {
  margin-bottom: 0.5rem !important;
  padding-bottom: 5px !important;
  font-size: 13.5px !important;
}
#bookingModal .title-group {
  margin-bottom: 0.5rem !important;
}
#bookingModal .title-pill {
  padding: 3px 11px !important;
  font-size: 11.5px !important;
}
#bookingModal .booking-field {
  margin-bottom: 0.55rem !important;
}
#bookingModal .booking-field label {
  font-size: 11.5px !important;
  margin-bottom: 2px !important;
}
#bookingModal .booking-field input,
#bookingModal .booking-field select {
  padding: 7px 11px !important;
  font-size: 12.5px !important;
  height: 38px !important;
}
#bookingModal .booking-field input.flatpickr-input {
  padding-left: 32px !important;
}
#bookingModal .booking-field select {
  background-position: right 12px center !important;
  padding-right: 32px !important;
}
#bookingModal .close-btn {
  top: 1rem !important;
  right: 1.2rem !important;
}

/* ═══════════════════════════════════════════════
   MOBILE RESPONSIVE — FLIGHT & HOTEL SEARCH PAGE
   Fixes: zoom, overflow, compact layout
   ═══════════════════════════════════════════════ */

/* ── 1. Prevent iOS auto-zoom on input focus (font-size must be ≥ 16px) ── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Override back to smaller sizes only for read-only display boxes */
  .airport-city-display,
  .airport-name-display,
  .airport-code-large,
  .date-day-large,
  .date-month-display,
  .date-weekday-display,
  .pax-pill,
  .cabin-pill {
    font-size: inherit !important;
  }

  /* ── 2. Airport display box — prevent text overflow causing page zoom ── */
  .airport-display-box {
    overflow: hidden !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .airport-city-display {
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  .airport-name-display {
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  .airport-code-large {
    font-size: 16px !important;
    flex-shrink: 0 !important;
  }
  .airport-info-details {
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
  }

  /* ── 3. Field group — ensure relative positioning for hidden inputs ── */
  .field-group {
    position: relative !important;
    overflow: visible !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── 4. Pax dropdown — compact inline, white background, no modal ── */

  /* pax-selector must NOT clip its absolute child */
  .pax-selector {
    overflow: visible !important;
    position: relative !important;
  }
  .flight-meta-dropdowns {
    overflow: visible !important;
  }
  .pax-dropdown {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 100% !important;
    transform: none !important;
    width: auto !important;
    min-width: 220px !important;
    max-width: 280px !important;
    max-height: none !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    padding: 14px !important;
    z-index: 9999 !important;
    margin-top: 4px !important;
  }
  .pax-dropdown.align-right {
    left: auto !important;
    right: 0 !important;
  }
  #pax-drop-ow,
  #pax-drop-rt,
  #pax-drop-mc {
    left: 0 !important;
    right: auto !important;
  }
  .pax-dropdown.show {
    display: block !important;
  }
  .pax-dropdown.show::before {
    content: none !important;
  }
  .pax-row {
    margin-bottom: 10px !important;
  }
  .pax-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--navy) !important;
  }
  .pax-ctrl button {
    width: 28px !important;
    height: 28px !important;
    font-size: 15px !important;
    border-radius: 6px !important;
  }
  .pax-ctrl span {
    font-size: 14px !important;
    min-width: 16px !important;
  }
  .pax-done-btn {
    padding: 8px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }

  /* ── 5. Search form fields — no overflow ── */
  .search-fields-row {
    overflow: visible !important;
    flex-wrap: wrap !important;
  }
  .route-fields-wrap,
  .date-fields-wrap {
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* ── 6. Compact search bar (modify bar at top of results) ── */
  #compactSearch {
    padding: 10px 12px !important;
    overflow: hidden !important;
  }
  .cs-inner {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .cs-chip {
    padding: 5px 8px !important;
    font-size: 11px !important;
    max-width: calc(50% - 4px) !important;
    overflow: hidden !important;
  }
  .cs-chip span:not(.cs-label):not(.cs-arrow) {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 120px !important;
  }

  /* ── 7. Quick search modify bar (search result page form) ── */
  #quickSearchPanel,
  .quick-search-panel {
    overflow: hidden !important;
    padding: 12px !important;
  }
  .quick-search-bar-row {
    overflow: hidden !important;
  }
  .quick-search-bar-row .field input,
  .quick-search-bar-row .field select {
    height: 44px !important;
    font-size: 16px !important;
  }

  /* ── 8. Flight card — compact & no overflow ── */
  .flight-card {
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .time {
    font-size: 17px !important;
  }
  .airport {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 80px !important;
  }

  /* ── 9. Results container — prevent overflow ── */
  .results,
  #results,
  #flightResults,
  #hotelResults {
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── 10. Section nav tabs — scrollable on mobile ── */
  .section-nav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    white-space: nowrap !important;
    display: flex !important;
    padding-bottom: 4px !important;
  }
  .section-nav::-webkit-scrollbar { display: none !important; }

  /* ── 11. Round-trip card ── */
  .rt-card {
    overflow: hidden !important;
  }
  .rt-card-header .rt-route {
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 200px !important;
  }

  /* ── 12. Filters panel ── */
  .filters-panel,
  #filtersPanel {
    width: 92vw !important;
    max-width: 360px !important;
  }
}

/* ── Extra small phones (≤400px) ── */
@media (max-width: 400px) {
  .airport-code-large {
    font-size: 14px !important;
  }
  .airport-city-display {
    font-size: 11px !important;
  }
  .airport-name-display {
    font-size: 9px !important;
  }
  .time {
    font-size: 15px !important;
  }
  .flight-card {
    padding: 0.7rem 0.5rem !important;
  }
  .cs-chip {
    max-width: 100% !important;
  }
}

/* ========== HOMEPAGE VISA GUIDES & RESOURCES ========== */
.home-guides-section {
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

.guides-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.guides-tag {
  font-family: 'Outfit', sans-serif;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.6rem;
  display: block;
}

.guides-main-title {
  font-family: 'Playfair Display', serif;
  color: var(--navy);
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 0.8rem;
  letter-spacing: -0.01em;
}

.guides-subtitle {
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.5;
}

.guides-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.guide-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(10, 22, 40, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 15px rgba(10, 22, 40, 0.02);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.guide-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(10, 22, 40, 0.07);
  border-color: rgba(200, 169, 74, 0.35);
}

.guide-img-container {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--navy);
}

.guide-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.guide-card:hover .guide-card-img {
  transform: scale(1.06);
}

.guide-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(10, 22, 40, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--gold);
  border: 1px solid rgba(200, 169, 74, 0.3);
  padding: 3px 9px;
  border-radius: 20px;
  font-family: 'Outfit', sans-serif;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.guide-card-content {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.guide-meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
  align-items: center;
}

.guide-date, 
.guide-readtime {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.guide-date svg,
.guide-readtime svg {
  color: var(--gold);
}

.guide-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0;
}

.guide-card-title a {
  color: var(--navy);
  text-decoration: none;
  transition: color 0.25s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.guide-card:hover .guide-card-title a {
  color: var(--gold);
}

.guides-action-wrap {
  text-align: center;
  margin-top: 3rem;
}

.guides-viewall-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 28px;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  border: 1.5px solid var(--gold);
  background: transparent;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.guides-viewall-btn:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(10, 22, 40, 0.12);
}

.guides-viewall-btn:hover svg {
  transform: translateX(4px);
}

/* Responsiveness for Guides Grid */
@media (max-width: 1024px) {
  .guides-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

@media (max-width: 768px) {
  .guides-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  .home-guides-section {
    padding: 3rem 1.5rem;
  }
  .guides-main-title {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .guides-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .home-guides-section {
    padding: 2rem 1rem;
  }
  .guides-header {
    margin-bottom: 2rem;
  }
  .guides-main-title {
    font-size: 22px;
  }
  .guides-subtitle {
    font-size: 13px;
  }
}

/* ── NATIONALITY AUTOCOMPLETE DROPDOWN ── */
.nat-autocomplete-wrap {
  position: relative;
  width: 100%;
}
.nat-autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  max-height: 150px;
  overflow-y: auto;
  z-index: 9999;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  display: none;
  margin-top: 4px;
}
.nat-autocomplete-list.show {
  display: block;
}
.nat-ac-item {
  padding: 6px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  color: var(--navy);
  font-family: 'Outfit', sans-serif;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.nat-ac-item:last-child {
  border-bottom: none;
}
.nat-ac-item:hover {
  background: rgba(200, 169, 74, 0.08);
  color: var(--gold);
}

/* ========== DUMMY TICKET USE CASES SECTION ========== */
.use-cases-section-content {
  padding: 4.5rem 0;
  width: 100%;
}

.use-cases-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
  box-sizing: border-box;
}

.use-cases-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.use-cases-tag {
  font-family: 'Outfit', sans-serif;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.6rem;
  display: block;
}

.use-cases-title {
  font-family: 'Playfair Display', serif;
  color: var(--navy);
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 0.8rem;
  letter-spacing: -0.01em;
}

.use-cases-subtitle {
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.5;
}

.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.2rem;
}

.use-case-card {
  background: linear-gradient(180deg, #e6faf7 0%, #e8f3fe 100%);
  border-radius: 16px;
  padding: 2.2rem;
  box-shadow: 0 10px 30px rgba(10, 22, 40, 0.02);
  border: 1px solid rgba(200, 169, 74, 0.1);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
}

.use-case-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(10, 22, 40, 0.08);
  border-color: rgba(200, 169, 74, 0.3);
}

.use-case-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(10, 22, 40, 0.06);
}

.use-case-icon {
  width: 32px;
  height: 32px;
  display: block;
}

.use-case-card-title {
  font-family: 'Outfit', sans-serif;
  color: var(--navy);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.use-case-card-text {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.use-case-bullets {
  list-style: none;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.use-case-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-dark);
  line-height: 1.45;
  font-weight: 500;
  text-align: left;
}

.bullet-check {
  width: 16px;
  height: 16px;
  color: var(--success);
  flex-shrink: 0;
  margin-top: 2px;
}

@media(max-width: 768px) {
  .use-cases-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .use-cases-section-content {
    padding: 3rem 0;
  }
  .use-cases-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .use-case-card {
    padding: 1.5rem;
  }
  .use-cases-title {
    font-size: 28px;
  }
}

/* ========== WHAT IS A DUMMY TICKET SECTION (BAND 5) ========== */
.dummy-info-container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 1rem 0;
}

.dummy-info-header {
  margin-bottom: 3rem;
}

.dummy-info-title {
  font-family: 'Playfair Display', serif;
  color: var(--navy);
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 1.2rem;
  letter-spacing: -0.01em;
}

.dummy-info-description {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
  font-weight: 400;
}

.dummy-info-box {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 15px 35px rgba(10, 22, 40, 0.04);
  overflow: hidden;
}

.dummy-info-item {
  padding: 2.2rem 2rem;
  border-bottom: 1px solid #edf2f7;
  transition: background-color 0.2s ease;
}

.dummy-info-item:last-child {
  border-bottom: none;
}

.dummy-info-item:hover {
  background-color: #fcfdfe;
}

.dummy-info-item-title {
  font-family: 'Outfit', sans-serif;
  color: var(--navy);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.dummy-info-item-text {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.65;
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .dummy-info-title {
    font-size: 28px;
  }
  .dummy-info-description {
    font-size: 14.5px;
  }
  .dummy-info-item {
    padding: 1.8rem 1.2rem;
  }
  .dummy-info-item-title {
    font-size: 17px;
  }
}

/* ==========================================================================
   UNIFIED BANGLA QR PAYMENT STYLES
   ========================================================================== */
.unified-pay-modal-content {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(10, 22, 40, 0.25);
  font-family: 'DM Sans', sans-serif;
}

.unified-pay-shield-icon {
  color: #10b981;
  animation: pulse-shield 2s infinite ease-in-out;
}

@keyframes pulse-shield {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.08); opacity: 1; }
}

.unified-pay-badge-mfs {
  background: linear-gradient(135deg, var(--navy, #0a1628) 0%, #1a365d 100%);
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(10,22,40,0.15);
}

.unified-pay-brand-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.unified-pay-brand-logo {
  height: 20px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.2s, transform 0.2s;
}

.unified-pay-brand-logo:hover {
  opacity: 1;
  transform: scale(1.1);
}

.unified-pay-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  margin-bottom: 1.5rem;
}

.unified-pay-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}

.unified-pay-step-num {
  background: var(--navy, #0a1628);
  color: var(--gold, #c8a94a);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  border: 1.5px solid var(--gold, #c8a94a);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.unified-pay-step-body {
  flex-grow: 1;
}

.unified-pay-step-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy, #0a1628);
  margin-bottom: 4px;
  font-family: 'Outfit', sans-serif;
}

.unified-pay-step-desc {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.4;
}

.unified-pay-qr-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  position: relative;
}

.unified-pay-qr-card {
  background: #ffffff;
  padding: 12px;
  border-radius: 16px;
  border: 2px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(10,22,40,0.06);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.unified-pay-qr-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 16px;
  transition: border-color 0.3s;
}

.unified-pay-qr-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 15px 35px rgba(10, 22, 40, 0.12);
  border-color: var(--gold, #c8a94a);
}

.unified-pay-qr-card:hover::after {
  border-color: var(--gold, #c8a94a);
}

.unified-pay-qr-card img {
  width: 160px;
  height: 160px;
  display: block;
  object-fit: contain;
}

.unified-pay-copy-box {
  background: #ffffff;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px dashed #cbd5e1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Outfit', sans-serif;
  margin-top: 4px;
}

.unified-pay-copy-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy, #0a1628);
  letter-spacing: 0.05em;
}

.unified-pay-btn-copy {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.unified-pay-btn-copy:hover {
  background: var(--navy, #0a1628);
  color: var(--gold, #c8a94a);
  border-color: var(--navy, #0a1628);
}

.unified-pay-btn-copy.copied {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
}

.unified-pay-amount-badge {
  font-size: 18px;
  font-weight: 800;
  color: #10b981;
  display: inline-block;
  margin-top: 2px;
}

.unified-pay-whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  background: #25d366;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 0 4px 10px rgba(37, 211, 102, 0.2);
}

.unified-pay-whatsapp-btn:hover {
  background: #20ba5a;
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(37, 211, 102, 0.3);
}

.unified-pay-helper-link {
  font-size: 12px;
  color: var(--gold, #c8a94a);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
  display: inline-block;
  margin-top: 6px;
  transition: color 0.2s;
}

.unified-pay-helper-link:hover {
  color: var(--navy, #0a1628);
}

/* Tooltip Guide modal */
.trx-guide-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, 0.7);
  backdrop-filter: blur(4px);
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.trx-guide-overlay.open {
  display: flex;
}

.trx-guide-box {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  position: relative;
}

.trx-guide-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 20px;
  font-weight: 700;
  color: #94a3b8;
  cursor: pointer;
}

.trx-guide-close:hover {
  color: #334155;
}

.trx-guide-title {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy, #0a1628);
  margin-bottom: 15px;
  border-bottom: 1.5px solid #f1f5f9;
  padding-bottom: 10px;
}

.trx-guide-item {
  margin-bottom: 15px;
}

.trx-guide-item-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy, #0a1628);
  margin-bottom: 4px;
}

.trx-guide-item-text {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.4;
  background: #f8fafc;
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--gold, #c8a94a);
}

/* Multi-Page Ticket Page-Break System */
table, .t-flight-block-card, .t-notes-section { page-break-inside: avoid !important; break-inside: avoid !important; }

.ticket.t-multi-page .t-top-header-clean { margin-bottom: 6px !important; padding-bottom: 6px !important; }
.ticket.t-multi-page .t-flight-block-card { margin-bottom: 4px !important; }
.ticket.t-multi-page .t-fb-header { padding: 5px 10px !important; font-size: 11.5px !important; }
.ticket.t-multi-page .t-fb-timeline-wrap { padding: 9px 12px !important; }
.ticket.t-multi-page .t-fb-time { font-size: 15.5px !important; line-height: 1.1 !important; }
.ticket.t-multi-page .t-fb-date { font-size: 9.5px !important; margin-top: 1px !important; }
.ticket.t-multi-page .t-fb-airport-name { font-size: 11.5px !important; margin-top: 1px !important; }
.ticket.t-multi-page .t-fb-subdetail { font-size: 9px !important; margin-top: 1px !important; }
.ticket.t-multi-page .t-fb-terminal { font-size: 9px !important; margin-top: 1px !important; }
.ticket.t-multi-page .t-fb-dur { font-size: 10px !important; margin-bottom: 3px !important; }
.ticket.t-multi-page .t-fb-line { margin: 8px 0 !important; }
.ticket.t-multi-page .t-fb-distance { font-size: 9px !important; margin-top: 3px !important; }
.ticket.t-multi-page .t-leg-bar { padding: 5px 10px !important; margin-bottom: 5px !important; margin-top: 5px !important; font-size: 11.5px !important; }
.ticket.t-multi-page .t-transit-connection { margin: 4px 0 !important; padding: 3px 6px !important; font-size: 10px !important; gap: 4px !important; }
.ticket.t-multi-page .t-section-box { margin-bottom: 6px !important; margin-top: 6px !important; }
.ticket.t-multi-page .t-data-table th { padding: 4px 8px !important; font-size: 10px !important; }
.ticket.t-multi-page .t-data-table td { padding: 4px 8px !important; font-size: 10.5px !important; }
.ticket.t-multi-page .t-fare-totals { margin-top: 4px !important; }
.ticket.t-multi-page .t-grand-total { font-size: 11.5px !important; padding-top: 2px !important; }
.ticket.t-multi-page .t-reminders-box { padding: 7px 12px !important; margin-top: 6px !important; margin-bottom: 0 !important; page-break-inside: avoid !important; break-inside: avoid !important; }
.ticket.t-multi-page .t-reminders-title { font-size: 11px !important; margin-bottom: 3px !important; }
.ticket.t-multi-page .t-reminder-grid { gap: 3px !important; }
.ticket.t-multi-page .t-reminder-item { font-size: 9px !important; line-height: 1.25 !important; gap: 5px !important; }
.ticket.t-multi-page .t-reminder-icon { width: 15px !important; height: 15px !important; font-size: 8px !important; }
.ticket.t-multi-page .t-notes-qr img { width: 60px !important; height: 60px !important; }
.ticket.t-multi-page .t-notes-qr span { font-size: 7px !important; margin-top: 1px !important; }

.html2pdf__page-break {
    page-break-before: always !important;
    break-before: page !important;
    break-before: always !important;
    clear: both !important;
    display: block !important;
    height: 1px !important;
    line-height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

/* Subscription Purchase Success Popup */
.sub-popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 22, 40, 0.65);
  backdrop-filter: blur(4px);
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sub-popup-overlay.show {
  display: flex;
}
.sub-popup-box {
  background: #ffffff;
  border-radius: 16px;
  max-width: 420px;
  width: 100%;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.sub-popup-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  background: #dcfce7;
  color: #16a34a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub-popup-icon svg {
  width: 34px;
  height: 34px;
}
.sub-popup-title {
  font-size: 22px;
  font-weight: 700;
  color: #0a1628;
  margin-bottom: 8px;
}
.sub-popup-desc {
  font-size: 14px;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 22px;
}
.sub-popup-btn {
  background: #0a1628;
  color: #ffffff;
  border: none;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
  width: 100%;
}
.sub-popup-btn:hover {
  background: #c8a94a;
  color: #0a1628;
}

/* --- Flight Search Loading Skeleton & Progress Bar CSS --- */
@keyframes shimmer {
  0% { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}

.shimmer-bg {
  animation: shimmer 1.5s infinite linear;
  background: linear-gradient(to right, #f1f5f9 8%, #e2e8f0 18%, #f1f5f9 33%);
  background-size: 800px 104px;
}

.search-progress-container {
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.search-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.search-progress-text {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-progress-bar-wrap {
  height: 6px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.search-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0a1628 0%, #c8a94a 100%);
  width: 0%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.skeleton-flight-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.skeleton-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.skeleton-box {
  border-radius: 6px;
}

.skeleton-timeline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}

/* ── COMPACT AUTH MODAL & FORM STYLING ── */
.compact-auth-modal {
  max-width: 440px !important;
  width: 100% !important;
  padding: 1.4rem 1.6rem !important;
  overflow: hidden !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  max-height: none !important;
  box-sizing: border-box !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.compact-auth-modal::-webkit-scrollbar,
.compact-auth-modal *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}
.compact-auth-modal .modal-header {
  padding-bottom: 0.3rem !important;
  margin-bottom: 0.6rem !important;
}
.compact-auth-modal .modal-header h2 {
  font-size: 20px !important;
  margin-bottom: 3px !important;
}
.compact-auth-modal .modal-header p {
  font-size: 12px !important;
  margin-bottom: 0 !important;
}
.compact-auth-modal .modal-body {
  padding: 0 !important;
  overflow: hidden !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  max-height: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.compact-auth-modal .booking-field,
.compact-auth-card .field {
  margin-bottom: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.compact-auth-modal .booking-field label,
.compact-auth-card .field label {
  font-size: 12px !important;
  margin-bottom: 4px !important;
  font-weight: 600 !important;
}
.compact-auth-modal .booking-field input,
.compact-auth-card .field input {
  padding: 8px 12px !important;
  height: 40px !important;
  font-size: 13.5px !important;
  border-radius: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.compact-auth-modal .booking-field-checkbox,
.compact-auth-card .field-checkbox {
  margin-bottom: 10px !important;
}
.compact-auth-modal .btn-submit,
.compact-auth-card .btn-submit {
  padding: 11px 18px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  margin-top: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.compact-auth-divider {
  margin: 10px 0 !important;
}
.compact-auth-footer {
  margin-top: 10px !important;
  font-size: 13px !important;
}
.input-with-eye {
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.input-with-eye input {
  padding-right: 38px !important;
}
.eye-toggle-btn {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.eye-toggle-btn:hover {
  color: var(--navy) !important;
}

/* Google Sign-In button container centering */
.g_id_signin {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.g_id_signin iframe {
  margin: 0 auto !important;
}

/* ==========================================================================
   HOMEPAGE FLIGHTS & HOTELS API TEASER (2026-10-31)
   includes/partials/api_home_section.php, inside the Trusted By Top Agencies
   band (alt background). Text + buttons left, sample request/response right.
   ========================================================================== */
.api-home { max-width: 1200px; margin: 0 auto; padding: 1.5rem 2rem 4.5rem; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.section-band > .api-home:first-child { padding-top: 4rem; }
.api-home-tag { display: inline-block; font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.api-home-title { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 32px; line-height: 1.2; color: var(--navy); margin: 10px 0 0; }
.api-home-sub { font-size: 15px; line-height: 1.6; color: #475569; margin: 12px 0 0; }
.api-home-checks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.api-home-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: #334155; }
.api-home-checks svg { flex-shrink: 0; color: #10b981; margin-top: 2px; }
.api-home-checks b { color: var(--navy); }
.api-home-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.api-home-btn, .api-home-btn-line { display: inline-block; border-radius: 10px; padding: 12px 20px; font-size: 14px; font-weight: 700; text-decoration: none; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.api-home-btn { background: var(--navy); color: var(--gold) !important; border: 1.5px solid var(--gold); }
.api-home-btn:hover { background: var(--gold); color: var(--navy) !important; }
.api-home-btn-line { background: #fff; color: var(--navy) !important; border: 1.5px solid #cbd5e1; }
.api-home-btn-line:hover { border-color: var(--navy); }
.api-home-code { background: #0b1324; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 50px -24px rgba(10, 22, 40, 0.55); min-width: 0; }
.api-home-bar { display: flex; gap: 6px; align-items: center; padding: 10px 14px; background: #111c33; border-bottom: 1px solid #1e293b; }
.api-home-bar i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.api-home-bar span { margin-left: 8px; font-size: 11.5px; color: #94a3b8; }
.api-home-code pre { margin: 0; padding: 16px 18px; white-space: pre; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.65; color: #cbd5e1; }
.api-home-code .m { color: #7dd3fc; } .api-home-code .k { color: #fbbf24; } .api-home-code .s { color: #86efac; } .api-home-code .n { color: #f9a8d4; } .api-home-code .c { color: #64748b; }
@media (max-width: 900px) {
  .api-home { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 1rem 1rem 3rem; }
  .section-band > .api-home:first-child { padding-top: 3rem; }
  .api-home-title { font-size: 25px; }
  .api-home-code pre { font-size: 11.5px; }
}
@media (max-width: 480px) {
  .api-home-btns { flex-direction: column; gap: 10px; }
  .api-home-btns a { text-align: center; }
}

/* ==========================================================================
   VERIFIABLE RESERVATION BANNER (between flight results, 2026-10-30)
   Navy card, same footprint as .fx-card; actions sit in a divider column.
   ========================================================================== */
.vr-banner { display: grid; grid-template-columns: minmax(0, 1fr) 230px 170px; gap: 22px; align-items: center; background: var(--navy); border-radius: 14px; padding: 18px 20px 18px 22px; margin-bottom: 12px; color: #fff; }
.vr-title { font-family: 'Outfit', 'DM Sans', sans-serif; font-size: 20px; font-weight: 700; line-height: 1.25; margin: 0; color: #fff; letter-spacing: -0.01em; }
.vr-title em { font-style: normal; color: var(--gold); }
.vr-sub { font-size: 13.5px; color: #cbd5e1; margin: 6px 0 0; line-height: 1.45; }
.vr-mock { background: #fff; color: #0f172a; border-radius: 12px; padding: 12px 13px; box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.55); }
.vr-mock-h { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; }
.vr-mock-f { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.vr-mock-l { font-size: 10px; color: #64748b; }
.vr-mock-v { font-family: 'Outfit', 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em; border: 1px solid #e2e8f0; border-radius: 7px; padding: 5px 8px; margin-top: 3px; }
.vr-mock-ok { display: flex; align-items: center; gap: 7px; margin-top: 9px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; border-radius: 8px; padding: 7px 9px; font-size: 12px; font-weight: 600; }
.vr-act { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 9px; padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.vr-wa, .vr-order { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; padding: 9px 12px; font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease; }
.vr-wa { background: #16a34a; color: #fff !important; }
.vr-wa:hover { background: #15803d; }
.vr-wa svg { flex-shrink: 0; }
.vr-order { color: var(--gold) !important; border: 1.5px solid var(--gold); }
.vr-order:hover { background: var(--gold); color: var(--navy) !important; }

/* The sample check needs ~230px; hide it when the results column is narrow
   (sidebar shown on a small laptop) and on tablets/phones. */
@media (max-width: 1199px) {
  .vr-banner { grid-template-columns: minmax(0, 1fr) 170px; }
  .vr-mock { display: none; }
}
@media (max-width: 800px) {
  .vr-banner { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
  .vr-title { font-size: 18px; }
  .vr-act { flex-direction: row; padding: 14px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .vr-wa, .vr-order { flex: 1; }
}

/* ==========================================================================
   Mobile usability fixes (added 2026-08-29)
   Scoped to mobile only - desktop layout is untouched.
   - Tap targets raised toward the 44px minimum
   - Sub-11px labels raised to a readable size
   ========================================================================== */
@media (max-width: 768px) {

  /* Header auth buttons: were 47x27 / 63x27.
     Selector must outrank the existing ".header-inner > div > a" rules below. */
  .header-inner > div > a.header-login-btn,
  .header-inner > div > a.header-register-btn {
    padding: 11px 12px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  /* Mobile nav menu trigger: keep it on the same row as the auth buttons.
     The wrapper must also shed the generic ".header-inner > div > div" padding,
     otherwise the row overflows and the header wraps to two lines. */
  .header-inner > div > div.header-mobile-menu {
    padding: 0 !important;
  }
  .header-mobile-menu > button {
    padding: 10px 0 !important;
    min-width: 40px !important;
  }

  /* Trip type selector: was 99x24 */
  .trip-btn {
    min-height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Plan validity pills: was 91x26 (inline padding, needs !important) */
  .val-pill {
    min-height: 38px !important;
    padding: 10px 4px !important;
  }

  /* Origin/destination swap button: was 28x28 */
  .compact-swap-btn {
    width: 40px !important;
    height: 40px !important;
  }

  /* Small labels and airport names: were 9px */
  .compact-label {
    font-size: 11px !important;
  }
  .airport-name-display {
    font-size: 11px !important;
  }

  /* "Most Popular" / "Agency Plan" ribbon was overflowing the card edge */
  .price-card {
    overflow: hidden;
  }
}

/* eSIM search widget: the grid is declared inline as four fixed columns
   (1fr 1.4fr 1fr max-content), which overflows the screen on phones and pushes
   the Search button off the right edge. Stack it on mobile instead.
   These need !important because the grid is set via a style attribute. */
@media (max-width: 768px) {
  .esim-search-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .esim-search-submit-wrap {
    width: 100%;
  }
  .esim-search-submit {
    width: 100% !important;
    padding: 0 16px !important;
  }
  /* The +/- SIM count buttons are inline-styled at 20x20, too small to tap */
  .esim-count-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }
}

/* Phones/tablets: less chrome above the first result (owner, 2026-10-31; first
   card moved from 390px to 255px down on a 390px phone). The tab bar only ever
   holds one tab (the "Generated Ticket" tab is never shown), and the route title
   repeats the collapsed search summary right above it. Inline styles on
   #flightQuickSearch and the container need !important. */
@media (max-width: 768px) {
  #resultsSection .section-nav-wrap { display: none; }
  #resultsSection .results-quick-search-container { padding-top: 10px !important; }
  #flightQuickSearch { margin-bottom: 0 !important; padding: 12px 14px !important; }
  #resultsSection #flightsSection .results { padding-top: 12px !important; }
  #resultsSection #flightsSection .results-layout { margin-top: 0 !important; }
  #resultsSection:has(#flightQuickSearch[style*="block"]) #routeLabel { display: none; }
  #resultsSection .results-header { margin-bottom: 10px !important; align-items: center; }
}

/* Collapsed flight-search summary shown above the results on mobile.
   Hidden on desktop, where the full modify bar stays visible as before. */
.qs-mobile-summary { display: none; }

@media (max-width: 768px) {
  #flightQuickSearch .qs-mobile-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
  }
  #flightQuickSearch:not(.qs-collapsed) .qs-mobile-summary {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  #flightQuickSearch.qs-collapsed .quick-search-bar-row {
    display: none !important;
  }
  #flightQuickSearch.qs-collapsed .qs-trip-toggle {
    display: none !important;
  }
  .qs-summary-route {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
  }
  .qs-summary-meta {
    font-size: 11.5px;
    color: #64748b;
    margin-top: 3px;
    line-height: 1.3;
  }
  .qs-summary-edit {
    flex-shrink: 0;
    background: var(--navy);
    color: var(--gold);
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    min-height: 38px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
  }
}

/* Very narrow phones (<=359px): there is not enough room for logo + Login +
   Register + menu trigger on one row, so shrink the logo and move Login into
   the menu (Register stays as the visible primary action). */
@media (max-width: 359px) {
  .header .logo img {
    height: 32px !important;
  }
  .header-inner > div > a.header-login-btn {
    display: none !important;
  }
  .guest-menu-login {
    display: flex !important;
  }
  .guest-menu-sep {
    display: block !important;
  }
}

/* Mobile 2026-10-17: the stacked From/To swap button sat in the middle of the
   field and covered the airport name ("Hazrat Shahjalal International").
   Move it to the right edge and keep the text clear of it. */
@media (max-width: 768px) {
  .route-fields-wrap .compact-swap-btn {
    left: auto !important;
    right: 12px;
    transform: translateY(-50%) rotate(90deg) !important;
  }
  .route-fields-wrap .compact-swap-btn:hover {
    transform: translateY(-50%) rotate(90deg) scale(1.1) !important;
  }
  .route-fields-wrap .field-group {
    padding-right: 60px !important;
  }
}

/* ── HERO ROUTE-MAP BACKGROUND (2026-10-31) ──
   Replaces hero-bg.png. The SVG is drawn by includes/hero_map.js; isolation lets it sit
   at z-index -1 above the hero's own background but under the title and tabs.
   The compact results-page hero keeps its plain navy. */
.hero.hero-map:not(.hero-compact) {
  background:
    radial-gradient(60% 80% at 85% 10%, rgba(200,169,74,.14), transparent 60%),
    radial-gradient(50% 70% at 10% 30%, rgba(60,110,220,.20), transparent 65%),
    linear-gradient(180deg, #0a1628 0%, #0e1f3d 70%, #13284d 100%) !important;
  isolation: isolate;
}
.hero.hero-map .hero-tag,
.hero.hero-map h1 { text-shadow: 0 2px 18px rgba(10,22,40,.9); }
.hero-map-svg {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  --k: 1; --dr: 1.9;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 95%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 95%);
}
.hero.hero-compact .hero-map-svg { display: none; }
.hero-map-svg .hm-dot { fill: #6d8ac4; opacity: .42; r: calc(var(--dr) * 1px); }
.hero-map-svg .hm-bg-route { fill: none; stroke: rgba(150,180,240,.28); stroke-width: calc(1.1px * var(--k));
  stroke-dasharray: calc(3px * var(--k)) calc(6px * var(--k)); animation: hmFlow 2.4s linear infinite; }
.hero-map-svg .hm-route { fill: none; stroke: url(#hmGold); stroke-width: calc(2.4px * var(--k)); stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; animation: hmDraw 1.6s .5s cubic-bezier(.6,0,.2,1) forwards; }
.hero-map-svg .hm-glow { fill: none; stroke: rgba(240,217,138,.35); stroke-width: calc(8px * var(--k)); stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; animation: hmDraw 1.6s .5s cubic-bezier(.6,0,.2,1) forwards; }
.hero-map-svg .hm-ap { fill: #f0d98a; r: calc(3.8px * var(--k)); }
.hero-map-svg .hm-pulse { fill: none; stroke: #c8a94a; stroke-width: calc(1.2px * var(--k)); r: calc(6px * var(--k));
  transform-box: fill-box; transform-origin: center; animation: hmPulse 2.4s ease-out infinite; }
.hero-map-svg .hm-lbl { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: calc(13px * var(--k)); fill: #f0d98a; letter-spacing: .06em; }
.hero-map-svg .hm-city { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: calc(10px * var(--k)); fill: #a9b8d8; }
.hero-map-svg .hm-plane { fill: #fff; transform: scale(calc(1.2 * var(--k))); }
.hero-map-svg .hm-plane.dim { fill: #9fb3dc; opacity: .55; }
@keyframes hmFlow { to { stroke-dashoffset: calc(-9px * var(--k)); } }
@keyframes hmDraw { to { stroke-dashoffset: 0; } }
@keyframes hmPulse { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero-map-svg * { animation: none !important; }
  .hero-map-svg .hm-route, .hero-map-svg .hm-glow { stroke-dashoffset: 0; }
  .hero-map-svg .hm-plane { display: none; }
}
/* phones: a slim band above the tag holds the route */
@media (max-width: 768px) {
  .hero.hero-map:not(.hero-compact) { padding-top: 78px !important; }
}

/* ── SERVICE TABS AS THE SEARCH CARD'S HEADER ROW (2026-10-31) ──
   The tabs now sit at the top of .search-container (moved out of the hero) and join
   whichever .search-card is showing into one white box. The sliding .active-indicator
   becomes a gold underline; switchService() still positions it by offsetLeft/width. */
.search-container > .service-toggle-container {
  margin: 0 !important; text-align: left; background: #fff;
  border: 1px solid rgba(200,169,74,.15); border-bottom: 1px solid #e9edf3;
  border-radius: 16px 16px 0 0; padding: 0 1.8rem;
  box-shadow: 0 -10px 30px rgba(0,0,0,.05);
}
.search-container > .service-toggle-container ~ .search-card {
  border-top: 0 !important; border-top-left-radius: 0; border-top-right-radius: 0;
}
.search-container > .service-toggle-container .service-toggle-wrap {
  display: flex; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none; border: 0; border-radius: 0; padding: 0 !important; gap: 6px;
}
.search-container > .service-toggle-container .service-tab-btn {
  padding: 18px 16px 16px; border-radius: 0; color: #5b6477; font-size: 14.5px;
}
.search-container > .service-toggle-container .service-tab-btn svg { stroke: #8a93a6; }
.search-container > .service-toggle-container .service-tab-btn:hover { color: var(--navy); }
.search-container > .service-toggle-container .service-tab-btn:hover svg { stroke: var(--navy); }
.search-container > .service-toggle-container .service-tab-btn.active { color: var(--navy) !important; }
.search-container > .service-toggle-container .service-tab-btn.active svg { stroke: var(--gold) !important; }
.search-container > .service-toggle-container .active-indicator {
  top: auto !important; bottom: -1px !important; height: 3px !important;
  border-radius: 3px 3px 0 0 !important; background: var(--gold); box-shadow: none;
}
/* results page (compact hero) and the booking steps (hero hidden) never showed the tabs */
.hero.hero-compact + .search-container > .service-toggle-container,
.hero[style*="display: none"] + .search-container > .service-toggle-container { display: none; }
@media (max-width: 768px) {
  .search-container > .service-toggle-container { padding: 0 .4rem; }
  .search-container > .service-toggle-container .service-toggle-wrap { gap: 0 !important; }
  .search-container > .service-toggle-container .service-tab-btn {
    flex: 1; flex-direction: column; justify-content: center; text-align: center;
    padding: 12px 4px 10px !important; font-size: 11.5px !important; gap: 4px !important; line-height: 1.2;
  }
  .search-container > .service-toggle-container .service-tab-btn svg { width: 16px !important; height: 16px !important; }
}
/* the tabs left the hero, so give the title room above the card again */
.hero.hero-map:not(.hero-compact) { padding-bottom: 8.4rem; }
@media (max-width: 768px) {
  .hero.hero-map:not(.hero-compact) { padding-bottom: 6.3rem !important; }
}

/* Header nav after the Services dropdown was flattened (2026-10-31): six links plus the
   greeting overflow just above the mobile breakpoint, so tighten them on small laptops. */
@media (min-width: 769px) and (max-width: 1000px) {
  .site-nav .nav-link { padding: 8px 7px; font-size: 13px; }
  .site-nav .nav-link::after { left: 7px; right: 7px; }
  .header-user-name { display: none !important; }
}

/* ── SCROLL REVEAL (homepage, 2026-11-01) ──
   Classes are added and later removed by includes/scroll_reveal.js; nothing here
   applies to a page that doesn't load that script. Style "slide + stagger". */
.rv, .rv-item {
  opacity: 0;
  transition: opacity .8s cubic-bezier(.2,.65,.25,1), transform .8s cubic-bezier(.2,.65,.25,1) !important;
}
.rv { transform: translateY(40px); }
.rv-item { transform: translateY(50px) scale(.97); }
.rv[data-rv="left"] { transform: translateX(-32px); }
.rv[data-rv="right"] { transform: translateX(32px); }
.rv.in, .rv-group.in > .rv-item { opacity: 1; transform: none; }
@media (max-width: 768px) {
  .rv[data-rv="left"], .rv[data-rv="right"] { transform: translateY(40px); }
}
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-item { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── LIVE PNR TAB (homepage search card, 2026-11-01) ── */
.svc-tab-badge {
  font: 700 9px 'Outfit', sans-serif; letter-spacing: .6px; text-transform: uppercase;
  color: #7a5f16; background: linear-gradient(135deg, #f6e3a1, #e2c66d);
  padding: 3px 7px; border-radius: 20px; line-height: 1; margin-left: 2px;
}
.svc-lbl-short { display: none; }
#form-pnr .pnr-explain {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
  background: linear-gradient(90deg, #f5fbf8, #f3f7fe); border: 1px solid #d9efe4;
  border-radius: 10px; padding: 12px 16px;
}
#form-pnr .pnr-explain-ico {
  width: 38px; height: 38px; border-radius: 50%; background: #e2f5ea; color: #1d8a4b;
  display: grid; place-items: center; flex: none;
}
#form-pnr .pnr-explain p { flex: 1; margin: 0; font-size: 13.5px; line-height: 1.5; color: #3a4458; }
#form-pnr .pnr-explain p b { color: var(--navy); }
#form-pnr .pnr-explain-short { display: none; }
#form-pnr .pnr-explain-price { text-align: right; flex: none; }
#form-pnr .pnr-explain-price strong { display: block; font: 800 22px 'Outfit', sans-serif; color: #b08d2c; line-height: 1; }
#form-pnr .pnr-explain-price span { font-size: 11px; color: var(--muted); }
#form-pnr .pnr-adults { min-width: 150px; }
#form-pnr .pnr-ret-field { display: none; }
#form-pnr.pnr-is-round .pnr-ret-field { display: flex; }
#form-pnr .pnr-go-btn { background: linear-gradient(135deg, #0a1628, #1b3566); color: #f0d98a; white-space: nowrap; }
#form-pnr .pnr-go-btn:hover { background: linear-gradient(135deg, #13284d, #24427a); }
#form-pnr .pnr-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; font-size: 12.5px; color: var(--muted);
}
#form-pnr .pnr-ticks { display: flex; gap: 18px; flex-wrap: wrap; }
#form-pnr .pnr-ticks span::before { content: "\2713  "; color: #1d8a4b; font-weight: 700; }
#form-pnr .pnr-foot a { color: #9a7d22; font-weight: 600; text-decoration: none; }
#form-pnr .pnr-foot a:hover { text-decoration: underline; }
@media (max-width: 768px) {
  /* five tabs on one row */
  .search-container > .service-toggle-container .service-tab-btn { font-size: 10.5px !important; padding: 12px 2px 10px !important; }
  .svc-tab-badge { font-size: 7.5px; padding: 2px 5px; letter-spacing: .3px; margin: 0; }
  .svc-lbl-long { display: none; }
  .svc-lbl-short { display: inline; }
  /* the explainer shrinks to one slim line; trip type and passengers share a row */
  #form-pnr .pnr-explain { gap: 10px; padding: 8px 10px; margin-bottom: 12px; border-radius: 8px; }
  #form-pnr .pnr-explain-ico { width: 26px; height: 26px; }
  #form-pnr .pnr-explain-ico svg { width: 15px; height: 15px; }
  #form-pnr .pnr-explain-long { display: none; }
  #form-pnr .pnr-explain-short { display: block; font-size: 12px; line-height: 1.3; }
  #form-pnr .pnr-explain-price strong { font-size: 16px; }
  #form-pnr .pnr-explain-price span { font-size: 9.5px; display: block; }
  #form-pnr .pnr-head { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px; align-items: center !important; justify-content: space-between !important; }
  #form-pnr .pnr-head .trip-toggle { margin-left: 0 !important; margin-right: 0 !important; }
  #form-pnr .pnr-head .trip-toggle { width: auto !important; margin-bottom: 0 !important; flex: none; }
  #form-pnr .pnr-head .flight-meta-dropdowns { flex: 1; min-width: 0; width: auto !important; }
  #form-pnr .pnr-adults { min-width: 0; width: 100%; }
  #form-pnr:not(.pnr-is-round) .date-fields-wrap .field-group { border-bottom: none !important; }
  #form-pnr .pnr-ticks { display: none; }
  #form-pnr .pnr-foot { margin-top: 10px; font-size: 11.5px; }
}

/* Live PNR badge sits on the tab's underline on desktop (2026-11-01); phones keep it under the name */
@media (min-width: 769px) {
  #service-btn-pnr { position: relative; }
  #service-btn-pnr .svc-tab-badge {
    position: absolute; left: 50%; bottom: -1px; transform: translate(-50%, 50%);
    font-size: 8px; padding: 2px 6px; margin: 0; z-index: 3; box-shadow: 0 0 0 2px #fff;
  }
}

/* Flight tab: a filled airliner silhouette (2026-11-01), coloured like the line icons */
.service-tab-btn .svc-ico-plane { stroke: none !important; fill: #8a93a6; }
.service-tab-btn:hover .svc-ico-plane { fill: var(--navy); }
.service-tab-btn.active .svc-ico-plane { fill: var(--gold); }

/* ── LOADING OVERLAY v2 (2026-11-01) ── markup in index_js.php, behaviour in includes/loading_overlay.js */
#loadingOverlay {
  padding: 20px;
  background:
    radial-gradient(60% 70% at 80% 10%, rgba(200,169,74,.12), transparent 60%),
    radial-gradient(60% 70% at 10% 90%, rgba(60,110,220,.22), transparent 65%),
    linear-gradient(160deg, #0a1628 0%, #0f2142 60%, #16305e 100%);
}
#loadingOverlay::before {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(130,160,220,.35) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 45%, #000, transparent); mask-image: radial-gradient(60% 55% at 50% 45%, #000, transparent);
}
#loadingOverlay .lo2-card { position: relative; width: 100%; max-width: 460px; text-align: center; color: #fff; }
#loadingOverlay.show .lo2-card { animation: lo2Rise .45s cubic-bezier(.2,.7,.25,1); }
@keyframes lo2Rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#loadingOverlay .lo2-logo { height: 42px; margin-bottom: 24px; opacity: .95; }

/* flight header: the searched route with a plane flying the arc */
#loadingOverlay .lo2-route { position: relative; max-width: 400px; margin: 0 auto; }
#loadingOverlay .lo2-route svg { width: 100%; height: auto; display: block; overflow: visible; }
#loadingOverlay .lo2-base { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1.5; stroke-dasharray: 3 6; }
#loadingOverlay .lo2-trail { fill: none; stroke: url(#lo2Grad); stroke-width: 2.4; stroke-linecap: round; animation: lo2Trail 2.2s cubic-bezier(.45,.05,.35,1) infinite; }
@keyframes lo2Trail { 0% { stroke-dasharray: 0 1000; opacity: 1; } 75% { stroke-dasharray: 330 1000; opacity: 1; } 100% { stroke-dasharray: 330 1000; opacity: 0; } }
#loadingOverlay .lo2-dot { fill: #f0d98a; }
#loadingOverlay .lo2-ring { fill: none; stroke: var(--gold); stroke-width: 1.3; transform-box: fill-box; transform-origin: center; animation: lo2Ring 1.8s ease-out infinite; }
#loadingOverlay .lo2-ring.b { animation-delay: .9s; }
@keyframes lo2Ring { from { transform: scale(.5); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
#loadingOverlay .lo2-ends { display: flex; justify-content: space-between; margin-top: -6px; padding: 0 4px; }
#loadingOverlay .lo2-ends div:last-child { text-align: right; }
#loadingOverlay .lo2-ends strong { display: block; font: 800 30px/1 'Outfit', sans-serif; letter-spacing: .5px; }
#loadingOverlay .lo2-ends span { font-size: 12px; color: #a9b8d8; }
#loadingOverlay .lo2-meta { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
#loadingOverlay .lo2-meta i { font-style: normal; font-size: 12px; color: #cdd6ea; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); padding: 5px 11px; border-radius: 20px; }

/* other flows: an icon in a spinning ring */
#loadingOverlay .lo2-ico { width: 76px; height: 76px; margin: 6px auto 4px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 35% 30%, rgba(240,217,138,.25), rgba(200,169,74,.08)); border: 1px solid rgba(200,169,74,.35); }
#loadingOverlay .lo2-ico svg { width: 34px; height: 34px; stroke: #f0d98a; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#loadingOverlay .lo2-ico::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--gold); animation: lo2Spin 1.1s linear infinite; }
@keyframes lo2Spin { to { transform: rotate(360deg); } }

#loadingOverlay .lo-title { font: 700 22px 'Outfit', sans-serif; color: #fff; margin: 22px 0 0; letter-spacing: -.2px; }
#loadingOverlay .lo-sub { font-size: 13.5px; color: #a9b8d8; margin: 6px 0 0; min-height: 20px; }
#loadingOverlay .lo2-steps { list-style: none; text-align: left; margin: 20px auto 0; padding: 0; max-width: 330px; display: grid; gap: 11px; }
#loadingOverlay .lo2-steps:empty { display: none; }
#loadingOverlay .lo2-steps li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #6f80a6; transition: color .3s; }
#loadingOverlay .lo2-steps .st { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.18); flex: none; position: relative; transition: all .3s; }
#loadingOverlay .lo2-steps li.doing { color: #fff; }
#loadingOverlay .lo2-steps li.doing .st { border-color: rgba(200,169,74,.35); border-top-color: #f0d98a; animation: lo2Spin .8s linear infinite; }
#loadingOverlay .lo2-steps li.done { color: #cdd6ea; }
#loadingOverlay .lo2-steps li.done .st { border-color: #3ccf8e; background: #3ccf8e; }
#loadingOverlay .lo2-steps li.done .st::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 9px; border: solid #0a1628; border-width: 0 2px 2px 0; transform: rotate(45deg); }
#loadingOverlay .lo2-bar { height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); margin: 24px auto 0; max-width: 330px; overflow: hidden; }
#loadingOverlay .lo2-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--gold), #f0d98a); transition: width .5s cubic-bezier(.3,.7,.3,1); }
#loadingOverlay .lo2-tip { margin: 16px 0 0; font-size: 12px; color: #7d8db0; min-height: 18px; transition: opacity .35s; }
#loadingOverlay .lo2-tip b { color: #f0d98a; font-weight: 600; }
@media (max-width: 520px) {
  #loadingOverlay .lo2-logo { height: 36px; margin-bottom: 18px; }
  #loadingOverlay .lo2-ends strong { font-size: 24px; }
  #loadingOverlay .lo-title { font-size: 19px; margin-top: 18px; }
  #loadingOverlay .lo2-steps { gap: 9px; }
  #loadingOverlay .lo2-steps li { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  #loadingOverlay *, #loadingOverlay *::after { animation: none !important; }
}

/* ── HOMEPAGE STATS STRIP (2026-11-01) ── admin-set numbers under the search card, includes/partials/stats_strip.php */
.td-stats {
  display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); margin: 22px 0 0;
  background: #fff; border: 1px solid #e3e7ef; border-radius: 14px; box-shadow: 0 10px 30px -18px rgba(10,22,40,.25);
}
.td-stat { display: flex; align-items: center; gap: 14px; padding: 18px 22px; position: relative; }
.td-stat + .td-stat::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: #e3e7ef; }
.td-stat-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, rgba(200,169,74,.18), rgba(200,169,74,.06)); }
.td-stat-ico svg { width: 22px; height: 22px; stroke: #9a7d22; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.td-stat strong { display: block; font: 800 26px/1.05 'Outfit', sans-serif; letter-spacing: -.5px; color: var(--navy); font-variant-numeric: tabular-nums; }
.td-stat strong em { font-style: normal; color: var(--gold); }
.td-stat > div > span { font-size: 13px; color: #6b7385; }
/* results page (compact hero) and booking steps (hero hidden) never show it */
.hero.hero-compact + .search-container .td-stats,
.hero[style*="display: none"] + .search-container .td-stats { display: none; }
@media (max-width: 768px) {
  /* phones: all on one slim row - no icons, the number over a two-line label */
  .td-stats { margin-top: 16px; border-radius: 12px; }
  .td-stat { flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 10px 4px; }
  .td-stats .td-stat-ico { display: none; }
  .td-stat + .td-stat::before { top: 18%; bottom: 18%; }
  .td-stat strong { font-size: 16px; letter-spacing: -.3px; }
  .td-stat > div > span { display: block; font-size: 9.5px; line-height: 1.25; margin-top: 2px; }
}

/* Search card under the tab header: less empty space below the search row on desktop (2026-11-01) */
@media (min-width: 769px) {
  .search-container > .service-toggle-container ~ .search-card { padding-bottom: 1.8rem; }
}