/* ============================================================
   Visa Agency — custom additions on top of the template's main.css
   ============================================================ */

/* ============================================================
   VisaAgency.in — MASTER BRAND DESIGN SYSTEM
   Premium navy / blue / white, gold as a restrained accent only.
   These are the single source of truth for color site-wide: every
   var(--theme) / var(--theme-2) / var(--gold) / var(--bg) / var(--header)
   / var(--text) / var(--border) usage across main.css and this file
   (700+ declarations) inherits from here automatically, so the whole
   site — buttons, cards, tabs, forms, footer, mega-menus — repaints
   from this one block rather than needing per-component edits. ---- */
:root {
    --brand-navy: #062B5C;
    --brand-blue: #0B4DB6;
    --brand-blue-secondary: #1769D2;
    --brand-blue-light: #EAF3FF;
    --brand-gold: #F5B800;
    --brand-white: #FFFFFF;
    --text-primary: #172033;
    --text-secondary: #667085;
    --border-color: #E4EAF2;

    /* Semantic component tokens (per the brand system spec) */
    --header-bg: var(--brand-white);
    --header-text: var(--text-primary);
    --header-active: var(--brand-blue);
    --button-primary: var(--brand-blue);
    --button-primary-hover: var(--brand-navy);
    --button-secondary: var(--brand-white);
    --button-secondary-hover: var(--brand-blue-light);
    --link-color: var(--brand-blue);
    --link-hover: var(--brand-navy);
    --card-bg: var(--brand-white);
    --section-bg: var(--brand-blue-light);
    --input-border: var(--border-color);
    --input-focus: var(--brand-blue);
    --footer-bg: var(--brand-navy);

    /* ---- Template variable names (main.css + this file were built on
       these) repointed at the brand tokens above so the existing 700+
       usages inherit the new palette without per-selector edits. ---- */
    --theme: var(--brand-blue);
    --theme-2: var(--brand-navy);
    --theme-2-dark: #041D3D;
    --theme-2-light: var(--brand-blue-secondary);
    --gold: var(--brand-gold);
    --header: var(--text-primary);
    --text: var(--text-secondary);
    --text-2: var(--brand-navy);
    --border: var(--border-color);
    --bg: var(--brand-blue-light);
    --bg-2: var(--brand-navy);
    --border-2: var(--border-color);
    --box-shadow: 0px 1px 14px 0px rgba(6, 43, 92, 0.10);

    /* Header-specific aliases used by the earlier header-redesign pass —
       now point at the same unified tokens instead of a second palette. */
    --va-navy: var(--brand-navy);
    --va-navy-2: var(--brand-navy);
    --va-royal: var(--brand-blue);
    --va-royal-light: var(--brand-blue-secondary);
    --va-gold-muted: var(--brand-gold);
}

/* ---- Redesigned homepage hero (no stock photography): light
   background with a dotted world-map texture, text on the left,
   illustration on the right — the illustration's own backdrop blob
   is recolored gold (see hero-illustration.svg) to read as the
   "photo behind a colored circle" composition, without needing a
   stock photo. ---- */
.va-hero {
    background: var(--white);
    overflow: hidden;
}
.va-hero::before {
    background: none !important;
}
.va-hero-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(11, 110, 103, 0.18) 1.6px, transparent 1.6px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 70% 100% at 15% 40%, #000 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 100% at 15% 40%, #000 0%, transparent 80%);
}
.va-hero .hero-content h6 {
    color: var(--theme-2) !important;
}
.va-hero .hero-content h1 {
    color: var(--header) !important;
}
.va-hero .hero-content p {
    color: var(--text) !important;
    max-width: 460px;
    border-left: none !important;
    padding-left: 0 !important;
}
.va-hero-image {
    position: relative;
    z-index: 2;
}
.va-hero-image img {
    filter: drop-shadow(0 30px 60px rgba(16, 24, 40, 0.14));
    max-width: 78%;
    display: block;
    margin: 0 auto;
}
@media (max-width: 991px) {
    .va-hero-image img {
        max-width: 62%;
    }
}
.va-hero-badge {
    position: absolute;
    top: 6%;
    right: 12%;
    z-index: 3;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme);
    color: var(--white);
    font-size: 22px;
    box-shadow: 0 14px 30px rgba(14, 165, 160, 0.4);
}
@media (max-width: 991px) {
    .va-hero-badge {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }
}

/* Hero buttons: the theme's white-fill button (designed to pop
   against the old dark hero) is invisible against this light one. */
.va-hero .hero-content .hero-button .theme-btn {
    background-color: var(--theme) !important;
    color: var(--white) !important;
}
.va-hero .hero-content .hero-button .theme-btn i {
    background-color: var(--white) !important;
    color: var(--theme) !important;
}
.va-hero .hero-content .hero-button .theme-btn:hover {
    background-color: var(--theme-2) !important;
}
.va-hero .hero-content .hero-button .theme-btn.style-2 {
    background-color: transparent !important;
    color: var(--header) !important;
    border: 1px solid var(--border) !important;
}
.va-hero .hero-content .hero-button .theme-btn.style-2 i {
    background-color: var(--theme) !important;
    color: var(--white) !important;
}
.va-hero .hero-content .hero-button .theme-btn.style-2:hover {
    background-color: var(--theme) !important;
    color: var(--white) !important;
    border-color: var(--theme) !important;
}
.va-hero .hero-content .hero-button .theme-btn.style-2:hover i {
    background-color: var(--white) !important;
    color: var(--theme) !important;
}

/* ---- Compact hero: keeps the visa-search widget visible on the first
   screen instead of requiring a scroll. Overrides the template's huge
   default h1 (72px) and generous section padding (100px), both of which
   pushed everything below the widget past a typical laptop viewport. ---- */
.va-hero {
    padding-top: 10px !important;
    padding-bottom: 4px !important;
}
.va-hero .hero-content h6 {
    font-size: 13px !important;
    letter-spacing: 3px !important;
    margin-bottom: 4px !important;
}
.va-hero .hero-content h1 {
    font-size: clamp(24px, 2.5vw, 36px) !important;
    line-height: 1.14 !important;
    margin-bottom: 4px !important;
}
.va-hero .hero-content p {
    margin-bottom: 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}
.va-hero .hero-content .hero-button {
    margin-top: 8px !important;
    gap: 16px !important;
}
.visa-search-widget {
    margin-top: -56px !important;
    padding: 14px 18px !important;
}

/* ---- Nav spacing: fit 7 top-level items comfortably, at roughly half
   the template's default row height for a tighter, premium feel. ---- */
.header-main {
    min-height: 80px;
    padding: 0 !important;
    transition: min-height 0.25s ease;
}
.header-1.sticky .header-main {
    min-height: 66px;
}
.header-main .main-menu ul li {
    margin-inline-end: 26px !important;
}
.header-main .main-menu ul li a {
    font-size: 14.5px !important;
    padding: 10px 0 !important;
    color: var(--va-navy) !important;
}
.header-main .main-menu ul li a:hover,
.header-main .main-menu ul li.active > a {
    color: var(--va-royal) !important;
}
@media (max-width: 1500px) {
    .header-main .main-menu ul li {
        margin-inline-end: 18px !important;
    }
    .header-main .main-menu ul li a {
        font-size: 13.5px !important;
    }
}
.header-main .logo img {
    max-height: 44px;
    width: auto;
}
@media (max-width: 991px) {
    .header-main {
        min-height: 64px;
    }
    .header-main .logo img {
        max-height: 36px;
    }
}

/* ================================================================
   Premium header redesign — unified navy/teal topbar (both the
   standard and homepage-transparent header variants), tagline next to
   the logo, live currency ticker, WhatsApp support + Login dropdown,
   refined main header, sticky-scroll polish. custom.css loads after
   main.css so these win without needing !important except where
   main.css itself used !important (matched below in kind).
   ================================================================ */

/* ---- Topbar: deep gradient on every page (was theme default /
   solid red block on the homepage variant) ---- */
.header-top-section,
.header-top-section-2 {
    background: linear-gradient(120deg, var(--va-navy) 0%, var(--va-navy-2) 55%, var(--va-royal) 100%) !important;
    /* The homepage variant carries the theme's generic ".fix" (overflow:
       hidden) utility class for its old background-shape trick. The Login
       dropdown panel below needs to overflow past the topbar's own height,
       so that clipping has to go — nothing else in the topbar relies on it. */
    overflow: visible !important;
    /* The homepage variant (.header-top-section-2) never had its own
       z-index, so its overflowing Login dropdown panel was being painted
       over by the main header row below it — which the homepage header
       variant (.header-1.header-2) itself stacks at z-index:9999. Both
       topbar variants now get an explicit stacking context above that
       (but below the .sticky class's 99999) so the panel always renders
       on top regardless of which header variant is active. */
    position: relative;
    z-index: 10000;
}
.header-top-section::before { display: none; }
/* The theme hides the standard (non-homepage) topbar entirely below
   1399px; the homepage variant has no such rule. WhatsApp Support and
   the Login dropdown need to stay reachable at every width (per the
   mobile requirements below), so this now matches the homepage
   variant's always-visible behaviour on every page. */
@media (max-width: 1399px) {
    .header-top-section {
        display: block !important;
    }
}

/* ---- Unified topbar layout: brand tagline (left) — currency ticker
   (center) — support + login (right). Shared by both header variants
   via header-topbar.php.
   Compact pass: shorter bar (tighter padding/min-height replacing the
   base theme's 10px-0 wrapper padding and this file's own old 44px) and
   narrower content width (the homepage variant's .header-top-section-2
   .container-fluid ran up to 100px of horizontal padding at very wide
   screens — normalized here to the same, more moderate scale the
   non-homepage variant already used, so both look consistently tight
   rather than one ballooning outward on large displays). ---- */
.header-top-wrapper-unified {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 24px;
    padding: 8px 0 !important;
}
.header-top-section-2 .container-fluid {
    padding: 0 40px !important;
}
@media (max-width: 1399px) {
    .header-top-section-2 .container-fluid { padding: 0 30px !important; }
}
@media (max-width: 575px) {
    .header-top-section-2 .container-fluid { padding: 0 15px !important; }
}

/* ---- Brand tagline: left end of the topbar ---- */
.header-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.header-topbar-tagline {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
@media (max-width: 991px) {
    .header-topbar-left { display: none; }
}

/* ---- Rotating trust stats: cycles a short list of credibility
   points next to the tagline — informative without adding permanent
   width to the bar. ---- */
.header-topbar-divider-trust {
    display: inline-block;
}
.header-trust-rotator {
    position: relative;
    height: 14px;
    min-width: 168px;
    overflow: hidden;
}
.header-trust-item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82) !important;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}
.header-trust-item.is-active {
    opacity: 1;
    transform: translateY(0);
}
.header-trust-item i {
    color: var(--brand-gold) !important;
    font-size: 10.5px;
}
@media (prefers-reduced-motion: reduce) {
    .header-trust-item { transition: none; }
}


/* ---- WhatsApp support + Login dropdown ---- */
.header-support-login {
    display: flex;
    align-items: center;
    gap: 2px;
}
.header-support-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 100px;
    transition: background 0.2s ease, color 0.2s ease;
}
.header-support-link i {
    color: #3DDC7A;
    font-size: 13px;
}
.header-support-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--white) !important;
}
.header-topbar-divider {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.25);
    display: inline-block;
    margin: 0 1px;
}
.header-topbar-social {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-left: 2px;
}
.header-topbar-social a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}
.header-topbar-social a:hover {
    color: var(--white);
    transform: translateY(-1px);
}
@media (max-width: 991px) {
    .header-topbar-divider-social,
    .header-topbar-social { display: none; }
}
.header-login-dropdown {
    position: relative;
}
.header-login-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.92);
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.header-login-toggle:hover,
.header-login-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
}
.header-login-toggle i:first-child { color: var(--va-gold-muted); font-size: 12.5px; }
.header-login-caret {
    font-size: 9px;
    transition: transform 0.2s ease;
}
.header-login-dropdown.is-open .header-login-caret {
    transform: rotate(180deg);
}
.header-login-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 210px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 20px 46px rgba(11, 18, 32, 0.22);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 60;
}
.header-login-dropdown.is-open .header-login-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
@media (hover: hover) {
    .header-login-dropdown:hover .header-login-panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .header-login-dropdown:hover .header-login-caret {
        transform: rotate(180deg);
    }
}
.header-login-panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--header) !important;
    font-size: 13.5px;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
.header-login-panel a i {
    width: 18px;
    color: var(--va-royal);
    font-size: 14px;
    text-align: center;
}
.header-login-panel a:hover,
.header-login-panel a:focus-visible {
    background: var(--bg);
    color: var(--va-royal) !important;
}


@media (min-width: 1200px) {
    .header__hamburger {
        display: none !important;
    }
}

/* ---- Topbar responsive: stack, hide low-priority pieces before any
   horizontal overflow can occur ---- */
@media (max-width: 767px) {
    .header-top-wrapper-unified {
        justify-content: space-between;
        gap: 8px;
        min-height: 30px;
    }
    .header-support-link span { display: none; }
    .header-support-link { padding: 5px 7px; }
}
@media (max-width: 400px) {
    .header-topbar-divider { display: none; }
    .header-login-toggle span { display: none; }
    .header-login-panel { right: -8px; }
}

/* ---- Main header: refined shadow + sticky-scroll polish ---- */
.header-1 {
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.06);
}
.header-1.sticky {
    box-shadow: 0 8px 30px rgba(16, 24, 40, 0.1);
}
.header-main .logo img { transition: height 0.2s ease; }

/* ---- Homepage header variant: unify with the standard header
   instead of the theme's solid red block either side of the nav ---- */
.header-1.header-2::before,
.header-1.header-2::after {
    display: none !important;
}
.header-1.header-2 {
    background: var(--white);
}
.header-1.header-2 .header-logo-2 { display: none !important; }
.header-1.header-2 .header-logo { display: inline-block !important; }
.header-1.header-2 .main-menu > ul > li > a,
.header-1.header-2 .header-search-toggle,
.header-1.header-2 .header-right .header-call-item .theme-btn,
.header-1.header-2 .header-right .header-call-item .sidebar__toggle {
    color: var(--va-navy) !important;
}
.header-1.header-2 .header-right .header-call-item .theme-btn i {
    background-color: var(--va-royal) !important;
    color: var(--white) !important;
}

/* ---- Track Application: secondary CTA pill (bordered, royal-blue) —
   distinct from the filled primary Enquire Now button ---- */
.header-track-link {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--va-royal) !important;
    white-space: nowrap;
    margin-right: 18px;
    padding: 9px 18px;
    border: 1.5px solid var(--va-royal);
    border-radius: 100px;
    transition: background 0.2s ease, color 0.2s ease;
}
.header-track-link:hover {
    background: var(--va-royal);
    color: var(--white) !important;
}
@media (max-width: 1300px) {
    .header-track-link { display: none; }
}

/* ---- Enquire Now: primary CTA — header-scoped royal-blue treatment
   (the rest of the site keeps the teal .theme-btn for hero/pricing/etc).
   Sized down from the base .theme-btn (a large general-purpose CTA style
   with a 48px icon circle, meant for hero/pricing sections) to match
   header-track-link's compact scale — the two sat side by side at
   visibly different heights (58px vs 44px) otherwise. ---- */
.header-call-item .theme-btn {
    color: var(--va-navy);
    border-color: var(--va-royal);
    font-size: 13px;
    padding: 6px 6px 6px 20px;
}
.header-call-item .theme-btn i {
    background-color: var(--va-royal) !important;
    color: var(--white) !important;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin-left: 10px;
}
.header-call-item .theme-btn:hover {
    background-color: var(--va-royal) !important;
    color: var(--white) !important;
}

/* ---- Search toggle: circular icon button matching topbar style ---- */
.header-search-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--header);
    transition: background 0.2s ease, color 0.2s ease;
}
.header-search-toggle:hover {
    background: var(--va-royal);
    color: var(--white);
}

/* ---- Hamburger / offcanvas toggle: refined ---- */
.sidebar__toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--header);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.sidebar__toggle:hover {
    background: var(--va-royal);
    color: var(--white);
}
/* Above the theme's meanmenu breakpoint (1199px) the full nav is already
   visible in the header, and the offcanvas panel this button opens no
   longer has any content of its own — so hide the duplicate trigger. */
@media (min-width: 1200px) {
    .header__hamburger {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-support-link, .header-login-toggle, .header-login-panel, .header-login-panel a,
    .header-search-toggle, .sidebar__toggle, .header-main .logo img {
        transition: none !important;
    }
}

/* ---- Mobile navigation drawer: navy/royal-blue/gold, matching the
   desktop header instead of the theme's default teal accent ---- */
.offcanvas__info {
    border-left: 3px solid var(--va-gold-muted);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__close {
    background-color: var(--va-navy);
}
.mean-container .mean-nav ul li a {
    color: var(--va-navy);
    border-bottom: 1px solid rgba(10, 27, 61, 0.1) !important;
}
.mean-container .mean-nav ul li a:hover {
    color: var(--va-royal);
}
.mean-container .mean-nav ul li .submenu li a {
    color: var(--text);
}
.mean-container .mean-nav ul li > a.mean-expand {
    color: var(--va-royal);
}
.mean-container .mean-nav ul li > a.mean-expand i {
    color: var(--va-gold-muted);
}

.offcanvas-mobile-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.offcanvas-cta-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--va-royal);
    color: var(--white) !important;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 13px 20px;
    border-radius: 100px;
    transition: background 0.2s ease;
}
.offcanvas-cta-primary:hover {
    background: var(--va-navy);
}
.offcanvas-cta-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: var(--va-navy) !important;
    font-size: 13.5px;
    font-weight: 600;
    padding: 11px 20px;
    border: 1.5px solid var(--va-royal);
    border-radius: 100px;
    transition: background 0.2s ease, color 0.2s ease;
}
.offcanvas-cta-secondary i {
    color: var(--va-royal);
    font-size: 13px;
    transition: color 0.2s ease;
}
.offcanvas-cta-secondary:hover {
    background: var(--va-royal);
    color: var(--white) !important;
}
.offcanvas-cta-secondary:hover i {
    color: var(--white);
}

