/* ===========================================================================
   FLY-TLV THEME — visual override layer
   ---------------------------------------------------------------------------
   Loaded AFTER app.css, only when opted in with ?theme=on.
   Purely visual: never sets display:none, never changes layout structure,
   never touches behaviour. Delete this file to revert.

   Direction: crisp, cool and high-contrast. A light blue-grey page so white
   cards genuinely lift off it, a deep navy table header that keeps the brand
   the blue bar already carried, and fully saturated colour reserved for the
   one classification that is unique to this site — low-cost / codeshare /
   legacy. Nothing washed out, nothing beige.
   =========================================================================== */

:root{
  /* ground + structure */
  --t-bg:#EDF1F7;          /* cool blue-grey page, so cards read as raised */
  --t-surface:#FFFFFF;     /* cards, table body                            */
  --t-well:#F4F7FB;        /* inset controls                               */
  --t-foot:#F8FAFD;        /* card footers                                 */
  --t-ink:#0A1628;         /* deep navy ink, not grey                      */
  --t-ink2:#3F4D63;   /* was #4E5D75 -> 4.1:1, under AA */
  --t-ink3:#606D86;   /* was #8492AB (3.2:1) then #67758F (4.25:1 on tinted
                         card grounds) -- both under AA at the 12px used on the
                         home cards. Clears 4.5:1 on every ground it sits on. */
  --t-line:#D8E1ED;
  --t-line-strong:#C2CFE0;

  /* brand */
  --t-navy:#0B2E6F;        /* table headers, structural bars               */
  --t-navy-ink:#FFFFFF;
  --t-accent:#1B62D2;      /* every interactive element; AA on tinted grounds */
  --t-accent-ink:#FFFFFF;
  /* Any ground that carries WHITE text. Identical in both themes on purpose:
     the dark-mode accent is a light blue, and white on it measures ~2.5:1.
     Was hardcoded as #1F6FEB in three separate dark-mode overrides.        */
  --t-fill:#1F6FEB;
  --t-accent-soft:#E3EDFE;
  --t-accent-line:#B9D2FB;
  --t-live:#0CA678;

  /* the three airline types — saturated on purpose, they are the site's
     one genuinely distinctive piece of information design */
  --t-lc:#BE4809;   --t-lc-bg:#FFF0E6;  --t-lc-line:#FFD4B8;   /* low-cost  */
  --t-cs:#7048E8;   --t-cs-bg:#F0EBFF;  --t-cs-line:#D9CCFF;   /* codeshare */
  --t-lg:#0B7285;   --t-lg-bg:#E0F5F8;  --t-lg-line:#B8E4EC;   /* legacy    */

  /* status */
  --t-ok:#0B7A47;   --t-ok-bg:#DDF5E9;
  --t-warn:#9A5B00; --t-warn-bg:#FFF0D4;
  --t-bad:#C02626;  --t-bad-bg:#FDE5E5;

  /* depth — the flatness complaint: three real elevation steps */
  --t-e1:0 1px 2px rgba(10,22,40,.06);
  --t-e2:0 1px 3px rgba(10,22,40,.08), 0 6px 16px -6px rgba(10,22,40,.12);
  --t-e3:0 2px 6px rgba(10,22,40,.10), 0 18px 40px -16px rgba(10,22,40,.22);

  --t-radius:16px;
  --t-radius-sm:10px;
}

body.dark-mode{
  --t-bg:#080D16;
  --t-surface:#111925;
  --t-surface-2:#1B2537;   /* one step up: table heads, striped rows, the header */
  --t-well:#0D1520;
  --t-foot:#0E1622;
  --t-ink:#EAF0F8;
  --t-ink2:#A6B5CA;   /* was #94A5BD -> 4.4:1 on the dark surface */
  --t-ink3:#8394AC;   /* was #6B7C96, too dim for labels */
  --t-line:#1F2B3D;
  --t-line-strong:#2C3A50;

  --t-navy:#123A80;
  --t-navy-ink:#EAF2FF;
  --t-accent:#5B9BFF;
  --t-accent-ink:#05122B;
  --t-fill:#1F6FEB;   /* deliberately the light-mode blue — see :root */
  --t-accent-soft:#132447;
  --t-accent-line:#22406F;
  --t-live:#2BD9A0;

  --t-lc:#FF9052;  --t-lc-bg:#2B1710;  --t-lc-line:#46281A;
  --t-cs:#A98CFF;  --t-cs-bg:#1D1735;  --t-cs-line:#2F2553;
  --t-lg:#49C6DC;  --t-lg-bg:#0D2A31;  --t-lg-line:#164049;

  --t-ok:#3DD68C;  --t-ok-bg:#0C2A1C;
  --t-warn:#FFC145; --t-warn-bg:#2C2210;
  --t-bad:#FF7A7A; --t-bad-bg:#2E1414;

  --t-e1:0 1px 2px rgba(0,0,0,.5);
  --t-e2:0 1px 3px rgba(0,0,0,.55), 0 8px 20px -8px rgba(0,0,0,.7);
  --t-e3:0 2px 8px rgba(0,0,0,.6), 0 22px 46px -18px rgba(0,0,0,.85);
}

/* --- page ground ---------------------------------------------------------- */
body,
body.dark-mode{
  background:var(--t-bg) !important;
  color:var(--t-ink) !important;
}

/* --- navbar: solid, crisp, with a real edge ------------------------------- */
.navbar,
body.dark-mode .navbar{
  background:var(--t-surface) !important;
  border-bottom:1px solid var(--t-line) !important;
  box-shadow:var(--t-e1) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
/* brand was transparent gradient-filled text — give it real, solid ink */
.navbar-brand,
.premium-nav-brand{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:var(--t-accent) !important;
  color:var(--t-accent) !important;
  text-shadow:none !important;
  letter-spacing:-.02em;
}
.nav-brand-sub{ color:var(--t-ink2) !important; }

.navbar-nav .nav-link,
body.dark-mode .navbar-nav .nav-link{ color:var(--t-ink2) !important; border-radius:9px; }
.navbar-nav .nav-link:hover{ background:var(--t-well) !important; color:var(--t-ink) !important; }
.navbar-nav .nav-link.active,
body.dark-mode .navbar-nav .nav-link.active{
  color:var(--t-accent) !important;
  background:var(--t-accent-soft) !important;
}
.dropdown-menu{
  background:var(--t-surface) !important;
  border:1px solid var(--t-line) !important;
  border-radius:var(--t-radius-sm) !important;
  box-shadow:var(--t-e3) !important;
}
.dropdown-item{ color:var(--t-ink2) !important; border-radius:8px; }
.dropdown-item:hover,.dropdown-item:focus{
  background:var(--t-accent-soft) !important; color:var(--t-accent) !important;
}
.dd-head{ color:var(--t-ink3) !important; }

/* --- hero: solid colour, no gradient text, no glow ------------------------ */
/* The hero was a full-bleed band with a single bottom rule, so it read as a
   different kind of object from everything under it. Every page's content is
   cards; the hero is now one too — same radius, same hairline, same elevation,
   inset from the edges. One rule, because all 39 templates share .hero-section. */
.hero-section,
body.dark-mode .hero-section{
  background:var(--t-surface) !important;
  background-image:none !important;
  border:1px solid var(--t-line) !important;
  border-radius:var(--t-radius) !important;
  box-shadow:var(--t-e1) !important;
  margin:14px auto 18px !important;
  width:calc(100% - 24px) !important;
  max-width:1400px !important;
  padding:clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem) !important;
  overflow:hidden !important;
}
@media (max-width:991px){
  .hero-section, body.dark-mode .hero-section{
    width:calc(100% - 16px) !important;
    border-radius:var(--t-radius-sm) !important;
    margin:10px auto 14px !important;
  }
}
.hero-section::before{ opacity:0 !important; }
.hero-section::after{
  background:linear-gradient(90deg, transparent, var(--t-accent) 30%, var(--t-accent) 70%, transparent) !important;
  opacity:.5;
}
.hero-orb{ opacity:0 !important; }

