/* ==========================================================================
   FaithTrip Brand System — v2
   ========================================================================== */

:root {
    --ft-primary: #0D1B5E;
    --ft-primary-light: #1A3A8F;
    --ft-gold: #F5A623;
    --ft-gold-dark: #E09515;
    --ft-red: #C62828;
}

/* ── Announcement Bar (marquee) ── */
.ft-announcement-bar {
    background: #0D1B5E;
    color: #fff;
    padding: 8px 40px 8px 0;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    z-index: 1001;
    overflow: hidden;
}
.ft-ann-marquee-wrap {
    overflow: hidden;
    white-space: nowrap;
}
.ft-ann-marquee {
    display: inline-block;
    animation: ftMarquee 28s linear infinite;
    white-space: nowrap;
    padding-left: 100%;
}
.ft-ann-marquee:hover { animation-play-state: paused; }
.ft-ann-marquee span { color: #fff; }
.ft-ann-marquee span strong { color: #F5A623; }
@keyframes ftMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ft-announcement-close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    z-index: 2;
}
.ft-announcement-close:hover { color: #fff; }

/* ── Login Pill Button ── */
.ft-login-pill {
    background: linear-gradient(135deg, #F5A623 0%, #e8940f 100%) !important;
    color: #0D1B5E !important;
    border: none !important;
    border-radius: 50px;
    padding: 6px 14px;
    font-size: .76rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: all .2s;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(245,166,35,.4);
    letter-spacing: .1px;
    line-height: 1.4;
}
.ft-login-pill:hover {
    background: linear-gradient(135deg, #ffb733 0%, #F5A623 100%) !important;
    box-shadow: 0 4px 14px rgba(245,166,35,.55);
    transform: translateY(-1px);
    color: #0D1B5E !important;
}

/* ── Navbar Social Icons ── */
.ft-nav-social { display: flex; align-items: center; gap: 4px; }
.ft-nav-social-link {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem;
    text-decoration: none !important;
    color: #555;
    background: #f5f5f5;
    transition: all .2s;
    border: 1.5px solid transparent;
}
.ft-nav-social-link:hover {
    color: var(--sc, #0D1B5E) !important;
    background: #fff;
    border-color: var(--sc, #0D1B5E);
    transform: translateY(-2px);
}

/* ── FaithTrip Navbar ── */
.ft-navbar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 12px rgba(13,27,94,0.08);
    padding: 0;
    max-width: 100vw;
}
.ft-navbar-inner {
    display: flex;
    align-items: center;
    height: 64px;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}
.ft-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    flex-shrink: 0;
}
.ft-logo-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.45rem;
    letter-spacing: -0.5px;
    line-height: 1;
}
.ft-logo-faith { color: #0D1B5E; }
.ft-logo-trip  { color: #F5A623; }
.ft-nav-links  { display: flex; align-items: center; gap: 2px; flex: 1; }
.ft-nav-link {
    color: #0D1B5E;
    text-decoration: none !important;
    padding: 5px 7px;
    border-radius: 6px;
    font-size: 0.86rem;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}
.ft-nav-link:hover {
    color: #0D1B5E;
    background: rgba(13,27,94,0.07);
}
.ft-nav-link.active {
    color: #0D1B5E;
    background: rgba(13,27,94,0.06);
    box-shadow: inset 0 -2px 0 #F5A623;
}
.ft-nav-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* A phone (st53, 15 Oct 2026): the theme switch, "Login / Sign Up" and the menu button needed 223px beside the
   logo, so at a 360px window every storefront page scrolled sideways by 25px (65px at 320). Under 420px the login
   button keeps its icon, and its words stay for screen readers only. */
@media (max-width: 419.98px) {
    .ft-nav-right { gap: 2px; min-width: 0; }
    .ft-nav-right .ft-login-pill { padding: 8px 11px; }
    .ft-login-pill-text {
        position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
}
.ft-hotline { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; color: #777; white-space: nowrap; }
.ft-hotline-number { font-weight: 700; color: #0D1B5E; text-decoration: none !important; font-size: 0.88rem; }
.ft-hotline-number:hover { color: #F5A623; }
.ft-currency-btn {
    border: 2px solid #0D1B5E;
    border-radius: 20px;
    padding: 5px 13px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0D1B5E;
    background: #eef1fb;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}
.ft-currency-btn:hover { background: #0D1B5E; color: #fff; border-color: #0D1B5E; }
.ft-login-btn {
    background: #0D1B5E;
    color: #fff !important;
    border: none;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.ft-login-btn:hover { background: #1A3A8F; }
.ft-menu-toggle { background: none; border: none; color: #0D1B5E; font-size: 1.4rem; cursor: pointer; padding: 6px; }
/* The hamburger is the whole navigation on a phone, and it carried a hard-coded
   navy with no dark value — 1.13:1 on the dark navbar, i.e. invisible, on every
   page. It never showed up in any earlier sweep because the button is
   display:none above 768px, so a desktop-width audit never measured it.

   Height only, deliberately: a min-width of 44px widened the button by 12px,
   and the navbar row had no slack left — it pushed the hamburger's right edge
   to 387px on a 375px screen, clipping it. Vertical room was free, horizontal
   room was not. 32x44 still clears the 24x24 that WCAG 2.5.8 asks for. */
[data-theme="dark"] .ft-menu-toggle { color: #eaeef8; }
.ft-menu-toggle { min-height: 44px; }
.ft-mobile-menu { display: none; flex-direction: column; padding: 12px 0; border-top: 1px solid #f0f0f0; }
.ft-mobile-menu.open { display: flex; }
/* display:block matters. .ft-mobile-menu is a flex column, which blockifies its
   DIRECT children — so the top-level links stacked correctly by accident, while
   the links nested one level deeper inside the "Others" and "Transport"
   sub-panels stayed inline and ran together, wrapping mid-item with each
   entry's emoji stranded at the end of the previous line. */
.ft-mobile-link { display: block; color: #0D1B5E; text-decoration: none !important; padding: 10px 8px; border-radius: 6px; font-size: 0.9rem; font-weight: 500; transition: all 0.2s; }
.ft-mobile-link:hover { color: #0D1B5E; background: rgba(13,27,94,0.06); }
.ft-mobile-link.active { color: #0D1B5E; background: rgba(13,27,94,0.08); border-left: 3px solid #F5A623; padding-left: 10px; }

/* ── Hero ── */
.ft-b2c-hero {
    background: linear-gradient(160deg,#0D1B5E 0%,#1A3A8F 45%,#0A3572 100%);
    background-size: cover;
    background-position: center;
    padding: 60px 0 140px;
    position: relative;
    overflow: visible;
}
.ft-hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.ft-b2c-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 30%, rgba(245,166,35,.07) 0%, transparent 50%);
    pointer-events: none;
}
.ft-hero-text { text-align: center; padding: 0 16px 28px; position: relative; z-index: 2; }
.ft-hero-title { font-family: 'Poppins',sans-serif; font-size: 2.4rem; font-weight: 800; color: #fff; margin-bottom: 10px; line-height: 1.2; }
.ft-hero-title span { color: #F5A623; }
.ft-hero-subtitle { color: rgba(255,255,255,.75); font-size: 1rem; margin: 0; }

/* ── Service Tabs ── */
.ft-service-tabs { display: flex; gap: 4px; flex-wrap: wrap; position: relative; z-index: 2; padding: 0 8px; }
.ft-service-tab {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 20px;
    border-radius: 10px 10px 0 0;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.8);
    cursor: pointer; font-size: 0.88rem; font-weight: 600;
    border: none; text-decoration: none !important;
    transition: all 0.2s;
}
.ft-service-tab:hover { background: rgba(255,255,255,.2); color: #fff; }
.ft-service-tab.active { background: #fff; color: #0D1B5E; }
.ft-service-tab-icon {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
.ft-service-tab.active .ft-service-tab-icon { background: #F5A623; color: #fff; }

/* ── Search Wrapper ── */
.ft-search-wrapper {
    background: #fff;
    border-radius: 0 12px 12px 12px;
    padding: 20px 24px 24px;
    position: relative;
    z-index: 2;
    margin: 0 8px;
}

/* ── Fare Types ── */
.ft-fare-types { display: flex; gap: 24px; flex-wrap: wrap; padding: 14px 0 0; border-top: 1px solid #f0f0f0; margin-top: 12px; }
.ft-fare-type { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.86rem; color: #555; font-weight: 500; user-select: none; }
.ft-fare-type input[type="radio"] { accent-color: #F5A623; cursor: pointer; }
.ft-fare-type.ft-active { color: #F5A623; }

/* ── Shared Section ── */
.ft-section { padding: 72px 0; }
.ft-section-alt { background: #f8f9fa; }
.ft-section-head { margin-bottom: 28px; }
.ft-section-title { font-family: 'Poppins',sans-serif; font-size: 1.75rem; font-weight: 800; color: #0D1B5E; margin: 0 0 6px; }
.ft-section-underline { width: 44px; height: 4px; background: #F5A623; border-radius: 2px; margin-top: 8px; }
.ft-section-center { text-align: center; }
.ft-section-subtitle { color: #5b6270;   /* was #777: 4.18:1 at 14.7px, just under AA. */ font-size: 0.92rem; margin-top: 8px; max-width: 560px; margin-left: auto; margin-right: auto; }

/* ── Hot Deals ── */
.ft-deals-scroll { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.ft-deals-scroll::-webkit-scrollbar { display: none; }
.ft-deal-card { flex: 0 0 calc(33.333% - 14px); min-width: 260px; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.07); scroll-snap-align: start; transition: transform .2s,box-shadow .2s; cursor: pointer; background: #fff; }
.ft-deal-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.ft-deal-card img { width: 100%; height: 210px; object-fit: cover; display: block; }

/* ── Special Offers ── */
.ft-offers-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.ft-offers-right { display: flex; align-items: center; gap: 8px; }
.ft-filter-btn { padding: 7px 18px; border-radius: 20px; border: 1.5px solid #ddd; background: #fff; color: #555; font-size: 0.84rem; font-weight: 600; cursor: pointer; transition: all .2s; }
.ft-filter-btn.active, .ft-filter-btn:hover { background: #0D1B5E; color: #fff; border-color: #0D1B5E; }
.ft-nav-arrow { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid #ddd; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.85rem; color: #555; transition: all .2s; }
.ft-nav-arrow:hover { border-color: #0D1B5E; color: #0D1B5E; }
.ft-offers-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.ft-offer-card { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.06); transition: transform .2s; display: none; }
.ft-offer-card.ft-visible { display: block; }
.ft-offer-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.ft-offer-card img { width: 100%; height: 195px; object-fit: cover; display: block; }
.ft-offer-body { padding: 14px 16px; }
.ft-offer-title { font-weight: 700; color: #0D1B5E; font-size: .93rem; margin-bottom: 4px; }
.ft-offer-desc { color: #777; font-size: .82rem; margin-bottom: 10px; line-height: 1.5; }
.ft-offer-link { font-size: .82rem; font-weight: 600; color: #0D1B5E; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.ft-offer-link:hover { color: #F5A623; }

/* ── Airlines Grid ── */
.ft-airlines-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid #eee; border-radius: 12px; overflow: hidden; }
.ft-airline-row { display: flex; align-items: center; padding: 13px 16px; border-right: 1px solid #eee; border-bottom: 1px solid #eee; gap: 10px; cursor: pointer; transition: background .15s; text-decoration: none !important; color: inherit; }
.ft-airline-row:hover { background: #f8f9fa; }
.ft-airline-row:nth-child(4n) { border-right: none; }
.ft-airline-logo-wrap { width: 36px; height: 36px; border-radius: 50%; background: #f5f5f5; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.ft-airline-logo-wrap img { width: 100%; height: 100%; object-fit: contain; }
.ft-airline-name { flex: 1; font-size: .86rem; font-weight: 600; color: #0D1B5E; }
.ft-airline-chevron { color: #bbb; font-size: .7rem; }

/* ── Tour Packages ── */
.ft-tours-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 24px; }
.ft-tour-card { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.07); text-decoration: none !important; display: block; transition: transform .2s,box-shadow .2s; }
.ft-tour-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.ft-tour-img { width: 100%; height: 200px; object-fit: cover; display: block; }
.ft-tour-img-ph { width: 100%; height: 200px; background: linear-gradient(135deg,#0D1B5E,#1A3A8F); display: flex; align-items: center; justify-content: center; }
.ft-tour-body { padding: 16px; }
.ft-tour-name { font-weight: 700; font-size: .95rem; color: #0D1B5E; margin-bottom: 6px; }
.ft-tour-stars { color: #F59E0B; font-size: .82rem; }

/* ── Destinations Carousel ── */
.ft-dest-outer { position: relative; overflow: hidden; margin-top: 24px; }
.ft-dest-track { display: flex; gap: 20px; transition: transform .4s ease; }
.ft-dest-card { flex: 0 0 calc(25% - 15px); border-radius: 16px; overflow: hidden; position: relative; cursor: pointer; min-height: 240px; }
.ft-dest-card img { width: 100%; height: 240px; object-fit: cover; display: block; transition: transform .4s; }
.ft-dest-card:hover img { transform: scale(1.05); }
.ft-dest-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent,rgba(0,0,0,.65)); padding: 20px 14px 14px; }
.ft-dest-name { color: #fff; font-weight: 700; font-size: 1rem; }
.ft-dest-dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.ft-dest-dot { width: 8px; height: 8px; border-radius: 50%; background: #ddd; cursor: pointer; border: none; padding: 0; transition: all .2s; }
.ft-dest-dot.active { background: #0D1B5E; width: 20px; border-radius: 4px; }

/* ── Partner CTA ── */
.ft-partner-cta { background: linear-gradient(135deg,#b8d4f0 0%,#f0e2b8 100%); padding: 52px 0; }
.ft-partner-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ft-partner-title { font-family: 'Poppins',sans-serif; font-size: 1.8rem; font-weight: 800; color: #0D1B5E; margin-bottom: 8px; }
.ft-partner-desc { color: #555; font-size: .93rem; }
/* White on brand gold is 2.03:1. "Become a Partner" is the storefront's only
   route into agent registration and its label was a pale ghost on a pale gold
   pill — the agent funnel lost its entry point on the home page. Navy on gold
   is 7.76:1, matching every other gold control on the site. */
.ft-partner-btn { background: #F5A623; color: #0D1B5E; padding: 12px 32px; border-radius: 25px; font-weight: 700; text-decoration: none !important; font-size: .93rem; transition: all .2s; white-space: nowrap; display: inline-block; }
.ft-partner-btn:hover { background: #E09515; }

/* ── Routes ── */
.ft-routes-tabs { display: flex; justify-content: center; margin-bottom: 28px; }
.ft-routes-tab { padding: 10px 36px; border: 2px solid #0D1B5E; font-weight: 700; font-size: .92rem; cursor: pointer; transition: all .2s; background: #fff; color: #0D1B5E; }
.ft-routes-tab:first-child { border-radius: 25px 0 0 25px; }
.ft-routes-tab:last-child  { border-radius: 0 25px 25px 0; border-left: none; }
.ft-routes-tab.active { background: #0D1B5E; color: #fff; }
.ft-routes-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.ft-route-pill { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #eee; border-radius: 10px; text-decoration: none !important; transition: all .2s; background: #fff; }
.ft-route-pill:hover { border-color: #0D1B5E; background: #f8f9fa; }
.ft-route-airports { font-weight: 700; color: #0D1B5E; font-size: .86rem; }
.ft-route-names { font-size: .76rem; color: #5b6270;   /* was #888: 3.54:1 at 12px on the route chips */ line-height: 1.3; }
.ft-route-icon { color: #0D1B5E; font-size: .95rem; }
/* Thumbnail for a route that has a photograph. Sized to the icon it replaces
   so a mixed row of pills — some with a picture, some without — keeps one
   baseline and does not jump. */
.ft-route-thumb {
    width: 34px; height: 34px; flex: 0 0 34px;
    object-fit: cover; border-radius: 7px; display: block;
    background: #eef3ff;
}

/* ── App Download ── */
.ft-app-btns { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; }
.ft-app-store-btn img { height: 44px; border-radius: 8px; display: block; }

/* ── Footer ── */
.ft-footer { background: #fff; border-top: 1px solid #eee; padding: 52px 0 0; }
.ft-footer-logo { display: flex; align-items: center; gap: 8px; text-decoration: none !important; margin-bottom: 14px; }
.ft-footer-desc { color: #555; font-size: .87rem; line-height: 1.75; margin-bottom: 18px; }
.ft-footer-heading { font-weight: 800; font-size: .98rem; color: #0D1B5E; margin-bottom: 16px; }
.ft-footer-heading::after { content: ''; display: block; width: 32px; height: 3px; background: #F5A623; border-radius: 2px; margin-top: 6px; }
.ft-footer-links { list-style: none; padding: 0; margin: 0; }
.ft-footer-links li { margin-bottom: 10px; }
.ft-footer-links a { color: #555; text-decoration: none !important; font-size: .88rem; transition: color .2s; }
.ft-footer-links a:hover { color: #0D1B5E; }
.ft-footer-social { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.ft-social-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--sm-bg, #f0f4ff);
    color: var(--sm-color, #0D1B5E) !important;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none !important; font-size: 1rem;
    transition: transform .18s, box-shadow .18s;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.ft-social-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
    background: var(--sm-color, #0D1B5E) !important;
    color: #fff !important;
}
.ft-footer-certified { border-top: 1px solid #eee; padding: 20px 0; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 40px; }
/* Direct children only. The membership cards inside this strip are white
   by design and carry their own colours; a descendant selector painted
   their caption, name and number #777 on white — 4.48:1, just under AA,
   on all 41 public pages. */
.ft-footer-certified > span { font-size: .85rem; color: #767676; }
.ft-iata-badge { border: 1.5px solid #ddd; border-radius: 8px; padding: 6px 18px; font-size: .85rem; font-weight: 700; color: #0D1B5E; }
.ft-footer-copyright { background: #0D1B5E; text-align: center; padding: 14px; }
.ft-footer-copyright p { color: rgba(255,255,255,.75); font-size: .84rem; margin: 0; line-height: 1.8; }
.ft-footer-copyright a { color: #F5A623; text-decoration: none; }
.ft-we-accept-label { font-size: .78rem; font-weight: 700; color: #0D1B5E; display: flex; align-items: center; gap: 6px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em; }
.ft-we-accept-label::before { content: ''; display: inline-block; width: 7px; height: 7px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 0 2px rgba(34,197,94,.25); }
.ft-payment-logos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ft-pay-badge {
    background: #fff;
    border: 1.5px solid #e9ecef;
    border-radius: 8px;
    padding: 5px 10px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: box-shadow .18s, border-color .18s;
    min-width: 52px;
}

/* ── The navbar in the 992–1199 band ──────────────────────────────────────
   Restoring the Shop link made seven top-level items, and the bar then needed
   990px of content (logo 150 + links 463 + right cluster 377). Bootstrap's
   .container is capped at 960px in exactly this band — 1140px only from 1200px
   up — so the bar overflowed by 37px and dragged the whole page sideways.
   Tightened only where the room is short; ≥1200px keeps the original spacing.

   Note for later: an `overflow:hidden` guard on .ft-nav-links looks like the
   obvious way to stop a long CMS label ever pushing the page again. It is not
   — the dropdown panels are absolutely positioned INSIDE .ft-nav-links, so it
   clips the entire mega-menu away (verified with elementFromPoint: the click
   lands on the hero behind it). If the labels grow, raise the breakpoint
   instead. */
@media (min-width:992px) and (max-width:1199.98px) {
    .ft-nav-links { gap: 0; }
    .ft-nav-link  { padding-left: 4px; padding-right: 4px; font-size: .82rem; }
}

/* ── Responsive Navbar (CSS-only, no Bootstrap dependency) ── */
/* Desktop ≥992px: show nav links, hide hamburger + mobile menu */
@media (min-width:992px) {
    .ft-nav-links  { display: flex !important; }
    .ft-menu-toggle { display: none !important; }
    .ft-mobile-menu { display: none !important; }
}
/* Mobile <992px: hide nav links + hotline, show hamburger */
@media (max-width:991px) {
    .ft-nav-links  { display: none !important; }
    .ft-hotline    { display: none !important; }
    .ft-menu-toggle { display: flex !important; align-items: center; justify-content: center; }
    .ft-mobile-menu.open { display: flex !important; }
}
@media (max-width:991px) {
    .ft-airlines-grid { grid-template-columns: repeat(2,1fr); }
    .ft-offers-grid   { grid-template-columns: repeat(2,1fr); }
    .ft-tours-grid    { grid-template-columns: repeat(2,1fr); }
    .ft-routes-grid   { grid-template-columns: repeat(2,1fr); }
    .ft-dest-card     { flex: 0 0 calc(50% - 10px); }
}
@media (max-width:767px) {
    .ft-navbar-inner { height: 56px; }
    .ft-logo-text    { font-size: 1.2rem; }
    .ft-hero-title   { font-size: 1.7rem; }
    .ft-airlines-grid { grid-template-columns: repeat(2,1fr); }
    .ft-offers-grid  { grid-template-columns: 1fr; }
    .ft-tours-grid   { grid-template-columns: 1fr; }
    .ft-routes-grid  { grid-template-columns: 1fr; }
    .ft-section-title { font-size: 1.4rem; }
    .ft-partner-inner { flex-direction: column; text-align: center; }
    .ft-dest-card    { flex: 0 0 calc(100% - 10px); }
    .ft-deal-card    { flex: 0 0 260px; min-width: 260px; }
    .ft-currency-btn { display: none !important; }
    .ft-service-tab span { display: none; }
    .ft-service-tab  { padding: 8px 12px; }
}

/* ==========================================================================
   App Showcase Section (FanamTrip-style phone mockups)
   ========================================================================== */

.ft-app-showcase {
    background: linear-gradient(145deg, #e8efff 0%, #f5f8ff 40%, #eef4ff 70%, #e8efff 100%);
    padding: 72px 0;
    overflow: hidden;
    position: relative;
}
.ft-app-showcase::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13,27,94,.06) 0%, transparent 70%);
    pointer-events: none;
}
.ft-showcase-wrap {
    display: flex;
    align-items: center;
    gap: 48px;
}
.ft-showcase-text {
    flex: 1;
    max-width: 420px;
}
.ft-showcase-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(13,27,94,.08);
    color: #0D1B5E;
    font-size: .8rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
    letter-spacing: .3px;
}
.ft-showcase-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 2.1rem;
    font-weight: 800;
    color: #0D1B5E;
    line-height: 1.22;
    margin-bottom: 14px;
}
.ft-showcase-heading span { color: #8a5a00; }   /* was #F5A623: 1.76:1 on this pale band. Gold reads on navy, not on #e8efff. */
.ft-showcase-sub {
    color: #666;
    font-size: .93rem;
    line-height: 1.7;
    margin-bottom: 22px;
}
.ft-showcase-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
}
.ft-showcase-features li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .88rem;
    color: #444;
    margin-bottom: 9px;
    font-weight: 500;
}
.ft-showcase-features li i { color: #2e7d32; font-size: .85rem; flex-shrink: 0; }

/* Download buttons */
.ft-showcase-downloads {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.ft-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 22px;
    border-radius: 12px;
    text-decoration: none !important;
    transition: transform .18s, box-shadow .18s;
    border: 1.5px solid transparent;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    min-width: 158px;
}
.ft-dl-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.26); }

/* No app published yet. The badge stays in the layout — the section is about
   the app, and an empty gap would read as a broken page — but it stops
   pretending to be a link: no pointer, no lift on hover, no keyboard focus,
   and the label says "Coming soon" rather than "Download". Both badges were
   plain <a href="#"> before, which looked identical to a working one. */
.ft-dl-btn.ft-dl-soon {
    cursor: default;
    opacity: .58;
    box-shadow: none;
    filter: grayscale(.35);
}
.ft-dl-btn.ft-dl-soon:hover { transform: none; box-shadow: none; }
.ft-dl-note {
    margin: 12px 0 0;
    font-size: .78rem;
    line-height: 1.6;
    color: rgba(255,255,255,.72);
    max-width: 380px;
}
.ft-dl-note a { color: #F5A623; font-weight: 700; text-decoration: underline; }
.ft-dl-icon { width: 26px; height: 26px; flex-shrink: 0; }
.ft-dl-btn div { display: flex; flex-direction: column; line-height: 1.25; }
.ft-dl-btn div span { font-size: .65rem; font-weight: 500; opacity: .82; letter-spacing: .02em; }
.ft-dl-btn div strong { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.ft-dl-apple { background: #000; color: #fff !important; border-color: #222; }
.ft-dl-apple:hover { background: #1a1a1a; }
.ft-dl-google { background: #fff; color: #1a1a1a !important; border-color: #dadce0; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.ft-dl-google:hover { background: #f8f9fa; box-shadow: 0 6px 20px rgba(0,0,0,.18); }

.ft-showcase-qr {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1.5px solid #e0e7ff;
    border-radius: 10px;
    padding: 8px 14px;
}
.ft-showcase-qr img { width: 52px; height: 52px; }
.ft-showcase-qr span { font-size: .8rem; color: #555; font-weight: 600; }

/* Phone mockup group */
.ft-showcase-phones {
    flex: 1;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 480px;
    min-width: 0;
}

/* Base phone frame */
.ft-mock-phone {
    width: 155px;
    background: #1a1a2e;
    border-radius: 28px;
    border: 5px solid #2a2a40;
    box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: absolute;
    transition: transform .3s ease;
    flex-shrink: 0;
}
.ft-mock-phone:hover { box-shadow: 0 32px 80px rgba(0,0,0,.35); }

/* Center phone — biggest, front */
.ft-mock-center {
    width: 175px;
    height: 380px;
    z-index: 10;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-color: #333355;
    box-shadow: 0 30px 80px rgba(13,27,94,.35), 0 6px 20px rgba(0,0,0,.2);
}
.ft-mock-center:hover { transform: translateX(-50%) translateY(-8px); }

/* Side phones */
.ft-mock-left {
    width: 148px;
    height: 320px;
    z-index: 5;
    bottom: 20px;
    left: calc(50% - 195px);
    transform: rotate(-6deg);
    opacity: .88;
}
.ft-mock-left:hover { transform: rotate(-3deg) translateY(-6px); opacity: 1; }

.ft-mock-right {
    width: 148px;
    height: 320px;
    z-index: 5;
    bottom: 20px;
    right: calc(50% - 195px);
    transform: rotate(6deg);
    opacity: .88;
}
.ft-mock-right:hover { transform: rotate(3deg) translateY(-6px); opacity: 1; }

/* Phone internals */
.ft-mock-notch {
    width: 60px;
    height: 10px;
    background: #1a1a2e;
    border-radius: 0 0 8px 8px;
    margin: 0 auto;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.ft-mock-screen {
    flex: 1;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ft-mock-header {
    padding: 10px 10px 8px;
    flex-shrink: 0;
}
.ft-mock-logo-small { display: flex; align-items: center; }
.ft-mock-title { font-size: 9px; color: rgba(255,255,255,.9); }
.ft-mock-home-bar {
    height: 16px;
    background: #1a1a2e;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ft-mock-home-bar::after {
    content: '';
    width: 40px;
    height: 3px;
    background: rgba(255,255,255,.3);
    border-radius: 2px;
}

/* Phone screen UI elements */
.ft-mock-input-row {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #f5f5f5;
    border-radius: 5px;
    padding: 5px 7px;
    margin-bottom: 3px;
    font-size: 8.5px;
    font-weight: 600;
    color: #0D1B5E;
}
.ft-mock-swap {
    text-align: center;
    margin: 2px 0;
}
.ft-mock-date-box {
    flex: 1;
    background: #f5f5f5;
    border-radius: 5px;
    padding: 5px 6px;
}
.ft-mock-search-btn {
    margin-top: 6px;
    background: #0D1B5E;
    color: #fff;
    border-radius: 6px;
    padding: 6px;
    text-align: center;
    font-size: 8.5px;
    font-weight: 700;
}
.ft-mock-flight-row {
    display: flex;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid #f0f0f0;
}
.ft-mock-tour-card {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8f9fa;
    border-radius: 7px;
    padding: 6px 7px;
    margin-bottom: 5px;
}

/* Responsive showcase */
@media (max-width: 991px) {
    .ft-showcase-wrap { flex-direction: column-reverse; gap: 32px; }
    .ft-showcase-text { max-width: 100%; text-align: center; }
    .ft-showcase-features { text-align: left; display: inline-block; }
    .ft-showcase-downloads { justify-content: center; }
    .ft-showcase-phones { height: 360px; width: 100%; }
    .ft-mock-center { width: 148px; height: 320px; }
    .ft-mock-left  { width: 126px; height: 270px; left: calc(50% - 162px); }
    .ft-mock-right { width: 126px; height: 270px; right: calc(50% - 162px); }
    .ft-showcase-heading { font-size: 1.7rem; }
}
@media (max-width: 575px) {
    .ft-showcase-phones { height: 300px; }
    .ft-mock-center { width: 130px; height: 280px; }
    .ft-mock-left  { width: 108px; height: 230px; left: calc(50% - 138px); }
    .ft-mock-right { width: 108px; height: 230px; right: calc(50% - 138px); }
    .ft-showcase-heading { font-size: 1.45rem; }
}

/* ==========================================================================
   Professional Polish — FaithTrip v2.1
   ========================================================================== */

/* Footer link hover — slide-in left arrow */
.ft-footer-links a {
    position: relative;
    padding-left: 0;
    transition: color .2s, padding-left .18s;
}
.ft-footer-links a:hover {
    color: #0D1B5E;
    padding-left: 8px;
}
.ft-footer-links a:hover::before {
    content: '›';
    position: absolute;
    left: 0;
    color: #F5A623;
    font-weight: 700;
    line-height: 1;
}

/* IATA badge improved */
.ft-iata-badge {
    background: linear-gradient(135deg, #f0f4ff, #fff);
    border: 1.5px solid #c5d0f0;
    box-shadow: 0 2px 8px rgba(13,27,94,.07);
}

/* Keyboard focus rings — accessibility */
.ft-nav-link:focus-visible,
.ft-login-pill:focus-visible,
.ft-partner-pill:focus-visible,
.ft-hotline-btn:focus-visible,
.ft-currency-btn:focus-visible {
    outline: 2px solid #F5A623;
    outline-offset: 2px;
}

/* Section heading underline — gradient */
.ft-section-underline {
    background: linear-gradient(90deg, #0D1B5E 0%, #F5A623 100%);
}

/* Visa apply button improved */
.ft-visa-apply-btn {
    background: linear-gradient(135deg, #0D1B5E 0%, #1A3A8F 100%);
    box-shadow: 0 3px 10px rgba(13,27,94,.25);
}
.ft-visa-apply-btn:hover {
    background: linear-gradient(135deg, #1A3A8F 0%, #243b9f 100%);
    box-shadow: 0 5px 16px rgba(13,27,94,.35);
    transform: translateY(-1px);
    color: #fff;
}

/* Section title gradient underline on hover */
.ft-visa-section-underline,
.ft-section-underline {
    transition: width .3s ease;
}

/* Ticker CTA — improved */
.ft-ticker-cta {
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 11.5px;
}

/* Tour / destination card overlay text shadow */
.ft-dest-name { text-shadow: 0 1px 4px rgba(0,0,0,.4); }

/* Partner CTA section — brand aligned */
.ft-partner-cta {
    background: linear-gradient(135deg, #e8efff 0%, #fff8e8 100%);
}

/* Hotline button — professional green */
.ft-hotline-btn {
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 11.5px;
}




/* ═══════════════════════════════════════════════════════════════
   FaithTrip — Dark Mode  |  B2C Site
   ═══════════════════════════════════════════════════════════════ */

/* ─── Theme Toggle — compact icon button (T360-style) ────────── */
/* This was written for a dark navbar — white ink on a translucent white fill.
   The storefront navbar is #fff in light mode, so the button rendered white on
   white: 1.00:1, completely invisible. Nobody could find the control that
   leaves dark mode, because in light mode there was nothing to see. The dark
   rule below still paints it gold on the dark bar. */
.ft-theme-switch {
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid rgba(13,27,94,.22);
    background: rgba(13,27,94,.06);
    color: #0D1B5E;
    cursor: pointer; outline: none; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .82rem; padding: 0;
    transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.ft-theme-switch:hover {
    background: rgba(13,27,94,.12);
    border-color: rgba(13,27,94,.45);
    color: #0D1B5E;
}
[data-theme="dark"] .ft-theme-switch {
    background: rgba(245,166,35,.14);
    border-color: rgba(245,166,35,.4);
    color: #F5A623;
    box-shadow: 0 0 8px rgba(245,166,35,.12);
}
[data-theme="dark"] .ft-theme-switch:hover {
    background: rgba(245,166,35,.24);
    box-shadow: 0 0 12px rgba(245,166,35,.2);
}
.ft-theme-icon-sun  { display: none; }
.ft-theme-icon-moon { display: block; }
[data-theme="dark"] .ft-theme-icon-sun  { display: block; }
[data-theme="dark"] .ft-theme-icon-moon { display: none; }

/* ─── Dark Mode — Brand Navy Palette ────────────────────────── */
[data-theme="dark"] {
    --ft-primary: #5b7eef;
    --ft-gold:    #F5A623;
    --ft-red:     #ef4444;
}
[data-theme="dark"] body.b2c-body,
[data-theme="dark"] .b2c-body {
    background: #040c1e !important;
    color: #d4d9ee !important;
}
[data-theme="dark"] .ft-navbar,
[data-theme="dark"] nav.ft-navbar {
    background: linear-gradient(135deg, #030a1a 0%, #0b1640 100%) !important;
    box-shadow: 0 2px 24px rgba(0,0,0,.6) !important;
}
[data-theme="dark"] .ft-nav-center a,
[data-theme="dark"] .ft-mega-trigger { color: #c8cfe8 !important; }
[data-theme="dark"] .ft-mega-menu,
[data-theme="dark"] .ft-hotline-dropdown,
[data-theme="dark"] .ft-currency-dropdown,
[data-theme="dark"] .ft-user-dropdown {
    background: #0c1840 !important;
    border-color: rgba(255,255,255,.1) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}
[data-theme="dark"] .ft-currency-option,
[data-theme="dark"] .ft-hotline-dd-item,
[data-theme="dark"] .ft-user-dd-item { color: #c8cfe8 !important; }
[data-theme="dark"] .ft-currency-option:hover,
[data-theme="dark"] .ft-hotline-dd-item:hover,
[data-theme="dark"] .ft-user-dd-item:hover { background: rgba(91,126,239,.18) !important; }
[data-theme="dark"] .ft-hotline-dd-label { color: #7a84a8 !important; }
[data-theme="dark"] .ft-b2c-hero {
    background: linear-gradient(160deg, #040c22 0%, #081535 45%, #060f28 100%) !important;
}
[data-theme="dark"] .ft-section-alt,
[data-theme="dark"] .ft-about-section,
[data-theme="dark"] .ft-partner-cta { background: #06102a !important; }
[data-theme="dark"] .ft-tutorials-section { background: #030a1e !important; }
[data-theme="dark"] .ft-globe-section {
    background: linear-gradient(120deg, #040c22 0%, #060f2a 50%, #040c22 100%) !important;
}
[data-theme="dark"] .ft-globe-section::before {
    background: radial-gradient(ellipse 60% 55% at 15% 50%, rgba(91,126,239,.08) 0%, transparent 70%), radial-gradient(ellipse 50% 60% at 85% 40%, rgba(245,166,35,.06) 0%, transparent 70%) !important;
}
[data-theme="dark"] .ft-globe-map-wrap {
    background: linear-gradient(135deg, rgba(8,20,60,.6) 0%, rgba(4,12,30,.7) 50%, rgba(8,16,48,.5) 100%) !important;
    border-color: rgba(91,126,239,.15) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,.4) !important;
}
[data-theme="dark"] .ft-globe-stats {
    background: rgba(8,20,60,.7) !important;
    border-color: rgba(255,255,255,.08) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .ft-globe-stat-num { color: #F5A623 !important; -webkit-text-fill-color: #F5A623 !important; }
[data-theme="dark"] .ft-globe-stat-lbl { color: rgba(255,255,255,.5) !important; }
[data-theme="dark"] .ft-globe-title { color: #eaeef8 !important; }
[data-theme="dark"] .ft-globe-sub   { color: rgba(255,255,255,.5) !important; }
[data-theme="dark"] .ft-globe-eyebrow { background: rgba(245,166,35,.1) !important; border-color: rgba(245,166,35,.3) !important; }
[data-theme="dark"] .ft-globe-pin-label {
    background: rgba(4,14,40,.95) !important;
    border-color: rgba(255,255,255,.15) !important;
    color: #d4d9ee !important;
}
[data-theme="dark"] .ft-about-section { color: #d4d9ee !important; }
[data-theme="dark"] .ft-about-section::before { opacity: .03 !important; }
[data-theme="dark"] .ft-about-eyebrow  { color: var(--ft-primary) !important; }
[data-theme="dark"] .ft-about-h2       { color: #eaeef8 !important; }
[data-theme="dark"] .ft-about-desc     { color: #8892b0 !important; }
[data-theme="dark"] .ft-about-feat-card {
    background: #081535 !important;
    border-color: rgba(91,126,239,.15) !important;
    color: #d4d9ee !important;
}
[data-theme="dark"] .ft-about-feat-card:hover {
    border-color: var(--ft-primary) !important;
    box-shadow: 0 8px 28px rgba(91,126,239,.15) !important;
}
[data-theme="dark"] .ft-about-feat-title { color: #eaeef8 !important; }
[data-theme="dark"] .ft-about-feat-desc  { color: #8892b0 !important; }
[data-theme="dark"] .ft-about-video-frame {
    background: #081535 !important;
    border-color: rgba(91,126,239,.15) !important;
}
[data-theme="dark"] .ft-stats-photo-band { background: #030a1e !important; }
[data-theme="dark"] .ft-stats-heading    { color: #eaeef8 !important; }
[data-theme="dark"] .ft-stat-cell-num    { color: #fff !important; }
[data-theme="dark"] .ft-stat-cell-lbl    { color: rgba(255,255,255,.55) !important; }
[data-theme="dark"] .ft-search-box,
[data-theme="dark"] .ft-search-wrap,
[data-theme="dark"] .search-box-wrap {
    background: rgba(6,18,52,.92) !important;
    border-color: rgba(255,255,255,.1) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}
[data-theme="dark"] .ft-tab-btn { color: #8892b0 !important; border-color: transparent !important; }
[data-theme="dark"] .ft-tab-btn.active { color: var(--ft-primary) !important; }
[data-theme="dark"] .ft-form-group label { color: #8892b0 !important; }
[data-theme="dark"] .ft-form-input,
[data-theme="dark"] .ft-date-inp { color: #d4d9ee !important; background: transparent !important; }
[data-theme="dark"] .card,
[data-theme="dark"] .ft-card {
    background: #081535 !important;
    border-color: rgba(91,126,239,.12) !important;
    color: #d4d9ee !important;
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
    background: #0c1c48 !important;
    border-color: rgba(255,255,255,.07) !important;
    color: #d4d9ee !important;
}
[data-theme="dark"] .flight-card,
[data-theme="dark"] .ft-flight-card,
[data-theme="dark"] .result-card {
    background: #081535 !important;
    border-color: rgba(91,126,239,.12) !important;
}
[data-theme="dark"] .flight-card:hover,
[data-theme="dark"] .ft-flight-card:hover {
    border-color: var(--ft-primary) !important;
    box-shadow: 0 6px 24px rgba(91,126,239,.18) !important;
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: #0c1c48 !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #d4d9ee !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] .form-control::placeholder { color: #5a6585 !important; }
[data-theme="dark"] .dropdown-menu {
    background: #0c1840 !important;
    border-color: rgba(255,255,255,.1) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}
[data-theme="dark"] .dropdown-item { color: #c8cfe8 !important; }
[data-theme="dark"] .dropdown-item:hover { background: rgba(91,126,239,.18) !important; }
[data-theme="dark"] .dropdown-divider { border-color: rgba(255,255,255,.08) !important; }
[data-theme="dark"] .table { color: #d4d9ee !important; }
[data-theme="dark"] .table > :not(caption) > * > * {
    background: transparent !important;
    border-color: rgba(255,255,255,.07) !important;
}
[data-theme="dark"] .ft-footer,
[data-theme="dark"] footer.ft-footer { background: #020710 !important; }
[data-theme="dark"] .modal-content {
    background: #081535 !important;
    color: #d4d9ee !important;
    border-color: rgba(91,126,239,.15) !important;
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { border-color: rgba(255,255,255,.08) !important; }
[data-theme="dark"] .btn-close { filter: invert(1) brightness(1.5); }
[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top { border-color: rgba(255,255,255,.08) !important; }
[data-theme="dark"] hr { border-color: rgba(255,255,255,.08) !important; }
[data-theme="dark"] .text-dark  { color: #d4d9ee !important; }
[data-theme="dark"] .text-muted { color: #8892b0 !important; }   /* was #6b7499: 4.26:1 */
[data-theme="dark"] .bg-white { background: #081535 !important; }
[data-theme="dark"] .bg-light { background: #06102a !important; }
[data-theme="dark"] ::-webkit-scrollbar       { background: #040c1e; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #1e3a7a; border-radius: 4px; }
[data-theme="dark"] * { scrollbar-color: #1e3a7a #040c1e; }

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — MISSING SECTIONS (ft-section, airlines, services,
   deals, tours, FAQ, destinations, inline overrides)
   ═══════════════════════════════════════════════════════════════ */

/* ─── ft-section generic (light gradient bg, inline style) ─── */
[data-theme="dark"] .ft-section,
[data-theme="dark"] section.ft-section { background: #06102a !important; }
[data-theme="dark"] .ft-section-title  { color: #eaeef8 !important; }
[data-theme="dark"] .ft-section-subtitle { color: #8892b0 !important; }
[data-theme="dark"] .ft-section-underline { background: #F5A623 !important; }
[data-theme="dark"] .ft-section-head,
[data-theme="dark"] .ft-section-center { background: transparent !important; }

/* ─── Hot Deals cards ─────────────────────────────────────────  */
[data-theme="dark"] .ft-deal-card {
    background: #081535 !important;
    border-color: rgba(91,126,239,.12) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.4) !important;
}
[data-theme="dark"] .ft-deal-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.5) !important; }
[data-theme="dark"] .ft-deal-body { color: #cdd3e8 !important; }
/* st84 (19 Oct 2026): the homepage's own <style> paints the deal body #fff and nothing darkened it, while the card around it
   goes dark here and the blanket [style*="color:#0D1B5E"] rule lightens its navy title: #d4d9ee on white read 1.40:1. The
   body follows the card (as .ft-tour-body does); its inline summary grey and red call to action take this theme's inks
   (on #081535 they read 3.3:1 and 3.0:1). The deal badge paints its own colour, the same in both themes, so it keeps the
   ink chosen for that colour (ft_ink_on); so does the promo cards' gold button (navy on #f0a500 7.55:1, made 1.48:1). */
[data-theme="dark"] .ft-deal-body { background: #081535 !important; border-top-color: rgba(91,126,239,.35) !important; }
[data-theme="dark"] .ft-deal-body [style*="color:#6d6d6d"] { color: #8892b0 !important; }
[data-theme="dark"] .ft-deal-body [style*="color:#C62828"] { color: #f87171 !important; }
[data-theme="dark"] .ft-deal-badge[style*="color:#0D1B5E"] { color: #0D1B5E !important; }
[data-theme="dark"] [style*="background:#f0a500"][style*="color:#0D1B5E"] { color: #0D1B5E !important; }
/* st86: the mobile menu's Sign Out is inline #C62828 for the white menu; on the dark one it takes this theme's red (6.6:1). */
[data-theme="dark"] .ft-mobile-link[style*="color:#C62828"] { color: #f87171 !important; }

/* ─── Airlines grid ───────────────────────────────────────────  */
[data-theme="dark"] .ft-airlines-grid {
    background: #081535 !important;
    border-color: rgba(255,255,255,.09) !important;
}
[data-theme="dark"] .ft-airline-row {
    background: transparent !important;
    border-color: rgba(255,255,255,.08) !important;
    color: #cdd3e8 !important;
}
[data-theme="dark"] .ft-airline-row:hover { background: rgba(91,126,239,.1) !important; }
[data-theme="dark"] .ft-airline-name { color: #cdd3e8 !important; }
[data-theme="dark"] .ft-airline-chevron { color: #8f9bc4 !important; }   /* was #4a5578: 2.45:1 */
[data-theme="dark"] .ft-airline-logo-wrap {
    background: rgba(255,255,255,.07) !important;
    border-color: transparent !important;
}
/* IATA code text — hardcoded inline color:#0D1B5E */
[data-theme="dark"] .ft-airline-logo-wrap span { color: #d4d9ee !important; }

/* ─── Services section + cards ────────────────────────────────  */
[data-theme="dark"] .ft-services-section { background: #06102a !important; }
[data-theme="dark"] .ft-srv-card {
    background: #081535 !important;
    border-color: rgba(91,126,239,.12) !important;
}
[data-theme="dark"] .ft-srv-card::before { background: rgba(255,255,255,.03) !important; }
[data-theme="dark"] .ft-srv-card:hover {
    border-color: rgba(91,126,239,.45) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.45) !important;
}
[data-theme="dark"] .ft-srv-title { color: #d4d9ee !important; }
[data-theme="dark"] .ft-srv-desc  { color: #8892b0 !important; }
[data-theme="dark"] .ft-srv-arrow { background: rgba(91,126,239,.3) !important; color: #fff !important; }

/* ─── Tour / destination packages ────────────────────────────  */
[data-theme="dark"] .ft-tour-card {
    background: #081535 !important;
    border-color: rgba(91,126,239,.12) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.4) !important;
}
[data-theme="dark"] .ft-tour-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.5) !important; }
[data-theme="dark"] .ft-tour-body { background: #081535 !important; }
[data-theme="dark"] .ft-tour-name { color: #d4d9ee !important; }
[data-theme="dark"] .ft-tour-stars { color: #F5A623 !important; }

/* ─── Top Popular Destinations mosaic ────────────────────────  */
[data-theme="dark"] .ft-dest-section { background: #040c1e !important; }
[data-theme="dark"] .ft-dest-eyebrow { color: #8892b0 !important; }
[data-theme="dark"] .ft-dest-h2      { color: #eaeef8 !important; }
[data-theme="dark"] .ft-dest-view-all { border-color: rgba(91,126,239,.4) !important; color: #eaeef8 !important; }
[data-theme="dark"] .ft-dest-view-all:hover { background: var(--ft-primary) !important; color: #fff !important; }

/* ─── Build & Grow / Partner CTA ─────────────────────────────  */
[data-theme="dark"] .ft-partner-title { color: #eaeef8 !important; }
[data-theme="dark"] .ft-partner-desc  { color: #8892b0 !important; }

/* ─── Other B2C pages — plain-section headings with no own
   background (site-wide sweep beyond the homepage). Each of these
   sits directly on the ambient dark body background in dark mode;
   scoped with :not(.…-alt) where the same class is reused inside a
   sibling section that already has its own light background, so
   that variant isn't accidentally turned light-text-on-light-bg. ── */
[data-theme="dark"] .section-title { color: #eaeef8 !important; }             /* shop.blade.php, transport_metro.blade.php */
[data-theme="dark"] .section-sub   { color: #8892b0 !important; }             /* transport_metro.blade.php */
[data-theme="dark"] .hl-section-title { color: #eaeef8 !important; }          /* holiday.blade.php, hotel.blade.php */
[data-theme="dark"] .desc-tab.active { color: #eaeef8 !important; }           /* shop_product.blade.php */
[data-theme="dark"] .desc-panel p, [data-theme="dark"] .desc-panel ul { color: #8892b0 !important; } /* shop_product.blade.php */
[data-theme="dark"] .tp-section:not(.tp-section-alt) .tp-section-title { color: #eaeef8 !important; }    /* transport.blade.php */
[data-theme="dark"] .bus-section:not(.bus-section-alt) .bus-section-title { color: #eaeef8 !important; } /* transport_bus.blade.php */
[data-theme="dark"] .fsec:not(.fsec-alt) .sec-title { color: #eaeef8 !important; } /* transport_ferry.blade.php */
[data-theme="dark"] .fsec:not(.fsec-alt) .sec-sub   { color: #8892b0 !important; } /* transport_ferry.blade.php */
[data-theme="dark"] .trn-section:not(.trn-section-alt) .trn-section-title { color: #eaeef8 !important; } /* transport_train.blade.php */
[data-theme="dark"] .ft-visa-section-title { color: #eaeef8 !important; }     /* visa.blade.php */
[data-theme="dark"] .gc-section-head h2 { color: #eaeef8 !important; }        /* gift_card.blade.php — bypasses its own :root --ft-primary override clash */
[data-theme="dark"] .med-sec-title { color: #eaeef8 !important; }             /* medical.blade.php */

/* ─── Reviews / Testimonials ─────────────────────────────────  */
[data-theme="dark"] .ft-review-section { background: #040c1e !important; }
[data-theme="dark"] .ft-review-card {
    background: #081535 !important;
    border-color: rgba(91,126,239,.12) !important;
}
[data-theme="dark"] .ft-review-name { color: #eaeef8 !important; }
[data-theme="dark"] .ft-review-text { color: #8892b0 !important; }
[data-theme="dark"] .ft-review-stars { color: #F5A623 !important; }

/* ─── FAQ ─────────────────────────────────────────────────────  */
[data-theme="dark"] .b2c-faq-item {
    background: #081535 !important;
    border-color: rgba(91,126,239,.12) !important;
}
[data-theme="dark"] .b2c-faq-q { color: #d4d9ee !important; }
[data-theme="dark"] .b2c-faq-a { color: #8892b0 !important; }
[data-theme="dark"] .b2c-faq-icon { color: #5b6aaa !important; }

/* ─── "Our Services" / "Everything You Need" inline title ────  */
[data-theme="dark"] .ft-services-section h2 { color: #eaeef8 !important; }
[data-theme="dark"] .ft-services-section > .container > .text-center
    div[style*="background:linear-gradient"] {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.1) !important;
}

/* ─── Inline style overrides — dark navy text on dark bg ─────  */
[data-theme="dark"] [style*="color:#0D1B5E"],
[data-theme="dark"] [style*="color: #0D1B5E"] { color: #d4d9ee !important; }
[data-theme="dark"] [style*="color:#1a3a6b"],
[data-theme="dark"] [style*="color: #1a3a6b"] { color: #d4d9ee !important; }
[data-theme="dark"] [style*="color:#0f1f3d"],
[data-theme="dark"] [style*="color: #0f1f3d"] { color: #eaeef8 !important; }
[data-theme="dark"] [style*="color:#6b7280"],
[data-theme="dark"] [style*="color: #6b7280"],
[data-theme="dark"] [style*="color:#6B7280"],
[data-theme="dark"] [style*="color: #6B7280"] { color: #8892b0 !important; }
[data-theme="dark"] [style*="color:#64748B"],
[data-theme="dark"] [style*="color: #64748B"] { color: #8892b0 !important; }
[data-theme="dark"] [style*="color:#777"],
[data-theme="dark"] [style*="color: #777"]    { color: #8892b0 !important; }
[data-theme="dark"] [style*="color:#555"],
[data-theme="dark"] [style*="color: #555"]    { color: #8892b0 !important; }
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #333"]    { color: #cdd3e8 !important; }
[data-theme="dark"] [style*="color:#666"],
[data-theme="dark"] [style*="color: #666"]    { color: #8892b0 !important; }
[data-theme="dark"] [style*="color:#aaa"],
[data-theme="dark"] [style*="color: #aaa"]    { color: #8892b0 !important; }   /* was #5a6585: 3.11:1 */
/* st81 (19 Oct 2026): the inline greys above moved to the project's muted ink #525F73 and light ink #5F6C80, made for
   light surfaces; on the dark theme's surfaces they take the same muted ink as the greys they replaced. */
[data-theme="dark"] [style*="color:#525F73"],
[data-theme="dark"] [style*="color: #525F73"],
[data-theme="dark"] [style*="color:#5F6C80"],
[data-theme="dark"] [style*="color: #5F6C80"] { color: #8892b0 !important; }

/* ─── Inline background overrides — light sections ───────────  */
[data-theme="dark"] [style*="background:linear-gradient(160deg,#e8f0ff"],
[data-theme="dark"] [style*="background: linear-gradient(160deg,#e8f0ff"],
[data-theme="dark"] [style*="background:linear-gradient(160deg,#fef9f0"],
[data-theme="dark"] [style*="background: linear-gradient(160deg,#fef9f0"],
[data-theme="dark"] [style*="background:linear-gradient(160deg,#f5f3ff"],
[data-theme="dark"] [style*="background: linear-gradient(160deg,#f5f3ff"],
[data-theme="dark"] [style*="background:linear-gradient(160deg,#f5f8ff"],
[data-theme="dark"] [style*="background: linear-gradient(160deg,#f5f8ff"],
[data-theme="dark"] [style*="background:linear-gradient(120deg,#f0f5ff"],
[data-theme="dark"] [style*="background: linear-gradient(120deg,#f0f5ff"] {
    background: #06102a !important;
}
[data-theme="dark"] [style*="background:#f8f9fa"],
[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8faff"],
[data-theme="dark"] [style*="background: #f8faff"] { background: #081535 !important; }

/* ─── Theme switch button ────────────────────────────────────
   This block used to claim "both modes clearly visible" while painting white
   ink on a translucent white fill. The storefront navbar is #fff in light
   mode, so the control that leaves dark mode was itself invisible in light —
   1.00:1. Navy on the white bar, gold on the dark bar. */
.ft-theme-switch {
    width: 34px; height: 34px; border-radius: 10px;
    border: 1.5px solid rgba(13,27,94,.28);
    background: rgba(13,27,94,.06);
    color: #0D1B5E;
    cursor: pointer; outline: none; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .88rem; padding: 0;
    transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.ft-theme-switch:hover {
    background: rgba(13,27,94,.13);
    border-color: rgba(13,27,94,.5);
    box-shadow: 0 0 10px rgba(13,27,94,.12);
}
[data-theme="dark"] .ft-theme-switch {
    background: rgba(245,166,35,.18);
    border-color: rgba(245,166,35,.55);
    color: #F5A623;
    box-shadow: 0 0 10px rgba(245,166,35,.18);
}
[data-theme="dark"] .ft-theme-switch:hover {
    background: rgba(245,166,35,.3);
    border-color: rgba(245,166,35,.75);
    box-shadow: 0 0 16px rgba(245,166,35,.28);
}

/* ─── Smooth transitions on theme toggle ─────────────────────  */
html.ft-transitioning,
html.ft-transitioning * {
    transition: background-color .25s ease, border-color .25s ease,
                color .25s ease, box-shadow .25s ease !important;
}

/* ─── B2C Portal Dashboard — dark mode ──────────────────────── */
[data-theme="dark"] .ft-hero          { background: linear-gradient(135deg,#06112a 0%,#0d1f4e 55%,#060e22 100%) !important; }
[data-theme="dark"] .ft-qa-wrap       { background: #0d1530 !important; border-color: rgba(91,126,239,.12) !important; }
[data-theme="dark"] .ft-qa-title      { color: #d4d9ee !important; }
[data-theme="dark"] .ft-qa-btn        { background: #111d3e !important; border-color: rgba(91,126,239,.15) !important; color: #c5cce8 !important; }
[data-theme="dark"] .ft-qa-btn:hover  { background: #1a2d5a !important; border-color: rgba(91,126,239,.4) !important; color: #eaf0ff !important; }
[data-theme="dark"] .ft-sc            { background: #0d1530 !important; border-color: rgba(91,126,239,.12) !important; }
[data-theme="dark"] .ft-sc-body .sc-val  { color: #d4d9ee !important; }
[data-theme="dark"] .ft-sc-body .sc-lbl  { color: #8892b0 !important; }
[data-theme="dark"] .ft-sc-body .sc-desc { color: #6b7595 !important; }
[data-theme="dark"] .ft-action-card   { background: #12192e !important; border-color: rgba(245,166,35,.2) !important; }
[data-theme="dark"] .ft-action-card:hover { background: #1a2440 !important; }
[data-theme="dark"] .ft-action-text .at-title { color: #d4d9ee !important; }
[data-theme="dark"] .ft-action-text .at-sub   { color: #7a84a0 !important; }
[data-theme="dark"] .ft-sec           { background: #0d1530 !important; border-color: rgba(91,126,239,.12) !important; }
[data-theme="dark"] .ft-sec-title     { color: #d4d9ee !important; border-color: rgba(91,126,239,.12) !important; }
[data-theme="dark"] .ft-sec-link      { color: #7da4e8 !important; }
[data-theme="dark"] .trip-card        { background: #111d3e !important; border-color: rgba(91,126,239,.15) !important; }
[data-theme="dark"] .trip-route       { color: #d4d9ee !important; }
[data-theme="dark"] .trip-bkno        { color: #6b7595 !important; }
[data-theme="dark"] .trip-fare        { color: #c5cce8 !important; }
[data-theme="dark"] .trip-date        { color: #7a84a0 !important; }
[data-theme="dark"] .deal-card        { border-color: rgba(91,126,239,.12) !important; }
[data-theme="dark"] .deal-body        { background: #0d1530 !important; }
[data-theme="dark"] .deal-name        { color: #d4d9ee !important; }
[data-theme="dark"] .deal-desc        { color: #7a84a0 !important; }
[data-theme="dark"] .srv-item         { background: #111d3e !important; border-color: rgba(91,126,239,.15) !important; color: #c5cce8 !important; }
[data-theme="dark"] .srv-item:hover   { background: #1a2d5a !important; border-color: rgba(91,126,239,.4) !important; color: #eaf0ff !important; }
[data-theme="dark"] .b2cfsw-wrap      { background: #0d1530 !important; border-color: rgba(91,126,239,.12) !important; }
[data-theme="dark"] .b2cfsw-head      { color: #d4d9ee !important; }
[data-theme="dark"] .b2cfsw-trip      { background: #111d3e !important; border-color: rgba(91,126,239,.15) !important; color: #9aa3c0 !important; }
[data-theme="dark"] .b2cfsw-trip.active { background: #0D1B5E !important; color: #fff !important; }
[data-theme="dark"] .b2cfsw-field     { background: #111d3e !important; border-color: rgba(91,126,239,.15) !important; }
[data-theme="dark"] .b2cfsw-city      { color: #d4d9ee !important; }
[data-theme="dark"] .b2cfsw-city.placeholder { color: #5a6380 !important; }
[data-theme="dark"] .b2cfsw-airport   { color: #6b7595 !important; }

/* ─── Homepage Flight Search Widget v2 (.fsw-*) — dark mode ───
   b2cfsw-* above targets an earlier version of this widget; the current
   markup (resources/views/b2c/partials/flight-search-widget.blade.php)
   uses .fsw-* classes which never got dark-theme coverage, so the whole
   FROM/TO/DEPARTURE/RETURN/TRAVELERS row stayed on a plain white
   background even with data-theme="dark" set (confirmed via live
   screenshot on faithtrip.net — all five fields, not just the
   date/traveler ones). */
[data-theme="dark"] .fsw-row          { background: #0c1840 !important; box-shadow: 0 4px 24px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.2) !important; }
[data-theme="dark"] .fsw-f            { background: rgba(255,255,255,.05) !important; border-color: rgba(91,126,239,.2) !important; }
[data-theme="dark"] .fsw-f:hover,
[data-theme="dark"] .fsw-f:focus-within { background: rgba(255,255,255,.09) !important; }
[data-theme="dark"] .fsw-swap         { background: rgba(255,255,255,.05) !important; border-color: rgba(91,126,239,.2) !important; }
[data-theme="dark"] .fsw-swap:hover   { background: rgba(255,255,255,.09) !important; }
[data-theme="dark"] .fsw-swap i       { color: #5b7eef !important; }
[data-theme="dark"] .fsw-lbl          { color: #8892b0 !important; }
[data-theme="dark"] .fsw-lbl i        { color: #5b7eef !important; }
[data-theme="dark"] .fsw-ac-city      { color: #d4d9ee !important; }
[data-theme="dark"] .fsw-ac-city.placeholder { color: #6b7595 !important; }
[data-theme="dark"] .fsw-ac-airport   { color: #8892b0 !important; }
[data-theme="dark"] .fsw-ac-input     { background: #0c1840 !important; color: #d4d9ee !important; }
[data-theme="dark"] .fsw-f-from.fsw-ac-open,
[data-theme="dark"] .fsw-f-to.fsw-ac-open { background: #0c1840 !important; box-shadow: inset 0 0 0 2px #5b7eef !important; }
[data-theme="dark"] .fsw-date-day     { color: #d4d9ee !important; }
[data-theme="dark"] .fsw-date-day.placeholder { color: #6b7595 !important; }
[data-theme="dark"] .fsw-date-md      { color: #8892b0 !important; }
[data-theme="dark"] .fsw-ret-tip      { color: #8892b0 !important; }
[data-theme="dark"] .fsw-f-ret:hover .fsw-ret-tip { color: #5b7eef !important; }
[data-theme="dark"] .fsw-pax-count-big { color: #d4d9ee !important; }
[data-theme="dark"] .fsw-pax-type     { color: #d4d9ee !important; }
[data-theme="dark"] .fsw-pax-cabin    { color: #8892b0 !important; }
[data-theme="dark"] #roundDateCol > div { border-color: rgba(91,126,239,.2) !important; }

/* ─── B2B Portal Dashboard — dark mode ──────────────────────── */
[data-theme="dark"] .b2b-wrap         { background: transparent; }
[data-theme="dark"] .b2b-kpi          { background: #0d1530 !important; border-color: rgba(91,126,239,.12) !important; }
[data-theme="dark"] .b2b-kpi .val     { color: #d4d9ee !important; }
[data-theme="dark"] .b2b-kpi .lbl     { color: #8892b0 !important; }
[data-theme="dark"] .b2b-kpi .sub     { color: #6b7595 !important; }
[data-theme="dark"] .b2b-sec          { background: #0d1530 !important; border-color: rgba(91,126,239,.12) !important; }
[data-theme="dark"] .b2b-sec-title    { color: #d4d9ee !important; border-color: rgba(91,126,239,.12) !important; }
[data-theme="dark"] .b2b-qa-btn       { background: #111d3e !important; border-color: rgba(91,126,239,.15) !important; color: #c5cce8 !important; }
[data-theme="dark"] .b2b-qa-btn:hover { background: #1a2d5a !important; border-color: rgba(91,126,239,.35) !important; }
[data-theme="dark"] .b2b-table th     { background: #111d3e !important; color: #8892b0 !important; }
[data-theme="dark"] .b2b-table td     { color: #c5cce8 !important; border-color: rgba(91,126,239,.08) !important; }
[data-theme="dark"] .b2b-table tbody tr:hover { background: rgba(91,126,239,.05) !important; }
[data-theme="dark"] .pb-row           { border-color: rgba(91,126,239,.08) !important; }
[data-theme="dark"] .pb-bkno          { color: #d4d9ee !important; }
[data-theme="dark"] .pb-route         { color: #8892b0 !important; }
[data-theme="dark"] .pb-fare          { color: #c5cce8 !important; }
[data-theme="dark"] .hb-bar           { background: #1a2444 !important; }
[data-theme="dark"] .hb-label span:first-child { color: #c5cce8 !important; }
[data-theme="dark"] .hb-val           { color: #d4d9ee !important; }
[data-theme="dark"] .hb-sub           { color: #6b7595 !important; }
[data-theme="dark"] .sr-row           { border-color: rgba(91,126,239,.08) !important; }
[data-theme="dark"] .b2bd-row         { background: #0d1530 !important; border-color: rgba(91,126,239,.12) !important; }
[data-theme="dark"] .b2bd-f           { background: #111d3e !important; border-color: rgba(91,126,239,.1) !important; }
[data-theme="dark"] .b2bd-ac-city     { color: #d4d9ee !important; }
[data-theme="dark"] .b2bd-ac-city.placeholder { color: #5a6380 !important; }
[data-theme="dark"] .b2bd-ac-airport  { color: #6b7595 !important; }

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — THE HALVES THAT WERE MISSING
   ═══════════════════════════════════════════════════════════════
   Until now nothing on the storefront ever set data-theme, so every
   dark rule in this file had gone unrendered since the day it was
   written. Reading them proves nothing; each fix below was measured
   on the live pages with the attribute forced on, and re-measured
   after. The pattern throughout was a rule written in halves — a
   surface darkened without its ink, or ink lightened without its
   surface. Ratios quoted are WCAG contrast against the surface the
   text actually sits on.
   ─────────────────────────────────────────────────────────────── */

/* ─── The footer, on all 41 public pages ──────────────────────
   One rule above darkens footer.ft-footer to #020710 and stops
   there, so every colour inside it kept its light value: the
   headings and the We-Accept label stayed brand navy #0D1B5E on
   near-black (1.28:1 — invisible), and the description and link
   lists stayed #555 (2.71:1). */
[data-theme="dark"] .ft-footer-heading   { color: #eaeef8 !important; }
[data-theme="dark"] .ft-we-accept-label  { color: #eaeef8 !important; }
[data-theme="dark"] .ft-footer-desc      { color: #8892b0 !important; }
[data-theme="dark"] .ft-footer-links a   { color: #9aa5c4 !important; }
[data-theme="dark"] .ft-footer-links a:hover { color: #a8bcff !important; }
/* Hairlines drawn for a white footer; on near-black they read as
   bright seams. */
[data-theme="dark"] .ft-footer           { border-top-color: rgba(255,255,255,.07) !important; }
[data-theme="dark"] .ft-footer-certified { border-top-color: rgba(255,255,255,.07) !important; }
[data-theme="dark"] .ft-footer-certified > span { color: #8892b0 !important; }
/* The membership cards inside it are white by design — they carry the
   IATA and ATAB marks — so their own text stays dark. Without the child
   combinator above, the strip rule lightened them to 3.09:1 on white. */
[data-theme="dark"] .ft-iata-badge       { border-color: rgba(255,255,255,.18) !important; color: #d4d9ee !important; }
[data-theme="dark"] .ft-social-btn       { background: #0c1840 !important; color: #c8cfe8 !important; }

/* ─── The phone mock-up is a photograph, not a themed surface ──
   .ft-mock-screen draws a picture of the app running on a white
   phone screen. Its labels are inline-styled (#333/#555/#777), and
   the [style*="color:…"] rules further up rewrite ANY element
   carrying those inline colours — they cannot tell whether the
   surface behind it also went dark. Inside this white screen it
   turned the text to #cdd3e8 and #8892b0 on #fff, #f5f5f5 and
   #f8f9fa: between 1.29:1 and 3.09:1. The screenshot should look
   the same in both themes, so the light values are restored here.
   Specificity (0,3,0) beats the blanket (0,2,0) rules. */
[data-theme="dark"] .ft-mock-screen                        { color: #1a1a2e; }
[data-theme="dark"] .ft-mock-screen [style*="color:#333"]  { color: #333 !important; }
[data-theme="dark"] .ft-mock-screen [style*="color:#555"]  { color: #555 !important; }
[data-theme="dark"] .ft-mock-screen [style*="color:#777"]  { color: #777 !important; }
[data-theme="dark"] .ft-mock-screen [style*="color:#666"]  { color: #666 !important; }
[data-theme="dark"] .ft-mock-screen [style*="color:#aaa"]  { color: #aaa !important; }
[data-theme="dark"] .ft-mock-screen [style*="color:#0D1B5E"],
[data-theme="dark"] .ft-mock-screen [style*="color: #0D1B5E"] { color: #0D1B5E !important; }
[data-theme="dark"] .ft-mock-screen [style*="color:#6b7280"],
[data-theme="dark"] .ft-mock-screen [style*="color: #6b7280"] { color: #6b7280 !important; }
[data-theme="dark"] .ft-mock-screen [style*="color:#525F73"],
[data-theme="dark"] .ft-mock-screen [style*="color: #525F73"] { color: #525F73 !important; }
[data-theme="dark"] .ft-mock-screen [style*="color:#5F6C80"],
[data-theme="dark"] .ft-mock-screen [style*="color: #5F6C80"] { color: #5F6C80 !important; }
/* st81: the flight result card stays white in the dark theme - its inline inks stay the light-surface ones */
[data-theme="dark"] .frc-card [style*="color:#525F73"],
[data-theme="dark"] .frc-card [style*="color: #525F73"] { color: #525F73 !important; }
[data-theme="dark"] .frc-card [style*="color:#5F6C80"],
[data-theme="dark"] .frc-card [style*="color: #5F6C80"] { color: #5F6C80 !important; }
[data-theme="dark"] .ft-mock-screen [style*="background:#f8f9fa"],
[data-theme="dark"] .ft-mock-screen [style*="background: #f8f9fa"] { background: #f8f9fa !important; }

/* ─── Popular-route pills ─────────────────────────────────────
   .ft-route-fare .amt was given a dark-mode blue (#9fb4ff) but the
   pill it sits in kept background:#fff — 2.01:1. */
[data-theme="dark"] .ft-route-pill        { background: #081535 !important; border-color: rgba(91,126,239,.14) !important; }
[data-theme="dark"] .ft-route-pill:hover  { background: #0c1c48 !important; border-color: #5b7eef !important; }
[data-theme="dark"] .ft-route-airports    { color: #d4d9ee !important; }
[data-theme="dark"] .ft-route-names       { color: #9aa5c4 !important; }

/* ─── Review count beside the stars ───────────────────────────
   Inline color:#5b6270 on the dark card, 2.93:1. The star itself is
   an <i>, so only the span moves. */
[data-theme="dark"] .ft-tour-stars span   { color: #98a1b6 !important; }

/* ─── "from ৳x · CGP–DAC" service badge ───────────────────────
   Brand red #c62828 on #081535 is 3.20:1. */
/* The fare pill is background: rgba(255,255,255,.8) — a white lozenge that
   stayed white when the card went dark, so the light red set here read at
   1.47:1 on it. The pill has to darken with the card, not just its ink. */
[data-theme="dark"] .ft-srv-badge {
    color: #ff8a8a !important;
    background: rgba(255,255,255,.08) !important;
}
/* .ft-srv-action and .ft-srv-title take var(--srv-color), which is the per-card
   accent set inline from the $services array — #4C1D95, #1E3A8A, #7F1D1D and so
   on. Those are inks chosen for a pale pastel card; on the dark card they
   measured between 1.64:1 and 2.53:1. A card cannot compute a lighter version
   of its own variable in CSS, so dark mode uses one readable accent for all of
   them. .ft-srv-title already had a dark rule; the action line did not. */
[data-theme="dark"] .ft-srv-action        { color: #a8bcff !important; }
[data-theme="dark"] .ft-srv-foot          { border-top-color: rgba(255,255,255,.08) !important; }

/* ─── The wordmark in the navbar ──────────────────────────────
   .ft-logo-faith is brand navy and the navbar's dark gradient is #0b1640:
   1.11:1, so the first half of our own name was not visible. "Trip" is gold
   and reads on both, which is why only this half moves. */
[data-theme="dark"] .ft-logo-faith        { color: #eaeef8 !important; }

/* ═══════════════════════════════════════════════════════════════
   THE SHARED EMPTY STATE
   ═══════════════════════════════════════════════════════════════
   Several pages used to answer an empty table by drawing invented content —
   six offers with coupon codes on /promotions, operators we do not have rows
   for on the transport pages, destination guides that were never written.
   Invented content is worse than none: a visitor can act on it.

   This is what those branches show instead. Deliberately not card-shaped, so
   it cannot be mistaken for the thing that is missing. */
.ft-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 46px 24px;
    border: 1.5px dashed #d7deec;
    border-radius: 16px;
    background: #fbfcfe;
    margin: 0 0 28px;
}
.ft-empty-state > i { font-size: 1.9rem; color: #b6c0d6; margin-bottom: 12px; display: block; }
.ft-empty-state h3   { font-size: 1.1rem; font-weight: 800; color: #0D1B5E; margin: 0 0 8px; }
.ft-empty-state p    { font-size: .92rem; color: #5a6478; max-width: 520px; margin: 0 auto; line-height: 1.7; }
.ft-empty-state-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.ft-empty-state-btn  {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 20px; border-radius: 9px;
    font-size: .88rem; font-weight: 700; text-decoration: none;
    border: 1.5px solid #d7deec; color: #0D1B5E;
}
.ft-empty-state-btn:hover { border-color: #0D1B5E; color: #0D1B5E; text-decoration: none; }
.ft-empty-state-btn-solid { background: #0D1B5E; color: #fff; border-color: #0D1B5E; }
.ft-empty-state-btn-solid:hover { color: #fff; opacity: .92; }
[data-theme="dark"] .ft-empty-state      { background: #081535; border-color: rgba(91,126,239,.22); }
[data-theme="dark"] .ft-empty-state > i  { color: #46527a; }
[data-theme="dark"] .ft-empty-state h3   { color: #eaeef8; }
[data-theme="dark"] .ft-empty-state p    { color: #8892b0; }
[data-theme="dark"] .ft-empty-state-btn  { border-color: rgba(91,126,239,.28); color: #c8cfe8; }
[data-theme="dark"] .ft-empty-state-btn-solid { background: #16266b; border-color: #16266b; color: #fff; }

/* ─── The date field's calendar mark ──────────────────────────
   .pdp-display is the shared premium datepicker; its icon is brand navy and
   the field goes dark on seven pages — holiday, hotel (three routes),
   medical and the four transport pages — leaving it at 1.14:1. */
[data-theme="dark"] .pdp-display i        { color: #a8bcff !important; }

/* Select2's placeholder is drawn by the library, not by the page, so it never
   received a dark colour: 3.80:1 on the visa country field. */
[data-theme="dark"] .select2-selection__placeholder,
/* The visa page sets this to 55% white with !important for its own hero, which
   outranked the rule above by specificity. Named here so dark mode can lift it
   without touching the light page, where the field sits on a darker ground. */
[data-theme="dark"] .ft-visa-select2 .select2-selection__placeholder { color: rgba(255,255,255,.75) !important; }

/* ─── Footer contact icon discs ───────────────────────────────
   Four 30–34px discs written inline as background:#f5f5f5, holding a phone,
   envelope, pin and clock. The icons inherit the page ink, which in dark is
   near-white — so they sat at 1.29:1 on an almost-white disc. Scoped to the
   footer so the payment modal's own #f5f5f5 close button is left alone. */
[data-theme="dark"] .ft-footer [style*="background:#f5f5f5"] {
    background: #14203f !important;
}
[data-theme="dark"] .ft-footer [style*="background:#f5f5f5"] > i { color: #a8bcff !important; }

/* ─── Flight-search widget placeholders ───────────────────────
   #6b7595 on the dark field is 3.33:1; still clearly a placeholder
   at #808bab, but now legible. */
[data-theme="dark"] .fsw-ac-city.placeholder,
[data-theme="dark"] .fsw-date-day.placeholder { color: #949eba !important; }


/* ─── Contact strip pills ─────────────────────────────────────
   Written as inline background:#fff with inline navy ink. The blanket
   [style*="color:#0D1B5E"] rule lightened the ink and nothing darkened the
   pill: 1.40:1. */
[data-theme="dark"] .ft-cfa-section [style*="background:#fff"] {
    background: #081535 !important;
    border-color: rgba(91,126,239,.16) !important;
}

/* ═══════════════════════════════════════════════════════════════
   GOLD CHIPS AND BADGES TAKE NAVY INK
   ═══════════════════════════════════════════════════════════════
   #F5A623 has relative luminance .47: white on it is 2.03:1, navy 7.76:1.
   An earlier attempt matched on the literal hex in a style attribute and
   never fired, because these pages set their gold through var(--g). These
   are the components measured carrying white or pale ink on a gold fill. */
/* The service-tab chips are gold in LIGHT and dark grey in DARK, so the navy
   that fixes one theme measured 1.95:1 in the other. Scoped to light.
   (Three selectors were removed from this list along the way, each for the
   same reason: .ft-reason-icon i — only its .gold variant is gold; .fh-badge —
   its hero is deep teal now; .gc-btn-outline — it sits on the navy end of the
   gift-card hero.) */
:root:not([data-theme="dark"]) .ft-service-tab-icon,
:root:not([data-theme="dark"]) .ft-service-tab-icon i,
:root:not([data-theme="dark"]) .rc-tag[style*="fecb00"],
:root:not([data-theme="dark"]) .rc-tag[style*="FECB00"] { color: #0D1B5E !important; }

/* ═══════════════════════════════════════════════════════════════
   LAST OF THE MEASURED PAIRS
   ═══════════════════════════════════════════════════════════════ */
/* The FAQ chevron on the hotel pages: #9aa3b8 on white is 2.53:1 — an
   affordance nobody can see. */
.hl-faq summary .chev { color: #6b7280 !important; }

/* The app-download note sits on a near-white band and was white at 72%:
   1.05:1, effectively absent. */
.ft-dl-note { color: #4a5568 !important; }
.ft-dl-note a { color: #8a5a00 !important; }

/* ═══════════════════════════════════════════════════════════════
   WAVE SIX — the last of the measured pairs
   ═══════════════════════════════════════════════════════════════ */
/* Video-gallery caption: white at 40% on near-black, 3.79:1. */
.ft-vidgal-subtitle { color: rgba(255,255,255,.78) !important; }

/* "Worldwide Network" eyebrow: #b45309 on the dark globe panel, 3.28:1. */
.ft-globe-eyebrow { color: #f0b429 !important; }

/* Muted inks that were chosen for a white card and are used on dark ones.
   Each measured between 2.45 and 3.94:1 where it sits. */
[data-theme="dark"] .ft-about-cta-ghost,
[data-theme="dark"] .tc-price-note,
[data-theme="dark"] .ft-sc-terms,
[data-theme="dark"] .hl-faq summary .chev { color: #8892b0 !important; }

/* Operator/type badges: brand orange on its own pale wash, 3.46:1. */
.tp-type-badge.type-bus,
.bus-op-country { color: #a33900 !important; }

/* hl-grad-icon dark — the feature icons on /hotel take a 13% wash of their own
   colour as a background and the full colour as ink. That reads on a white
   card; on the dark card the ink sits between 1.65 and 2.88:1. Each is
   lightened to the same hue at a tint that reads on dark. */
[data-theme="dark"] .hl-grad-icon-1 i { color: #b49bdd !important; }
[data-theme="dark"] .hl-grad-icon-2 i { color: #7fb2ff !important; }
[data-theme="dark"] .hl-grad-icon-3 i { color: #8fb3ff !important; }
[data-theme="dark"] .hl-grad-icon-4 i { color: #5fd6a4 !important; }
[data-theme="dark"] .hl-grad-icon-5 i { color: #ffc48a !important; }
[data-theme="dark"] .hl-grad-icon-6 i { color: #ff9fb0 !important; }

/* The ACTIVE service-tab chip is gold in both themes — .ft-service-tab.active
   sets background:#F5A623 outright — so white on it is 2.03:1 in dark too.
   The light-scoped rule above covers only the inactive chips, which do change
   with the theme. */
.ft-service-tab.active .ft-service-tab-icon,
.ft-service-tab.active .ft-service-tab-icon i { color: #0D1B5E !important; }

/* ═══════════════════════════════════════════════════════════════
   FINAL SUB-3.0 PAIRS
   ═══════════════════════════════════════════════════════════════
   One or two spots each, all measured on the live pages. */

/* The sign-in footer note: #aaa on the pale auth panel, 2.07:1. */
.ft-auth-foot { color: #6d6d6d !important; }

/* Booking-status small print: #94a3b8 on white, 2.56:1. */
.ft-bs-wrap small, .booking-status small { color: #6b7280 !important; }

/* The date-picker placeholder sits on the coloured transport heroes —
   #9ca3af on teal is 2.88:1 and on green 3.10:1. */
.pdp-text.pdp-placeholder { color: #5b6472 !important; }
[data-theme="dark"] .pdp-text.pdp-placeholder { color: #b8c0d4 !important; }   /* was #949eba: 2.73:1 on the deep-teal ferry hero */

/* The homepage's route chevrons on the dark card, 2.45:1. */
[data-theme="dark"] .ft-route-pill i.fa-chevron-right,
[data-theme="dark"] .ft-route-arrow { color: #8f9bc4 !important; }

/* ═══════════════════════════════════════════════════════════════
   THE 3.0-4.5 BAND
   ═══════════════════════════════════════════════════════════════
   Readable, but under AA. Measured on the live pages. */

/* Muted inks picked for a white card, used on dark ones: 3.11 to 3.94:1. */
[data-theme="dark"] .ft-faq-a,
[data-theme="dark"] .esim-table td.no,
[data-theme="dark"] .hl-note,
[data-theme="dark"] .tc-price-note { color: #8892b0 !important; }

/* The date-picker placeholder on the deep transport heroes, 4.01 and 4.32.
   This rule was written unscoped and so also applied in LIGHT mode, where the
   field is white — #d3dae9 on white is 1.40:1, and the placeholder vanished on
   18 date fields across 8 pages. Dark only; light keeps #5b6472 from above. */
[data-theme="dark"] .pdp-text.pdp-placeholder { color: #d3dae9 !important; }

/* The gallery tab in its resting state: gold on the slate strip, 4.00:1. */
.ft-gallery-tab:not(.active) { color: #ffd479 !important; }

/* The small print beside the phone mock-ups, #777 on #f8f9fa, 4.25:1. */
.ft-mock-caption, .ft-showcase-note { color: #6d6d6d !important; }

/* ═══ LAST MUTED GREYS ═══
   Inks chosen for a white card, rendered on a dark one: 3.11 to 3.38:1. */
[data-theme="dark"] .ft-faq-a          { color: #8892b0 !important; }
[data-theme="dark"] .fcmp .no          { color: #8892b0 !important; }
[data-theme="dark"] .hl-photo-credits-label,
[data-theme="dark"] .hl-photo-credits span { color: #9aa5c4 !important; }

/* The homepage section subtitles are inline #6d6d6d, darkened so they clear AA
   on the light page. On the dark page that is 3.64:1 — section subtitle on dark
   needs the opposite move. */
[data-theme="dark"] .ft-section-head p,
[data-theme="dark"] .ft-section-head > p { color: #8892b0 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT MODE — INK THAT WAS ONLY EVER CHECKED ON DARK
   ═══════════════════════════════════════════════════════════════════════
   Homes for two inline colours that could not be theme-scoped where they
   were written. Each carries the brand value in dark and a deepened one in
   light, so the hue is kept and only the value moves. */

/* The footer's four e-mail rows. Brand gold on the white footer is 2.03:1. */
.ft-footer-mail-ic                      { color: #9f6c17; }
[data-theme="dark"] .ft-footer-mail-ic  { color: #F5A623; }

/* Shop stock badges. In stock was 2.54:1 on a white card, low stock 2.15:1. */
.pcard-stock-ok                         { color: #0c875e; }
.pcard-stock-low                        { color: #a46a07; }
.pcard-stock-out                        { color: #d73d3d; }
[data-theme="dark"] .pcard-stock-ok     { color: #34d399; }
[data-theme="dark"] .pcard-stock-low    { color: #fbbf24; }
[data-theme="dark"] .pcard-stock-out    { color: #f87171; }

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — INK MEASURED ON WHITE
   ═══════════════════════════════════════════════════════════════════════════
   Every rule below was generated from a measurement of the live pages, not
   chosen by eye: ops/audits/dark-contrast-probe.js with { theme: 'light' }
   across all 41 public pages. For each failing pair the ink is walked along its
   OWN hue until it clears the ratio that element needs on the surface it was
   actually measured against — so a grey stays a grey and the brand gold stays a
   gold; only the value moves.

   Two rules govern the shape of this block:

   1. EVERY RULE IS SCOPED TO LIGHT. Brand gold #F5A623 is correct on dark navy
      and wrong on white — it is 2.03:1 on the white footer and 7.76:1 the other
      way round. A blanket `color:` would fix one theme by breaking the other,
      which is how roughly one fix in four went wrong on this codebase before.

   2. EVERY RULE HANGS OFF A COMPONENT CLASS, never off a Font Awesome glyph
      class. `i.fas.fa-star` names a shape, not a place: repainting it would
      also repaint the stars sitting on dark panels, where they are already
      right. So each selector is anchored on the nearest real component.

   The logotype is deliberately absent. `.ft-logo-trip` and the footer's
   `<span style="color:#F5A623;">Trip</span>` stay brand gold at 2.03:1 — WCAG
   exempts logotypes, and it is the brand mark.
   ═══════════════════════════════════════════════════════════════════════════ */

/* rgb(245,166,35) -> #986716   91 spot(s), 21 page(s), worst 1.66:1 */
:root:not([data-theme="dark"]) a.hl-section-link,
:root:not([data-theme="dark"]) a.hl-section-link i.fas.fa-arrow-right,
:root:not([data-theme="dark"]) div.addemo i.fas.fa-chart-pie,
:root:not([data-theme="dark"]) div.container i.fas.fa-quote-right,
:root:not([data-theme="dark"]) div.dest-card-price,
:root:not([data-theme="dark"]) div.fcard i.fas.fa-balance-scale,
:root:not([data-theme="dark"]) div.fcard i.fas.fa-coins,
:root:not([data-theme="dark"]) div.fcard i.fas.fa-crown,
:root:not([data-theme="dark"]) div.fcard i.fas.fa-exchange-alt,
:root:not([data-theme="dark"]) div.fov-num,
:root:not([data-theme="dark"]) div.ft-about-eyebrow i.fas.fa-star,
:root:not([data-theme="dark"]) div.ft-card i.fas.fa-certificate,
:root:not([data-theme="dark"]) div.ft-card i.fas.fa-history,
:root:not([data-theme="dark"]) div.ft-compare i.fas.fa-balance-scale,
:root:not([data-theme="dark"]) div.ft-rel-loc i.fas.fa-map-marker-alt,
:root:not([data-theme="dark"]) div.ft-review-stars,
:root:not([data-theme="dark"]) div.ft-stars i.fas.fa-star,
:root:not([data-theme="dark"]) div.ft-stars i.fas.fa-star-half-alt,
:root:not([data-theme="dark"]) div.ft-stats-eyebrow,
:root:not([data-theme="dark"]) div.ft-td-meta-item i.fas.fa-clock,
:root:not([data-theme="dark"]) div.ft-td-meta-item i.fas.fa-map-marker-alt,
:root:not([data-theme="dark"]) div.ft-td-meta-item i.fas.fa-users,
:root:not([data-theme="dark"]) div.hl-review-stars,
:root:not([data-theme="dark"]) div.hl-section-title i.fas.fa-circle-question,
:root:not([data-theme="dark"]) div.hl-section-title i.fas.fa-compass,
:root:not([data-theme="dark"]) div.hl-section-title i.fas.fa-hotel,
:root:not([data-theme="dark"]) div.hl-section-title i.fas.fa-map-marked-alt,
:root:not([data-theme="dark"]) div.hl-section-title i.fas.fa-map-marker-alt,
:root:not([data-theme="dark"]) div.hl-section-title i.fas.fa-route,
:root:not([data-theme="dark"]) div.hl-section-title i.fas.fa-star,
:root:not([data-theme="dark"]) div.hl-why-header span,
:root:not([data-theme="dark"]) div.hl-why-icon.hl-why-icon-1 i.fas.fa-star,
:root:not([data-theme="dark"]) div.inq-title i.fas.fa-paper-plane,
:root:not([data-theme="dark"]) div.med-trust i.fas.fa-certificate,
:root:not([data-theme="dark"]) div.med-trust i.fas.fa-headset,
:root:not([data-theme="dark"]) div.med-trust i.fas.fa-language,
:root:not([data-theme="dark"]) div.med-trust i.fas.fa-plane-departure,
:root:not([data-theme="dark"]) div.op-country i.fas.fa-map-marker-alt,
:root:not([data-theme="dark"]) div.pkg-meta i.fas.fa-map-marker-alt,
:root:not([data-theme="dark"]) div.pkg-price,
:root:not([data-theme="dark"]) div.section-title i.fas.fa-star,
:root:not([data-theme="dark"]) div.tgtips i.fas.fa-lightbulb,
:root:not([data-theme="dark"]) div.tp-inquiry-title i.fa.fa-search,
:root:not([data-theme="dark"]) div.tr-results-count i.fas.fa-layer-group,
:root:not([data-theme="dark"]) div.tr-sec-h2 span,
:root:not([data-theme="dark"]) div.tr-sec-title span,
:root:not([data-theme="dark"]) div.tr-stat-lbl i.fas.fa-compass,
:root:not([data-theme="dark"]) div.tr-stat-lbl i.fas.fa-globe,
:root:not([data-theme="dark"]) div.tr-stat-lbl i.fas.fa-headset,
:root:not([data-theme="dark"]) div.tr-stat-lbl i.fas.fa-suitcase-rolling,
:root:not([data-theme="dark"]) div.tr-stat-num span,
:root:not([data-theme="dark"]) span.accent,
:root:not([data-theme="dark"]) span.bus-route-arrow i.fa.fa-long-arrow-right,
:root:not([data-theme="dark"]) span.bus-section-label,
:root:not([data-theme="dark"]) span.bus-section-label i.fa.fa-map-marker,
:root:not([data-theme="dark"]) span.tp-route-arrow i.fa.fa-long-arrow-right,
:root:not([data-theme="dark"]) span.tp-section-label,
:root:not([data-theme="dark"]) span.tp-section-label i.fa.fa-building,
:root:not([data-theme="dark"]) span.tp-section-label i.fa.fa-globe,
:root:not([data-theme="dark"]) span.tp-section-label i.fa.fa-map-marker,
:root:not([data-theme="dark"]) span.tr-pkg-meta-item.ic-pin,
:root:not([data-theme="dark"]) span.tr-pkg-meta-item.ic-pin i.fas.fa-map-marker-alt,
:root:not([data-theme="dark"]) span.trn-route-arrow i.fa.fa-long-arrow-right,
:root:not([data-theme="dark"]) span.trn-section-label,
:root:not([data-theme="dark"]) span.trn-section-label i.fa.fa-map-marker,
:root:not([data-theme="dark"]) span.trn-section-label i.fa.fa-train,
:root:not([data-theme="dark"]) td.feature i.fas.fa-certificate,
:root:not([data-theme="dark"]) td.feature i.fas.fa-kaaba { color: #986716 !important; }

/* rgb(136,136,136) -> #717171   29 spot(s), 19 page(s), worst 3.30:1 */
:root:not([data-theme="dark"]) a.tgql-card p,
:root:not([data-theme="dark"]) div.addemo p,
:root:not([data-theme="dark"]) div.addemo-item p,
:root:not([data-theme="dark"]) div.adstat-lbl,
:root:not([data-theme="dark"]) div.cstat-lbl,
:root:not([data-theme="dark"]) div.dstat-lbl,
:root:not([data-theme="dark"]) div.fhow-box p,
:root:not([data-theme="dark"]) div.fov-lbl,
:root:not([data-theme="dark"]) div.fplan-cov,
:root:not([data-theme="dark"]) div.ft-blog-stat-lbl,
:root:not([data-theme="dark"]) div.ft-cert-stat-lbl,
:root:not([data-theme="dark"]) div.ft-feat-box p,
:root:not([data-theme="dark"]) div.ft-gal-stat-lbl,
:root:not([data-theme="dark"]) div.ft-gallery-empty p,
:root:not([data-theme="dark"]) div.ft-pkg-price span,
:root:not([data-theme="dark"]) div.ft-rel-loc,
:root:not([data-theme="dark"]) div.ft-stat-lbl,
:root:not([data-theme="dark"]) div.ft-step p,
:root:not([data-theme="dark"]) div.hosp-loc,
:root:not([data-theme="dark"]) div.nstat-lbl,
:root:not([data-theme="dark"]) div.prostat-lbl,
:root:not([data-theme="dark"]) div.sc-sub,
:root:not([data-theme="dark"]) div.shop-toolbar span,
:root:not([data-theme="dark"]) div.tgst-lbl,
:root:not([data-theme="dark"]) span.ft-share-label,
:root:not([data-theme="dark"]) span.tp-type-card-count { color: #717171 !important; }

/* rgb(139,150,176) -> #8a95ae   12 spot(s), 3 page(s), worst 2.96:1 */
:root:not([data-theme="dark"]) a.hl-chip i.fas.fa-building,
:root:not([data-theme="dark"]) a.hl-chip i.fas.fa-hotel,
:root:not([data-theme="dark"]) a.hl-chip i.fas.fa-house,
:root:not([data-theme="dark"]) a.hl-chip i.fas.fa-umbrella-beach { color: #8a95ae !important; }

/* rgb(107,116,136) -> #6a7387   9 spot(s), 5 page(s), worst 4.45:1 */
:root:not([data-theme="dark"]) span.ft-visa-credits-label,
:root:not([data-theme="dark"]) span.hl-credits-lbl,
:root:not([data-theme="dark"]) span.hl-photo-credit a,
:root:not([data-theme="dark"]) span.hl-photo-credits-label,
:root:not([data-theme="dark"]) span.hl-prop-from { color: #6a7387 !important; }

/* rgb(108,117,125) -> #6a737b   9 spot(s), 4 page(s), worst 4.37:1
   Bootstrap's own .text-muted, which was never checked on this page ground. */
:root:not([data-theme="dark"]) p.sec-sub,
:root:not([data-theme="dark"]) p.sec-sub.text-center,
:root:not([data-theme="dark"]) p.section-sub,
:root:not([data-theme="dark"]) p.section-sub.text-center,
:root:not([data-theme="dark"]) p.small.text-muted,
:root:not([data-theme="dark"]) span.fw-semibold { color: #525F73 !important; }

/* rgb(107,114,128) -> #676d7b   8 spot(s), 2 page(s), worst 4.23:1 */
:root:not([data-theme="dark"]) a.ft-about-cta-ghost,
:root:not([data-theme="dark"]) div.text-center.mb-4 p,
:root:not([data-theme="dark"]) p.ft-about-desc,
:root:not([data-theme="dark"]) p.ft-globe-sub { color: #676d7b !important; }

/* rgb(170,170,170) -> #707070   7 spot(s), 4 page(s), worst 2.17:1 */
:root:not([data-theme="dark"]) div.ft-support-card span,
:root:not([data-theme="dark"]) div.hl-review-trip,
:root:not([data-theme="dark"]) div.hl-section-title span,
:root:not([data-theme="dark"]) div.pkg-meta i.fas.fa-users,
:root:not([data-theme="dark"]) div.pkg-price small,
:root:not([data-theme="dark"]) div.rc-from { color: #707070 !important; }

/* rgb(119,119,119) -> #717171   7 spot(s), 5 page(s), worst 4.18:1 */
:root:not([data-theme="dark"]) div.ft-visa-section-head p,
:root:not([data-theme="dark"]) div.ft-visa-step p,
:root:not([data-theme="dark"]) div.step-desc,
:root:not([data-theme="dark"]) label.mb-0,
:root:not([data-theme="dark"]) span.ms-auto { color: #717171 !important; }

/* rgb(204,204,204) -> #767676   6 spot(s), 4 page(s), worst 1.49:1
   td.no also carries #aaa on /why-faithtrip; #767676 clears both. */
:root:not([data-theme="dark"]) div.ft-bread i.fas.fa-chevron-right,
:root:not([data-theme="dark"]) span.ft-views i.fas.fa-eye,
:root:not([data-theme="dark"]) td.no,
:root:not([data-theme="dark"]) td.no i.fas.fa-times { color: #767676 !important; }

/* rgb(187,187,187) -> #707070   5 spot(s), 4 page(s), worst 1.78:1 */
:root:not([data-theme="dark"]) a.ft-airline-row i.fas.fa-chevron-right,
:root:not([data-theme="dark"]) div.nempty p,
:root:not([data-theme="dark"]) div.pro-empty p,
:root:not([data-theme="dark"]) p.pro-empty-note { color: #707070 !important; }

/* rgb(119,119,136) -> #707080   4 spot(s), 1 page(s), worst 4.10:1 */
:root:not([data-theme="dark"]) div.hl-section-sub,
:root:not([data-theme="dark"]) div.hl-why-card p,
:root:not([data-theme="dark"]) div.hl-why-header p,
:root:not([data-theme="dark"]) div.inq-sub { color: #707080 !important; }

/* rgb(245,158,11) -> #a46a07   3 spot(s), 3 page(s), worst 2.15:1
   `div.op-head div` was in this list and had to come out: those are the ferry
   operator initials, and they sit on a NAVY tile, not on white. Grouping them
   with the tour stars by their shared ink and taking the darkest replacement
   pushed a passing amber down to 2.28:1 — a colour is only ever correct
   relative to the surface beneath it. */
:root:not([data-theme="dark"]) div.ft-tour-stars i.fas.fa-star { color: #a46a07 !important; }

/* rgb(138,147,168) -> #6c7383   3 spot(s), 2 page(s), worst 2.92:1 */
:root:not([data-theme="dark"]) span.ft-visa-credit,
:root:not([data-theme="dark"]) span.ft-visa-credits-src,
:root:not([data-theme="dark"]) span.hl-photo-credit { color: #6c7383 !important; }

/* rgb(232,160,32) -> #ba801a   3 spot(s), 3 page(s), worst 2.00:1 */
:root:not([data-theme="dark"]) div.hl-fb-icon-wrap.hl-grad-icon-2 i.fas.fa-tags { color: #ba801a !important; }

/* rgb(240,180,41) -> #846317   2 spot(s), 2 page(s), worst 1.53:1 */
:root:not([data-theme="dark"]) div.ft-globe-eyebrow { color: #846317 !important; }

/* rgb(152,161,182) -> #6f7685   2 spot(s), 2 page(s), worst 2.59:1 */
:root:not([data-theme="dark"]) div.ft-route-fare span.lbl { color: #6f7685 !important; }

/* rgb(16,185,129) -> #0c875e   2 spot(s), 2 page(s), worst 2.54:1 */
:root:not([data-theme="dark"]) td.yes,
:root:not([data-theme="dark"]) td.yes i.fas.fa-check-circle { color: #0c875e !important; }

/* rgb(40,167,69) -> #208738   2 spot(s), 1 page(s), worst 3.13:1 */
:root:not([data-theme="dark"]) div.rc-amount,
:root:not([data-theme="dark"]) div.tc-price { color: #208738 !important; }

/* rgb(154,163,184) -> #888fa2   2 spot(s), 1 page(s), worst 2.36:1 */
:root:not([data-theme="dark"]) div.ft-visa-gridsearch i.fas.fa-search,
:root:not([data-theme="dark"]) span.ft-visa-country-meta i.far.fa-clock { color: #888fa2 !important; }

/* The long tail: one selector each. */
:root:not([data-theme="dark"]) div.dest-card-count      { color: #707784 !important; }  /* 2.54:1 */
:root:not([data-theme="dark"]) div.hl-reviews-header p  { color: #757584 !important; }  /* 3.48:1 */
:root:not([data-theme="dark"]) a.pro-empty-btn i.fab.fa-whatsapp { color: #929292 !important; }  /* 1.32:1 */
:root:not([data-theme="dark"]) span.tr-price-lbl        { color: #727780 !important; }  /* 2.54:1 */
:root:not([data-theme="dark"]) span.tp-country-code     { color: #767676 !important; }  /* 2.85:1 */
:root:not([data-theme="dark"]) div.tc-price-note        { color: #6e7686 !important; }  /* 3.13:1 */

/* ─── The premium datepicker on a dark panel ──────────────────────────────
   .pdp-display hard-codes a navy calendar icon and a mid-grey placeholder,
   which is right on a white field and wrong everywhere else. Four transport
   pages drop it into an inquiry panel that is a deep gradient in BOTH themes,
   so the icon came out navy-on-navy at 1.00:1 — invisible, in light mode, on
   the live site. This is keyed to the panel rather than to the theme, because
   the panel is dark either way. */
.bus-inquiry-wrap .pdp-display i,
.trn-inquiry-wrap .pdp-display i,
.inquiry-section  .pdp-display i,
.inq-box          .pdp-display i { color: #a8bcff !important; }

.bus-inquiry-wrap .pdp-text,
.trn-inquiry-wrap .pdp-text,
.inquiry-section  .pdp-text,
.inq-box          .pdp-text { color: #eaeef8 !important; }

.bus-inquiry-wrap .pdp-text.pdp-placeholder,
.trn-inquiry-wrap .pdp-text.pdp-placeholder,
.inquiry-section  .pdp-text.pdp-placeholder,
.inq-box          .pdp-text.pdp-placeholder { color: #c3cce4 !important; }

/* ═══ LIGHT MODE — THE LAST OF IT ═══════════════════════════════════════
   The remainder after the measured sheet above: colours written inline (so no
   ordinary rule could reach them until the markup grew a hook), and three
   photo scrims that were too thin for the white text sitting on them. */

/* A gold that reads on a pale ground, and the brand gold on a dark one. The
   markup asks for this by class now rather than repeating a hex inline. */
.ft-gold-ink                          { color: #986716; }
[data-theme="dark"] .ft-gold-ink      { color: #F5A623; }
/* …except where the class lands on a dark band. `.fcta` is the eSIM
   call-to-action, navy in BOTH themes, so the pale-ground value was wrong there
   and produced 2.89:1. A colour class is only safe where its surface is known. */
.fcta .ft-gold-ink,
[data-theme="dark"] .fcta .ft-gold-ink { color: #F5A623; }

/* /transport/bus FAQ chevrons: brand gold on the white accordion, 2.03:1.
   (The probe names these `i.fa.fa-chevron-down` because it keeps only the
   first two classes; the element does carry .faq-icon.) */
:root:not([data-theme="dark"]) .faq-icon { color: #986716 !important; }

/* /visa "Why choose us": the four tiles carry their colour as data, painting a
   9% tint behind an icon of the same hue. Three of the four read fine; the gold
   one is 1.90:1. Only the gold is moved, and only in light. */
:root:not([data-theme="dark"]) .ft-why-ic[style*="#F5A623"] { color: #986716 !important; }

/* /esim green ticks and the comparison table's "yes": 2.54:1 on white. */
:root:not([data-theme="dark"]) .fplan-body ul li i,
:root:not([data-theme="dark"]) .fcmp .yes,
:root:not([data-theme="dark"]) .ft-check { color: #0c875e !important; }

/* /visa small print, #777 on the pale section ground. */
:root:not([data-theme="dark"]) #visaGridCount,
:root:not([data-theme="dark"]) .ft-visa-why-desc { color: #6f6f6f !important; }

/* /visa "details" disclosure arrows, slate on white: 2.53:1. */
:root:not([data-theme="dark"]) details > summary > i.fas.fa-chevron-right { color: #888fa2 !important; }

/* ─── Scrims that were too thin for the text on them ──────────────────────
   White captions over a photograph. The photo is whatever the operator
   uploaded, so the scrim has to carry the contrast on its own; each of these
   was leaving the caption between 2.96 and 3.63:1 at the point where the text
   actually sits. Measured at the caption's own position along the gradient,
   not at the gradient's darkest end. */
.ft-dest-tile-reveal {
    background: linear-gradient(to top, rgba(13,27,94,.96) 0%, rgba(13,27,94,.86) 50%, rgba(13,27,94,.55) 100%) !important;
}
.ft-visastrip-body {
    background: linear-gradient(to top, rgba(6,14,40,.95), rgba(6,14,40,.45)) !important;
}

/* ─── Gold gradient text on a near-white band ─────────────────────────────
   `background-clip:text` paints the glyphs with the gradient itself, so the
   ink IS the gradient: a gold-to-amber sweep on #fbf9ff reads at 2.16:1. The
   gradient is deepened in light and left as the brand sweep in dark. */
:root:not([data-theme="dark"]) .ft-globe-title span,
:root:not([data-theme="dark"]) .ft-globe-stat-num {
    background: linear-gradient(135deg, #8a5a00 0%, #a86f10 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* ═══ THE OTHER HALF OF THE LIGHT-MODE WORK ═════════════════════════════
   Darkening a colour for light mode only stays safe while dark mode has its own
   value to fall back on. Two cases here where it did not:

   1. Base declarations I assumed had a `[data-theme="dark"]` override a few
      lines below, because most of their neighbours did. The hotel property card
      did not — so darkening `.hl-prop-where` and friends for the white card
      took them to 3.9:1 on the dark one. They get the override they were
      missing.

   2. Colours written INLINE. An inline style cannot be overridden by an
      ordinary rule, so changing the literal fixes light and pins dark to the
      same value. The codebase's existing idiom is to select on the inline text
      itself; these follow it, keyed to the NEW values. */

/* ── 1. the hotel property card ─────────────────────────────────────── */
[data-theme="dark"] .hl-prop-where       { color: #9aa5c4 !important; }
[data-theme="dark"] .hl-prop-room        { color: #9aa5c4 !important; }
[data-theme="dark"] .hl-prop-room i      { color: #7c88a8 !important; }
[data-theme="dark"] .hl-prop-from        { color: #9aa5c4 !important; }
[data-theme="dark"] .hl-prop-price small { color: #9aa5c4 !important; }

/* ── 2. inline literals, re-lightened for dark ──────────────────────── */
/* The muted grey captions on /transport/ferry and /visa. */
[data-theme="dark"] [style*="color:#6f6f6f"] { color: #8892b0 !important; }
/* The ferry terminal's address block, near-black body copy. */
[data-theme="dark"] [style*="color:#2b2b2b"] { color: #d7dcea !important; }
/* The ferry operator star rating, deepened amber. */
[data-theme="dark"] [style*="color:#a46a07"] { color: #f59e0b !important; }
/* The ferry "Operators" section tag, deepened teal. */
[data-theme="dark"] .sec-tag[style*="#117584" i] { color: #7fd3e4 !important; }

/* ═══ NAVIGATION IN DARK MODE ═══════════════════════════════════════════
   Every top-level nav item was switched off in the CMS, so none of this markup
   had rendered since dark mode was built — and all of it carried a hard-coded
   brand navy with no dark value. Switching the menu on exposed the lot:
   #0D1B5E on the near-black navbar measures 1.24:1, i.e. invisible.

   The same shape of defect as the mobile hamburger. Anything that renders only
   under a CMS flag needs checking in both themes when the flag is turned on;
   a sweep cannot measure markup that is not on the page. */

[data-theme="dark"] .ft-nav-link           { color: #d4d9ee; }
[data-theme="dark"] .ft-nav-link:hover     { color: #ffffff; background: rgba(91,126,239,.16); }
[data-theme="dark"] .ft-nav-link.active    { color: #ffffff; background: rgba(91,126,239,.14); }

[data-theme="dark"] .ft-mobile-link        { color: #d4d9ee; }
[data-theme="dark"] .ft-mobile-link:hover  { color: #ffffff; background: rgba(91,126,239,.16); }
[data-theme="dark"] .ft-mobile-link.active { color: #ffffff; background: rgba(91,126,239,.14); border-left-color: #F5A623; }

/* The dropdown panels stayed pure white in dark mode: readable, but a white
   sheet dropped onto a near-black page. */
[data-theme="dark"] .ft-nav-dd {
    background: #0b1836;
    border-color: rgba(91,126,239,.22);
    box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
[data-theme="dark"] .ft-nav-dd-item          { color: #d4d9ee; }
[data-theme="dark"] .ft-nav-dd-item i        { color: #a8bcff; }
[data-theme="dark"] .ft-nav-dd-item:hover    { background: rgba(91,126,239,.14); color: #ffffff; }
[data-theme="dark"] .ft-nav-dd-item.active   { background: rgba(91,126,239,.20); color: #ffffff; }

/* The mobile "Others" sub-panel and its section headings are written inline, so
   they are named by id rather than by class. */
[data-theme="dark"] #ftMobileOthersSub                      { background: #0b1836 !important; }
[data-theme="dark"] #ftMobileOthersSub [style*="color:#0D1B5E"] { color: #a8bcff !important; }