/* ---- Mega menu panels: compact floating card ---- */
.mega-panel {
    width: 660px !important;
    left: 0 !important;
    top: 100% !important;
    margin-top: 14px !important;
    max-width: calc(100vw - 48px) !important;
    padding: 0 !important;
    border-top: none !important;
    border: 1px solid var(--border);
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(16, 24, 40, 0.16) !important;
    overflow: hidden;
    isolation: isolate;
}
.mega-panel.mega-align-right {
    left: auto !important;
    right: 0 !important;
}
.mega-panel-2col {
    width: 460px !important;
}
.mega-panel-2col .mega-bottom {
    flex-direction: column;
    align-items: flex-start;
}
.mega-panel-2col .mega-bottom .mega-cta-btn {
    width: 100% !important;
    justify-content: center !important;
}
.mega-panel-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 26px 26px 6px;
}
.mega-panel-2col .mega-panel-inner {
    grid-template-columns: 1fr 1fr;
}
.mega-col {
    padding-right: 18px;
}
.mega-col:last-child {
    padding-right: 0;
}
.mega-col h5 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--va-royal);
    margin-bottom: 12px;
}
.mega-col h5 i {
    margin-right: 8px;
    color: var(--va-royal);
    font-size: 13px;
}
.mega-links {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mega-links li a {
    display: block !important;
    width: auto !important;
    white-space: normal !important;
    text-transform: none !important;
    padding: 6px 8px !important;
    margin: 0 -8px !important;
    border-radius: 8px;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: var(--header) !important;
}
.mega-links li a:hover {
    background: var(--bg);
    color: var(--va-royal) !important;
    padding-left: 8px !important;
}
.mega-links-flags li a span {
    display: inline-block;
    width: 20px;
}

/* Shared bottom CTA strip across every mega panel */
.mega-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 14px 26px 22px;
    padding: 14px 18px;
    background: linear-gradient(90deg, var(--bg), #fff);
    border: 1px dashed var(--border);
    border-radius: 12px;
}
.mega-bottom-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.4;
}
.mega-bottom-text strong {
    display: block;
    font-size: 13.5px;
    color: var(--header);
    margin-bottom: 2px;
}
.header-main .main-menu ul li .submenu .mega-bottom a.mega-cta-btn {
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: center !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    background: var(--va-navy);
    color: #fff !important;
    font-weight: 700;
    font-size: 12.5px;
    padding: 10px 16px !important;
    line-height: normal !important;
    border-radius: 8px;
    transition: background 0.2s ease;
}
.mega-cta-btn:hover {
    background: var(--va-royal);
}
/* Restrained gold accent: thin top stripe on every mega panel */
.mega-panel {
    border-top: 3px solid var(--va-gold-muted) !important;
}

/* ---- Forex mega panel: premium 2x2 icon-card grid, distinct from the
   plain text-link panels used elsewhere ---- */
.mega-panel-forex {
    width: 600px !important;
}
.mega-panel-inner-icons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 22px 22px 6px;
}
.mega-icon-link {
    display: flex !important;
    align-items: flex-start;
    justify-content: flex-start !important;
    gap: 12px;
    padding: 14px 12px !important;
    width: auto !important;
    border-radius: 12px;
    text-transform: none !important;
    white-space: normal !important;
    transition: background 0.2s ease, transform 0.2s ease;
}
.mega-icon-link:hover {
    background: var(--bg);
    transform: translateY(-2px);
}
.mega-icon-badge {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--theme-2) 0%, var(--theme) 100%);
    color: var(--white);
    font-size: 16px;
    box-shadow: 0 8px 18px rgba(6, 43, 92, 0.22);
}
.mega-icon-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.mega-icon-text strong {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    color: var(--header);
    line-height: 1.3;
}
.mega-icon-text small {
    display: block;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    color: var(--text);
    line-height: 1.4;
    white-space: normal !important;
}

/* ---- Resources mega panel: 4-column Guides / Updates / Tools / Help ---- */
.mega-panel-resources {
    width: 780px !important;
}
.mega-panel-inner-resources {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 22px 20px 8px;
}
.mega-col-icons {
    padding: 0 10px;
    border-right: 1px solid var(--border);
}
.mega-col-icons:first-child {
    padding-left: 0;
}
.mega-col-icons:last-child {
    padding-right: 0;
    border-right: none;
}
.mega-col-icons h5 {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mega-icon-links-vert {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mega-icon-link-sm {
    display: flex !important;
    align-items: flex-start;
    justify-content: flex-start !important;
    gap: 10px;
    padding: 7px 8px !important;
    margin: 0 -8px !important;
    width: auto !important;
    border-radius: 10px;
    text-transform: none !important;
    white-space: normal !important;
    transition: background 0.2s ease, transform 0.2s ease;
}
.mega-icon-link-sm:hover {
    background: var(--bg);
    transform: translateX(2px);
}
.mega-icon-badge-sm {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--theme-2) 0%, var(--theme) 100%);
    color: var(--white);
    font-size: 12px;
    margin-top: 1px;
}
.mega-icon-text-sm {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.mega-icon-text-sm strong {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    color: var(--header);
    line-height: 1.3;
}
.mega-icon-text-sm small {
    display: block;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    color: var(--text);
    line-height: 1.35;
    /* Forced single-line: descriptions are kept short enough to fit, but this
       guarantees rows stay aligned across the four columns even if a
       description would otherwise wrap at some viewport width. */
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mega-icon-link-sm {
    min-height: 46px;
}
/* Tools column: visually stronger per spec, to draw the eye to the interactive tools */
.mega-col-tools {
    background: linear-gradient(180deg, rgba(6, 43, 92, 0.05), rgba(6, 43, 92, 0.015));
    border: 1px solid rgba(6, 43, 92, 0.09);
    border-radius: 14px;
    padding: 12px 12px !important;
}
.mega-col-tools .mega-icon-badge-sm {
    width: 32px;
    height: 32px;
    box-shadow: 0 6px 14px rgba(6, 43, 92, 0.22);
}
.mega-col-tools .mega-icon-link-sm:hover {
    background: rgba(255, 255, 255, 0.7);
}
@media (max-width: 1024px) {
    .mega-panel-resources {
        width: calc(100vw - 48px) !important;
    }
    .mega-panel-inner-resources {
        grid-template-columns: 1fr 1fr;
        gap: 18px 0;
    }
    .mega-col-icons {
        border-right: none;
        padding: 0 !important;
    }
}
@media (max-width: 600px) {
    .mega-panel-inner-resources {
        grid-template-columns: 1fr;
    }
}

/* ---- Countries mega panel ---- */
.mega-panel-countries {
    width: 640px !important;
}
.country-explorer-menu {
    padding: 26px 26px 22px;
}
.country-explorer-search {
    position: relative;
    margin-bottom: 16px;
}
.country-explorer-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text);
    opacity: 0.6;
}
.country-explorer-search input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    color: var(--header);
}
.country-explorer-search input:focus {
    border-color: var(--theme);
    color: var(--header);
}
.mega-panel-countries .country-explorer-search input:focus {
    border-color: var(--va-royal);
}
.country-explorer-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.country-explorer-filters button {
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--header);
    border-radius: 30px;
    padding: 5px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.country-explorer-filters button:hover,
.country-explorer-filters button.active {
    background: var(--theme);
    border-color: var(--theme);
    color: var(--white);
}
.mega-panel-countries .country-explorer-filters button:hover,
.mega-panel-countries .country-explorer-filters button.active {
    background: var(--va-royal);
    border-color: var(--va-royal);
}
.country-explorer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
}
.country-chip {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 8px;
    min-width: 0;
    padding: 7px 10px !important;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--header) !important;
    transition: background 0.2s ease;
}
.country-chip span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.country-chip:hover {
    background: var(--bg);
    color: var(--theme) !important;
}
.mega-panel-countries .country-chip:hover {
    color: var(--va-royal) !important;
}
.country-chip .flag {
    font-size: 16px;
}
.country-chip.is-hidden {
    display: none !important;
}

/* ---- Homepage: Visa Search Widget ---- */
.visa-search-widget {
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(16, 24, 40, 0.18);
    padding: 28px;
    margin-top: -30px;
    position: relative;
    z-index: 20;
}
@media (max-width: 991px) {
    .visa-search-widget {
        margin-top: 20px;
    }
}
.visa-search-widget .vsw-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--header);
    margin-bottom: 4px;
}
.visa-search-widget .vsw-sub {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 18px;
}
.vsw-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr auto;
    gap: 14px;
    align-items: start;
}
@media (max-width: 991px) {
    .vsw-grid {
        grid-template-columns: 1fr 1fr;
    }
    .vsw-submit {
        grid-column: 1 / -1;
    }
}
.vsw-field {
    position: relative;
}
.vsw-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}
.vsw-field-error {
    display: block;
    min-height: 16px;
    font-size: 12px;
    color: var(--theme);
    margin-top: 4px;
}
.vsw-autocomplete-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.16);
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
}
.vsw-autocomplete-results button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--header);
    cursor: pointer;
}
.vsw-autocomplete-results button:hover,
.vsw-autocomplete-results button.is-active {
    background: var(--bg);
    color: var(--theme);
}
.vsw-autocomplete-results .vsw-ac-empty {
    padding: 10px;
    font-size: 13px;
    color: var(--text);
}
.vsw-field select,
.vsw-field input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 14px;
    background: var(--white);
    color: var(--header);
    outline: none;
}
.vsw-field select:focus,
.vsw-field input:focus {
    border-color: var(--theme);
}
.vsw-submit {
    border: none;
    background: var(--theme);
    color: var(--white);
    border-radius: 10px;
    padding: 12px 22px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.25s ease;
}
.vsw-submit:hover {
    background: var(--theme-2);
}
.vsw-result {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--bg);
    border-left: 4px solid var(--theme);
    display: none;
    font-size: 14.5px;
    color: var(--header);
    line-height: 1.7;
}
.vsw-result.show {
    display: block;
}
.vsw-result strong {
    color: var(--theme);
}
.vsw-result .vsw-result-actions {
    margin-top: 10px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.vsw-result .vsw-result-actions a {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--theme-2);
}

/* ---- Trust strip ---- */
.trust-strip {
    background: var(--white);
    padding: 30px 0 10px;
}
.trust-strip-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 30px;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--header);
    flex: 1 1 180px;
}
.trust-item i {
    color: var(--theme);
    font-size: 20px;
}

/* ---- How it works ---- */
.how-it-works-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 767px) {
    .how-it-works-steps {
        grid-template-columns: 1fr;
    }
}
.how-it-works-step {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 26px 22px;
    position: relative;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.how-it-works-step:hover {
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.1);
    transform: translateY(-4px);
}
.how-it-works-step .step-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--theme);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 16px;
}
.how-it-works-step h4 {
    font-size: 17px;
    margin-bottom: 8px;
    color: var(--header);
}
.how-it-works-step p {
    font-size: 14px;
    color: var(--text);
    margin: 0;
}

/* ---- Document checklist widget ---- */
.checklist-widget {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 40px rgba(16, 24, 40, 0.06);
}
.checklist-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 14px;
    margin-bottom: 24px;
}
@media (max-width: 767px) {
    .checklist-controls {
        grid-template-columns: 1fr;
    }
}
.checklist-controls select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 14px;
}
.checklist-controls button {
    border: none;
    background: var(--theme);
    color: var(--white);
    border-radius: 10px;
    padding: 12px 22px;
    font-weight: 600;
    cursor: pointer;
}
.checklist-error {
    color: #C0392B;
    font-size: 13.5px;
    margin: -14px 0 20px;
}
.checklist-output {
    display: none;
    border-top: 1px dashed var(--border);
    padding-top: 20px;
}
.checklist-output.show {
    display: block;
}
.checklist-output h4 {
    font-size: 17px;
    color: var(--header);
    margin-bottom: 14px;
}
.checklist-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 24px;
    margin-bottom: 20px;
    list-style: none;
    padding: 0;
}
@media (max-width: 767px) {
    .checklist-items {
        grid-template-columns: 1fr;
    }
}
.checklist-items li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    color: var(--header);
}
.checklist-items li i {
    color: var(--theme);
}
.checklist-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.checklist-actions a,
.checklist-actions button {
    border: 1px solid var(--border);
    background: var(--white);
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--header);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.checklist-actions a:hover,
.checklist-actions button:hover {
    border-color: var(--theme);
    color: var(--theme);
}

/* ---- Country explorer section ---- */
.country-explorer-section .country-explorer-grid {
    grid-template-columns: repeat(5, 1fr);
    max-height: none;
}
@media (max-width: 991px) {
    .country-explorer-section .country-explorer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 575px) {
    .country-explorer-section .country-explorer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.country-explorer-section .country-chip {
    border: 1px solid var(--border);
    border-radius: 10px;
}

/* ---- FAQ ---- */
.faq-accordion .faq-item {
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    cursor: pointer;
    font-weight: 600;
    color: var(--header);
    font-size: 15.5px;
}
.faq-question i {
    color: var(--theme);
    transition: transform 0.3s ease;
}
.faq-item.active .faq-question i {
    transform: rotate(45deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 22px;
}
.faq-item.active .faq-answer {
    max-height: 260px;
    padding-bottom: 18px;
}
.faq-answer p {
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.7;
    margin: 0;
}

/* ---- Final CTA ---- */
.final-cta {
    background: var(--header);
    border-radius: 24px;
    padding: 50px;
    text-align: center;
}
.final-cta h2 {
    color: var(--white);
    margin-bottom: 10px;
}
.final-cta p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 26px;
}
.final-cta .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.final-cta .cta-buttons .theme-btn {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.35);
}
.final-cta .cta-buttons .theme-btn:hover {
    color: var(--white);
}

/* ---- Trust & compliance note ---- */
.compliance-note {
    font-size: 13px;
    color: var(--text);
    background: var(--bg);
    border-radius: 10px;
    padding: 14px 18px;
    line-height: 1.6;
}

/* ---- Footer disclaimer (discreet, not visually dominant) ---- */
.footer-disclaimer {
    font-size: 12px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.45);
    width: 100%;
    margin: 0 0 16px;
    text-align: justify;
    text-align-last: left;
}

/* ---- Visa category cards ---- */
.visa-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 991px) {
    .visa-category-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .visa-category-grid { grid-template-columns: 1fr; }
}
.visa-category-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 26px 22px;
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.visa-category-card:hover {
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.1);
    transform: translateY(-4px);
    border-color: var(--theme);
}
.visa-category-card .vc-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--bg);
    color: var(--theme);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-bottom: 16px;
}
.visa-category-card h4 {
    font-size: 16.5px;
    margin-bottom: 8px;
    color: var(--header);
}
.visa-category-card p {
    font-size: 13.5px;
    color: var(--text);
    margin-bottom: 14px;
    min-height: 40px;
}
.visa-category-card a.vc-link {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--theme-2);
}
.visa-category-card a.vc-link:hover {
    color: var(--theme);
}

/* ---- Process timeline ---- */
.process-timeline {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
}
.process-timeline::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--border);
}
.process-step {
    position: relative;
    display: flex;
    gap: 22px;
    padding-bottom: 34px;
}
.process-step:last-child { padding-bottom: 0; }
.process-step .ps-num {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--theme);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    z-index: 2;
}
.process-step.optional .ps-num {
    background: var(--white);
    color: var(--theme);
    border: 2px solid var(--theme);
}
.process-step .ps-body h4 {
    font-size: 16px;
    margin: 6px 0 4px;
    color: var(--header);
}
.process-step .ps-body p {
    font-size: 13.5px;
    color: var(--text);
    margin: 0;
}
.process-step .ps-tag {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--theme-2);
    font-weight: 700;
}

/* ---- Data-pending notice (for sections needing verified admin data) ---- */
.data-pending {
    border: 1px dashed var(--border);
    border-radius: 14px;
    padding: 22px 24px;
    background: var(--bg);
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.data-pending i {
    color: var(--theme-2);
    font-size: 20px;
    margin-top: 2px;
}
.data-pending h4 {
    font-size: 15px;
    margin: 0 0 6px;
    color: var(--header);
}
.data-pending p {
    font-size: 13.5px;
    color: var(--text);
    margin: 0;
}

/* ---- Simple stub / portal pages ---- */
.portal-stub {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 50px 40px;
    box-shadow: 0 10px 40px rgba(16, 24, 40, 0.06);
}
.portal-stub .portal-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--theme);
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.portal-stub h1 {
    font-size: 24px;
    margin-bottom: 10px;
    color: var(--header);
}
.portal-stub p {
    color: var(--text);
    margin-bottom: 24px;
}

/* ================================================================
   Premium footer redesign — Section A pre-footer CTA, 5-column
   accordion footer (brand / visa services / destinations / company /
   services & support), quick-enquiry + newsletter action row, trust
   bar. Native <details>/<summary> accordion — no JS required, fully
   keyboard operable and screen-reader friendly by default.
   ================================================================ */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Footer body: deep gradient ---- */