.hero-section h1,
body.dark-mode .hero-section h1{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:var(--t-ink) !important;
  color:var(--t-ink) !important;
  letter-spacing:-.035em;
  /* text-wrap:balance was here. On /travel-insurance it collapsed the h1 to a
     single line's height while the text still needed two, clipping it. */
}
.hero-section p,
body.dark-mode .hero-section p{ color:var(--t-ink2) !important; }

.hero-badge,
body.dark-mode .hero-badge{
  background:var(--t-accent) !important;
  border:1px solid var(--t-accent) !important;
  color:var(--t-accent-ink) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

}
.hero-badge-dot{ background:var(--t-navy-ink) !important; }

/* --- cards ---------------------------------------------------------------
   Deliberately NOT !important on background/colour: several widgets carry
   an inline gradient plus inline white text (crowds panel, tracker promo).
   !important beats their inline background but not their inline colour,
   which produced white text on a white card. Matching specificity and
   winning on source order lets those cards keep themselves.             */
.card,
.glass-card{
  background:var(--t-surface);
  border:1px solid var(--t-line);
  border-radius:var(--t-radius);
  box-shadow:var(--t-e2);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.dark-mode .card,
body.dark-mode .glass-card{
  background:var(--t-surface);
  border:1px solid var(--t-line);
  box-shadow:var(--t-e2);
}
.card-header:not(.bg-transparent){
  background:var(--t-foot);
  border-bottom:1px solid var(--t-line);
}
.accent-header{
  background:var(--t-navy) !important;
  color:var(--t-navy-ink) !important;
}
.accent-header .breadcrumb-item,
.accent-header .breadcrumb-item.active,
.accent-header h1{ color:var(--t-navy-ink) !important; }

/* --- buttons: saturated, no glow ----------------------------------------- */
.btn-cta,
.btn-gradient-primary{
  background:var(--t-accent) !important;
  color:var(--t-accent-ink) !important;
  border:none !important;
  box-shadow:var(--t-e1) !important;
  border-radius:var(--t-radius-sm) !important;

}
.btn-cta:hover,.btn-gradient-primary:hover{ filter:brightness(1.08); transform:none !important; }

.btn-cta-outline,
body.dark-mode .btn-cta-outline{
  color:var(--t-accent) !important;
  border:2px solid var(--t-accent-line) !important;
  border-radius:var(--t-radius-sm) !important;
  background:var(--t-surface) !important;
}
.btn-cta-outline:hover,
body.dark-mode .btn-cta-outline:hover{
  background:var(--t-accent-soft) !important;
  border-color:var(--t-accent) !important;
  transform:none !important;
}
.btn-outline-primary{
  color:var(--t-accent) !important;
  border-color:var(--t-accent-line) !important;
  background:var(--t-surface) !important;

}
.btn-outline-primary:hover{
  background:var(--t-accent) !important;
  border-color:var(--t-accent) !important;
  color:var(--t-accent-ink) !important;
}
.text-primary{ color:var(--t-accent) !important; }

/* Bootstrap's raw utility colours never cleared AA on our near-white grounds
   (.text-warning #d97706 = 3.18, .text-danger #d9534f = 3.86, .text-muted
   #6c757d = 4.44 on #f7f7f7). The theme already carries audited tokens for
   exactly these roles, so map the utilities onto them instead of keeping a
   second, untested palette. Dark mode overrides follow the same tokens. */
.text-warning{ color:var(--t-warn) !important; }
.text-danger { color:var(--t-bad)  !important; }
.text-success{ color:var(--t-ok)   !important; }
.text-muted  { color:var(--t-ink2) !important; }
.text-secondary{ color:var(--t-ink2) !important; }

/* --- filter bar ----------------------------------------------------------- */
.premium-filter-bar{
  background:var(--t-surface) !important;
  border:1px solid var(--t-line) !important;
  border-radius:var(--t-radius) !important;
  box-shadow:var(--t-e2) !important;
}
.unit-label,.mobile-unit-label{ color:var(--t-ink3) !important; letter-spacing:.08em; }
/* fill lives in the SELECT BOXES block at the end of this file — nowhere else */
.unit-select,.mobile-unit-select,
.search-input,.mobile-search-input{
  border:none !important;
  color:var(--t-ink) !important;
  border-radius:var(--t-radius-sm) !important;
}
.search-input::placeholder,.mobile-search-input::placeholder{ color:var(--t-ink3) !important; }
.search-icon{ color:var(--t-accent) !important; }
.btn-clear-minimal{
  background:var(--t-well) !important;
  border:1px solid var(--t-line-strong) !important;
  color:var(--t-ink2) !important;
  border-radius:var(--t-radius-sm) !important;
}
.btn-clear-minimal:hover{ color:var(--t-bad) !important; border-color:var(--t-bad) !important; }

.type-dot-group,.dir-toggle,.direction-toggle{
  background:var(--t-well) !important;
  border:1px solid var(--t-line-strong) !important;
  border-radius:var(--t-radius-sm) !important;
}
.type-dot.active,.dir-toggle-btn.active{
  background:var(--t-accent) !important;
  color:var(--t-accent-ink) !important;
  box-shadow:var(--t-e1) !important;
}
.mobile-chip{
  background:var(--t-well) !important;
  border:1px solid var(--t-line-strong) !important;
  color:var(--t-ink2) !important;

}
.mobile-chip.active{
  background:var(--t-accent) !important;
  color:var(--t-accent-ink) !important;
  border-color:var(--t-accent) !important;
}

/* --- the airline classification: this site's signature -------------------- */
.lowcost-dot{ background:var(--t-lc) !important; }
.codeshare-dot{ background:var(--t-cs) !important; }
.legacy-dot{ background:var(--t-lg) !important; }

/* Airline names are proper nouns set at ~12px and repeated hundreds of times
   down the page. They want the body face at a normal weight — the display
   face and the semibold I had here made the column shout. */
.airline-chip,.mobile-airline-tag,
.airline-cell,.airline-cell a,
.airline-chip a,.airline-chip-inner,.airline-chip-inner a{
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;

  letter-spacing:0 !important;
}
.airline-chip,.mobile-airline-tag{
  background:var(--t-well) !important;
  border:1px solid var(--t-line) !important;
  color:var(--t-ink) !important;
}
/* Airline chips stay neutral. Tinting the whole chip by airline type was
   never requested — the coloured dot already carries that information, as it
   did before. */

/* --- badges: saturated, high contrast ------------------------------------ */
/* app.css:634 sets this to 'Space Grotesk','Consolas',monospace — so it drops
   to Consolas any time the webfont hasn't arrived. A three-letter code doesn't
   need a mono face to line up; the body font with tracking does it. */
.iata-badge,
body.dark-mode .iata-badge{
  background:var(--t-navy) !important;
  color:var(--t-navy-ink) !important;
  border:none !important;
  border-radius:7px !important;
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;

  font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
  box-shadow:none !important;
  unicode-bidi:isolate;
}
.metric-badge,.distance-badge,.time-badge,
body.dark-mode .distance-badge,
body.dark-mode .time-badge{
  border-radius:999px !important;

  unicode-bidi:isolate;   /* keeps "265 km" from flipping to "km 265" in RTL */
}
.distance-badge,body.dark-mode .distance-badge{
  background:var(--t-well) !important;
  border:1px solid var(--t-line-strong) !important;
  color:var(--t-ink2) !important;
}
.time-badge,body.dark-mode .time-badge{
  background:var(--t-lg-bg) !important;
  border:1px solid var(--t-lg-line) !important;
  color:var(--t-lg) !important;
}

.last-update-badge,
body.dark-mode .last-update-badge{
  background:var(--t-accent-soft) !important;
  border:1px solid var(--t-accent-line) !important;
  color:var(--t-accent) !important;
  border-radius:999px !important;

}
.last-update-badge strong,
body.dark-mode .last-update-badge strong{ color:var(--t-accent) !important; unicode-bidi:isolate; }

.badge.bg-success-subtle,body.dark-mode .badge.bg-success-subtle{
  background:var(--t-ok-bg) !important; color:var(--t-ok) !important;
}
.badge.bg-danger-subtle,body.dark-mode .badge.bg-danger-subtle{
  background:var(--t-bad-bg) !important; color:var(--t-bad) !important;
}
.badge.bg-info-subtle,body.dark-mode .badge.bg-info-subtle{
  background:var(--t-accent-soft) !important; color:var(--t-accent) !important;
}
.badge.bg-warning-subtle{ background:var(--t-warn-bg) !important; color:var(--t-warn) !important; }
.badge.bg-primary-subtle{ background:var(--t-accent-soft) !important; color:var(--t-accent) !important; }
.badge.bg-primary{ background:var(--t-accent) !important; color:var(--t-accent-ink) !important; }

/* --- tables: the blue header stays, deeper and better set ----------------
   Sets BOTH background and colour from tokens, so the sticky header can
   never inherit a transparent ground and land at 1:1 contrast again.    */
table.dataTable thead th,
#airports-table thead th,
.table thead th,
.table-primary th,
.table-primary,
body.dark-mode #airports-table thead th{
  background:var(--t-navy) !important;
  color:var(--t-navy-ink) !important;
  border-bottom:none !important;
  border-color:var(--t-navy) !important;
  font-size:.7rem;

  letter-spacing:.1em;
  text-transform:uppercase;
}
table.dataTable tbody td,.table tbody td{
  border-bottom:1px solid var(--t-line) !important;
  border-top:none !important;
  color:var(--t-ink) !important;
}
.table>tbody>tr>td,.table>tbody>tr>th{ background:transparent !important; }
.table-striped>tbody>tr:nth-of-type(odd)>*{
  background:color-mix(in srgb, var(--t-accent) 3%, transparent) !important;
  box-shadow:none !important;
}
/* 3% of a blue accent over a near-black ground is invisible — the zebra and
   the row rules both need more weight in dark mode to read as a table. */
