/* Cheap Ticket Finder — Colourful Bright Luxury (2026-10-19, rongin)
   RS Lina: bright is good, NOT plain white/sada, NOT dark/black.
   Palette: sky #38BDF8/#0EA5E9, aqua-teal #2DD4BF/#14B8A6, mint #99F6E4,
   peach #FDBA74/#FED7AA, champagne gold #E9C979/#D97706, coral-peach glow.
   Base is a colourful sky->aqua->mint->peach gradient (never flat #FFFFFF,
   never dark). Cards are tinted pale sky/mint/peach. Ink: dark slate #1E293B. */
:root{
  --c-sky:#0ea5e9; --c-sky-bright:#38bdf8; --c-sky-deep:#0369a1;
  --c-teal:#14b8a6; --c-teal-bright:#2dd4bf; --c-teal-deep:#0f766e;
  --c-mint:#99f6e4; --c-aqua:#a5f3fc;
  --c-peach:#fdba74; --c-peach-soft:#fed7aa; --c-coral:#fb923c;
  --c-gold:#c9a24b; --c-gold-light:#f6de9c; --c-gold-bright:#e9c979; --c-gold-deep:#92400e; --c-amber:#d97706;
  --c-ink:#1e293b; --c-slate:#334155; --c-muted:#475569;
  --c-border-gold:rgba(217,119,6,.45); --c-border-sky:rgba(2,132,199,.42); --c-border-teal:rgba(13,148,136,.40);
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(900px 520px at 8% -6%, rgba(56,189,248,.75), transparent 62%),
    radial-gradient(860px 500px at 92% -4%, rgba(253,186,116,.85), transparent 60%),
    radial-gradient(760px 560px at 52% 108%, rgba(45,212,191,.65), transparent 62%),
    radial-gradient(620px 420px at 84% 44%, rgba(246,222,156,.70), transparent 64%),
    radial-gradient(560px 400px at 12% 58%, rgba(153,246,228,.55), transparent 62%),
    linear-gradient(168deg,#7dd3fc 0%,#a5f3fc 22%,#99f6e4 46%,#fde68a 78%,#fed7aa 100%) !important;
  background-attachment:fixed !important;
  color:#1e293b !important;
  font-family:Inter,ui-sans-system,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.hero-glow{
  background:
    radial-gradient(circle at 14% 8%, rgba(56,189,248,.65), transparent 36%),
    radial-gradient(circle at 86% 4%, rgba(253,186,116,.80), transparent 34%),
    radial-gradient(circle at 50% 96%, rgba(45,212,191,.55), transparent 40%),
    radial-gradient(circle at 72% 52%, rgba(246,222,156,.45), transparent 36%),
    linear-gradient(165deg,#7dd3fc 0%,#a5f3fc 26%,#99f6e4 52%,#fde68a 82%,#fed7aa 100%) !important;
  background-color:#a5f3fc !important;
}
/* Tailwind dark-utility overrides -> colourful tints (never white, never dark) */
.bg-slate-950,.bg-slate-950\/80,.bg-slate-950\/70,.bg-slate-950\/60,.bg-slate-950\/50{background-color:#a5f3fc !important}
.bg-slate-900,.bg-slate-900\/80,.bg-slate-900\/60{background-color:#bae6fd !important}
.bg-slate-800{background-color:#7dd3fc !important}
.bg-slate-700{background-color:#38bdf8 !important}
.bg-sky-950\/40,.bg-sky-950\/90{background-color:#a5f3fc !important}
.border-slate-800,.border-slate-800\/80,.border-slate-700,.border-slate-600{border-color:rgba(2,132,199,.45) !important}
.text-slate-100,.text-slate-200{color:#1e293b !important}
.text-slate-300{color:#334155 !important}
.text-slate-400{color:#475569 !important}
.text-slate-500{color:#52627a !important}
.text-sky-300{color:#0369a1 !important}
.text-sky-200{color:#075985 !important}
.text-emerald-300,.text-emerald-400{color:#0f766e !important}
.text-amber-200,.text-amber-300{color:#92400e !important}
.text-white{color:#0f172a !important}
#searchBtn,#searchBtn *,button.bg-sky-500,button.bg-sky-500 *,button.bg-emerald-500,button.bg-emerald-500 *,
button.bg-amber-500,button.bg-amber-500 *,.bg-sky-500.text-white,.sk-day-selected-dept,.sk-day-selected-ret,
#googleBookBar a,#googleBookBar a *{color:#ffffff !important}
button.bg-amber-500,button.bg-amber-500 *{color:#451a03 !important}
/* Header / hero */
header{position:relative}
header::before{content:"";position:absolute;inset:-22px 4% auto;height:210px;pointer-events:none;background:radial-gradient(closest-side, rgba(253,186,116,.75), rgba(56,189,248,.35) 48%, rgba(45,212,191,.22), transparent 74%);filter:blur(4px);z-index:-1}
header h1, main h1{
  background:linear-gradient(92deg,#075985 2%,#0284c7 26%,#0f766e 52%,#d97706 78%,#ea580c 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent !important;letter-spacing:-.03em;text-shadow:none;
  filter:drop-shadow(0 6px 22px rgba(2,132,199,.25)) drop-shadow(0 2px 10px rgba(246,222,156,.45));
}
header h1 i, header .fa-plane-departure{color:#d97706 !important;-webkit-text-fill-color:#d97706;filter:drop-shadow(0 0 12px rgba(253,186,116,.85))}
header p{color:#334155 !important}
.luxury-trust-row{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1rem}
.luxury-trust-row span{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .7rem;border-radius:999px;font-size:11px;font-weight:700;color:#7c2d12;border:1px solid rgba(217,119,6,.55);background:linear-gradient(92deg,rgba(246,222,156,.90),rgba(165,243,252,.85) 55%,rgba(153,246,228,.85));box-shadow:0 8px 22px rgba(2,132,199,.18),0 4px 14px rgba(217,119,6,.16)}
.luxury-trust-row i{color:#0f766e}
/* Cards — tinted sky/mint/peach, coloured border & shadow (no large white expanses) */
.glass-card{
  background:linear-gradient(155deg,#bae6fd 0%,#a5f3fc 30%,#99f6e4 58%,#fde68a 88%,#fed7aa 100%) !important;
  border:1.5px solid var(--c-border-gold) !important;border-radius:26px !important;
  box-shadow:0 24px 55px rgba(3,105,161,.22),0 10px 30px rgba(217,119,6,.16),0 0 0 1px rgba(56,189,248,.14),0 0 44px rgba(45,212,191,.18) !important;
  backdrop-filter:blur(10px);color:#1e293b !important;
}
.luxury-search-card{position:relative;overflow:hidden}
.luxury-search-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#0284c7,#2dd4bf 32%,#e9c979 62%,#fb923c);z-index:1}
.deal-chip{border:1.5px solid rgba(217,119,6,.55) !important;background:linear-gradient(92deg,rgba(246,222,156,.92),rgba(165,243,252,.88) 55%,rgba(153,246,228,.88)) !important;color:#7c2d12 !important;box-shadow:0 6px 20px rgba(2,132,199,.18)}
/* Inputs & calendar — pale aqua/mint tint, not pure white */
.glass-card input, .glass-card [onclick="openLocationModal('origin')"], .glass-card [onclick="openLocationModal('dest')"]{border-radius:16px !important;background:linear-gradient(180deg,#ecfeff,#ccfbf1) !important;color:#1e293b !important;border:1.5px solid rgba(2,132,199,.42) !important;box-shadow:0 4px 16px rgba(3,105,161,.14) !important}
#originDisplay,#destDisplay,#stopoverDisplay{color:#0f172a !important}
input{color:#1e293b !important;background:#ecfeff !important}
input::placeholder{color:#64748b !important}
.sk-day{border-radius:12px !important;color:#1e3a4c !important}
.sk-day:hover:not(.empty){background:#7dd3fc !important;border:1px solid #0284c7 !important}
.sk-day-selected-dept{background:linear-gradient(135deg,#0284c7,#38bdf8) !important;color:#fff !important;box-shadow:0 8px 20px rgba(56,189,248,.45)}
.sk-day-selected-ret{background:linear-gradient(135deg,#0f766e,#2dd4bf) !important;color:#fff !important;font-weight:800}
.sk-day-in-range{background:#99f6e4 !important}
.custom-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#d97706,#0ea5e9,#14b8a6);border-radius:99px}
.custom-scroll::-webkit-scrollbar-track{background:#a5f3fc}
/* Primary CTA — champagne gold */
#searchBtn{background:linear-gradient(92deg,#d97706,#e9c979 30%,#f6de9c 50%,#fdba74 78%,#38bdf8 135%) !important;color:#451a03 !important;border:1.5px solid rgba(146,64,14,.35);box-shadow:0 16px 38px rgba(217,119,6,.35),0 8px 24px rgba(56,189,248,.25) !important;border-radius:18px !important;letter-spacing:.01em}
#searchBtn:hover{filter:brightness(1.06);transform:translateY(-1px)}
#btnRoundTrip.bg-sky-500,#btnOneWay.bg-emerald-500,#btnMultiCity.bg-amber-500{background:linear-gradient(92deg,#0284c7,#14b8a6) !important;color:#ffffff !important;box-shadow:0 10px 24px rgba(2,132,199,.35) !important}
h2{color:#7c2d12 !important}
h2 i{color:#0284c7 !important;filter:drop-shadow(0 0 10px rgba(56,189,248,.45))}
h3{color:#1e293b}
a{transition:color .16s ease,border-color .16s ease,transform .16s ease}
a:hover{color:#b45309}
footer{color:#334155 !important;background:linear-gradient(120deg,rgba(125,211,252,.65),rgba(153,246,228,.60) 48%,rgba(254,215,170,.75)) !important;border:1.5px solid rgba(217,119,6,.35);border-radius:20px;padding:1rem .75rem;box-shadow:0 14px 34px rgba(3,105,161,.16)}
footer a, nav a.deal-chip{color:#075985 !important}
nav a.deal-chip:hover{border-color:rgba(217,119,6,.85) !important;color:#7c2d12 !important;transform:translateY(-1px)}
/* Results generated by JS */
#googleBookBar > div{border:1.5px solid rgba(217,119,6,.65) !important;background:linear-gradient(155deg,#bae6fd,#99f6e4 52%,#fde68a) !important;box-shadow:0 22px 48px rgba(3,105,161,.22),0 0 34px rgba(233,201,121,.30) !important;border-radius:24px !important;color:#1e293b !important}
#googleBookBar a{background:linear-gradient(92deg,#d97706,#f6de9c 48%,#fdba74) !important;color:#451a03 !important;box-shadow:0 14px 30px rgba(217,119,6,.32) !important;border-radius:16px !important}
#cheapPathResults > div, #nearbyAirportSection, #tripSummary, #locationModal > div{border-color:rgba(2,132,199,.42) !important;background:linear-gradient(155deg,#bae6fd,#ccfbf1 60%,#ffedd5) !important;box-shadow:0 14px 34px rgba(3,105,161,.18);color:#1e293b !important}
#locationModal{background:rgba(14,165,233,.28) !important;backdrop-filter:blur(6px)}
#locationModal > div{border:1.5px solid var(--c-border-gold) !important;border-radius:24px !important}
#scanningToast{background:linear-gradient(120deg,#bae6fd,#99f6e4,#fde68a) !important;color:#075985 !important;border-color:rgba(2,132,199,.45) !important}
::selection{background:#f6de9c;color:#451a03}
@media (max-width:640px){.glass-card{border-radius:22px !important}header h1{line-height:1.08}.luxury-trust-row span{font-size:10px;padding:.36rem .58rem}}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* === Clear Readability pass 2026-10-19 (RS Lina: "lekha bojha jacche na") ===
   Audit found, on the colourful sky/aqua/peach gradients:
   1) Tailwind sky-400 (#38BDF8), emerald/amber/rose-200, fuchsia-300 text was
      pale-on-pale in headings, badges, pills and JS-generated result cards.
   2) Body copy was set at 9-11px (calendar hint 9px, footers/badges 10px,
      card/Bangla copy 11px) — too small to read, especially Bangla script.
   3) Calendar out-of-month / past days used opacity .30, so dates vanished.
   4) Pale pill backgrounds (sky/emerald .10-.20 alpha) had no border/backing.
   5) From/To airport names used .truncate, clipping on 360-400px screens.
   Fix below keeps the colourful palette: readability comes from deep ink,
   solid tinted backing and larger type — never flat white, never dark. */
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Hind Siliguri","Noto Sans Bengali",Inter,ui-sans-system,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
  font-size:16px;line-height:1.62;overflow-x:hidden;
}
p,li{line-height:1.72}
main p,main li,.glass-card p,.glass-card li{color:#2e4059}
h2{font-size:clamp(1.18rem,2.6vw,1.45rem) !important;line-height:1.35 !important;letter-spacing:-.01em}
h3{font-size:clamp(1.02rem,2.2vw,1.18rem);line-height:1.4;color:#22344d}
header h1,main h1{
  background:linear-gradient(92deg,#0c4a6e 2%,#0369a1 28%,#0f766e 54%,#b45309 80%,#c2410c 98%);
  -webkit-background-clip:text;background-clip:text;
}
header p{color:#26364d !important;font-size:15px !important;line-height:1.7 !important;font-weight:550}
/* Deep, contrast-safe text colours on light colourful backgrounds */
.text-sky-400,.text-sky-500{color:#075985 !important}
.text-fuchsia-300,.text-fuchsia-400{color:#86198f !important}
.text-rose-200,.text-rose-300,.text-rose-400{color:#9f1239 !important}
.text-emerald-200,.text-emerald-500{color:#065f46 !important}
.text-amber-400{color:#92400e !important}
.text-amber-200\/80,.text-amber-200\/90,.text-emerald-200\/90{color:#7c2d12 !important}
.text-slate-300{color:#2e4059 !important}
.text-slate-400{color:#3a4d68 !important}
.text-slate-500{color:#3a4d68 !important}
.text-slate-600{color:#46586e !important}
input::placeholder{color:#4b6076 !important;opacity:1}
/* Small print made legible: 9-11px -> 12-13px (Bangla needs the extra size) */
.text-\[9px\]{font-size:12px !important;line-height:1.55 !important}
.text-\[10px\]{font-size:12px !important;line-height:1.55 !important}
.text-\[11px\]{font-size:13px !important;line-height:1.6 !important}
.text-xs{font-size:13px !important;line-height:1.6 !important}
footer{font-size:12.5px !important;line-height:1.65 !important}
footer a,footer nav a{font-weight:700}
/* Pale pills/badges get solid tinted backing + border so text sits on colour */
.bg-sky-500\/10,.bg-sky-500\/20{background-color:rgba(224,242,254,.96) !important;border:1px solid rgba(3,105,161,.55) !important}
.bg-emerald-500\/10,.bg-emerald-500\/20{background-color:rgba(209,250,229,.96) !important;border:1px solid rgba(6,95,70,.5) !important}
.bg-amber-500\/10,.bg-amber-500\/20{background-color:rgba(254,243,199,.97) !important;border:1px solid rgba(146,64,14,.55) !important}
.bg-fuchsia-500\/10{background-color:rgba(250,232,255,.96) !important;border:1px solid rgba(134,25,143,.45) !important}
.bg-rose-500\/10{background-color:rgba(255,228,230,.96) !important;border:1px solid rgba(159,18,57,.45) !important}
#selectedTripLabel,#calendarPickBadge{font-size:12px !important;padding:.35rem .6rem !important}
#routeWarning{color:#881337 !important;font-size:13px !important;line-height:1.6}
/* Calendar: dates must stay visible, including out-of-month and past days */
.sk-day{font-size:.95rem !important;font-weight:650;color:#21344d !important;min-height:42px}
.sk-day.empty{opacity:.62 !important;color:#5c6d84 !important}
.sk-day-selected-dept,.sk-day-selected-ret{color:#ffffff !important}
/* From/To names: wrap instead of clipping with an ellipsis on small screens */
#originDisplay,#destDisplay,#stopoverDisplay{white-space:normal !important;overflow:visible !important;text-overflow:clip !important;line-height:1.45;font-size:14px;font-weight:700}
.glass-card [onclick^="openLocationModal"]{min-height:48px}
/* Warnings, steps and notes on guide pages */
.warn-box{color:#422006 !important;line-height:1.72}
.warn-box a,.glass-card a.underline,main a.underline{color:#075985;font-weight:650}
.step-btn{background:linear-gradient(92deg,#0369a1,#0284c7) !important;color:#ffffff !important}
.cta-affiliate,.step-btn-gold{font-size:14px;line-height:1.45}
a,button{-webkit-tap-highlight-color:transparent}
button,.deal-chip a,a.deal-chip{min-height:40px}
:focus-visible{outline:3px solid #0369a1 !important;outline-offset:2px;border-radius:6px}
code{overflow-wrap:anywhere}
@media (max-width:640px){
  body{font-size:15.5px}
  header p{font-size:14.5px !important}
  .sk-day{min-height:40px;font-size:.92rem !important}
  .luxury-trust-row span{font-size:11.5px !important;padding:.42rem .62rem}
  .glass-card{padding-left:1rem;padding-right:1rem}
  nav a.deal-chip,.deal-chip{white-space:normal;text-align:center;line-height:1.45}
  h1{overflow-wrap:break-word}
  #searchBtn{min-height:52px;font-size:15px !important}
}

/* === Compact calendar 2026-10-19 (RS Lina: calendar too big / wastes space, mobile) ===
   Keeps Clear pass: day numbers >=13px (14px here), out-of-month/past days
   opacity .62 visible, selected/range states strong. No colour/theme change.
   Cells 36px (was 42 desktop / 40 mobile), grid gap 3px (was 4px),
   wrapper max 480px (was 576px), tighter card/header/nav padding. */
#calendarCard{scroll-margin-top:12px}
#calendarGridWrapper{width:100%;max-width:480px;min-width:0}
#tripCalendarGrid{gap:3px !important}
.sk-weekdays{line-height:1.25}
.sk-weekdays>div{min-width:0}
.sk-day{
  height:36px !important;min-height:36px !important;max-height:36px;
  font-size:14px !important;line-height:1.15 !important;border-radius:9px !important;
  min-width:0;padding:0;
}
.sk-day>span,.sk-day span{font-size:14px !important;line-height:1 !important}
.sk-day-in-range{border-radius:4px !important}
#calendarGridWrapper button{min-height:32px !important;height:32px;width:32px;flex:0 0 auto}
#calendarPickBadge{padding:.28rem .55rem !important;line-height:1.3 !important}
#departMonthLabel{line-height:1.3;white-space:nowrap}
#calendarHint{margin-top:.2rem !important;line-height:1.45 !important}
@media (max-width:640px){
  #calendarGridWrapper{max-width:100%}
  .sk-day{height:36px !important;min-height:36px !important}
  /* Search button stays reachable: calendar + From/To stack without excess gaps */
  .luxury-search-card .grid.grid-cols-1{gap:.55rem}
}
@media (min-width:641px){
  .sk-day{height:36px !important;min-height:36px !important}
}