.footer-pro {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--theme-2-dark) 0%, var(--theme-2) 55%, var(--theme-2-light) 100%);
    padding-top: 46px;
}
.footer-pro::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--theme), var(--gold), var(--theme-2));
}
.footer-pro::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 70%);
    top: -280px;
    right: -160px;
    pointer-events: none;
}
.footer-pro > .container {
    position: relative;
    z-index: 1;
}

/* ---- Section A: premium pre-footer CTA ---- */
.footer-cta-card {
    position: relative;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    padding: 34px 38px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    overflow: hidden;
}
.fcc-visual {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 220px;
    pointer-events: none;
    overflow: hidden;
}
.fcc-visual i {
    position: absolute;
    color: rgba(255, 255, 255, 0.06);
}
.fcc-visual i:nth-child(1) { font-size: 130px; right: -20px; top: -30px; transform: rotate(12deg); }
.fcc-visual i:nth-child(2) { font-size: 70px; right: 90px; bottom: -18px; transform: rotate(-8deg); }
.fcc-visual i:nth-child(3) { font-size: 46px; right: 10px; bottom: 30px; }
.fcc-text { position: relative; z-index: 1; }
.fcc-text h2 {
    color: var(--white);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 6px;
}
.fcc-text p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    max-width: 560px;
}
.fcc-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    flex: 0 0 auto;
    max-width: 100%;
}
@media (max-width: 767px) {
    .fcc-visual { width: 140px; }
    .fcc-visual i:nth-child(1) { font-size: 90px; }
}
@media (max-width: 575px) {
    .footer-cta-card {
        flex-direction: column;
        align-items: stretch;
        padding: 28px 22px;
    }
    .fcc-actions {
        flex-direction: column;
        width: 100%;
    }
    .fcc-actions .theme-btn {
        width: 100%;
        justify-content: center;
    }
}
/* Primary CTA in the dark pre-footer card: the base .theme-btn is
   styled for light backgrounds (transparent fill, dark text) and was
   invisible here — give it the same filled treatment as the hero's
   primary button. */
.footer-cta-card .fcc-actions .theme-btn:not(.style-outline) {
    background: var(--theme);
    color: var(--white) !important;
    border-color: var(--theme);
}
.footer-cta-card .fcc-actions .theme-btn:not(.style-outline) i {
    background-color: var(--white);
    color: var(--theme);
}
.footer-cta-card .fcc-actions .theme-btn:not(.style-outline):hover {
    background: var(--theme-2);
    border-color: var(--theme-2);
}
.theme-btn.style-outline {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    color: var(--white);
}
.theme-btn.style-outline:hover {
    background: var(--white);
    color: var(--theme-2);
}

/* ---- Main footer columns: brand + 5 accordion columns ---- */
.va-footer-columns {
    display: grid;
    grid-template-columns: 1.2fr repeat(5, 1fr);
    gap: 24px;
}
@media (max-width: 1199px) {
    .va-footer-columns { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .va-footer-columns { grid-template-columns: 1fr; }
}
.footer-brand-tagline {
    color: var(--gold);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-top: 10px;
}
.footer-trust-mini {
    list-style: none;
    margin: 16px 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.footer-trust-mini li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}
.footer-trust-mini i {
    color: var(--gold);
    width: 14px;
    text-align: center;
    flex: none;
}
.va-footer-columns .social-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}
.va-footer-columns .social-icon a,
.va-footer-columns .social-icon span {
    width: 36px;
    height: 36px;
    line-height: 34px;
    text-align: center;
    border-radius: 100px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    display: inline-block;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.va-footer-columns .social-icon a:hover {
    background: var(--theme);
    color: var(--white);
    transform: translateY(-2px);
}
.va-footer-columns .social-icon span { cursor: default; }

/* ---- Accordion columns (native <details>/<summary>, no JS) ---- */
.footer-accordion summary {
    color: var(--white);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    position: relative;
    cursor: default;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer-accordion summary::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 26px;
    height: 2px;
    background: var(--gold);
}
.footer-accordion summary::-webkit-details-marker { display: none; }
.footer-accordion summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    display: none;
}
.footer-accordion ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.footer-accordion ul li a {
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    transition: color 0.15s ease, padding-left 0.15s ease;
}
.footer-accordion ul li a:hover {
    color: var(--theme-2);
    padding-left: 3px;
}
.footer-col-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--gold);
    font-size: 13.5px;
    font-weight: 600;
}
.footer-col-more i { transition: transform 0.2s ease; }
.footer-col-more:hover { color: var(--white); }
.footer-col-more:hover i { transform: translateX(3px); }

@media (max-width: 767px) {
    .footer-accordion summary { cursor: pointer; }
    .footer-accordion summary::after { display: inline-block; }
    .footer-accordion[open] summary::after { transform: rotate(225deg); }
    .footer-accordion {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding-bottom: 14px;
        margin-bottom: 6px;
    }
}
@media (min-width: 768px) {
    .footer-accordion { display: block; }
}

/* ---- Quick enquiry + newsletter action row ---- */
.footer-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 36px;
}
@media (max-width: 991px) {
    .footer-action-row { grid-template-columns: 1fr; }
}
.footer-quick-enquiry,
.footer-newsletter-form {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    display: block;
    padding: 22px 24px;
}
.footer-quick-enquiry {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.fqe-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(198, 161, 91, 0.16);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.fqe-text { flex: 1 1 200px; }
.fqe-text strong {
    display: block;
    color: var(--white);
    font-size: 15px;
    margin-bottom: 2px;
}
.fqe-text span {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
}
.fqe-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--theme);
    color: var(--white);
    font-size: 13.5px;
    font-weight: 700;
    padding: 11px 20px;
    border-radius: 100px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.fqe-btn i { transition: transform 0.2s ease; }
.fqe-btn:hover { background: var(--theme-2); }
.fqe-btn:hover i { transform: translateX(3px); }

.fnl-text strong {
    display: block;
    color: var(--white);
    font-size: 15px;
    margin-bottom: 2px;
}
.fnl-text span {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
}
.fnl-field-row {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.fnl-field-row input[type="email"] {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    padding: 11px 18px;
    color: var(--white);
    font-size: 13.5px;
}
.fnl-field-row input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.45); }
.fnl-field-row button {
    flex: none;
    background: var(--gold);
    color: var(--theme-2-dark);
    border: none;
    font-size: 13.5px;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: filter 0.2s ease;
}
.fnl-field-row button:hover { filter: brightness(1.08); }
.fnl-field-row button:disabled { opacity: 0.65; cursor: not-allowed; }
.fnl-btn-spinner {
    width: 13px; height: 13px;
    border-radius: 50%;
    border: 2px solid rgba(7, 59, 55, 0.35);
    border-top-color: var(--theme-2-dark);
    animation: fnl-spin 0.7s linear infinite;
}
@keyframes fnl-spin { to { transform: rotate(360deg); } }
.footer-newsletter-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fnl-consent {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 11.5px;
    line-height: 1.6;
}
.fnl-consent a { color: rgba(255, 255, 255, 0.65); text-decoration: underline; }
.fnl-status {
    margin: 10px 0 0;
    font-size: 12.5px;
    font-weight: 600;
}
.fnl-status.is-success { color: #7CD9A8; }
.fnl-status.is-error { color: #FF9B9B; }
@media (max-width: 480px) {
    .fnl-field-row { flex-direction: column; }
    .fnl-field-row button { justify-content: center; }
}

/* ---- Trust bar (dark footer variant) ---- */
.footer-trust-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
    justify-content: space-between;
    padding: 26px 0;
    margin-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 767px) {
    .footer-trust-bar { justify-content: center; }
}
.footer-trust-bar .trust-item {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13.5px;
    font-weight: 600;
    flex: 0 1 auto;
}
.footer-trust-bar .trust-item i {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(198, 161, 91, 0.16);
    color: var(--gold);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 9px;
    flex: none;
}

@media (prefers-reduced-motion: reduce) {
    .footer-accordion ul li a,
    .footer-col-more, .footer-col-more i,
    .va-footer-columns .social-icon a,
    .fqe-btn, .fqe-btn i,
    .fnl-field-row button,
    .theme-btn.style-outline {
        transition: none !important;
    }
    .fnl-btn-spinner { animation: none !important; }
}

/* ---- Back to top ---- */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--theme);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 999;
}
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover { background: var(--theme-2); }

/* ---- Mobile sticky CTA bar ---- */
.mobile-sticky-cta { display: none; }
@media (max-width: 767px) {
    .mobile-sticky-cta {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 998;
        background: var(--white);
        box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.12);
    }
    .mobile-sticky-cta a {
        flex: 1;
        text-align: center;
        padding: 13px 8px;
        font-size: 13px;
        font-weight: 700;
        color: var(--header);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-right: 1px solid var(--border);
    }
    .mobile-sticky-cta a:last-child { border-right: none; background: var(--theme); color: var(--white); }
    .mobile-sticky-cta a i { font-size: 15px; }
    body { padding-bottom: 54px; }
}

/* ---- Accessible focus states ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--theme-2);
    outline-offset: 2px;
}

/* ---- Simple dropdown: same premium card treatment as the mega
   panels (rounded corners, soft shadow, gold top stripe) so every
   header dropdown — mega-panel or plain list — belongs to one
   consistent design language. ---- */
.submenu.simple-dropdown {
    min-width: 260px;
    margin-top: 14px !important;
    padding: 10px !important;
    border: 1px solid var(--border);
    border-top: 3px solid var(--va-gold-muted) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(16, 24, 40, 0.16) !important;
    overflow: hidden;
}
.submenu.simple-dropdown li a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: auto !important;
    padding: 11px 14px !important;
    border-radius: 10px;
    font-size: 13.5px !important;
    text-transform: none !important;
    color: var(--header) !important;
    transition: background 0.2s ease, color 0.2s ease;
}
.submenu.simple-dropdown li a:hover {
    background: var(--bg);
    color: var(--va-royal) !important;
}
.submenu.simple-dropdown li a i {
    color: var(--theme);
    width: 16px;
    text-align: center;
    font-size: 13px;
}

/* ---- Floating "Need Help?" contact widget (Get Assistance / WhatsApp /
   Call Us / Email Us). Hidden below 768px — the mobile sticky bar
   (Call / WhatsApp / Get Assistance) already covers the same actions
   without needing an extra tap to expand, so showing both would be
   redundant clutter on small screens. ---- */
.qhelp-fab {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}
.qhelp-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 20px 0 16px;
    border-radius: 100px;
    border: none;
    background: var(--theme);
    color: var(--white);
    font-size: 21px;
    box-shadow: 0 10px 24px rgba(6, 43, 92, 0.28);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    flex: none;
}
.qhelp-toggle:hover { transform: scale(1.04); background: #b78f45; }
.qhelp-toggle-icon { position: relative; width: 22px; height: 22px; flex: none; }
.qhelp-toggle-icon .qhelp-icon-close { position: absolute; inset: 0; opacity: 0; transform: rotate(-90deg) scale(0.6); transition: opacity 0.2s ease, transform 0.2s ease; }
.qhelp-toggle-icon .qhelp-icon-open { position: absolute; inset: 0; transition: opacity 0.2s ease, transform 0.2s ease; }
.qhelp-toggle-label { font-size: 14px; font-weight: 700; white-space: nowrap; }
.qhelp-fab.is-open .qhelp-toggle { background: var(--theme-2); color: var(--white); }
.qhelp-fab.is-open .qhelp-toggle-icon .qhelp-icon-open { opacity: 0; transform: rotate(90deg) scale(0.6); }
.qhelp-fab.is-open .qhelp-toggle-icon .qhelp-icon-close { opacity: 1; transform: rotate(0) scale(1); }

.qhelp-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 270px;
    background: var(--white);
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 20px 50px rgba(16, 24, 40, 0.18);
    border: 1px solid var(--border);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.96);
    transform-origin: bottom right;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
}
.qhelp-fab.is-open .qhelp-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.qhelp-option {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    padding: 8px;
    border-radius: 10px;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}
.qhelp-option:hover { background: var(--bg); }
.qhelp-option-primary { background: var(--bg); }
.qhelp-option-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--white);
    background: var(--theme-2);
    flex: none;
}
.qhelp-icon-whatsapp { background: #25D366; }
.qhelp-icon-call { background: var(--theme); }
.qhelp-icon-email { background: var(--gold, #F5B800); }
.qhelp-option-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.qhelp-option-text strong { font-size: 13.5px; color: var(--header); }
.qhelp-option-text span { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 767px) {
    .qhelp-fab { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .qhelp-toggle, .qhelp-toggle-icon .qhelp-icon-open, .qhelp-toggle-icon .qhelp-icon-close, .qhelp-panel, .qhelp-option {
        transition: none !important;
    }
}

/* ---- Footer brand description: justified, and explicitly light —
   this paragraph has no theme wrapper class to inherit a footer-aware
   color from, so without this it falls back to the generic dark body
   text color and becomes nearly unreadable on the dark footer. ---- */
.footer-brand-desc {
    text-align: justify;
    text-align-last: left;
    color: rgba(255, 255, 255, 0.7);
}
.footer-connect-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
    margin: 18px 0 10px;
}

/* ---- Footer: edge-to-edge blue background + compact spacing ---- */
.footer-section {
    margin: 0 !important;
    border-radius: 0 !important;
}

/* ---- Breadcrumb banner: edge-to-edge, no rounded corners. The theme's
   shared breadcrumb.jpg (a teal photo, used identically across all 256
   inner pages) is replaced here with a brand navy/blue gradient so every
   inner page's banner belongs to the master color system in one place. ---- */
.breadcrumb-wrapper {
    margin: 0 !important;
    border-radius: 0 !important;
    background-image: none !important;
    background: linear-gradient(120deg, var(--brand-navy) 0%, var(--brand-blue) 100%) !important;
}
.va-footer-columns {
    gap: 20px;
}
.footer-trust-bar {
    padding: 22px 0;
    margin-top: 6px;
}

/* ---- Bottom legal strip: darker, edge-to-edge, below the gradient body ---- */
.footer-bottom-bar {
    background: var(--theme-2-dark);
    padding: 18px 0;
}
.footer-legal-inline {
    text-align: left;
}
.footer-legal-inline p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    line-height: 1.7;
    margin: 0 0 12px;
}
.footer-legal-inline p span {
    color: var(--theme);
    text-transform: uppercase;
}

/* ---- Footer brand logo ---- */
.footer-brand-logo {
    display: inline-block;
    margin-bottom: 14px;
}
.footer-brand-logo img {
    height: 40px;
    width: auto;
}

/* ================= Privacy Policy page ================= */
.policy-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
    padding: 20px 24px;
    background: var(--bg);
    border-radius: 12px;
    margin-bottom: 40px;
}
.policy-meta-strip .label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text);
    margin-bottom: 4px;
}
.policy-meta-strip .value {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--header);
}

.policy-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
@media (max-width: 900px) {
    .policy-layout { grid-template-columns: 1fr; }
}

.policy-index-rail {
    position: sticky;
    top: 100px;
}
@media (max-width: 900px) {
    .policy-index-rail { display: none; }
}
.policy-index-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text);
    margin: 0 0 14px;
    font-weight: 700;
}
.policy-index-rail ol {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--border);
}
.policy-index-rail a {
    display: block;
    font-size: 13.5px;
    color: var(--text);
    padding: 7px 0 7px 16px;
    border-left: 2px solid transparent;
    margin-left: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.policy-index-rail a .n {
    font-family: monospace;
    color: var(--theme);
    margin-right: 8px;
    font-size: 11.5px;
}
.policy-index-rail a:hover,
.policy-index-rail a.active {
    color: var(--header);
    font-weight: 600;
    border-left-color: var(--theme);
}

.policy-content section {
    padding: 30px 0;
    border-bottom: 1px solid var(--border);
    scroll-margin-top: 100px;
}
.policy-content section:first-child { padding-top: 0; }
.policy-content section:last-child { border-bottom: none; }
.clause-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}
.clause-num {
    font-family: monospace;
    color: var(--theme);
    font-size: 13px;
    font-weight: 700;
    flex: none;
}
.policy-content h2 {
    font-size: 22px;
    margin: 0;
    color: var(--header);
}
.policy-content h4 {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--header);
    margin: 18px 0 8px;
}
.policy-content p {
    color: var(--text);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 12px;
}
.policy-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}
.policy-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text);
}
.policy-list li::before {
    content: "\2013";
    position: absolute;
    left: 0;
    color: var(--theme);
    font-weight: 700;
}
.policy-table-wrap {
    overflow-x: auto;
    margin: 8px 0 16px;
}
.policy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 520px;
}
.policy-table th,
.policy-table td {
    text-align: left;
    padding: 10px 14px;
    border: 1px solid var(--border);
    vertical-align: top;
}
.policy-table th {
    background: var(--bg);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text);
    font-weight: 700;
}

.grievance-card {
    background: var(--theme-2);
    color: var(--white);
    border-radius: 14px;
    padding: 26px 28px;
    margin-top: 8px;
}
.grievance-card h3 {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}
.grievance-card > p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}
.grievance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.grievance-grid .label {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 5px;
}
.grievance-grid .value {
    font-size: 14px;
    color: var(--white);
}
.grievance-grid a {
    color: var(--white);
}
.grievance-grid a:hover {
    color: var(--gold);
}