body.dark-mode .table-striped>tbody>tr:nth-of-type(odd)>*{
  background:color-mix(in srgb, var(--t-accent) 9%, transparent) !important;
}
body.dark-mode table.dataTable tbody td,
body.dark-mode .table tbody td{
  border-bottom-color:var(--t-line-strong) !important;
}
#airports-table tbody tr:hover td,
body.dark-mode #airports-table tbody tr:hover td,
.table-hover>tbody>tr:hover>*{
  background:var(--t-accent-soft) !important;
  color:var(--t-ink) !important;
}
/* The city is the one primary link per row, so only it gets link colour.
   Airline names stay ink — their coloured dot already carries the type,
   and turning 500 airline names blue drowns the signal. */
#airports-table tbody td a{ color:var(--t-accent) !important; }
#airports-table tbody td.airline-cell a,
.airline-chip a,.airline-chip-inner a{ color:var(--t-ink) !important; }

.dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{ color:var(--t-ink2) !important; }
/* --- pagination ----------------------------------------------------------
   These are <a> elements, so the site-wide link rule further down this file
   (five classes) was overriding app.css's white text and painting "Next" in
   link blue on a blue pill. Everything here therefore sets colour with
   !important AND -webkit-text-fill-color, which is what actually wins in
   WebKit. The purple glow, the gradient and the hover scale are dropped:
   one solid accent, one quiet outline, one genuinely disabled state.     */