/* ---- Policy pages: numbered list, warning note variant ---- */
.policy-list.legal-list {
    list-style: none;
    counter-reset: item;
}
.policy-list.legal-list li {
    padding-left: 26px;
    counter-increment: item;
}
.policy-list.legal-list li::before {
    content: counter(item) ".";
    font-family: monospace;
    font-weight: 700;
    font-size: 13.5px;
}
.compliance-note.policy-note-warn {
    border-left: 3px solid var(--theme);
    background: #FDF0EF;
}

/* ---- Cookie policy: type pills, browser guide cards ---- */
.policy-pill {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
    color: var(--header);
    background: var(--bg);
    font-weight: 700;
}
.policy-pill.essential { border-color: #8FA36A; color: #4C6B2C; background: #EEF3E4; }
.policy-pill.analytics { border-color: #7FA3C9; color: #2E5680; background: #E7EEF5; }
.policy-pill.preference { border-color: var(--gold); color: #8A651E; background: #F6ECD6; }

.policy-browser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin: 8px 0 16px;
}
.policy-browser-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--bg);
}
.policy-browser-card .name {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--header);
    margin-bottom: 4px;
}
.policy-browser-card .path {
    font-family: monospace;
    font-size: 12px;
    color: var(--text);
    line-height: 1.6;
}

/* ---- Cookie preferences banner ---- */
.cookie-banner {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    max-width: 560px;
    margin: 0 auto;
    background: var(--header);
    color: var(--white);
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 14px 40px rgba(16, 24, 40, 0.35);
    display: grid;
    gap: 14px;
}
.cookie-banner.is-hidden {
    transform: translateY(140%);
    opacity: 0;
    pointer-events: none;
}
.cookie-banner p {
    margin: 0;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}
.cookie-banner p a {
    color: var(--gold);
}
.cookie-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.cookie-actions button {
    font-size: 13px;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
}
.cookie-actions .cookie-accept {
    background: var(--gold);
    color: var(--header);
    border-color: var(--gold);
}
.cookie-actions .cookie-accept:hover {
    background: #c7a56e;
}
.cookie-actions .cookie-essential {
    background: transparent;
    color: var(--white);
}
.cookie-actions .cookie-essential:hover {
    border-color: var(--white);
}
@media (max-width: 520px) {
    .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 16px 18px; }
}

/* ---- Refund policy: status pills ---- */
.policy-pill.ok { border-color: #8FA36A; color: #4C6B2C; background: #EEF3E4; }
.policy-pill.no { border-color: #B36A57; color: #8A3B24; background: #F5E4DE; }
.policy-pill.partial { border-color: var(--gold); color: #8A651E; background: #F6ECD6; }

/* ---- Data security: safeguard cards ---- */
.policy-safeguard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 8px 0 18px;
}
.policy-safeguard-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    background: var(--bg);
}
.policy-safeguard-card .icon {
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
}
.policy-safeguard-card .icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--theme);
}
.policy-safeguard-card .name {
    font-weight: 700;
    font-size: 15px;
    color: var(--header);
    margin-bottom: 5px;
}
.policy-safeguard-card .desc {
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.6;
}

/* ---- Sitemap page: link grid, country grid, xml card ---- */
.policy-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px 32px;
}
.policy-link-col h3 {
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--theme);
    margin: 0 0 12px;
    font-weight: 700;
}
.policy-link-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.policy-link-col li {
    margin-bottom: 9px;
}
.policy-link-col a {
    color: var(--header);
    font-size: 14.5px;
}
.policy-link-col a:hover {
    color: var(--theme);
}
.policy-link-col .more a {
    font-weight: 700;
    color: var(--theme);
}

.policy-country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px 14px;
}
.policy-country-grid a {
    display: block;
    color: var(--header);
    font-size: 14px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}
.policy-country-grid a:hover {
    color: var(--theme);
}
.policy-region-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text);
    margin: 22px 0 10px;
    font-weight: 700;
}
.policy-region-label:first-child {
    margin-top: 0;
}

.policy-xml-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    padding: 18px 22px;
    border-radius: 10px;
    margin-top: 16px;
}
.policy-xml-card p {
    margin: 0 0 4px;
    font-weight: 700;
    color: var(--header);
    font-size: 15px;
}
.policy-xml-card span {
    font-family: monospace;
    font-size: 13px;
    color: var(--text);
}
.policy-xml-card a.btn-small {
    font-size: 13px;
    text-decoration: none;
    color: var(--header);
    border: 1px solid var(--header);
    padding: 8px 14px;
    border-radius: 8px;
    white-space: nowrap;
    font-weight: 600;
}
.policy-xml-card a.btn-small:hover {
    background: var(--header);
    color: var(--white);
}

/* ---- Footer legal line: copyright left, links right ---- */
.footer-legal-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    font-size: 12px;
}
.footer-legal-line .footer-copyright {
    color: rgba(255, 255, 255, 0.5);
}
.footer-legal-line .footer-copyright span {
    color: var(--brand-gold);
    text-transform: uppercase;
}
.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}
.footer-legal-links a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    transition: color 0.15s ease;
}
.footer-legal-links a:hover {
    color: var(--gold);
}
@media (prefers-reduced-motion: reduce) {
    .footer-legal-links a { transition: none; }
}

/* ============================================================
   Apostille & Attestation sub-pages
   ============================================================ */
.svc-lede {
    max-width: none;
    width: 100%;
    margin: 0 0 30px;
    text-align: left;
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
}
.svc-stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
    max-width: 980px;
    margin: 0 auto 8px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.svc-stat-strip div {
    padding: 20px 22px;
    border-right: 1px solid var(--border);
    text-align: center;
}
.svc-stat-strip div:last-child {
    border-right: none;
}
.svc-stat-strip .num {
    display: block;
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    font-size: 24px;
    color: var(--theme);
    margin-bottom: 4px;
}
.svc-stat-strip .lbl {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text);
}

/* ---- Sibling nav (pill tabs across the 6 apostille pages) ---- */
.svc-sibling-nav {
    position: sticky;
    top: 66px;
    z-index: 30;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
@media (max-width: 991px) {
    .svc-sibling-nav { top: 0; }
}
.svc-sibling-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    overflow-x: auto;
}
.svc-sibling-inner a {
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--header);
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    white-space: nowrap;
    background: var(--white);
}
.svc-sibling-inner a:hover {
    border-color: var(--theme);
    color: var(--theme);
}
.svc-sibling-inner a.current {
    background: var(--theme);
    border-color: var(--theme);
    color: var(--white);
}

/* ---- Sticky in-page table of contents (consolidated long-form pages) ---- */
.page-toc {
    position: sticky;
    top: 66px;
    z-index: 30;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
@media (max-width: 991px) {
    .page-toc { top: 0; }
}
.page-toc-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    overflow-x: auto;
}
.page-toc-inner a {
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--header);
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    white-space: nowrap;
    background: var(--white);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.page-toc-inner a:hover {
    border-color: var(--theme);
    color: var(--theme);
}
.page-toc-inner a.is-active {
    background: var(--theme);
    border-color: var(--theme);
    color: var(--white);
}

/* ---- Steps flow diagram: connected horizontal process on desktop,
   falling back to a vertical timeline below 900px ---- */
.svc-steps {
    max-width: none;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.svc-step-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 18px;
    position: relative;
}
.svc-step-marker {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}
.svc-step-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--theme);
    color: var(--theme);
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    flex: none;
    z-index: 1;
}
.svc-step-line {
    height: 2px;
    flex: 1;
    background: repeating-linear-gradient(to right, var(--theme) 0, var(--theme) 6px, transparent 6px, transparent 12px);
    margin-left: -1px;
}
.svc-step-row:last-child .svc-step-line {
    display: none;
}
.svc-step-body {
    padding-bottom: 0;
    margin-top: 16px;
}
.svc-step-body h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--header);
    margin: 0 0 8px;
}
.svc-step-body p {
    font-size: 13.5px;
    color: var(--text);
    margin: 0;
    line-height: 1.65;
}
@media (max-width: 900px) {
    .svc-steps {
        max-width: 780px;
        margin: 0 auto;
        display: block;
    }
    .svc-step-row {
        display: grid;
        grid-template-columns: 52px 1fr;
        gap: 20px;
        text-align: left;
        padding: 0;
    }
    .svc-step-marker {
        flex-direction: column;
        align-items: center;
        width: auto;
    }
    .svc-step-line {
        width: 1px;
        height: auto;
        flex: 1;
        background: var(--border);
        margin-top: 4px;
        margin-left: 0;
    }
    .svc-step-body {
        margin-top: 0;
        padding-bottom: 34px;
    }
    .svc-step-body h3 {
        font-size: 18px;
        margin: 6px 0 8px;
    }
    .svc-step-body p {
        font-size: 14.5px;
        line-height: 1.7;
    }
}

/* ---- Document / service card grid with inline SVG icons ---- */
.svc-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
}
.svc-doc-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px 22px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.svc-doc-card:hover {
    border-color: var(--theme);
    transform: translateY(-3px);
}
.svc-doc-card .icon {
    width: 36px;
    height: 36px;
    margin-bottom: 14px;
}
.svc-doc-card .icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--theme);
    fill: none;
    stroke-width: 1.6;
}
.svc-doc-card h3 {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--header);
    margin: 0 0 8px;
}
.svc-doc-card p {
    font-size: 14px;
    color: var(--text);
    margin: 0;
    line-height: 1.65;
}

/* ---- Why-us checklist grid ---- */
.svc-why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px 30px;
}
.svc-why-item {
    display: flex;
    gap: 14px;
}
.svc-why-item .check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--theme-2);
    color: var(--white);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12.5px;
}
.svc-why-item h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 2px 0 5px;
    color: var(--header);
}
.svc-why-item p {
    font-size: 13.5px;
    color: var(--text);
    margin: 0;
    line-height: 1.65;
}

/* ---- Chip row (countries / language pairs) ---- */
.svc-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.svc-chip-row .chip {
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--header);
}

/* ---- Document checklist (visa-type pages) ---- */
.svc-checklist {
    max-width: 780px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px 24px;
}
.svc-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.svc-checklist-item .tick {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #EEF3E4;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.svc-checklist-item .tick svg {
    width: 14px;
    height: 14px;
    stroke: #4C6B2C;
    stroke-width: 2.4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.svc-checklist-item .txt {
    font-size: 14.5px;
    color: var(--text);
    line-height: 1.6;
    padding-top: 2px;
}

/* ============================================================
   Console pages (About, Careers, Contact, Our Services, Resources tools)
   ============================================================ */
:root {
    --signal: #0B4DB6;
    --signal-light: #5B9DF5;
    --signal-dim: #EAF3FF;
    --console-ink: #0B1220;
    --console-ok: #16A34A;
    --console-ok-bg: #E7F6EC;
    --console-warn: #D97706;
    --console-warn-bg: #FDF1DF;
    --console-bad: #DC2626;
    --console-bad-bg: #FCE8E6;
}

.console-intro {
    background: var(--console-ink);
    color: #E6EAF2;
    position: relative;
    overflow: hidden;
}
.console-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
}
.console-intro-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 34px 24px 40px;
    position: relative;
    text-align: center;
}
.console-tag {
    font-family: monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--signal-light);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
}
.console-tag .blink {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--signal-light);
    animation: console-blink 1.6s ease-in-out infinite;
}
@keyframes console-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}
.console-intro p.lede {
    max-width: 64ch;
    margin: 0 auto 26px;
    color: #AEB8CB;
    font-size: 16px;
    line-height: 1.65;
}
.console-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.console-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    letter-spacing: 0.01em;
    border: none;
    cursor: pointer;
}
.console-btn-primary { background: var(--signal); color: #fff; }
.console-btn-primary:hover { background: var(--brand-navy); color: #fff; }
.console-btn-outline-dark { border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; background: transparent; }
.console-btn-outline-dark:hover { border-color: #fff; color: #fff; }
.console-btn-outline { border: 1px solid var(--border); color: var(--text); background: #fff; }
.console-btn-outline:hover { border-color: var(--signal); color: var(--signal); }

.console-section-head { max-width: 680px; margin: 0 auto 32px; text-align: center; }
.console-section-head.left { text-align: left; margin-left: 0; }
.console-eyebrow {
    font-family: monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--signal);
    margin: 0 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.console-eyebrow::before { content: ""; width: 16px; height: 1px; background: var(--signal); }
.console-section-head h2 { margin: 0 0 10px; }
.console-section-head p { color: var(--text); font-size: 15px; margin: 0; line-height: 1.65; }

.console-tool-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.console-tool-panel-bar {
    background: var(--console-ink);
    padding: 11px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.console-tool-panel-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: #3A4257; }
.console-tool-panel-bar .dot:nth-child(1) { background: #E4626F; }
.console-tool-panel-bar .dot:nth-child(2) { background: #E7B84B; }
.console-tool-panel-bar .dot:nth-child(3) { background: #4CAF6D; }
.console-tool-panel-bar span.path { margin-left: 10px; font-family: monospace; font-size: 11.5px; color: #8B96AC; }
.console-tool-panel-body { padding: 28px; }
@media (max-width: 600px) { .console-tool-panel-body { padding: 20px; } }

.console-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 18px; }
.console-field label { display: block; font-family: monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); margin-bottom: 7px; }
.console-field select, .console-field input, .console-field textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--header);
    background: #fff;
}
.console-field select:focus, .console-field input:focus, .console-field textarea:focus { border-color: var(--signal); outline: none; }
.console-fine { font-family: monospace; font-size: 12px; color: var(--text); margin-bottom: 16px; }

.console-status-badge { display: inline-flex; align-items: center; gap: 7px; font-family: monospace; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em; }
.console-status-badge .sw { width: 7px; height: 7px; border-radius: 50%; }
.console-status-ok { background: var(--console-ok-bg); color: #116634; } .console-status-ok .sw { background: var(--console-ok); }
.console-status-warn { background: var(--console-warn-bg); color: #8A5A05; } .console-status-warn .sw { background: var(--console-warn); }
.console-status-bad { background: var(--console-bad-bg); color: #96271F; } .console-status-bad .sw { background: var(--console-bad); }
.console-status-neutral { background: var(--bg); color: var(--text); } .console-status-neutral .sw { background: var(--text); }

.console-result-box { margin-top: 20px; border: 1px dashed var(--border); border-radius: 4px; padding: 20px; background: var(--bg); display: none; }
.console-result-box.show { display: block; }
.console-result-box h4 { font-size: 17px; margin: 0 0 8px; color: var(--header); }
.console-result-box p { margin: 0 0 6px; font-size: 14px; color: var(--text); }
.console-result-box .console-fine { margin-top: 10px; margin-bottom: 0; }

.console-checklist { display: grid; gap: 10px; }
.console-cl-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--border); border-radius: 6px; background: #fff; cursor: pointer; }
.console-cl-row:hover { border-color: var(--signal); }
.console-cl-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--signal); flex: none; }
.console-cl-row span.txt { font-size: 14.5px; color: var(--header); }
.console-cl-row.done span.txt { color: var(--text); text-decoration: line-through; }
.console-progress-wrap { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.console-progress-track { flex: 1; height: 8px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.console-progress-fill { height: 100%; background: var(--signal); width: 0%; transition: width .25s ease; }
.console-progress-label { font-family: monospace; font-size: 12.5px; color: var(--text); white-space: nowrap; }

.console-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.console-tcard { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 20px 20px 18px; transition: border-color .15s ease; }
.console-tcard:hover { border-color: var(--signal); }
.console-tcard .icon { width: 30px; height: 30px; margin-bottom: 12px; }
.console-tcard .icon svg { width: 100%; height: 100%; stroke: var(--signal); fill: none; stroke-width: 1.6; }
.console-tcard h3 { font-size: 15.5px; color: var(--header); margin: 0 0 7px; }
.console-tcard p { font-size: 13.5px; color: var(--text); margin: 0; line-height: 1.55; }
.console-tcard a.tcard-link { display: inline-block; margin-top: 10px; font-family: monospace; font-size: 12px; color: var(--signal); text-decoration: none; }
.console-tcard a.tcard-link:hover { text-decoration: underline; }

.console-chip-toggle-row { display: flex; flex-wrap: wrap; gap: 10px; }
.console-chip-toggle { font-family: inherit; font-size: 13.5px; padding: 9px 15px; border-radius: 20px; border: 1px solid var(--border); background: #fff; cursor: pointer; color: var(--header); user-select: none; }
.console-chip-toggle:hover { border-color: var(--signal); }
.console-chip-toggle.active { background: var(--signal); border-color: var(--signal); color: #fff; }

.console-search-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.console-search-input-wrap { position: relative; flex: 1; min-width: 220px; }
.console-search-input-wrap svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: var(--text); fill: none; stroke-width: 1.8; }
.console-search-input-wrap input { width: 100%; padding: 12px 14px 12px 38px; border: 1px solid var(--border); border-radius: 4px; font-size: 14.5px; font-family: inherit; }
.console-tab-row { display: flex; gap: 8px; flex-wrap: wrap; }
.console-tab-btn { font-family: monospace; font-size: 12px; padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border); background: #fff; cursor: pointer; color: var(--header); }
.console-tab-btn.active { background: var(--console-ink); border-color: var(--console-ink); color: #fff; }
.console-count { font-family: monospace; font-size: 12px; color: var(--text); margin-bottom: 14px; }

.console-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.console-news-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.console-news-card .tag-row { padding: 16px 18px 0; display: flex; justify-content: space-between; align-items: center; }
.console-news-card .tag { font-family: monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; padding: 4px 9px; border-radius: 12px; background: var(--signal-dim); color: var(--signal); font-weight: 600; }
.console-news-card .date { font-family: monospace; font-size: 11px; color: var(--text); }
.console-news-card h3 { font-size: 16.5px; color: var(--header); margin: 12px 18px 8px; line-height: 1.35; }
.console-news-card p { font-size: 13.5px; color: var(--text); margin: 0 18px 18px; line-height: 1.55; }
.console-news-card.is-linked { display: block; text-decoration: none; transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; }
.console-news-card.is-linked:hover { box-shadow: 0 12px 26px rgba(16,24,40,0.1); transform: translateY(-2px); border-color: var(--theme); }
.console-news-card.is-linked p { margin-bottom: 10px; }
.console-news-card .read-more { display: flex; align-items: center; gap: 6px; margin: 0 18px 16px; font-size: 12.5px; font-weight: 700; color: var(--theme); }

.console-cta-band { background: var(--console-ink); color: #fff; border-radius: 24px; }
.console-cta-inner { padding: 50px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.console-cta-inner h3 { font-size: 22px; margin: 0 0 6px; color: #fff; }
.console-cta-inner p { margin: 0; color: #AEB8CB; font-size: 14px; max-width: 44ch; }
.console-cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

.console-day-picker, .console-time-picker { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; flex-wrap: wrap; }
.console-day-btn { min-width: 64px; text-align: center; }

/* ============================================================
   Premium header navigation — top-level icons + search
   ============================================================ */
.header-main .main-menu ul li {
    margin-inline-end: 20px;
}
.header-main .main-menu ul li a {
    font-size: 14.5px;
}
@media (min-width: 1200px) and (max-width: 2559px) {
    .header-main .main-menu ul li {
        margin-inline-end: 12px;
    }
    .header-right.d-flex.align-items-center.mt-0 {
        gap: 14px;
        margin-right: 8px;
    }
    .header-main .main-menu ul li a {
        font-size: 13.5px;
    }
    .header-main .main-menu ul li a .nav-top-icon {
        margin-right: 6px;
        font-size: 12.5px;
    }
    .header-search-toggle {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }
    /* Contact is already reachable via the Apply Now CTA and the topbar phone/WhatsApp links,
       so it's the first to give way if a 1200-1920px-class desktop is still too tight. */
    .header-main .main-menu ul li a {
        white-space: nowrap;
    }
}
.header-main .main-menu ul li a .nav-top-icon {
    margin-right: 8px;
    margin-left: 0;
    font-size: 14px;
    color: var(--theme);
    transition: color 0.25s ease;
}
.header-main .main-menu ul li a:hover .nav-top-icon,
.header-main .main-menu ul li.active a .nav-top-icon {
    color: var(--theme-2);
}

/* ---- Header search ---- */
.header-search-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--header);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
    flex: none;
}
.header-search-toggle:hover {
    border-color: var(--theme);
    color: var(--theme);
}
.header-search-panel {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(16, 20, 30, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 90px 20px 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.header-search-panel.is-open {
    opacity: 1;
    visibility: visible;
}
.header-search-box {
    width: 100%;
    max-width: 640px;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    transform: translateY(-14px);
    transition: transform 0.2s ease;
}
.header-search-panel.is-open .header-search-box {
    transform: translateY(0);
}
.header-search-field {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
}
.header-search-field i.fa-magnifying-glass { color: var(--theme); font-size: 18px; }
.header-search-field input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    color: var(--header);
    font-family: inherit;
}
.header-search-close {
    border: none;
    background: var(--bg);
    color: var(--text);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
}
.header-search-close:hover { background: var(--theme); color: var(--white); }
.header-search-results {
    max-height: 420px;
    overflow-y: auto;
    padding: 8px 0;
}
.header-search-results a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    text-decoration: none;
    color: var(--header);
}
.header-search-results a:hover { background: var(--bg); }
.header-search-results a i {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--theme);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex: none;
}
.header-search-results .hsr-title { font-size: 14.5px; font-weight: 600; }
.header-search-results .hsr-type {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text);
    margin-left: auto;
    flex: none;
}
.header-search-empty {
    padding: 30px 22px;
    text-align: center;
    color: var(--text);
    font-size: 14px;
}
.header-search-hint {
    padding: 14px 22px;
    font-size: 12.5px;
    color: var(--text);
    border-top: 1px solid var(--border);
}
.header-search-hint b { color: var(--header); }

/* ============================================================
   Footer cookie preference — informational only, never blocks page access
   ============================================================ */
.footer-cookie-pref {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.footer-cookie-label {
    color: rgba(255, 255, 255, 0.5);
}
.footer-cookie-btn {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.footer-cookie-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}
.footer-cookie-btn.is-active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--header);
}
@media (prefers-reduced-motion: reduce) {
    .footer-cookie-btn { transition: none; }
}

/* ============================================================
   Enquiry Now popup/modal
   ============================================================ */
html.va-enquiry-modal-open {
    overflow: hidden;
}
.enquiry-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}
.enquiry-modal.is-open {
    display: flex;
}
.enquiry-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 18, 32, 0.62);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.28s ease;
}
.enquiry-modal.is-visible .enquiry-modal-backdrop {
    opacity: 1;
}
.enquiry-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 860px;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 40px 90px rgba(11, 18, 32, 0.4);
    margin: auto;
    transform: translateY(28px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.enquiry-modal.is-visible .enquiry-modal-dialog {
    transform: translateY(0);
    opacity: 1;
}
.enquiry-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.16);
    color: var(--white);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.2s ease;
}
.enquiry-modal-close:hover {
    background: rgba(255, 255, 255, 0.32);
}
.enquiry-modal-body {
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    border-radius: 20px;
}
.enquiry-modal-header {
    background: linear-gradient(135deg, var(--theme-2) 0%, var(--theme-2-dark) 100%);
    color: var(--white);
    padding: 34px 40px 28px;
    border-radius: 20px 20px 0 0;
}
.enquiry-modal-header h2 {
    color: var(--white);
    font-size: 24px;
    margin-bottom: 8px;
}
.enquiry-modal-header p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 14.5px;
    margin: 0;
}
.enquiry-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.enquiry-section {
    padding: 26px 40px;
    border-bottom: 1px solid var(--border);
}
.enquiry-section:last-of-type {
    border-bottom: none;
}
.enquiry-section h3 {
    font-size: 16px;
    color: var(--header);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.enquiry-section h3 i {
    color: var(--theme-2);
    font-size: 15px;
}
.enquiry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
}
.enquiry-field-full {
    grid-column: 1 / -1;
}
.enquiry-field label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--header);
    margin-bottom: 7px;
}
.enquiry-field input,
.enquiry-field select,
.enquiry-field textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text);
    background: var(--white);
    outline: none;
    transition: border-color 0.2s ease;
}
.enquiry-field input:focus,
.enquiry-field select:focus,
.enquiry-field textarea:focus {
    border-color: var(--theme-2);
}
.enquiry-field select {
    appearance: none;
    -webkit-appearance: none;
    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' fill='none' stroke='%2355607A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 34px;
}
.enquiry-field textarea {
    resize: vertical;
    min-height: 80px;
}
.enquiry-phone-input {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.enquiry-phone-prefix {
    padding: 11px 12px;
    background: var(--bg);
    color: var(--header);
    font-weight: 600;
    font-size: 14px;
    border-right: 1px solid var(--border);
}
.enquiry-phone-input input {
    border: none;
    border-radius: 0;
}
.enquiry-phone-input input:focus {
    border: none;
}
.enquiry-error {
    display: block;
    color: #C0392B;
    font-size: 12.5px;
    margin-top: 6px;
    min-height: 0;
}
.enquiry-field input.is-invalid,
.enquiry-field select.is-invalid,
.enquiry-field .enquiry-phone-input.is-invalid {
    border-color: #C0392B;
}

.enquiry-upload-hint {
    font-size: 13px;
    color: var(--text);
    margin-bottom: 16px;
}
.enquiry-upload-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.enquiry-upload-box {
    border: 1.5px dashed var(--border);
    border-radius: 12px;
    padding: 14px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.enquiry-upload-box.is-dragover {
    border-color: var(--theme-2);
    background: var(--bg);
}
.enquiry-upload-drop {
    text-align: center;
    cursor: pointer;
    padding: 10px 6px;
}
.enquiry-upload-drop i {
    font-size: 20px;
    color: var(--theme-2);
    margin-bottom: 8px;
    display: block;
}
.enquiry-upload-drop span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--header);
}
.enquiry-upload-drop small {
    display: block;
    font-size: 11px;
    color: var(--text);
    margin-top: 3px;
}
.enquiry-upload-note {
    font-size: 11.5px;
    color: #A9720F;
    background: #FDF1DF;
    padding: 8px 10px;
    border-radius: 8px;
    margin: 10px 0 0;
    line-height: 1.5;
}
.enquiry-upload-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.enquiry-upload-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 11.5px;
}
.enquiry-upload-chip i.file-icon {
    color: var(--theme-2);
}
.enquiry-upload-chip .chip-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--header);
    font-weight: 500;
}
.enquiry-upload-chip .chip-size {
    color: var(--text);
    flex-shrink: 0;
}
.enquiry-upload-chip .chip-remove {
    border: none;
    background: none;
    color: #C0392B;
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
}
.enquiry-upload-chip.chip-error {
    background: #FCE8E6;
    color: #C0392B;
}
.enquiry-upload-chip.chip-error .chip-name {
    color: #C0392B;
}

.enquiry-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
    cursor: pointer;
    margin-bottom: 14px;
}
.enquiry-checkbox input {
    margin-top: 3px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--theme-2);
}

.enquiry-form-error {
    margin: 0 40px 16px;
    padding: 12px 16px;
    background: #FCE8E6;
    color: #C0392B;
    border-radius: 10px;
    font-size: 13.5px;
}

.enquiry-submit-bar {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 22px 40px 30px;
    position: sticky;
    bottom: 0;
    background: var(--white);
    border-top: 1px solid var(--border);
}
.enquiry-btn-primary,
.enquiry-btn-secondary {
    border: none;
    border-radius: 30px;
    padding: 13px 28px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.enquiry-btn-primary {
    background: var(--theme);
    color: var(--white);
    min-width: 168px;
}
.enquiry-btn-primary:hover {
    background: var(--theme-2);
    transform: translateY(-1px);
}
.enquiry-btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}
.enquiry-btn-secondary {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
}
.enquiry-btn-secondary:hover {
    background: #EDEFF4;
}
.enquiry-btn-spinner {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--white);
    animation: enquirySpin 0.7s linear infinite;
}
@keyframes enquirySpin {
    to { transform: rotate(360deg); }
}

.enquiry-success {
    padding: 48px 40px;
    text-align: center;
}
.enquiry-success-icon {
    font-size: 52px;
    color: #16A34A;
    margin-bottom: 16px;
}
.enquiry-success h2 {
    font-size: 23px;
    color: var(--header);
    margin-bottom: 10px;
}
.enquiry-success p {
    font-size: 14px;
    color: var(--text);
    max-width: 480px;
    margin: 0 auto 18px;
    line-height: 1.7;
}
.enquiry-tracking-code {
    background: linear-gradient(135deg, var(--theme-2) 0%, var(--theme-2-dark) 100%);
    border-radius: 12px;
    padding: 16px 24px;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}
.enquiry-tracking-code .etc-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.75);
}
.enquiry-tracking-code .etc-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 0.03em;
}
.enquiry-success-warn {
    background: #FBF0DE;
    color: #A9720F;
    font-size: 12.5px;
    border-radius: 8px;
    padding: 10px 16px;
    max-width: 480px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}
.enquiry-success-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    max-width: 480px;
    margin: 0 auto 24px;
    text-align: left;
    background: var(--bg);
    border-radius: 12px;
    padding: 18px 20px;
}
.enquiry-success-grid label {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text);
    opacity: 0.75;
    margin-bottom: 2px;
}
.enquiry-success-grid span {
    font-size: 13.5px;
    color: var(--header);
    font-weight: 500;
}
.enquiry-success-warnings {
    font-size: 12.5px;
    color: #A9720F;
    max-width: 460px;
    margin: -8px auto 18px;
}
.enquiry-success-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.enquiry-success-actions .enquiry-btn-primary,
.enquiry-success-actions .enquiry-btn-secondary {
    text-decoration: none;
}

@media (max-width: 767px) {
    .enquiry-modal {
        padding: 0;
        align-items: flex-end;
    }
    .enquiry-modal-dialog {
        max-width: 100%;
        border-radius: 18px 18px 0 0;
        max-height: 92vh;
    }
    .enquiry-modal-body {
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
    }
    .enquiry-modal-header {
        border-radius: 18px 18px 0 0;
        padding: 26px 22px 22px;
    }
    .enquiry-section {
        padding: 20px 22px;
    }
    .enquiry-grid {
        grid-template-columns: 1fr;
    }
    .enquiry-upload-grid {
        grid-template-columns: 1fr 1fr;
    }
    .enquiry-form-error {
        margin: 0 22px 16px;
    }
    .enquiry-submit-bar {
        padding: 16px 22px 20px;
        flex-direction: column-reverse;
    }
    .enquiry-btn-primary,
    .enquiry-btn-secondary {
        width: 100%;
    }
}
@media (max-width: 480px) {
    .enquiry-upload-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Quick Enquiry dialogue ("Get Assistance" header CTA + floating
   widget) — compact multi-step version of the enquiry modal above.
   ============================================================ */
html.va-qe-modal-open {
    overflow: hidden;
}
.qe-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}
.qe-modal.is-open {
    display: flex;
}
.qe-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 18, 32, 0.62);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.28s ease;
}
.qe-modal.is-visible .qe-modal-backdrop {
    opacity: 1;
}
.qe-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 40px 90px rgba(11, 18, 32, 0.4);
    margin: auto;
    padding: 40px 40px 32px;
    transform: translateY(28px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.qe-modal.is-visible .qe-modal-dialog {
    transform: translateY(0);
    opacity: 1;
}
.qe-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.2s ease, color 0.2s ease;
}
.qe-modal-close:hover {
    background: var(--theme);
    color: var(--white);
}
.qe-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.qe-progress {
    margin-bottom: 22px;
    padding-right: 30px;
}
.qe-progress-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 8px;
}
.qe-progress-track {
    height: 5px;
    border-radius: 4px;
    background: var(--bg);
    overflow: hidden;
}
.qe-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--theme) 0%, var(--gold) 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.qe-step h2 {
    font-size: 21px;
    color: var(--header);
    margin-bottom: 6px;
    outline: none;
}
.qe-sub {
    font-size: 13.5px;
    color: var(--text);
    margin-bottom: 20px;
}
.qe-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-bottom: 16px;
}
.qe-back:hover {
    color: var(--theme);
}

.qe-service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.qe-service-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 4px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: var(--white);
    padding: 16px 16px 14px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.qe-service-card:hover {
    border-color: var(--theme-2);
    box-shadow: 0 8px 22px rgba(11, 18, 32, 0.08);
    transform: translateY(-1px);
}
.qe-service-card:focus-visible,
.qe-service-card.is-selected {
    border-color: var(--theme);
    box-shadow: 0 0 0 3px rgba(14, 165, 160, 0.12);
}
.qe-service-icon {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 4px;
}
.qe-service-label {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--header);
}
.qe-service-subtitle {
    font-size: 11.5px;
    color: var(--text);
    line-height: 1.4;
}

.qe-step2-panel h2 {
    font-size: 18px;
}
.qe-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text);
    resize: vertical;
    min-height: 100px;
    outline: none;
    transition: border-color 0.2s ease;
}
.qe-textarea:focus {
    border-color: var(--theme-2);
}
.qe-textarea.is-invalid {
    border-color: #C0392B;
}

.qe-option-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 18px;
}
.qe-option-btn {
    border: 1.5px solid var(--border);
    border-radius: 30px;
    background: var(--white);
    color: var(--header);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 18px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.qe-option-btn:hover {
    border-color: var(--theme-2);
}
.qe-option-btn.is-selected {
    background: var(--theme);
    border-color: var(--theme);
    color: var(--white);
}

.qe-extra-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    margin-bottom: 6px;
}
.qe-field {
    grid-column: span 1;
}
.qe-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--header);
    margin-bottom: 6px;
}
.qe-field input,
.qe-field select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text);
    background: var(--white);
    outline: none;
    transition: border-color 0.2s ease;
}
.qe-field input:focus,
.qe-field select:focus {
    border-color: var(--theme-2);
}
.qe-field select {
    appearance: none;
    -webkit-appearance: none;
    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' fill='none' stroke='%2355607A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 34px;
}
.qe-dynamic-field.is-invalid {
    border-color: #C0392B;
}
.qe-error {
    display: block;
    color: #C0392B;
    font-size: 12.5px;
    margin-top: 8px;
    min-height: 0;
}
.qe-continue-btn {
    width: 100%;
    border: none;
    border-radius: 30px;
    background: var(--theme);
    color: var(--white);
    font-size: 14.5px;
    font-weight: 600;
    padding: 14px 20px;
    margin-top: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s ease, transform 0.15s ease;
}
.qe-continue-btn:hover {
    background: var(--theme-2);
    transform: translateY(-1px);
}