.dataTables_wrapper .dataTables_paginate .paginate_button{
  background:var(--t-surface) !important;
  border:1px solid var(--t-line-strong) !important;
  color:var(--t-ink2) !important;
  -webkit-text-fill-color:var(--t-ink2) !important;
  border-radius:8px !important;
  box-shadow:none !important;
  text-shadow:none !important;
  transition:background .15s ease, border-color .15s ease, color .15s ease !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:var(--t-accent-soft) !important;
  border-color:var(--t-accent) !important;
  color:var(--t-accent) !important;
  -webkit-text-fill-color:var(--t-accent) !important;
  transform:none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background:var(--t-fill) !important;
  border-color:var(--t-fill) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* the two pills that carry the whole interaction */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next{
  background:var(--t-fill) !important;
  border:1px solid var(--t-fill) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-weight:500 !important;
  box-shadow:var(--t-e1) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover{
  background:var(--t-navy) !important;
  border-color:var(--t-navy) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  transform:none !important;
  box-shadow:var(--t-e2) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:focus-visible{
  outline:2px solid var(--t-accent) !important;
  outline-offset:2px !important;
}

/* Disabled was a pale lavender pill at 40% opacity with pale blue text —
   unreadable in light mode. It reads as an inert control now, at full
   opacity so the label stays legible. */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled:hover{
  background:var(--t-well) !important;
  border:1px solid var(--t-line) !important;
  color:var(--t-ink3) !important;
  -webkit-text-fill-color:var(--t-ink3) !important;
  opacity:1 !important;
  box-shadow:none !important;
  transform:none !important;
  cursor:not-allowed !important;
}

/* the row-count chip beside them, off the same tokens */
.dataTables_wrapper .dataTables_info{
  background:var(--t-well) !important;
  border:1px solid var(--t-line) !important;
  color:var(--t-ink2) !important;
  box-shadow:none !important;
}

/* --- mobile destination cards -------------------------------------------- */
.mobile-destination-card{
  background:var(--t-surface) !important;
  border:1px solid var(--t-line) !important;
  border-radius:var(--t-radius) !important;
  box-shadow:var(--t-e2) !important;
}
.mobile-destination-card:hover{
  border-color:var(--t-accent) !important;
  box-shadow:var(--t-e3) !important;
}
/* city and country were inline elements and ran together as "LarnacaCyprus" */
.mobile-card-title,.mobile-card-subtitle{ display:block !important; }
.mobile-card-title{ color:var(--t-ink) !important; letter-spacing:-.02em; line-height:1.2; }
.mobile-card-subtitle{ color:var(--t-ink2) !important; margin-top:1px; }
/* The card's city and country names link to flytlv.app. They must read as
   the heading and subtitle they already are, not as links: the body-link
   rule below would paint them blue with !important (the trap
   .mobile-deal-btn hit), so this class is in its exclusion list too and
   inherits whichever ink its parent carries in either theme. The underline
   on hover is the only affordance. */
.flytlv-place-link{ color:inherit !important; text-decoration:none !important; }
.flytlv-place-link:hover,.flytlv-place-link:focus-visible{ text-decoration:underline !important; }
.mobile-iata-badge{
  background:var(--t-navy) !important;
  color:var(--t-navy-ink) !important;
  border:none !important;

  unicode-bidi:isolate;
}
.mobile-card-footer{
  background:var(--t-foot) !important;
  border-top:1px solid var(--t-line) !important;
}
.mobile-pill{
  background:var(--t-well) !important;
  border:1px solid var(--t-line-strong) !important;
  color:var(--t-ink2) !important;

  unicode-bidi:isolate;
}
.mobile-card-action{
  background:var(--t-fill) !important;
  color:#fff !important;                 /* white in both modes, as app.css had */
  -webkit-text-fill-color:#fff !important;
}

/* --- destination page quick info ----------------------------------------- */
.quick-info-box{
  background:var(--t-surface) !important;
  border:1px solid var(--t-line) !important;
  border-radius:var(--t-radius-sm) !important;
  box-shadow:var(--t-e1) !important;
  padding:16px 14px;
}
.quick-info-box .fw-bold{ color:var(--t-ink) !important; unicode-bidi:isolate; }
.airport-code-badge,.terminal-badge,
body.dark-mode .terminal-badge{
  background:var(--t-navy) !important;
  color:var(--t-navy-ink) !important;
  border:none !important;
}

/* --- breadcrumbs ---------------------------------------------------------- */
.breadcrumb-item,body.dark-mode .breadcrumb-item{ color:var(--t-ink2) !important; }
.breadcrumb-item a,body.dark-mode .breadcrumb-item a{ color:var(--t-accent) !important; }
.breadcrumb-item.active,body.dark-mode .breadcrumb-item.active{ color:var(--t-ink) !important; }

/* --- route updates ticker -------------------------------------------------
   A blanket `.ticker-item { color: … !important }` here flattened cancelled
   and new routes to grey in light mode. app.css colours them at (0,2,0)
   without !important, so the blanket rule won; dark mode escaped only
   because its rules carry !important too. Colour the states, not the item. */
.ticker-title{ color:var(--t-accent) !important; }
#route-ticker .ticker-item,
.ticker-item{ color:var(--t-ink2); }

/* cancelled route */
#route-ticker .ticker-item.removed,
.ticker-item.removed,
body.dark-mode #route-ticker .ticker-item.removed{ color:var(--t-bad) !important; }
/* new route */
#route-ticker .ticker-item.added,
.ticker-item.added,
body.dark-mode #route-ticker .ticker-item.added{ color:var(--t-ok) !important; }
/* service unavailable */
#route-ticker .ticker-item.text-warning,
.ticker-item.text-warning{ color:var(--t-warn) !important; }

/* the icon and the bolded detail follow the state colour */
#route-ticker .ticker-item.removed i,#route-ticker .ticker-item.removed strong,
#route-ticker .ticker-item.added i,#route-ticker .ticker-item.added strong,
.ticker-item.removed i,.ticker-item.removed strong,
.ticker-item.added i,.ticker-item.added strong{ color:inherit !important; }

/* --- footer ---------------------------------------------------------------
   These were targeting `footer.footer` and `.footer-link`, neither of which
   exists in partials/footer.html. The real classes are below, so the footer
   sat unstyled on every page — most obvious on /destinations/{iata}, where
   it read as missing next to restyled content. */
footer.footer-bg,body.dark-mode footer.footer-bg{
  background:var(--t-navy) !important;
  border-top:none !important;
  color:color-mix(in srgb, var(--t-navy-ink) 92%, transparent) !important;
}
footer.footer-bg .footer-menu-title,
body.dark-mode footer.footer-bg .footer-menu-title{
  color:var(--t-navy-ink) !important;
  letter-spacing:.1em;
}
footer.footer-bg .footer-menu-link,
footer.footer-bg .footer-copy-link,
body.dark-mode footer.footer-bg .footer-menu-link,
body.dark-mode footer.footer-bg .footer-copy-link{
  color:color-mix(in srgb, var(--t-navy-ink) 92%, transparent) !important;
  text-decoration:none;
}
footer.footer-bg .footer-menu-link:hover,
footer.footer-bg .footer-copy-link:hover{
  color:var(--t-navy-ink) !important;
  text-decoration:underline;
}
footer.footer-bg .footer-bottom,
body.dark-mode footer.footer-bg .footer-bottom{
  background:transparent !important;
  border-top:1px solid color-mix(in srgb, var(--t-navy-ink) 20%, transparent) !important;
  color:color-mix(in srgb, var(--t-navy-ink) 86%, transparent) !important;
}
/* The footer sits on navy, so everything inside it must be light. Listing
   tags (p, h5, small, a) missed whatever wasn't on the list — the intro
   heading came out black on navy. Force inheritance instead, then brighten
   the few things that should stand out. */
footer.footer-bg *:not(img):not(svg):not(path){
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
  text-shadow:none !important;
}
/* Only strip the background-image where it is being used to fill TEXT.
   The blanket `background-image:none` this replaces also erased the gradient
   *background* of the PWA install button, leaving it transparent. */
footer.footer-bg [style*="background-clip"],
footer.footer-bg .text-gradient,
footer.footer-bg .navbar-brand{
  background-image:none !important;
}

/* PWA install prompt — sits inside the footer, so it needs its own colours
   now that the footer is navy. */
footer.footer-bg #install-app-btn,
#install-app-btn{
  background:var(--t-accent) !important;
  background-image:none !important;
  color:var(--t-accent-ink) !important;
  -webkit-text-fill-color:var(--t-accent-ink) !important;
  border:none !important;
  box-shadow:var(--t-e2) !important;
}
footer.footer-bg #install-app-btn:hover,
#install-app-btn:hover{ filter:brightness(1.08); transform:none !important; }
/* .install-app-inner is left alone: app.css already makes it transparent in
   light mode and rgba(18,18,18,.9) in dark, and overriding it here removed
   the pill backing behind the button in dark mode. */
footer.footer-bg strong,footer.footer-bg b,
footer.footer-bg h5,footer.footer-bg h6,
footer.footer-bg .fw-bold,footer.footer-bg .fw-semibold{
  color:var(--t-navy-ink) !important;
}
footer.footer-bg .footer-logo{ filter:brightness(0) invert(1); opacity:.92; }
footer.footer-bg hr{ border-color:color-mix(in srgb, var(--t-navy-ink) 18%, transparent) !important; }
.separator,body.dark-mode .separator{ color:color-mix(in srgb, var(--t-navy-ink) 34%, transparent) !important; }

/* --- Select2, kept in step with the native controls ---------------------- */
:is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single .select2-selection__rendered{
  color:var(--t-ink) !important;
}

/* --- Bootstrap helpers, scoped so light-on-dark widgets keep themselves --- */
.text-muted:not(.text-white *),
body.dark-mode .text-muted{ color:var(--t-ink2); }
.text-dark,body.dark-mode .text-dark{ color:var(--t-ink); }
.bg-light,body.dark-mode .bg-light{ background:var(--t-well); color:var(--t-ink); }
.bg-white:not(.card),body.dark-mode .bg-white:not(.card){ background:var(--t-surface); }
.border-light{ border-color:var(--t-line); }
hr:not(.opacity-25){ border-color:var(--t-line); opacity:1; }
/* Text inside a white-on-colour block inherits that white — except buttons.
   A .btn-light on the blue /airports banner was inheriting white onto a white
   pill and disappearing; a button carries its own foreground by definition. */
[style*="color: white"] *:not(.btn),[style*="color:white"] *:not(.btn),
.text-white,.text-white *:not(.btn){ color:inherit; }

/* --- typography ----------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{ letter-spacing:-.025em; }
/* line-height:1.7 on card paragraphs was here. It reflowed cards on /glossary,
   /trends and /stats onto an extra line each, changing layout the theme has no
   business changing. Article body copy still gets the looser measure below,
   where the extra leading is the point and nothing is boxed. */
.article-body p,.prose p{ line-height:1.7; }
/* every figure that lines up in a column reads as a column */
.distance-badge,.time-badge,.mobile-pill,.quick-info-box .fw-bold,
.last-update-badge strong{ font-variant-numeric:tabular-nums; }

/* ===========================================================================
   ONE CONTROL SYSTEM — every filter on every page
   ---------------------------------------------------------------------------
   The site uses five different control vocabularies, which is why pages
   disagreed with each other:

     .form-select / .form-control    Bootstrap, 42 uses — the most common
     .select2-*                      Select2, on 17 templates
     .unit-select / .search-input    the homepage premium filter bar
     .mobile-unit-select / .mobile-search-input
     .control-input / .cur-select / .cur-input / .premium-input / .glossy-select

   All five are normalised to identical height, padding, radius, fill and
   type below. Select2 is the fiddly one: its default single-selection box is
   28px tall with its own line-height and an absolutely positioned arrow, so
   it has to be resized explicitly or it never matches a native select
   sitting next to it.

   Borderless throughout — shape comes from the fill. Focus still draws a
   ring; the border was decoration, the focus ring is the affordance.
   =========================================================================== */

/* ---- 1. colour, not shape ------------------------------------------------
   This block used to set min-height, padding and box-sizing on every control
   so they would all match across pages. Every page that sized its controls
   differently broke: floating labels on /travel-questionnaire, the airport
   picker on /live-radar, form fields on six other pages. Sizing now stays
   with each page; the theme only recolours.                              */
.form-select,.form-control,
.unit-select,.mobile-unit-select,
.search-input,.mobile-search-input,
.control-input,.cur-select,.cur-input,.premium-input,.glossy-select,
:is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single,
:is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--multiple{
  border:none !important;
  border-radius:var(--t-radius-sm) !important;
  color:var(--t-ink) !important;
  font-weight:400 !important;
  box-shadow:none !important;
  transition:background-color .15s ease;
}
.form-control::placeholder,.search-input::placeholder,
.mobile-search-input::placeholder,.cur-input::placeholder{
  color:var(--t-ink3) !important; font-weight:400 !important;
}

/* No forced width. Setting min-width here fixed the /live-radar picker and
   pushed every other Select2 to the same size (85->190, 59->190, 93->190).
   The live-radar symptom was the label WRAPPING, not the width, so the fix
   is nowrap on the label — width stays whatever the page gives it. */
/* ---- 2. Select2 ---------------------------------------------------------
   Colour only. An earlier version of this file set geometry here —
   `min-width:0` on the container, a forced height, padding and overflow —
   and it collapsed the airport picker on /live-radar to 122px, wrapping
   "Tel Aviv (TLV)" across three lines. Select2 computes its own widths from
   the element it replaces and positions the dropdown to match; overriding
   that from a global stylesheet breaks whichever page sized it differently.
   Width, height and positioning are left to Select2 and to each page.    */
:is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single{
  display:flex !important; align-items:center !important;
}
:is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single .select2-selection__rendered,
:is(.select2-container--default,.select2-container--bootstrap-5) .select2-results__option{
  white-space:nowrap !important;
}
.select2-dropdown{ width:max-content !important; min-width:100% !important; max-width:min(90vw,420px) !important; }
:is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single .select2-selection__rendered{
  padding:0 !important;
  line-height:1.5 !important;
  color:var(--t-ink) !important;
  font-weight:400 !important;
}
:is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single .select2-selection__placeholder{
  color:var(--t-ink3) !important; font-weight:400 !important;
}
:is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single .select2-selection__arrow{
  height:100% !important; top:0 !important; inset-inline-end:8px !important; right:auto;
}
[dir="rtl"] :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single .select2-selection__arrow{
  left:8px !important; right:auto !important;
}
:is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single .select2-selection__arrow b{
  border-color:var(--t-ink2) transparent transparent transparent !important;
}
:is(.select2-container--default,.select2-container--bootstrap-5).select2-container--open .select2-selection--single .select2-selection__arrow b{
  border-color:transparent transparent var(--t-accent) transparent !important;
}
:is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single .select2-selection__clear{
  color:var(--t-ink3) !important; font-weight:400 !important;
}
/* multi-select chips match the airline chips */
:is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--multiple .select2-selection__choice{
  background-color: var(--t-accent-soft) !important;
  border:none !important;
  color:var(--t-accent) !important;
  border-radius:999px !important;
  padding:2px 10px !important;
  font-weight:400 !important;
}
:is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--multiple .select2-selection__choice__remove{
  color:var(--t-accent) !important; margin-inline-end:5px;
}
/* the panel floats over content, so it keeps an edge and a shadow */
.select2-dropdown{
  background:var(--t-surface) !important;
  border:1px solid var(--t-line) !important;
  border-radius:var(--t-radius-sm) !important;
  box-shadow:var(--t-e3) !important;
}
:is(.select2-container--default,.select2-container--bootstrap-5) .select2-results__option{
  color:var(--t-ink2) !important; font-weight:400 !important;
}
:is(.select2-container--default,.select2-container--bootstrap-5) .select2-results__option--highlighted[aria-selected]{
  background:var(--t-accent) !important; color:var(--t-accent-ink) !important;
}
:is(.select2-container--default,.select2-container--bootstrap-5) .select2-results__option[aria-selected="true"]{
  background:var(--t-accent-soft) !important; color:var(--t-accent) !important;
}
.select2-search--dropdown{ padding:8px !important; background:var(--t-surface) !important; }
.select2-search--dropdown .select2-search__field{
  border:none !important;
  background:var(--t-well) !important;
  color:var(--t-ink) !important;
  border-radius:8px !important;
  padding:8px 11px !important;
}
:is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single:focus,
:is(.select2-container--default,.select2-container--bootstrap-5).select2-container--focus .select2-selection--multiple{
  outline:2px solid var(--t-accent) !important; outline-offset:2px !important;
}

/* ---- 3. the containers those controls sit in ---------------------------- */
.filter-unit,.filter-unit-airline,.filter-unit-country,.filter-unit-city,
.filter-unit-type,.filter-unit-toggle,.filter-unit-search,
.mobile-filter-unit,.mobile-dropdown-filters .mobile-filter-unit,
.search-wrapper,.mobile-search-wrapper,
body.dark-mode .filter-unit{
  border:none !important;
  box-shadow:none !important;
}
.type-dot-group,.dir-toggle,.dir-toggle-wrap,.direction-toggle,
.btn-clear-minimal,.mobile-chip,.mobile-chip-clear,.input-group-text{
  border:none !important;
  box-shadow:none !important;
}
.input-group-text{ background:var(--t-well) !important; color:var(--t-ink2) !important; }
/* selected state still has to read as selected */
.mobile-chip.active,.type-dot.active,.dir-toggle-btn.active{
  background:var(--t-accent) !important;
  color:var(--t-accent-ink) !important;
}

/* ===========================================================================
   CONSISTENCY FLOOR
   ---------------------------------------------------------------------------
   Individual pages ship their own Select2 rules, each with !important and
   enough specificity to beat the block above, which is why the same control
   measured 51px on /airports, 42px on /flights and 40px on the homepage:

     static/css/notams.css:56   height:3.2rem + the old --glass-* tokens
     flights.html:192           height:auto !important; border:none !important
     flights.html:182           font-weight:700 on the value text
     cargo_flights / cheap_flights / historical_flights  — same pattern

   The doubled class name (.select2-selection--single.select2-selection--single)
   is deliberate: it raises specificity above those page rules without
   touching the templates, so every page ends up with one identical control
   and deleting this file still reverts everything cleanly.
   =========================================================================== */
/* ---- controls: colour only, never geometry ------------------------------
   This block used to force height:40px, padding and box-sizing onto every
   control on every page, so that they would all match. It broke, in order:
   the floating labels on /travel-questionnaire, the form fields on /packing,
   /shabbat, /travel-warnings, /tlv-shops, /airport-status and /chat, the
   dropdown arrow on every <select>, and the airport picker on /live-radar.

   Each page sizes its own controls for its own layout, and a stylesheet that
   overrides that from the outside cannot know what it is standing on. So the
   theme now only recolours: fill, border, radius, text. Height, width and
   padding are left exactly as the page had them.                         */
html body :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single.select2-selection--single,
html body .form-select.form-select,
html body .form-control.form-control,
html body .unit-select.unit-select,
html body .mobile-unit-select.mobile-unit-select,
html body .search-input.search-input,
html body .mobile-search-input.mobile-search-input,
html body .control-input.control-input,
html body .cur-select.cur-select,
html body .cur-input.cur-input,
html body .premium-input.premium-input,
html body .glossy-select.glossy-select{
  border:none !important;
  border-radius:var(--t-radius-sm) !important;
  color:var(--t-ink) !important;
  font-weight:400 !important;
  box-shadow:none !important;
}

/* Floating-label fields keep the page's own height. An earlier version forced
   58px here to undo a global 40px rule; that global rule is gone, so forcing
   anything now just shrinks the field (/travel-questionnaire renders at 88px
   on its own). Only the look is themed. */
html body .form-floating > label{
  padding:1rem .75rem !important;
  color:var(--t-ink3) !important;
}
/* A form field must look like a field. The transparent-until-hover treatment
   is right for the compact filter bars, where the label above and the bar
   around them supply the affordance — but on a real form it leaves nothing
   to click at all. /travel-questionnaire had two selects that rendered as
   bare text. Fields inside .form-floating keep a permanent fill and edge. */
/* Floating-label fields follow the index.html filter units: no border, the
   same fill and the same radius. questionnaire.html:1008 adds its own
   `border: 1px solid rgba(0,0,0,.1)` and `border-radius: 1rem` inline, which
   is what made these the odd ones out. */
html body .form-floating > .form-select.form-select,
html body .form-floating > .form-control.form-control,
html body .form-floating > textarea.form-control.form-control{
  border:none !important;
  border-radius:var(--t-radius-sm) !important;
  box-shadow:none !important;
}
html body .form-floating > .form-select.form-select:hover,
html body .form-floating > .form-control.form-control:hover,
html body .form-floating > .form-select.form-select:focus,
html body .form-floating > .form-control.form-control:focus,
html body .form-floating > textarea.form-control.form-control:hover,
html body .form-floating > textarea.form-control.form-control:focus{
  background-color:var(--t-well) !important;
}

/* Select2's inner text sits in its own span, which the page rules also target */
html body :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single .select2-selection__rendered.select2-selection__rendered,
html body :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single .select2-selection__placeholder.select2-selection__placeholder{
  padding:0 !important;
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size:.9rem !important;
  font-weight:400 !important;
  line-height:1.5 !important;
}
html body :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single .select2-selection__rendered.select2-selection__rendered{
  color:var(--t-ink) !important;
}
html body :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single .select2-selection__placeholder.select2-selection__placeholder{
  color:var(--t-ink3) !important;
}
html body.dark-mode :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single .select2-selection__rendered.select2-selection__rendered{
  color:var(--t-ink) !important;
}
html body :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single .select2-selection__arrow.select2-selection__arrow{
  height:38px !important; top:1px !important;
}

/* ---- the dropdown arrow -------------------------------------------------
   .form-select carries `appearance:none` and draws its chevron with
   background-image. Setting the `background` shorthand anywhere above wiped
   that image out, so every select on the site rendered as a plain text box
   with no indication it opened a list. Those declarations are now
   background-color; the arrow is redrawn here so it is explicit and themed
   rather than inherited from Bootstrap's hardcoded dark grey.            */
html body .form-select.form-select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233F4D63' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat:no-repeat !important;
  background-position:right .8rem center !important;
  background-size:15px 11px !important;
}
html body.dark-mode .form-select.form-select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A6B5CA' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}
[dir="rtl"] html body .form-select.form-select,
html body [dir="rtl"] .form-select.form-select{
  background-position:left .8rem center !important;
  padding-inline:14px 14px !important;
}

/* filter labels: one weight everywhere, and not a bold one */
html body .unit-label.unit-label,
html body .mobile-unit-label.mobile-unit-label,
html body .form-label.form-label{
  font-weight:500 !important;
  color:var(--t-ink3) !important;
  letter-spacing:.08em;
}

/* --- focus visibility ----------------------------------------------------- */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,
.nav-link:focus-visible,.mobile-chip:focus-visible,
.unit-select:focus-visible,.search-input:focus-visible,
:is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single:focus{
  outline:2px solid var(--t-accent) !important;
  outline-offset:2px !important;
}

/* --- navbar toggles: language + theme -------------------------------------
   Both shipped as an indigo/violet gradient (#4338ca -> #6366f1), left over
   from the old palette. Solid theme blue instead, desktop and mobile.
   `background` shorthand is fine here: these carry no background-image the
   way .form-select does — the gradient IS the thing being replaced.       */
.lang-btn,
.mob-lang,
#lang-toggle,
#lang-toggle-mobile,
.drawer-lang-btn{
  background:var(--t-fill) !important;
  background-image:none !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border:none !important;
  box-shadow:var(--t-e1) !important;
}
.lang-btn:hover,
.mob-lang:hover,
#lang-toggle:hover,
#lang-toggle-mobile:hover,
.drawer-lang-btn:hover{
  filter:brightness(1.08);
  box-shadow:var(--t-e2) !important;
  transform:none !important;
}
.lang-btn span,.mob-lang span,
#lang-toggle span,#lang-toggle-mobile span{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* The theme switch track. It used to take the accent blue when on, which put
   two saturated blue pills side by side in the header — the switch competed
   with the language button for attention. Neutral track in both themes leaves
   the language button as the only filled control in the bar. */
body.dark-mode .theme-switch,
body.dark-mode #theme-toggle,
body.dark-mode #theme-toggle-mobile{
  background:#334155 !important;
  background-image:none !important;
}