.qe-contact-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 16px;
    margin-bottom: 6px;
}
.qe-contact-fields .qe-field:first-child,
.qe-contact-fields .qe-field:nth-child(4) {
    grid-column: 1 / -1;
}
.qe-phone-input {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.qe-phone-prefix {
    padding: 11px 12px;
    background: var(--bg);
    color: var(--header);
    font-weight: 600;
    font-size: 14px;
    border-right: 1px solid var(--border);
}
.qe-phone-input input {
    border: none;
    border-radius: 0;
}
.qe-phone-input input:focus {
    border: none;
}
.qe-phone-input.is-invalid {
    border-color: #C0392B;
}
.qe-form-error {
    background: #FDEDEC;
    color: #C0392B;
    font-size: 13px;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 4px 0 16px;
}
.qe-submit-btn {
    width: 100%;
    border: none;
    border-radius: 30px;
    background: var(--theme);
    color: var(--white);
    font-size: 15px;
    font-weight: 700;
    padding: 15px 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.2s ease, transform 0.15s ease;
}
.qe-submit-btn:hover {
    background: var(--theme-2);
    transform: translateY(-1px);
}
.qe-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}
.qe-btn-spinner {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--white);
    animation: enquirySpin 0.7s linear infinite;
}

.qe-success {
    padding: 12px 4px 4px;
    text-align: center;
}
.qe-success-icon {
    font-size: 50px;
    color: #16A34A;
    margin-bottom: 14px;
}
.qe-success h2 {
    font-size: 22px;
    color: var(--header);
    margin-bottom: 8px;
}
.qe-success p {
    font-size: 14px;
    color: var(--text);
    margin: 0 auto 16px;
    line-height: 1.6;
}
.qe-ref-box {
    background: linear-gradient(135deg, var(--theme-2) 0%, var(--theme-2-dark) 100%);
    border-radius: 12px;
    padding: 14px 24px;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}
.qe-ref-box span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.75);
}
.qe-ref-box strong {
    font-size: 20px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 0.03em;
}
.qe-success-note {
    font-size: 13px;
    color: var(--text);
    margin-bottom: 22px;
}
.qe-success-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.qe-btn-primary,
.qe-btn-secondary,
.qe-btn-ghost {
    border: none;
    border-radius: 30px;
    padding: 12px 24px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.qe-btn-primary {
    background: var(--theme);
    color: var(--white);
}
.qe-btn-primary:hover {
    background: var(--theme-2);
    color: var(--white);
    transform: translateY(-1px);
}
.qe-btn-secondary {
    background: #25D366;
    color: var(--white);
}
.qe-btn-secondary:hover {
    background: #1EBE5A;
    color: var(--white);
    transform: translateY(-1px);
}
.qe-btn-ghost {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
}
.qe-btn-ghost:hover {
    background: #EDEFF4;
}

@media (max-width: 767px) {
    .qe-modal {
        padding: 0;
        align-items: flex-end;
    }
    .qe-modal-dialog {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
        padding: 28px 22px 24px;
    }
    .qe-service-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .qe-extra-fields,
    .qe-contact-fields {
        grid-template-columns: 1fr;
    }
    .qe-contact-fields .qe-field:nth-child(4) {
        grid-column: 1 / -1;
    }
    .qe-success-actions {
        flex-direction: column;
    }
    .qe-btn-primary,
    .qe-btn-secondary,
    .qe-btn-ghost {
        width: 100%;
    }
}
@media (max-width: 380px) {
    .qe-service-grid {
        grid-template-columns: 1fr;
    }
}
@media (prefers-reduced-motion: reduce) {
    .qe-modal-backdrop,
    .qe-modal-dialog,
    .qe-service-card,
    .qe-continue-btn,
    .qe-submit-btn,
    .qe-btn-primary,
    .qe-btn-secondary {
        transition: none !important;
    }
}

/* ============================================================
   Applicant-facing visa tracking (track-application.php)
   ============================================================ */
.track-form-wrap {
    display: flex;
    justify-content: center;
}
.track-form-card {
    width: 100%;
    max-width: 500px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(11, 18, 32, 0.08);
    padding: 40px 36px;
    text-align: center;
}
.track-form-card h2 {
    font-size: 24px;
    color: var(--header);
    margin-bottom: 10px;
}
.track-sub {
    font-size: 14px;
    color: var(--text);
    line-height: 1.7;
    margin-bottom: 26px;
}
.track-alert {
    background: #FCE8E6;
    color: #C0392B;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13.5px;
    margin-bottom: 20px;
    text-align: left;
}
.track-form {
    text-align: left;
}
.track-field {
    margin-bottom: 16px;
}
.track-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--header);
    margin-bottom: 7px;
}
.track-field input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    outline: none;
}
.track-field input:focus {
    border-color: var(--theme-2);
}
.track-submit-btn {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
}

/* ---- Result dashboard ---- */
.track-dashboard {
    max-width: 780px;
    margin: 0 auto;
}
.track-dash-header {
    background: linear-gradient(135deg, var(--theme-2) 0%, var(--theme-2-dark) 100%);
    border-radius: 16px;
    padding: 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
}
.track-dash-header .td-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.75);
}
.track-dash-header .td-code {
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 0.02em;
}
.track-cancelled-banner {
    background: #FCE8E6;
    color: #C0392B;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 13.5px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.track-overview-card, .track-timeline-card, .track-docs-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 26px 28px;
    margin-bottom: 20px;
}
.track-overview-card h3, .track-timeline-card h3, .track-docs-card h3 {
    font-size: 16px;
    color: var(--header);
    margin-bottom: 18px;
}
.track-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}
.track-overview-grid label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text);
    opacity: 0.75;
    margin-bottom: 3px;
}
.track-overview-grid span {
    font-size: 14px;
    color: var(--header);
    font-weight: 500;
}
.track-status-badge {
    display: inline-block;
    background: var(--bg);
    color: var(--theme-2) !important;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 13px !important;
    font-weight: 700 !important;
}
.track-latest-message {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: 13.5px;
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.6;
}
.track-latest-message i {
    color: var(--theme-2);
    margin-top: 2px;
}

.track-timeline {
    display: flex;
    flex-direction: column;
}
.track-tl-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    padding-bottom: 24px;
}
.track-tl-step::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: var(--border);
}
.track-tl-step:last-child::before { display: none; }
.tl-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    border: 2px solid var(--border);
}
.track-tl-step.tl-done .tl-dot {
    background: #16A34A;
    border-color: #16A34A;
    color: var(--white);
}
.track-tl-step.tl-current .tl-dot {
    background: var(--theme);
    border-color: var(--theme);
    color: var(--white);
}
.track-tl-step.tl-na .tl-dot {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
    opacity: 0.6;
}
.tl-info { padding-top: 3px; }
.tl-label {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--header);
}
.track-tl-step.tl-pending .tl-label,
.track-tl-step.tl-na .tl-label {
    color: var(--text);
    font-weight: 500;
}
.tl-state {
    display: block;
    font-size: 12px;
    color: var(--text);
    margin-top: 2px;
}
.track-tl-step.tl-done .tl-state { color: #16A34A; }
.track-tl-step.tl-current .tl-state { color: var(--theme); font-weight: 600; }

.track-docs-card p {
    font-size: 14px;
    color: var(--text);
    margin: 0;
}
.track-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 10px;
}

@media (max-width: 600px) {
    .track-form-card { padding: 30px 22px; }
    .track-overview-grid { grid-template-columns: 1fr; }
    .track-dash-header, .track-overview-card, .track-timeline-card, .track-docs-card { padding: 20px; }
}

/* ============================================================
   Country x Visa-Purpose content pages (/countries/...)
   ============================================================ */
.visa-info-card {
    max-width: 1000px;
    margin: 0 auto;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 30px 34px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 30px;
}
@media (max-width: 991px) {
    .visa-info-card { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .visa-info-card { grid-template-columns: 1fr; padding: 24px 20px; }
}
.visa-info-card label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text);
    margin-bottom: 4px;
}
.visa-info-card span {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--header);
}
.visa-info-card span a { color: var(--theme-2); }
.visa-info-note {
    max-width: 1000px;
    margin: 14px auto 0;
    font-size: 12.5px;
    color: var(--text);
    text-align: center;
}

.visa-doc-groups {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 40px;
    max-width: 1000px;
    margin: 0 auto;
}
@media (max-width: 767px) {
    .visa-doc-groups { grid-template-columns: 1fr; }
}
.visa-doc-group h4 {
    font-size: 15px;
    color: var(--theme);
    margin-bottom: 14px;
}

.visa-fee-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}
@media (max-width: 767px) {
    .visa-fee-cols { grid-template-columns: 1fr; }
}
.visa-fee-col {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 24px;
}
.visa-fee-col h4 {
    font-size: 14px;
    color: var(--header);
    margin-bottom: 14px;
}
.visa-fee-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
}
.visa-fee-row:last-child { border-bottom: none; }
.visa-fee-row span { color: var(--text); }
.visa-fee-row strong { color: var(--header); }

/* ============================================================
   B2B Partner Enrollment (b2b-partner-register.php) — multi-step
   public registration form. Reuses the qe-modal's step/progress
   pattern sized for a full page instead of a dialog.
   ============================================================ */