/* ===========================================================================
   CONTRAST FLOOR
   ---------------------------------------------------------------------------
   Measured with real WCAG maths against the nearest painted ancestor, in both
   themes. The accent reads 4.3:1 as body-size link text on the page ground —
   fine for a button fill, under AA for a 14px link — so links get their own
   slightly deeper blue. Bootstrap's muted helpers are pointed at the token
   rather than their hardcoded greys, which were landing near 3.7:1.
   =========================================================================== */
:root{ --t-link:#1657CC; }
body.dark-mode{ --t-link:#89B4FF; }

/* Exclusions are anchors that are not body copy:
   .nlk      — header navigation; the header sets its own ink, and this rule was
               painting Home blue while its <button> siblings stayed dark.
   .dst-guide — the "Plan this trip" button. It declares color:#fff without
               !important, so this rule won and put blue text on a blue fill:
               measured 1.39:1, against the 4.5:1 AA needs.
   DO NOT add further :not()s here: every :not(.class) raises this rule's
   specificity, and the FINAL GUARD at the bottom of this file must outrank
   it or light-on-dark cards (Featured Guides / Tools) go dark-link blue —
   that regression shipped on 2026-09-01 via three deal-button exclusions.
   For a filled-control anchor, set BOTH color and -webkit-text-fill-color
   with !important in its own class instead (text-fill-color wins over any
   color rule regardless of specificity) — see .mobile-deal-btn. */
a:not(.btn):not(.nav-link):not(.nlk):not(.dst-guide):not(.dropdown-item):not(.footer-menu-link):not(.mobile-card-action):not(.flytlv-place-link),
.breadcrumb-item a,
body.dark-mode .breadcrumb-item a{
  color:var(--t-link) !important;
}
#airports-table tbody td a{ color:var(--t-link) !important; }

/* Bootstrap's muted greys sit around 3.7:1; the token is AA in both themes. */
.text-muted:not(.text-white *),
.text-secondary:not(.text-white *),
small.text-muted,.small.text-muted,
body.dark-mode .text-muted,
body.dark-mode .text-secondary{
  color:var(--t-ink2) !important;
}
/* opacity utilities silently push text under AA */
.opacity-75:not(.text-white *),.opacity-50:not(.text-white *){ opacity:1 !important; color:var(--t-ink2) !important; }

/* promo / affiliate blocks: keep their colour, lift it to a readable weight */
.promo-card .text-muted,.ad-card .text-muted{ color:var(--t-ink2) !important; }

/* the "Last update" pill put accent-blue text on accent-soft — 3.9:1 */
.last-update-badge,
body.dark-mode .last-update-badge{ color:var(--t-ink) !important; }
.last-update-badge strong,
body.dark-mode .last-update-badge strong{ color:var(--t-ink) !important; }

/* footer sits on navy; 92% still measured 4.2:1 in dark mode */
footer.footer-bg,
body.dark-mode footer.footer-bg{ color:var(--t-navy-ink) !important; }
footer.footer-bg *:not(img):not(svg):not(path){ color:inherit !important; }
footer.footer-bg .footer-bottom,
body.dark-mode footer.footer-bg .footer-bottom{
  color:color-mix(in srgb, var(--t-navy-ink) 94%, transparent) !important;
}

/* affiliate / promo widgets ship their own low-contrast greys and tints */
[class*="promo"] .text-muted,[class*="promo"] small,
[class*="affiliate"] .text-muted,[id*="promo"] .text-muted,
[class*="widget"] .text-muted{ color:var(--t-ink2) !important; }

/* ===========================================================================
   LIGHT-ON-DARK CARDS MUST KEEP THEIR OWN TEXT COLOUR
   ---------------------------------------------------------------------------
   Several sidebar widgets set their colours inline, e.g.
     style="background: linear-gradient(135deg,#4f46e5,#3730a3); color: white;"
   (Featured Guides, Featured Tools, Live Airport Crowds, Track Your Flight).

   The link and muted-text rules above force dark ink for contrast on light
   grounds, and were winning inside these cards too — dark blue links on a
   purple card, grey labels on a navy card. Unreadable.

   This comes last and at high specificity so anything inside a card that
   declares its own light foreground simply inherits it.
   =========================================================================== */
/* NOT the card itself — `color:inherit` on it overrides its own inline
   `color: white` and makes it inherit the page's dark ink, which is what
   turned Featured Guides and Featured Tools into dark-on-purple. Descendants
   only; the card keeps the colour it declared. */
html body [style*="color: white"] *:not(.badge):not(.btn),
html body [style*="color:white"] *:not(.badge):not(.btn),
html body [style*="color: #fff"] *:not(.badge):not(.btn),
html body [style*="color:#fff"] *:not(.badge):not(.btn){
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
  opacity:1 !important;
}
/* the muted sub-labels in those cards (Terminal 3 / Terminal 1) use
   .opacity-75 to sit back a little — keep that intent, but readably */
html body [style*="color: white"] .opacity-75,
html body [style*="color:white"] .opacity-75,
html body [style*="color: white"] .text-muted,
html body [style*="color:white"] .text-muted{
  color:inherit !important;
  opacity:.88 !important;
}
/* links inside them stay light, not the dark link blue */
html body [style*="color: white"] a,
html body [style*="color:white"] a,
html body [style*="color: #fff"] a{
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}

/* ===========================================================================
   SELECT BOXES — ONE RULE, WHOLE PROJECT
   ---------------------------------------------------------------------------
   The index.html filter unit is the origin of the design:
     no border, no fill, grey fill ONLY under the mouse.
   Everything else on the site follows it. This block is last so it beats the
   earlier fills, including the ones I added while trying to make form fields
   visible — those pages get the same treatment as index, not a variant.
   =========================================================================== */
html body .form-select,
html body .form-select-sm,
html body .form-select-lg,
html body .form-control:not(textarea),
html body .unit-select,
html body .mobile-unit-select,
html body .search-input,
html body .mobile-search-input,
html body .control-input,
html body .cur-select,
html body .cur-input,
html body .premium-input,
html body .glossy-select,
html body .form-floating > .form-select,
html body .form-floating > .form-control,
html body :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single,
html body :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--multiple{
  background-color:transparent !important;
  border:none !important;
  border-radius:var(--t-radius-sm) !important;
  box-shadow:none !important;
}

html body .form-select:hover,
html body .form-select-sm:hover,
html body .form-select-lg:hover,
html body .form-control:not(textarea):hover,
html body .unit-select:hover,
html body .mobile-unit-select:hover,
html body .search-input:hover,
html body .mobile-search-input:hover,
html body .control-input:hover,
html body .cur-select:hover,
html body .cur-input:hover,
html body .premium-input:hover,
html body .glossy-select:hover,
html body .form-floating > .form-select:hover,
html body .form-floating > .form-control:hover,
html body :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single:hover,
html body :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--multiple:hover{
  /* Fields stay transparent on hover. Any fill here -- light or dark -- reads
     as a pill appearing under the cursor; the border already shows the field. */
  background-color:transparent !important;
}

/* focus still fills, so you can see which control you are typing in */
html body .form-select:focus,
html body .form-control:not(textarea):focus,
html body .unit-select:focus,
html body .search-input:focus,
html body .cur-input:focus,
html body .form-floating > .form-select:focus,
html body .form-floating > .form-control:focus{
  /* focus is shown by the outline in the focus-visible block, not by a fill */
  background-color:transparent !important;
}

/* ===========================================================================
   FINAL GUARD — light-on-dark cards win over every colour rule above
   ---------------------------------------------------------------------------
   The previous attempt lost on specificity. The link rule is
     a:not(.btn):not(.nav-link):not(.dropdown-item):not(.footer-menu-link):not(.mobile-card-action)
   = five classes, which outranks `html body [style*="color:white"] a`.
   So "View Full Forecast", the Featured Guides list and the Featured Tools
   list kept the dark link blue on their purple / teal / navy grounds.

   This selector carries eight classes and comes last, so it wins outright.
   =========================================================================== */
html body :is([style*="color: white"],[style*="color:white"],[style*="color: #fff"],[style*="color:#fff"])
  :is(a,span,small,i,li,p,h5,h6,strong,div,.text-muted,.opacity-75,.opacity-50)
  :not(.badge):not(.btn-cta):not(.lang-btn):not(.mob-lang):not(.pill):not(.chip){
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}
html body :is([style*="color: white"],[style*="color:white"],[style*="color: #fff"],[style*="color:#fff"]) a,
html body :is([style*="color: white"],[style*="color:white"],[style*="color: #fff"],[style*="color:#fff"]) a *,
html body :is([style*="color: white"],[style*="color:white"],[style*="color: #fff"],[style*="color:#fff"]) .text-muted,
html body :is([style*="color: white"],[style*="color:white"],[style*="color: #fff"],[style*="color:#fff"]) .opacity-75{
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
  opacity:1 !important;
}

/* ===========================================================================
   FILLED BUTTONS AND PAGINATION — white text on a solid ground
   ---------------------------------------------------------------------------
   Several buttons ship as a gradient with dark or accent-coloured text, which
   left "Next" reading dark-blue-on-blue and "Prev" almost invisible. Anything
   with a filled ground gets the accent and white text; anything ghosted gets
   the link colour on no fill.
   =========================================================================== */
html body .btn-primary,
html body .btn-gradient-primary,
html body .btn-cta,
html body .page-item.active .page-link,
html body .pagination .active > .page-link,
html body [class*="btn"][class*="gradient"],
html body .btn-wow-copy,
html body .btn-wow-csv,
html body .btn-wow-excel{
  background:var(--t-fill) !important;
  background-image:none !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border:none !important;
  box-shadow:var(--t-e1) !important;
}
html body .btn-primary:hover,
html body .btn-gradient-primary:hover,
html body .btn-cta:hover,
html body .page-item.active .page-link:hover{
  filter:brightness(1.08);
  transform:none !important;
}

/* unfilled pagination: readable link colour, fill on hover like the controls */
html body .page-link{
  background:transparent !important;
  background-image:none !important;
  border:none !important;
  color:var(--t-link) !important;
  -webkit-text-fill-color:var(--t-link) !important;
  border-radius:var(--t-radius-sm) !important;
}
html body .page-link:hover{ background:var(--t-well) !important; }
html body .page-item.disabled .page-link{
  color:var(--t-ink3) !important;
  -webkit-text-fill-color:var(--t-ink3) !important;
  opacity:1 !important;
}

/* ===========================================================================
   KEEP BRAND COLOURS AND FOOTER TEXT
   ---------------------------------------------------------------------------
   share_buttons.html gives each network its own brand gradient (Facebook
   #1877f2, WhatsApp #25d366, Twitter #1da1f2) with white text. The filled
   button rule above set background-image:none, which erased the gradient and
   left a transparent button with white text — invisible on a light page.
   Those are brand colours and stay exactly as app.css and the partial set them.
   =========================================================================== */
html body a.share-btn,
html body .share-btn,
html body .share-btn:hover{
  background-image:revert !important;
  background-color:revert !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:revert !important;
}

/* Footer links were taking the dark link blue on the navy ground — the link
   rule carries five :not() classes and was outranking the footer's inherit.
   Eight classes here, and it comes last. */
html body footer.footer-bg :is(a,span,strong,b,p,h5,h6,small,li,div)
  :not(.badge):not(.share-btn):not(.btn):not(.btn-primary):not(.lang-btn):not(.mob-lang),
html body footer.footer-bg a:not(.share-btn):not(.btn),
html body footer.footer-bg a:not(.share-btn):not(.btn) *,
html body footer.footer-bg .footer-copy-link,
html body footer.footer-bg .footer-menu-link,
html body footer.footer-bg strong{
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}

/* ===========================================================================
   SURFACE FLOOR
   ---------------------------------------------------------------------------
   The dark page ground is #080D16 — blue-tinted. A component that hardcodes a
   neutral grey (#1e1e1e, #1f1f1f, #111, rgba(18,18,18,…)) therefore sits on it
   as a visibly different colour family, the way the route ticker did.

   A runtime scan of all 44 public pages in dark mode found 181 such elements
   across 20 pages — filter bars, shop cards, stats bars, striped table rows and
   form fields. They are corrected here, against the tokens that already exist,
   rather than by editing ~45 inline rules across 15 templates.

   Re-run the scan after touching this block; anything neutral and dark that
   paints over ~600px² will show up.
   =========================================================================== */

/* "Plan this trip" carries white text, so its ground must be --t-fill, not
   --t-accent: the dark-mode accent is a light blue and white on it measures
   2.77:1, under the 4.5:1 AA needs. --t-fill is the same blue in both themes
   precisely for grounds like this one. */
.dst-guide{
  background:var(--t-fill) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* The travel warning used an amber ground (--t-warn-bg #2C2210). Amber over a
   navy page mixes to a desaturated brown that reads as a dirty grey box rather
   than a warning. Standard pattern instead: the page's own surface with a
   coloured leading edge, so the severity is carried by the edge and the icon
   while the box stays in the site's colour family. */
.dst-warn{
  background:var(--t-surface) !important;
  border:1px solid var(--t-line) !important;
  border-inline-start:3px solid var(--t-warn) !important;
  color:var(--t-ink) !important;
}
.dst-warn > i{ color:var(--t-warn) !important; }

/* raised panels: same surface as every other card */
body.dark-mode .shop-card,
body.dark-mode .filter-section,
body.dark-mode .stats-bar,
body.dark-mode .flights-stats-bar,
body.dark-mode .table-card,
body.dark-mode .selector-card,
body.dark-mode .search-card,
body.dark-mode .airline-stats-card{
  background-color:var(--t-surface) !important;
  border-color:var(--t-line) !important;
}

/* translucent by design — keep the alpha, correct the hue */
body.dark-mode .glass-card,
body.dark-mode .glass-panel,
body.dark-mode .segment-group{
  background-color:rgba(17,25,37,.82) !important;
}

/* fields read as a well cut into the surface, not a card sitting on it.
   background-color only: .form-select paints its caret as a background-image
   and the shorthand would wipe it. */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .search-input,
body.dark-mode .pack-input,
body.dark-mode .premium-input,
body.dark-mode .mobile-search-input,
body.dark-mode .select2-selection{
  /* was var(--t-well) -- the darkest token in the set. Cutting a well into an
     already dark surface read as a black pill floating inside the card rather
     than an inset field, and it disagreed with the type-selector rule in
     app.css, so some fields were transparent and others were not. The border
     alone gives the field its edge and every field now matches. */
  background-color:transparent !important;
  border-color:var(--t-line) !important;
}

/* striped rows are a lift off the table surface, not a grey of their own */
body.dark-mode tr.even,
body.dark-mode tr.odd,
body.dark-mode .table-striped > tbody > tr:nth-of-type(even) > *,
body.dark-mode .styled-table tbody tr:nth-child(even){
  background-color:var(--t-surface-2) !important;
}

/* --- consent-gated third-party embeds ------------------------------------ */
/* Facade shown in place of a tracking iframe until the visitor allows it.
   See static/js/consent-embeds.js. */
.consent-embed-facade{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; text-align:center; min-height:180px; height:100%;
  padding:1rem; border:1px dashed var(--t-line-strong);
  border-radius:var(--t-radius-sm); background:var(--t-well); color:var(--t-ink);
}
.consent-embed-title{ margin:0; font-weight:700; font-size:.9rem; }
.consent-embed-body{ margin:0; font-size:.8rem; color:var(--t-ink2); max-width:42ch; }
.consent-embed-note{ margin:0; font-size:.72rem; color:var(--t-ink2); }
.consent-embed-btn{
  border:1px solid var(--t-accent); background:var(--t-accent); color:#fff;
  border-radius:999px; padding:.4rem 1.1rem; font-size:.82rem; font-weight:600;
  cursor:pointer;
}
.consent-embed-btn:hover{ filter:brightness(.92); }
.consent-embed-btn:focus-visible{ outline:3px solid var(--t-accent); outline-offset:2px; }

/* Bootstrap's .bg-danger (#d9534f) carries white text at 3.96:1. The audited
   --t-bad red takes the same text to 5.92:1. */
.bg-danger{ background-color:var(--t-bad) !important; }
.badge.bg-danger, .bg-danger{ color:#fff !important; }

/* Bootswatch Litera's outline-success green (#02b875) is 2.54:1 on white. */
.btn-outline-success{ color:#018655 !important; border-color:#018655 !important; }
.btn-outline-success:hover,.btn-outline-success:focus{
  background-color:#018655 !important; border-color:#018655 !important; color:#fff !important;
}

/* Bootswatch Litera's outline-warning amber (#f0ad4e) is 1.91:1 on white. */
.btn-outline-warning{ color:var(--t-warn) !important; border-color:var(--t-warn) !important; }
.btn-outline-warning:hover,.btn-outline-warning:focus{
  background-color:var(--t-warn) !important; border-color:var(--t-warn) !important; color:#fff !important;
}

/* Bootstrap's inline <code> pink (#e83e8c) is 3.81:1 on white. */
code:not([class]){ color:#B8316E; }
body.dark-mode code:not([class]){ color:#FF9EC4; }

/* Bootswatch Litera leaves two more utilities under AA on white:
   .btn-outline-secondary (#adb5bd, 2.07:1) and its link blue (#4582ec, 3.71:1
   at the 11px bold used on the trends page). */
.btn-outline-secondary{ color:#686C71 !important; border-color:#686C71 !important; }
.btn-outline-secondary:hover,.btn-outline-secondary:focus{
  background-color:#686C71 !important; border-color:#686C71 !important; color:#fff !important;
}
a:not([class]),.link-primary{ color:#3C72CF; }
body.dark-mode a:not([class]),body.dark-mode .link-primary{ color:var(--t-accent); }

/* .btn-link inherits Bootswatch's #4582ec, which is 3.71:1 on white. */
.btn-link{ color:#3C72CF; }
.btn-link:hover,.btn-link:focus{ color:#2F5CA8; }
body.dark-mode .btn-link{ color:var(--t-accent); }

/* .badge.bg-secondary shipped white text on Bootswatch's #adb5bd -- 2.07:1, the
   single worst ratio on the site. Same ground, darker, keeps white legible. */
.bg-secondary{ background-color:#6C757D !important; }
.badge.bg-secondary{ color:#fff !important; }

/* Remaining Bootswatch utilities under AA: .bg-info / .text-info (#17a2b8,
   3.04:1 as text on white) and the .bg-success green behind white labels. */
.text-info{ color:#127F91 !important; }
.bg-info{ background-color:#127F91 !important; }
.badge.bg-info,.badge.bg-success{ color:#fff !important; }
.bg-success{ background-color:#0B855C !important; }
.btn-success{ background-color:#0B855C !important; border-color:#0B855C !important; color:#fff !important; }
/* link blue sitting on the pale-blue surface (#ecf3fd) */
.bg-primary-subtle,.bg-light-blue{ color:#396BC3 !important; }
a.text-primary,.text-primary a{ color:#396BC3; }

/* --- Bootswatch outline buttons and coloured badges --------------------------
   Litera's palette is tuned for large type; at the 11-14px this site uses, the
   outline variants and the solid badges all sat between 3.0:1 and 3.7:1.
   Each value below is the smallest darkening that clears 4.7:1 on the ground it
   actually renders against. */
.btn-outline-info{ color:#117E8F !important; border-color:#117E8F !important; }
.btn-outline-info:hover,.btn-outline-info:focus{
  background-color:#117E8F !important; border-color:#117E8F !important; color:#fff !important; }
.btn-outline-danger{ color:#B64542 !important; border-color:#B64542 !important; }
.btn-outline-danger:hover,.btn-outline-danger:focus{
  background-color:#B64542 !important; border-color:#B64542 !important; color:#fff !important; }
.btn-outline-primary{ color:#386AC1 !important; }

.bg-primary{ background-color:#3C71CD !important; }
.badge.bg-primary,.bg-primary.text-white,.tool-badge.bg-primary{ color:#fff !important; }
.shop-category-badge{ color:#386AC1 !important; }

body.dark-mode .btn-outline-info{ color:var(--t-lg) !important; border-color:var(--t-lg) !important; }
body.dark-mode .btn-outline-danger{ color:var(--t-bad) !important; border-color:var(--t-bad) !important; }
body.dark-mode .bg-primary{ background-color:var(--t-navy) !important; }