.b2b-reg-section { background: var(--bg); }
.b2b-reg-card {
    max-width: 760px;
    margin: 0 auto;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(11, 18, 32, 0.08);
    padding: 40px 44px 44px;
}
.b2b-reg-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.b2b-reg-progress { margin-bottom: 28px; }
.b2b-reg-progress-label {
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
    color: var(--text); margin-bottom: 10px;
}
.b2b-reg-progress-track { height: 5px; border-radius: 4px; background: var(--bg); overflow: hidden; margin-bottom: 12px; }
.b2b-reg-progress-fill { height: 100%; background: linear-gradient(90deg, var(--theme) 0%, var(--gold) 100%); border-radius: 4px; transition: width 0.3s ease; }
.b2b-reg-progress-steps { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.b2b-reg-progress-steps span { font-size: 11.5px; font-weight: 600; color: var(--border); }
.b2b-reg-progress-steps span.is-active { color: var(--theme); }

.b2b-reg-step h2 { font-size: 22px; color: var(--header); margin-bottom: 6px; outline: none; }
.b2b-reg-sub { font-size: 13.5px; color: var(--text); margin-bottom: 24px; }
.b2b-back-btn {
    display: inline-flex; align-items: center; gap: 6px; border: none; background: none;
    color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; margin-bottom: 16px;
}
.b2b-back-btn:hover { color: var(--theme); }

.b2b-reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-bottom: 8px; }
.b2b-field-full { grid-column: 1 / -1; }
.b2b-field label, .b2b-radio-label, .b2b-group-label {
    display: block; font-size: 13px; font-weight: 600; color: var(--header); margin-bottom: 7px;
}
.b2b-group-label { margin-top: 22px; }
.b2b-field input, .b2b-field select {
    width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px;
    font-size: 14px; color: var(--text); background: var(--white); outline: none; transition: border-color 0.2s ease;
}
.b2b-field input:focus, .b2b-field select:focus { border-color: var(--theme); }
.b2b-field select {
    appearance: none; -webkit-appearance: none;
    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' fill='none' stroke='%2355607A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px;
}
.b2b-select-wide { width: 100%; max-width: 320px; margin-bottom: 8px; }
.b2b-field input.is-invalid, .b2b-field select.is-invalid, .is-invalid { border-color: #C0392B !important; }
.b2b-error { display: block; color: #C0392B; font-size: 12.5px; margin-top: 6px; min-height: 0; }

.b2b-radio-row { display: flex; gap: 10px; }
.b2b-radio-pill {
    display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--border);
    border-radius: 30px; padding: 8px 18px; font-size: 13.5px; font-weight: 600; color: var(--header); cursor: pointer;
}
.b2b-radio-pill input { accent-color: var(--theme); }

.b2b-phone-input { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.b2b-phone-prefix { padding: 11px 12px; background: var(--bg); color: var(--header); font-weight: 600; font-size: 14px; border-right: 1px solid var(--border); }
.b2b-phone-input input { border: none !important; border-radius: 0; }
.b2b-phone-input input:focus { border: none !important; }
.b2b-phone-input.is-invalid { border-color: #C0392B; }

.b2b-chip-grid { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 8px; }
.b2b-chip { position: relative; }
.b2b-chip input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.b2b-chip span {
    display: inline-block; border: 1.5px solid var(--border); border-radius: 30px; padding: 9px 16px;
    font-size: 13px; font-weight: 600; color: var(--header); transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.b2b-chip input:checked ~ span { background: var(--theme); border-color: var(--theme); color: var(--white); }
.b2b-chip input:focus-visible ~ span { border-color: var(--theme); }

.b2b-continue-btn, .b2b-submit-btn {
    width: 100%; border: none; border-radius: 30px; background: var(--theme); color: var(--white);
    font-size: 14.5px; font-weight: 700; padding: 15px 20px; margin-top: 20px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: background 0.2s ease, transform 0.15s ease;
}
.b2b-continue-btn:hover, .b2b-submit-btn:hover { background: var(--theme-2); transform: translateY(-1px); }
.b2b-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.b2b-btn-spinner {
    width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4);
    border-top-color: var(--white); animation: b2bSpin 0.7s linear infinite;
}
@keyframes b2bSpin { to { transform: rotate(360deg); } }

.b2b-otp-box { background: var(--bg); border-radius: 14px; padding: 20px; margin-top: 8px; }
.b2b-otp-box.is-verified { background: #E7F6EC; }
.b2b-otp-head { display: flex; gap: 12px; margin-bottom: 14px; }
.b2b-otp-head i { color: var(--theme); font-size: 20px; margin-top: 2px; }
.b2b-otp-head strong { display: block; color: var(--header); font-size: 14px; margin-bottom: 3px; }
.b2b-otp-head p { font-size: 12.5px; color: var(--text); margin: 0; }
.b2b-otp-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.b2b-otp-row input {
    flex: 1; min-width: 140px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;
    font-size: 15px; letter-spacing: 0.15em; text-align: center;
}
.b2b-otp-btn {
    border: none; border-radius: 30px; background: var(--theme); color: var(--white); font-weight: 700;
    font-size: 13px; padding: 10px 20px; cursor: pointer; white-space: nowrap;
}
.b2b-otp-btn:hover { background: var(--theme-2); }
.b2b-otp-resend { border: none; background: none; color: var(--text); font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.b2b-otp-status { font-size: 12.5px; margin-top: 10px; color: var(--text); }
.b2b-otp-status.is-ok { color: #16A34A; font-weight: 600; }
.b2b-otp-status.is-error { color: #C0392B; font-weight: 600; }

.b2b-terms-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 20px; }
.b2b-terms-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.b2b-terms-item input { margin-top: 3px; accent-color: var(--theme); flex-shrink: 0; }
.b2b-terms-item a { color: var(--theme); text-decoration: underline; }
.b2b-declaration-box { background: var(--bg); border-radius: 12px; padding: 16px 18px; margin-bottom: 8px; }
.b2b-form-error { background: #FDEDEC; color: #C0392B; font-size: 13px; border-radius: 10px; padding: 10px 14px; margin: 12px 0; }

.b2b-reg-success { text-align: center; padding: 20px 10px; }
.b2b-success-icon { font-size: 50px; color: #16A34A; margin-bottom: 14px; }
.b2b-reg-success h2 { font-size: 24px; color: var(--header); margin-bottom: 8px; }
.b2b-reg-success p { font-size: 14px; color: var(--text); margin: 0 auto 16px; line-height: 1.6; }
.b2b-ref-box {
    background: linear-gradient(135deg, var(--theme-2) 0%, var(--theme-2-dark) 100%); border-radius: 12px;
    padding: 16px 24px; display: inline-flex; flex-direction: column; gap: 4px; margin-bottom: 20px;
}
.b2b-ref-box span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.75); }
.b2b-ref-box strong { font-size: 22px; font-weight: 700; color: var(--white); letter-spacing: 0.03em; }
.b2b-success-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; max-width: 400px; margin: 0 auto 24px;
    text-align: left; background: var(--bg); border-radius: 12px; padding: 16px 20px;
}
.b2b-success-grid label { display: block; font-size: 10.5px; text-transform: uppercase; color: var(--text); opacity: 0.75; margin-bottom: 2px; }
.b2b-success-grid span { font-size: 13.5px; color: var(--header); font-weight: 600; }
.b2b-success-note { font-size: 13px; color: var(--text); max-width: 480px; margin: 0 auto 24px; }
.b2b-success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.b2b-btn-secondary, .b2b-btn-ghost {
    border: none; border-radius: 30px; padding: 12px 24px; font-size: 13.5px; font-weight: 600;
    cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform 0.15s ease, background 0.2s ease;
}
.b2b-btn-secondary { background: var(--theme); color: var(--white); }
.b2b-btn-secondary:hover { background: var(--theme-2); color: var(--white); transform: translateY(-1px); }
.b2b-btn-ghost { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.b2b-btn-ghost:hover { background: #EDEFF4; }

@media (max-width: 767px) {
    .b2b-reg-card { padding: 28px 20px 32px; border-radius: 16px; }
    .b2b-reg-grid { grid-template-columns: 1fr; }
    .b2b-success-grid { grid-template-columns: 1fr; }
    .b2b-success-actions { flex-direction: column; }
    .b2b-btn-secondary, .b2b-btn-ghost { width: 100%; }
    .b2b-reg-progress-steps span { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .b2b-continue-btn, .b2b-submit-btn, .b2b-chip span, .b2b-reg-progress-fill { transition: none !important; }
}

/* ---- B2B partner login / forgot-password (b2b-login.php, b2b-forgot-password.php) ---- */
.b2b-auth-card { max-width: 460px; }
.b2b-auth-title { font-size: 24px; color: var(--header); margin-bottom: 6px; }
.b2b-auth-links { text-align: right; margin: -8px 0 4px; }
.b2b-auth-links a { font-size: 12.5px; color: var(--theme); font-weight: 600; text-decoration: none; }
.b2b-auth-links a:hover { text-decoration: underline; }
.b2b-auth-footer { text-align: center; font-size: 13px; color: var(--text); margin: 22px 0 0; }
.b2b-auth-footer a { color: var(--theme); font-weight: 600; text-decoration: none; }
.b2b-auth-footer a:hover { text-decoration: underline; }
.b2b-auth-step[hidden] { display: none; }
.b2b-auth-success { text-align: center; padding: 10px 4px 4px; }
.b2b-auth-success i { font-size: 44px; color: #16A34A; margin-bottom: 12px; }
.b2b-auth-success p { font-size: 13.5px; color: var(--text); margin: 0 0 18px; }

/* ---- B2B partner document upload (b2b-partner-documents.php) ---- */
.b2b-doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 6px; }
.b2b-doc-box { border: 1.5px solid var(--border); border-radius: 14px; padding: 16px 18px; transition: border-color 0.2s ease; }
.b2b-doc-box.is-uploading { border-color: var(--theme); }
.b2b-doc-box-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.b2b-doc-box-head strong { font-size: 13.5px; color: var(--header); }
.b2b-doc-badge {
    display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 4px 10px; border-radius: 20px; white-space: nowrap;
}
.b2b-doc-pending { background: #FDF1DF; color: #A9720F; }
.b2b-doc-verified { background: #E7F6EC; color: #16A34A; }
.b2b-doc-rejected { background: #FCE8E6; color: #C0392B; }
.b2b-doc-expired { background: var(--bg); color: var(--text); }
/* Forex document statuses (forex_doc_status_class()) reuse the same
   badge shell as .b2b-doc-badge — just the color mapping differs
   slightly since Forex has an extra "Under Verification" state. */
.forex-doc-not-uploaded { background: var(--bg); color: var(--text); }
.forex-doc-uploaded { background: #FDF1DF; color: #A9720F; }
.forex-doc-under-verification { background: #FDF1DF; color: #A9720F; }
.forex-doc-verified { background: #E7F6EC; color: #16A34A; }
.forex-doc-rejected { background: #FCE8E6; color: #C0392B; }
.b2b-doc-reject-note { font-size: 11.5px; color: #C0392B; background: #FDEDEC; border-radius: 8px; padding: 6px 10px; margin: 0 0 10px; }
.b2b-doc-box-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.b2b-doc-filename { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--theme); text-decoration: none; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b2b-doc-filename-empty { font-size: 12px; color: var(--text); opacity: 0.7; }
.b2b-doc-upload-btn {
    flex-shrink: 0; border: 1.5px solid var(--theme); color: var(--theme); border-radius: 30px; padding: 6px 14px;
    font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.b2b-doc-upload-btn:hover { background: var(--theme); color: var(--white); }
.b2b-doc-progress { display: block; font-size: 11.5px; color: var(--text); margin-top: 8px; }
.b2b-doc-progress.is-error { color: #C0392B; }
.b2b-doc-hint { font-size: 12px; color: var(--text); opacity: 0.8; margin-top: 4px; }
@media (max-width: 600px) {
    .b2b-doc-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   B2B Partner Portal app shell (includes/partner-layout-top.php,
   b2b-dashboard.php, and every later logged-in partner page).
   Mirrors admin/assets/admin.css's .crm-* shell structurally (sidebar +
   topbar + content), but restyled with the public site's own teal/gold
   brand tokens plus the same deep navy gradient already used for the
   hero/topbar/footer/admin-login chrome, rather than introducing a new
   unrelated color scheme just for this one app shell.
   ============================================================ */
.pp-shell { display: flex; min-height: 100vh; background: var(--bg); }
.pp-sidebar {
    width: 250px; flex-shrink: 0; background: linear-gradient(180deg, var(--theme-2-dark) 0%, var(--theme-2) 100%);
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.pp-brand { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px 18px; }
.pp-brand img { height: 30px; width: auto; }
.pp-brand span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); }
.pp-nav { flex: 1; padding: 6px 12px; display: flex; flex-direction: column; gap: 2px; }
.pp-nav-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
    color: rgba(255,255,255,0.78); font-size: 13px; font-weight: 600; text-decoration: none;
}
.pp-nav-item i { width: 16px; text-align: center; }
.pp-nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.pp-nav-item.active { background: rgba(255,255,255,0.14); color: #fff; }
.pp-nav-item.is-soon { cursor: default; opacity: 0.55; }
.pp-soon-pill {
    margin-left: auto; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    background: rgba(255,255,255,0.15); color: #fff; padding: 2px 7px; border-radius: 20px;
}
.pp-sidebar-user { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-top: 1px solid rgba(255,255,255,0.12); }
.pp-user-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: var(--theme-2-dark);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.pp-user-avatar.small { width: 30px; height: 30px; font-size: 12px; }
.pp-user-meta { flex: 1; min-width: 0; }
.pp-user-name { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-user-role { font-size: 10.5px; color: rgba(255,255,255,0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-user-logout { color: rgba(255,255,255,0.6); flex-shrink: 0; }
.pp-user-logout:hover { color: #fff; }

.pp-sidebar-toggle {
    display: none; position: fixed; top: 14px; left: 14px; z-index: 200; width: 40px; height: 40px;
    border-radius: 10px; border: none; background: var(--theme-2-dark); color: #fff; font-size: 16px;
}

.pp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pp-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: var(--white); border-bottom: 1px solid var(--border); padding: 16px 28px;
}
.pp-topbar-title { font-size: 16px; font-weight: 700; color: var(--header); }
.pp-topbar-meta { display: flex; align-items: center; gap: 14px; position: relative; }
.pp-ref-chip { font-size: 11.5px; font-weight: 700; color: var(--theme-2); background: var(--bg); padding: 5px 12px; border-radius: 20px; }
.pp-content { padding: 26px 28px 40px; }

.pp-icon-btn {
    position: relative; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--white); color: var(--text); display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 13.5px; flex-shrink: 0;
}
.pp-icon-btn:hover { background: var(--bg); color: var(--header); }
.pp-badge {
    position: absolute; top: -5px; right: -5px; background: #E63946; color: #fff; font-size: 10px; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 20px; display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.pp-notif-panel {
    position: absolute; top: calc(100% + 10px); right: 46px; width: 320px; max-height: 400px; overflow-y: auto;
    background: var(--white); border-radius: 12px; box-shadow: 0 20px 50px rgba(11,18,32,0.16); border: 1px solid var(--border); z-index: 50;
}
.pp-notif-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-bottom: 1px solid var(--border); color: var(--header); }
.pp-notif-row:last-child { border-bottom: none; }
.pp-notif-row.is-unread { background: rgba(14,165,160,0.08); }
.pp-notif-row .nr-msg { font-size: 13px; font-weight: 500; }
.pp-notif-row .nr-time { font-size: 11px; color: var(--text); opacity: 0.75; }
.pp-notif-empty { padding: 20px; text-align: center; font-size: 12.5px; color: var(--text); }

.pp-chat-thread { display: flex; flex-direction: column; gap: 12px; max-height: 460px; overflow-y: auto; margin-bottom: 16px; padding-right: 4px; }
.pp-chat-bubble { max-width: 70%; padding: 10px 14px; border-radius: 12px; background: var(--bg); }
.pp-chat-bubble.is-me { align-self: flex-end; background: rgba(14,165,160,0.12); }
.pp-chat-bubble.is-staff { align-self: flex-start; }
.pp-chat-meta { font-size: 10.5px; color: var(--text); opacity: 0.7; margin-bottom: 3px; }
.pp-chat-body { font-size: 13px; color: var(--header); line-height: 1.5; white-space: pre-wrap; }
.pp-chat-form textarea { resize: vertical; }

.pp-page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.pp-page-title { font-size: 22px; font-weight: 700; color: var(--header); margin: 0 0 4px; }
.pp-page-subtitle { font-size: 13px; color: var(--text); margin: 0; display: flex; align-items: center; gap: 8px; }
.pp-status-chip { display: inline-block; font-size: 11px; font-weight: 700; background: #E7F6EC; color: #16A34A; padding: 3px 11px; border-radius: 20px; }

.pp-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.pp-kpi { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }
.pp-kpi-icon {
    width: 34px; height: 34px; border-radius: 9px; background: rgba(14,165,160,0.1); color: var(--theme);
    display: flex; align-items: center; justify-content: center; font-size: 14px; margin-bottom: 12px;
}
.pp-kpi-value { font-size: 24px; font-weight: 700; color: var(--header); }
.pp-kpi-label { font-size: 12px; color: var(--text); margin-top: 3px; }

.pp-grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.pp-card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 22px; }
.pp-card h3 { font-size: 14.5px; color: var(--header); margin: 0 0 16px; }
.pp-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.pp-panel-item label { display: block; font-size: 11px; color: var(--text); opacity: 0.75; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 3px; }
.pp-panel-item .val { font-size: 13.5px; color: var(--header); font-weight: 600; }
.pp-empty-note { font-size: 13px; color: var(--text); line-height: 1.6; margin: 0; }

@media (max-width: 991px) {
    .pp-sidebar-toggle { display: flex; align-items: center; justify-content: center; }
    .pp-sidebar { position: fixed; left: -260px; top: 0; z-index: 199; transition: left 0.2s ease; box-shadow: 0 0 40px rgba(0,0,0,0.2); }
    .pp-sidebar.is-open { left: 0; }
    .pp-topbar { padding-left: 66px; }
    .pp-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .pp-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .pp-kpi-grid { grid-template-columns: 1fr; }
    .pp-panel-grid { grid-template-columns: 1fr; }
    .pp-content { padding: 20px 16px 32px; }
    .pp-topbar { padding: 14px 16px 14px 60px; }
}

/* ---- Partner portal: filters, tables, status badges, success panel
   (b2b-applications.php, b2b-application.php, b2b-new-application.php) ---- */
.pp-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.pp-filter-bar input[type="text"], .pp-filter-bar select {
    border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 13px; min-width: 220px;
}
.pp-filter-btn {
    border: 1px solid var(--theme); background: var(--theme); color: #fff; border-radius: 8px; padding: 9px 18px;
    font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
}
.pp-filter-btn.is-ghost { background: var(--white); color: var(--text); border-color: var(--border); }
.pp-filter-btn.is-ghost:hover { background: var(--bg); }

.pp-table-wrap { overflow-x: auto; }
table.pp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.pp-table thead th {
    text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text);
    opacity: 0.7; padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.pp-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.pp-table tr:hover td { background: var(--bg); }
.pp-cell-name { font-weight: 600; }
.pp-cell-name a { color: var(--theme-2); text-decoration: none; }
.pp-cell-name a:hover { text-decoration: underline; }
.pp-cell-sub { color: var(--text); opacity: 0.85; }
.pp-empty { text-align: center; padding: 40px; color: var(--text); opacity: 0.7; font-size: 13px; }

.pp-status-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 11px; border-radius: 20px; white-space: nowrap; }
.pp-status-badge.status-new-enquiry,
.pp-status-badge.status-contacted { background: #E7F1FC; color: #1B6FC9; }
.pp-status-badge.status-documents-pending,
.pp-status-badge.status-documents-under-review,
.pp-status-badge.status-additional-documents-required,
.pp-status-badge.status-payment-pending { background: #FDF1DF; color: #A9720F; }
.pp-status-badge.status-documents-approved,
.pp-status-badge.status-application-preparation,
.pp-status-badge.status-application-submitted,
.pp-status-badge.status-under-embassy-processing,
.pp-status-badge.status-decision-received { background: #EAF0FF; color: #3355CC; }
.pp-status-badge.status-visa-approved,
.pp-status-badge.status-passport-ready,
.pp-status-badge.status-completed { background: #E7F6EC; color: #16A34A; }
.pp-status-badge.status-visa-refused,
.pp-status-badge.status-cancelled { background: #FCE8E6; color: #C0392B; }

.pp-status-badge.b2b-quote-draft { background: var(--bg); color: var(--text); }
.pp-status-badge.b2b-quote-sent { background: #EAF0FF; color: #3355CC; }
.pp-status-badge.b2b-quote-accepted { background: #E7F6EC; color: #16A34A; }
.pp-status-badge.b2b-quote-rejected { background: #FCE8E6; color: #C0392B; }
.pp-status-badge.b2b-quote-revision-requested { background: #FDF1DF; color: #A9720F; }
.pp-status-badge.b2b-quote-expired { background: #FCE8E6; color: #C0392B; }

.pp-status-badge.b2b-inv-draft { background: var(--bg); color: var(--text); }
.pp-status-badge.b2b-inv-issued { background: #EAF0FF; color: #3355CC; }
.pp-status-badge.b2b-inv-paid { background: #E7F6EC; color: #16A34A; }
.pp-status-badge.b2b-inv-cancelled { background: #FCE8E6; color: #C0392B; }
.pp-status-badge.b2b-inv-partially-paid { background: #FDF1DF; color: #A9720F; }
.pp-status-badge.b2b-inv-overdue { background: #FCE8E6; color: #C0392B; }

.pp-announce-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.pp-announce {
    display: flex; gap: 12px; background: rgba(14,165,160,0.08); border: 1px solid rgba(14,165,160,0.25); border-radius: 12px;
    padding: 14px 18px;
}
.pp-announce i { color: var(--theme); font-size: 16px; margin-top: 2px; }
.pp-announce strong { display: block; color: var(--header); font-size: 13.5px; margin-bottom: 4px; }
.pp-announce p { margin: 0; font-size: 12.5px; color: var(--text); line-height: 1.5; }

.pp-doc-alert {
    display: flex; gap: 12px; background: #FDF1DF; border: 1px solid #F0D9A8; border-radius: 12px;
    padding: 16px 18px; margin-bottom: 20px;
}
.pp-doc-alert i { color: #A9720F; font-size: 18px; margin-top: 2px; }
.pp-doc-alert strong { display: block; color: var(--header); font-size: 13.5px; margin-bottom: 6px; }
.pp-doc-alert ul { margin: 0 0 8px; padding-left: 18px; font-size: 12.5px; color: var(--text); }
.pp-doc-alert p { margin: 0; font-size: 12px; color: var(--text); opacity: 0.85; }

.pp-perm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
.pp-perm-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text); font-weight: 500; }
@media (max-width: 600px) {
    .pp-perm-grid { grid-template-columns: 1fr; }
}

.pp-quote-total {
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
    font-size: 19px; font-weight: 700; color: #16A34A;
}
.pp-quote-response-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.pp-quote-response-form { display: flex; flex-direction: column; gap: 8px; }
.pp-quote-response-form label { font-size: 12.5px; font-weight: 600; color: var(--header); }
.pp-quote-response-form textarea {
    width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 13px; resize: vertical;
}
@media (max-width: 700px) {
    .pp-quote-response-grid { grid-template-columns: 1fr; }
}

.pp-success { text-align: center; padding: 20px 10px; }
.pp-success i { font-size: 48px; color: #16A34A; margin-bottom: 14px; }
.pp-success h3 { font-size: 22px; color: var(--header); margin-bottom: 8px; }
.pp-success p { font-size: 14px; color: var(--text); margin: 0 auto 20px; }

.pp-updates-list { display: flex; flex-direction: column; gap: 14px; }
.pp-update-item { border-left: 3px solid var(--theme); padding: 4px 0 4px 14px; }
.pp-update-status { font-size: 13.5px; font-weight: 700; color: var(--header); }
.pp-update-message { font-size: 13px; color: var(--text); margin-top: 3px; }
.pp-update-meta { font-size: 11px; color: var(--text); opacity: 0.7; margin-top: 4px; }

@media (max-width: 700px) {
    table.pp-table thead { display: none; }
    table.pp-table, table.pp-table tbody, table.pp-table tr, table.pp-table td { display: block; width: 100%; }
    table.pp-table tr { border-bottom: 1px solid var(--border); padding: 10px 16px; }
    table.pp-table td { border-bottom: none; padding: 3px 0; white-space: normal; }
}

/* ================================================================
   PREMIUM HOMEPAGE REDESIGN — shared rhythm + per-section polish.
   Deliberately CSS-only (no markup restructuring) so every existing
   section keeps its current HTML/JS (swipers, tabs, forms) working
   exactly as-is; only the visual treatment changes.
   ================================================================ */

/* ---- Section-title system: refined eyebrow pill used by every
   section on the page, replacing the template's plain uppercase
   label with a tinted, rounded badge + a leading dot. ---- */
.section-title .sub-title,
.section-title .sub-title-2 {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: rgba(14, 165, 160, 0.1);
    color: var(--theme-2) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    padding: 7px 16px 7px 14px;
    border-radius: 30px;
    margin-bottom: 16px;
}
.section-title .sub-title::before,
.section-title .sub-title-2::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--theme);
}
/* Dark section variant (the "Visa Services for Popular Destinations"
   band, which sits on the theme-2 gradient — .header-bg) needs a
   light-on-dark pill instead of the default tinted one. */
.header-bg .section-title .sub-title-2 {
    background: rgba(255, 255, 255, 0.14) !important;
    color: var(--white) !important;
}
.header-bg .section-title .sub-title-2::before {
    background: var(--gold);
}
.section-title h2 {
    letter-spacing: -0.5px;
}

/* ---- Buttons: consistent premium hover-lift across every .theme-btn
   on the page (hero, cards, CTAs) instead of the template's flat
   color-swap hover. ---- */
.theme-btn {
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}
.theme-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(14, 165, 160, 0.28);
}
.theme-btn.style-2:hover,
.hero-2 .hero-content .hero-button .theme-btn.style-2:hover {
    box-shadow: 0 14px 30px rgba(6, 12, 30, 0.22);
}

/* ---- Trust strip: icon badges instead of bare Font Awesome glyphs ---- */
.trust-item {
    padding: 4px 0;
}
.trust-item i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 165, 160, 0.1);
    border-radius: 10px;
    font-size: 16px !important;
}

/* ---- Service slider cards: turn the flat, radius-less grid cells
   into proper elevated cards (the hover image-reveal effect and all
   its JS/swiper wiring is untouched — overflow:hidden on the card
   clips the reveal to the new rounded corners automatically). ---- */
.service-wrapper-2 .service-box-item {
    border-radius: 20px !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
    transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
}
.service-wrapper-2 .service-box-item:hover {
    box-shadow: 0 24px 55px rgba(16, 24, 40, 0.16);
    transform: translateY(-6px);
    border-color: transparent !important;
}

/* ---- Feature stat callout: the template shipped with a broken
   placeholder graphic here (a real file that just renders its own
   "251 X 124" pixel dimensions as text — never swapped for an actual
   number). Replaced with a real CSS number instead of another image. ---- */
.count-number {
    font-family: "Space Grotesk", serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: var(--theme-2);
    background: rgba(14, 165, 160, 0.1);
    border-radius: 14px;
    padding: 14px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
}

/* ---- Feature "destinations covered" + choose-us icon rows: add
   depth on hover to the already-decent circular icon badges. ---- */
.feature-wrapper-2 .feature-content .feature-count {
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.05);
    border-radius: 16px;
}
.choose-us-wrapper-2 .feature-content .choose-us-box {
    box-shadow: 0 6px 20px rgba(16, 24, 40, 0.04);
}
.choose-us-wrapper-2 .feature-content .choose-us-box:hover {
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.1);
    transform: translateY(-3px);
}
.feature-image img,
.choose-us-image img {
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(16, 24, 40, 0.14);
}

/* ---- How-it-works: numbered badge gets a soft ring + gradient ---- */
.how-it-works-step .step-num {
    background: linear-gradient(135deg, var(--theme) 0%, var(--theme-2) 100%);
    box-shadow: 0 0 0 6px rgba(14, 165, 160, 0.08);
}

/* ---- Visa-by-destination slider cards (on the dark band) + the
   flag-thumb strip beneath it ---- */
.visa-provide-box {
    box-shadow: 0 20px 50px rgba(6, 12, 30, 0.35);
}
.flag-thumb {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.flag-thumb:hover {
    transform: translateY(-4px);
}
.flag-thumb img {
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(6, 12, 30, 0.25);
}

/* ---- Apostille section image ---- */
.section-padding .thumb img {
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.16);
}

/* ---- Service packages: the template's second card used a negative
   z-index + negative-margin "fan" trick to peek out from behind the
   first card — but z-index applies to flex items even at
   position:static, and it ended up stacking the whole card below
   paint level, making the "Fully Assisted" plan invisible/unreachable.
   Laid out as two plain side-by-side cards instead, which is both
   more robust and reads cleaner anyway. ---- */
.pricing-wrapper-2 .pricing-right-items {
    gap: 24px;
    flex-wrap: wrap;
}
.pricing-wrapper-2 .pricing-right-items .pricing-box-items.style-2 {
    margin-left: 0 !important;
    z-index: auto !important;
    border: 1px solid var(--border);
}

/* ---- Service packages (formerly "pricing plans"): the markup no
   longer includes a giant $NN/mo price (a visa consultancy's real
   fees vary per case, quoted individually — see the admin B2B
   quotation builder), just a plan name + one-line description, so
   the template's price-driven header layout (absolutely-positioned
   plan name expecting a big <h2> price next to it) needs resetting
   to a normal flow. ---- */
.pricing-wrapper-2 .pricing-right-items .pricing-box-items {
    box-shadow: 0 20px 50px rgba(6, 12, 30, 0.28);
}
.pricing-wrapper-2 .pricing-right-items .pricing-box-items .pricing-header {
    padding-bottom: 20px !important;
}
.pricing-wrapper-2 .pricing-right-items .pricing-box-items .pricing-header .sub-texts {
    position: static !important;
    display: block !important;
    font-size: 26px !important;
    margin-bottom: 10px;
}
.pricing-tier-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
.pricing-box-items.style-2 .pricing-tier-desc {
    color: var(--text);
}

/* ---- Testimonials: add depth to the already-branded speech box ---- */
.testimonial-wrapper-2 .testimonial-item .testimonial-left .testimonial-box {
    box-shadow: 0 24px 60px rgba(11, 110, 103, 0.22);
}
.testimonial-image img {
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.16);
}

/* ---- Certification tabs: segmented-control look instead of plain
   underlined nav links ---- */
.visa-certification-content .visa-item > .nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--bg);
    padding: 6px;
    border-radius: 12px;
    margin-bottom: 24px;
}
.visa-certification-content .visa-item > .nav .nav-link {
    border-radius: 8px !important;
    padding: 9px 16px !important;
    font-size: 13.5px;
    font-weight: 600;
}
.visa-certification-content .visa-item > .nav .nav-link.active {
    background: var(--white);
    box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08);
    color: var(--theme) !important;
}
.visa-image img {
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.14);
}

/* ---- News / blog cards ---- */
.news-main-item {
    border-radius: 20px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.news-main-item:hover {
    box-shadow: 0 20px 50px rgba(16, 24, 40, 0.1);
    transform: translateY(-4px);
}
.news-main-item .news-right-content .news-image img {
    border-radius: 16px;
}

/* ---- Country explorer chips: light hover-lift to match the rest
   of the page's card language ---- */
.country-explorer-section .country-chip {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.country-explorer-section .country-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(16, 24, 40, 0.08);
    border-color: var(--theme) !important;
}

/* ---- Decorative art panels: several stock-photo slots across this
   template (feature/choose-us images, the testimonial photo, the
   apostille thumb, the certification image, the three blog thumbs)
   shipped with broken placeholder graphics — real image files that
   just render their own pixel dimensions as text (e.g. "612X547"),
   never swapped for real photography. Rather than leave a visibly
   broken image on a "premium" page, or fabricate stock photos, these
   slots use a drawn gradient panel + icon, matching the same
   illustration-led treatment already used successfully in the hero. ---- */
.va-art-panel {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 320px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--theme-2-dark) 0%, var(--theme-2) 55%, var(--theme-2-light) 100%);
}
.va-art-panel i {
    position: relative;
    z-index: 2;
    font-size: 72px;
    color: rgba(255, 255, 255, 0.92);
}
.va-art-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(420px circle at 75% 20%, rgba(255, 255, 255, 0.16), transparent 60%),
        radial-gradient(360px circle at 20% 85%, rgba(255, 255, 255, 0.08), transparent 60%);
}
.va-art-panel-sm {
    min-height: 220px;
    border-radius: 24px;
}
.va-art-panel-sm i {
    font-size: 52px;
}
/* News/blog thumbs: lighter tinted variant (three identical dark
   gradient blocks in a row would look repetitive at that size). */
.va-art-panel-tint {
    min-height: 200px;
    background: var(--bg);
    border-radius: 16px;
}
.va-art-panel-tint i {
    color: var(--theme);
    font-size: 48px;
}
.testimonial-wrapper-2 .testimonial-image .va-art-panel {
    border-radius: 16px;
    min-height: 0;
}

/* ---- Testimonial avatars: the client photo assets (client-1..4)
   are the same kind of broken placeholder ("80X80" rendered as
   text) as the panel images above — replaced with initials avatars. ---- */
.va-avatar {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--theme) 0%, var(--theme-2) 100%);
    color: var(--white);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.5px;
}
.testimonial-wrapper-2 .testimonial-item .testimonial-left .info-item .va-avatar {
    border: 1px solid var(--theme);
}
.testimonial-wrapper-2 .testimonial-item .right-item .client-image .va-avatar {
    width: 80px;
    height: 80px;
    min-width: 0;
    border-radius: 8px;
    font-size: 20px;
}

/* ---- Forex customer portal: login (OTP) + My Requests list ---- */
.fx-login-hint {
    margin-top: 18px;
    font-size: 13px;
    color: var(--text);
    text-align: center;
}
.fx-login-hint a { color: var(--theme); font-weight: 600; }
.fx-login-otp-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.fx-login-link-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--theme);
    cursor: pointer;
    text-decoration: underline;
}
.fx-login-link-btn:hover { color: var(--theme-2); }

.fx-portal-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.fx-portal-header h2 { margin: 0 0 4px; font-size: 26px; color: var(--header); }
.fx-portal-header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.fx-portal-empty {
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
}
.fx-portal-empty p { margin-bottom: 18px; color: var(--text); }

.fx-portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.fx-portal-card {
    display: block;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.fx-portal-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(16, 24, 40, 0.1);
    border-color: var(--theme);
}
.fx-portal-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.fx-portal-ref { font-weight: 700; color: var(--header); font-size: 14px; letter-spacing: 0.02em; }
.fx-portal-card-body { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.fx-portal-service { font-weight: 600; color: var(--header); font-size: 15px; }
.fx-portal-meta { font-size: 13px; color: var(--text); }
.fx-portal-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
    font-size: 12.5px;
    color: var(--text);
}
.fx-portal-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--theme);
    font-size: 11px;
    transition: background 0.2s ease, color 0.2s ease;
}
.fx-portal-card:hover .fx-portal-card-arrow { background: var(--theme); color: var(--white); }

@media (max-width: 767px) {
    .fx-portal-header { flex-direction: column; align-items: flex-start; }
    .fx-portal-grid { grid-template-columns: 1fr; }
}

/* Secondary "My Requests" link alongside the Forex mega-panel's primary CTA */
.mega-bottom-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.header-main .main-menu ul li .submenu .mega-bottom a.mega-cta-btn.mega-cta-btn-ghost {
    background: transparent !important;
    color: var(--va-navy) !important;
    border: 1.5px solid var(--border);
}
.header-main .main-menu ul li .submenu .mega-bottom a.mega-cta-btn.mega-cta-btn-ghost:hover {
    background: var(--bg) !important;
}

/* ---- Preloader: real brand logo artwork (icon badge + "VISA AGENCY"
   wordmark, cropped from the supplied logo file into
   assets/img/logo/visaagency-badge.png / visaagency-wordmark.png),
   replacing the old oversized letter-flip "V I S A" animation
   (main.css .txt-loading / .letters-loading) which spelled out four
   detached, wide-tracked capital letters unrelated to the brand. ---- */
.preloader-mark {
    position: relative;
    width: 8em;
    height: 8em;
    margin: 0 auto 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.preloader-mark .spinner {
    position: absolute;
    inset: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}
.preloader-badge {
    width: 54%;
    height: 54%;
    object-fit: contain;
    animation: preloaderBadgePulse 1.8s ease-in-out infinite;
}
@keyframes preloaderBadgePulse {
    0%, 100% { opacity: 0.7; transform: scale(0.94); }
    50% { opacity: 1; transform: scale(1); }
}
.preloader-wordmark {
    display: block;
    width: 230px;
    height: auto;
    margin: 0 auto 10px;
    user-select: none;
}
@media (max-width: 767px) {
    .preloader-mark { width: 6.5em; height: 6.5em; margin-bottom: 1em; }
    .preloader-wordmark { width: 170px; }
}

/* ---- /locations directory: state/city link cards ---- */
.location-dir-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 24px;
    height: 100%;
}
.location-dir-card h4 { margin: 0 0 12px; font-size: 17px; }
.location-dir-card h4 a { color: var(--header); }
.location-dir-card h4 a:hover { color: var(--theme); }
.location-dir-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.location-dir-card ul a { font-size: 13.5px; color: var(--text); }
.location-dir-card ul a:hover { color: var(--theme); }
.location-dir-card p { margin: 0; color: var(--text); font-size: 14px; }

/* ---- Download Center: printable on-page templates ---- */
.dl-template-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 30px;
    margin-bottom: 28px;
}
.dl-template-card .dl-template-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.dl-template-card .dl-template-body {
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--header);
    white-space: pre-line;
    font-family: Georgia, 'Times New Roman', serif;
}
.dl-print-btn {
    background: var(--va-navy);
    color: var(--white) !important;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s ease;
}
.dl-print-btn:hover {
    background: var(--va-royal);
}
@media print {
    .no-print, header, .header-top-section, footer, .qhelp-fab, .back-to-top, .mobile-sticky-cta,
    .breadcrumb-wrapper, #preloader {
        display: none !important;
    }
    .dl-template-card {
        border: none;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    body {
        background: #fff !important;
    }
}

/* ============================================================
   About page — wayfinding/terminal-style components (ab2-*)
   Reuses the site's own tokens (--theme, --theme-2, --gold,
   --header, --text, --border) and fonts — no new palette.
   ============================================================ */
.ab2-board {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    margin-top: 34px;
}
.ab2-board-row {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-family: monospace;
}
.ab2-board-row .code { font-size: 0.78rem; color: var(--gold); letter-spacing: 0.06em; font-weight: 700; }
.ab2-board-row .label { font-size: 0.92rem; color: rgba(255, 255, 255, 0.78); font-family: "Inter", sans-serif; font-weight: 500; }
.ab2-board-row .value { font-size: 1.05rem; font-weight: 700; color: var(--white); letter-spacing: 0.03em; }
@media (max-width: 600px) {
    .ab2-board-row { grid-template-columns: 50px 1fr; row-gap: 4px; }
    .ab2-board-row .value { grid-column: 2; font-size: 0.95rem; }
}

.ab2-agency-wrap { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 48px; align-items: start; }
@media (max-width: 880px) { .ab2-agency-wrap { grid-template-columns: 1fr; gap: 32px; } }
.ab2-agency-list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ab2-agency-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; color: var(--header); }
.ab2-agency-list li::before { content: ""; width: 8px; height: 8px; margin-top: 7px; background: var(--gold); flex: none; }
.ab2-mini-board { background: var(--theme-2); padding: 26px 26px 22px; color: var(--white); }
.ab2-mini-board .mb-head { font-family: monospace; font-size: 0.72rem; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.05em; margin-bottom: 16px; text-transform: uppercase; }
.ab2-mb-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, 0.16); font-family: monospace; font-size: 0.84rem; }
.ab2-mb-row:first-of-type { border-top: none; }
.ab2-mb-row .k { color: rgba(255, 255, 255, 0.6); }
.ab2-mb-row .v { color: var(--gold); font-weight: 700; text-align: right; }

.ab2-ticket-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .ab2-ticket-grid { grid-template-columns: 1fr; } }
.ab2-ticket { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--gold); padding: 26px 22px 22px; position: relative; }
.ab2-ticket .num { position: absolute; top: 16px; right: 18px; font-family: "Space Grotesk", sans-serif; font-weight: 800; font-size: 2.1rem; color: var(--border); }
.ab2-ticket a { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--header); text-decoration: none; display: inline-block; margin: 6px 0 10px; padding-right: 50px; }
.ab2-ticket a:hover { color: var(--theme); }
.ab2-ticket p { margin: 0; font-size: 0.9rem; color: var(--text); }

.ab2-placards { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.ab2-placard { display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--border); }
.ab2-placard .tile { width: 56px; height: 56px; background: var(--theme-2); flex: none; display: flex; align-items: center; justify-content: center; }
.ab2-placard .tile svg { width: 26px; height: 26px; stroke: var(--gold); fill: none; stroke-width: 1.8; }
.ab2-placard h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; color: var(--header); text-transform: none; }
.ab2-placard p { margin: 0; font-size: 0.92rem; color: var(--text); max-width: 60ch; }

.ab2-city-wrap { display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 44px; align-items: start; }
@media (max-width: 860px) { .ab2-city-wrap { grid-template-columns: 1fr; gap: 26px; } }
.ab2-city-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.ab2-city-tab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 4px; border-bottom: 1px solid var(--border); border-left: none; border-right: none; border-top: none; background: none; width: 100%; text-align: left; cursor: pointer; font-family: "Inter", sans-serif; font-size: 1rem; font-weight: 600; color: var(--header); }
.ab2-city-tab .code { font-family: monospace; font-size: 0.76rem; color: var(--theme); font-weight: 700; }
.ab2-city-tab[aria-selected="true"] { color: var(--theme); }
.ab2-city-tab[aria-selected="true"] .code { color: var(--gold); }
.ab2-city-panel { background: var(--white); border: 1px solid var(--border); padding: 30px 28px; transition: opacity 0.18s ease; }
.ab2-city-panel .role { font-family: monospace; font-size: 0.76rem; color: var(--theme); font-weight: 700; margin-bottom: 10px; display: block; text-transform: uppercase; }
.ab2-city-panel h3 { font-size: 1.6rem; color: var(--header); margin: 0 0 14px; text-transform: none; }
.ab2-city-panel p { margin: 0; font-size: 0.96rem; color: var(--text); max-width: 52ch; }

.ab2-mini-board-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 700px) { .ab2-mini-board-pair { grid-template-columns: 1fr; } }

.ab2-ticket-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 980px) { .ab2-ticket-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ab2-ticket-grid-4 { grid-template-columns: 1fr; } }
.ab2-ticket-role { font-family: monospace; font-size: 0.72rem; color: var(--theme); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }