/* =========================================================
   WhenIsMyTrain.in — Stylesheet
   Design language: "Departure Board" — split-flap digits,
   ticket-stub cards, railway-line timeline.
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  /* Brand palette (fixed per brief) */
  --ink:        #0F172A;   /* Primary   */
  --rail-blue:  #2563EB;   /* Secondary */
  --go-green:   #16A34A;   /* Success   */
  --tatkal:     #F97316;   /* Warning   */
  --platform:   #F8FAFC;   /* Background*/

  /* Derived surfaces */
  --surface:      #FFFFFF;
  --surface-glass: rgba(255,255,255,0.66);
  --border:       #E2E8F0;
  --border-soft:  #EEF2F7;
  --muted:        #64748B;
  --muted-2:      #94A3B8;

  --rail-blue-50:  #EFF5FF;
  --rail-blue-100: #DCE9FF;
  --go-green-50:   #EAF7EE;
  --tatkal-50:     #FFF2E8;

  /* Typography */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fixed-dark surfaces: always dark navy regardless of light/dark theme
     (ticket, countdown, footer, CTA band, brand mark). Do NOT flip these. */
  --navy: #0F172A;
  --navy-2: #1E293B;

  /* Radii & shadow */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06), 0 1px 1px rgba(15,23,42,0.04);
  --shadow-md: 0 8px 24px rgba(15,23,42,0.08);
  --shadow-lg: 0 24px 48px -12px rgba(15,23,42,0.18);

  --container: 1180px;
  --nav-h: 72px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Dark mode tokens */
:root[data-theme="dark"]{
  --ink:          #F8FAFC;
  --platform:     #070B14;
  --surface:      #111A2E;
  --surface-glass: rgba(17,26,46,0.72);
  --border:       #223049;
  --border-soft:  #1A2540;
  --muted:        #94A3B8;
  --muted-2:      #64748B;
  --rail-blue-50: #132441;
  --rail-blue-100:#16305A;
  --go-green-50:  #10261A;
  --tatkal-50:    #2B1B0E;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:          #F8FAFC;
    --platform:     #070B14;
    --surface:      #111A2E;
    --surface-glass: rgba(17,26,46,0.72);
    --border:       #223049;
    --border-soft:  #1A2540;
    --muted:        #94A3B8;
    --muted-2:      #64748B;
    --rail-blue-50: #132441;
    --rail-blue-100:#16305A;
    --go-green-50:  #10261A;
    --tatkal-50:    #2B1B0E;
  }
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--platform);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background .3s var(--ease), color .3s var(--ease);
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; letter-spacing:-0.02em; }
p{ margin:0; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* visually-hidden but accessible */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--navy); color:#fff;
  padding:12px 18px; border-radius: 0 0 var(--r-sm) 0; z-index:200;
}
.skip-link:focus{ left:0; }

/* Focus visibility */
:focus-visible{
  outline: 2.5px solid var(--rail-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Skeleton loader ---------- */
.skeleton{
  background: linear-gradient(100deg, var(--border-soft) 30%, var(--border) 50%, var(--border-soft) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer{ 0%{ background-position: 150% 0; } 100%{ background-position: -50% 0; } }

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 100;
  height: var(--nav-h);
  display:flex; align-items:center;
  background: var(--surface-glass);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--border-soft);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; gap: 20px; }
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; font-size:1.15rem; }
.brand-mark{
  width:34px; height:34px; border-radius:9px;
  background: linear-gradient(155deg, var(--rail-blue), var(--navy));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.brand-mark svg{ width:19px; height:19px; }
.brand-sub{ color: var(--rail-blue); }

.main-nav{ display:flex; gap: 4px; }
.main-nav a{
  padding: 9px 14px; border-radius: var(--r-pill); font-size:.94rem; font-weight:600; color: var(--muted);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.main-nav a:hover, .main-nav a:focus-visible{ background: var(--rail-blue-50); color: var(--rail-blue); }

.nav-actions{ display:flex; align-items:center; gap:10px; }
.theme-toggle{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  background: var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer;
  color: var(--ink); transition: transform .25s var(--ease), background .2s;
}
.theme-toggle:hover{ transform: rotate(18deg); }
.theme-toggle svg{ width:18px; height:18px; }
.icon-sun{ display:none; }
[data-theme="dark"] .icon-moon{ display:none; }
[data-theme="dark"] .icon-sun{ display:block; }

.nav-toggle{
  display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--border);
  background: var(--surface); align-items:center; justify-content:center; cursor:pointer;
  color: var(--ink);
}
.nav-toggle svg{ width:20px; height:20px; }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 24px; border-radius: var(--r-pill);
  font-weight:700; font-size:.96rem; border:1px solid transparent; cursor:pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn svg{ width:18px; height:18px; }
.btn:active{ transform: scale(.97); }
.btn-primary{ background: var(--rail-blue); color:#fff; box-shadow: 0 10px 24px -8px rgba(37,99,235,.55); }
.btn-primary:hover{ background:#1D4ED8; box-shadow: 0 14px 28px -8px rgba(37,99,235,.6); }
.btn-secondary{ background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn-secondary:hover{ border-color: var(--rail-blue); color: var(--rail-blue); }
.btn-ghost{ background:transparent; color: var(--muted); border-color: var(--border); }
.btn-ghost:hover{ color: var(--ink); border-color: var(--ink); }
.btn-block{ width:100%; }
.btn-lg{ padding:16px 30px; font-size:1.02rem; }

/* ripple */
.ripple{
  position:absolute; border-radius:50%; transform: scale(0);
  background: rgba(255,255,255,.55); animation: ripple .6s var(--ease);
  pointer-events:none;
}
.btn-secondary .ripple, .btn-ghost .ripple{ background: rgba(37,99,235,.18); }
@keyframes ripple{ to{ transform: scale(3.2); opacity:0; } }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  padding: 64px 0 40px;
  background: linear-gradient(135deg, #ffffff 0%, #e3f2fd 40%, #e1bee7 70%, #90caf9 100%);
  overflow:hidden;
}
:root[data-theme="dark"] .hero{
  background: linear-gradient(135deg, #0b1220 0%, #0f1e33 40%, #241a35 70%, #142a4a 100%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hero{
    background: linear-gradient(135deg, #0b1220 0%, #0f1e33 40%, #241a35 70%, #142a4a 100%);
  }
}
.hero-grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap:56px; align-items:center;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color: var(--rail-blue); background: var(--rail-blue-50);
  padding:7px 14px; border-radius: var(--r-pill); margin-bottom:20px;
}
.hero-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--go-green); animation: pulse-dot 1.8s infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.hero h1{
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight: 800; line-height:1.08; margin-bottom:20px;
}
.flap-word{ display:inline-block; position:relative; color: var(--rail-blue); }

.hero-sub{ font-size:1.14rem; color: var(--muted); max-width: 46ch; margin-bottom:28px; }

.hero-quickfact{
  margin-top:28px; display:flex; align-items:center; gap:14px;
  padding:14px 18px; border-radius: var(--r-md); background: var(--surface);
  border:1px solid var(--border-soft); box-shadow: var(--shadow-sm); max-width: 480px;
}
.hero-quickfact .qf-icon{
  width:38px; height:38px; border-radius:10px; background: var(--go-green-50); color: var(--go-green);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.hero-quickfact .qf-icon svg{ width:19px; height:19px; }
.qf-label{ font-size:.78rem; color: var(--muted); font-weight:600; }
.qf-value{ font-family: var(--font-mono); font-weight:700; font-size:1rem; }

/* Hero calculator card */
.calc-card{
  background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 30px; position:relative;
}
.calc-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.calc-card-head h2{ font-size:1.05rem; }
.calc-badge{
  font-family: var(--font-mono); font-size:.72rem; font-weight:700; color: var(--go-green);
  background: var(--go-green-50); padding:4px 10px; border-radius: var(--r-pill);
}
.field-label{ font-size:.82rem; font-weight:700; color: var(--muted); margin-bottom:8px; display:block; }
.date-input-wrap{ position:relative; margin-bottom:18px; }
.date-input-wrap svg{
  position:absolute; left:16px; top:50%; transform: translateY(-50%); width:19px; height:19px; color: var(--muted-2);
  cursor:pointer; z-index:1;
}
#journeyDate{
  width:100%; padding:15px 16px 15px 46px; border-radius: var(--r-md); border:1.5px solid var(--border);
  font-size:1.02rem; font-family: var(--font-mono); font-weight:600; background: var(--platform); color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
#journeyDate:focus{ border-color: var(--rail-blue); box-shadow: 0 0 0 4px var(--rail-blue-50); outline:none; }

/* Native calendar picker indicator: keep it visible and clickable in both themes */
#journeyDate::-webkit-calendar-picker-indicator{
  cursor:pointer; padding:4px; border-radius:6px; opacity:1;
}
:root[data-theme="dark"] #journeyDate::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.4);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #journeyDate::-webkit-calendar-picker-indicator{
    filter: invert(1) brightness(1.4);
  }
}

/* iOS Safari renders <input type="date"> as a single native control (its
   own icon + day/month/year text drawn together) rather than a text field
   with a separate picker indicator. A custom monospace font-family and the
   extra left padding we use elsewhere to make room for our decorative icon
   can make that native text fail to render on iOS. Reset both, and hide
   the decorative icon so it doesn't sit on top of iOS's own control. This
   targets iOS Safari specifically (desktop/Android are unaffected). */
@supports (-webkit-touch-callout: none){
  #journeyDate{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    padding-left: 16px;
  }
  .date-input-wrap svg{ display:none; }
}

/* iOS Safari shows NO placeholder text at all on an empty date input
   (unlike desktop browsers, which show a greyed-out "dd-mm-yyyy" or
   "mm/dd/yyyy" hint natively) — this is a genuine platform gap, not
   something CSS alone can fix on the native control. Overlay our own
   placeholder text instead, shown only on iOS (desktop already has a
   working native placeholder) and only while the field is empty —
   see the "input"/"change" handling in script.js.
   pointer-events:none so clicks/taps pass straight through to the
   real input underneath. */
.date-placeholder-fallback{ display:none; }
@supports (-webkit-touch-callout: none){
  .date-placeholder-fallback{
    display:block; position:absolute; left:16px; top:50%; transform:translateY(-50%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size:1.02rem; font-weight:600; color: var(--muted-2); pointer-events:none;
  }
}

.quota-select{ display:flex; gap:8px; margin-bottom:20px; }
.quota-select input{ position:absolute; opacity:0; }
.quota-select label{
  flex:1; text-align:center; padding:10px 8px; border-radius: var(--r-sm); border:1.5px solid var(--border);
  font-size:.86rem; font-weight:700; color: var(--muted); cursor:pointer; transition: all .18s var(--ease);
}
.quota-select input:checked + label{ border-color: var(--rail-blue); color: var(--rail-blue); background: var(--rail-blue-50); }

.calc-error{
  display:none; align-items:center; gap:8px; font-size:.86rem; font-weight:600; color:#B91C1C;
  background:#FEF2F2; border:1px solid #FECACA; padding:10px 14px; border-radius: var(--r-sm); margin-bottom:16px;
}
.calc-error.show{ display:flex; }
.calc-error svg{ width:16px; height:16px; flex-shrink:0; }

/* =========================================================
   Result — Ticket stub (signature element)
   ========================================================= */
.result-wrap{ margin-top:22px; display:none; }
.result-wrap.show{ display:block; animation: rise .45s var(--ease); }
@keyframes rise{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }

.ticket{
  position:relative; border-radius: var(--r-md); overflow:hidden;
  background: linear-gradient(160deg, var(--navy), var(--navy-2));
  color:#fff; box-shadow: var(--shadow-md);
}
.ticket-top{ padding:22px 24px 18px; }
.ticket-status{ display:flex; align-items:center; gap:8px; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: #86EFAC; margin-bottom:10px; }
.ticket-status svg{ width:14px; height:14px; }
.ticket-date{ font-family: var(--font-mono); font-size:1.6rem; font-weight:700; letter-spacing:-0.02em; }
.ticket-time{ font-family: var(--font-mono); color:#93C5FD; font-size:.95rem; margin-top:4px; }

.ticket-perf{
  position:relative; height:0; border-top:2px dashed rgba(255,255,255,.22); margin:0 24px;
}
.ticket-perf::before, .ticket-perf::after{
  content:""; position:absolute; top:-11px; width:22px; height:22px; border-radius:50%; background: var(--platform);
}
.ticket-perf::before{ left:-34px; }
.ticket-perf::after{ right:-34px; }

.ticket-bottom{ padding:18px 24px 22px; display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.ticket-field{ }
.ticket-field .tf-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:#94A3B8; font-weight:700; margin-bottom:4px; }
.ticket-field .tf-value{ font-family: var(--font-mono); font-weight:700; font-size:.98rem; }
.tf-value.accent-green{ color:#86EFAC; }
.tf-value.accent-amber{ color:#FDBA74; }

.result-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.result-actions .btn{ flex:1; min-width: 128px; padding:11px 16px; font-size:.86rem; }

/* =========================================================
   Sections generic
   ========================================================= */
.section{ padding: 84px 0; }
.section-alt{ background: var(--surface); }
.section-head{ max-width: 640px; margin: 0 auto 48px; text-align:center; }
.section-eyebrow{
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--rail-blue); margin-bottom:12px; display:block;
}
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom:14px; }
.section-head p{ color: var(--muted); font-size:1.03rem; }

/* Ad slot */
.ad-slot{
  margin: 0 auto; max-width: var(--container); padding: 0 24px;display:none
}
.ad-slot .ad-inner{
  border:1px dashed var(--border); border-radius: var(--r-sm); background: var(--border-soft);
  text-align:center; padding: 18px; font-size:.78rem; color: var(--muted-2); font-weight:600; letter-spacing:.04em;
}

/* Timeline */
.timeline{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; position:relative; max-width: 880px; margin:0 auto; }
.timeline::before{
  content:""; position:absolute; top:23px; left:40px; right:40px; height:3px;
  background: repeating-linear-gradient(90deg, var(--border) 0 10px, transparent 10px 18px);
}
.timeline-step{ flex:1; text-align:center; position:relative; z-index:1; }
.timeline-dot{
  width:46px; height:46px; border-radius:50%; background: var(--surface); border:3px solid var(--rail-blue);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px; color: var(--rail-blue); box-shadow: var(--shadow-sm);
}
.timeline-step:nth-child(2) .timeline-dot{ border-color: var(--tatkal); color: var(--tatkal); }
.timeline-step:nth-child(3) .timeline-dot{ border-color: var(--go-green); color: var(--go-green); }
.timeline-dot svg{ width:20px; height:20px; }
.timeline-step h3{ font-size:1rem; margin-bottom:4px; }
.timeline-step p{ font-size:.86rem; color: var(--muted); }
.timeline-step .ts-val{ font-family: var(--font-mono); font-weight:700; font-size:.86rem; color: var(--ink); margin-top:4px; }

/* Countdown — split flap */
.countdown-card{
  max-width: 640px; margin: 40px auto 0; background: var(--navy); border-radius: var(--r-lg);
  padding: 32px; text-align:center; box-shadow: var(--shadow-lg);
}
.countdown-label{ color:#93C5FD; font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:20px; }
.flap-row{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.flap-unit{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.flap{
  width:78px; height:78px; border-radius: 12px; background: #1E293B; color:#F8FAFC;
  font-family: var(--font-mono); font-size:2.1rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.flap::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background: rgba(0,0,0,.45); }
.flap.flip{ animation: flip .35s ease; }
@keyframes flip{ 0%{ transform: rotateX(0); } 50%{ transform: rotateX(90deg); opacity:.5; } 100%{ transform: rotateX(0); opacity:1; } }
.flap-unit-label{ font-size:.72rem; color:#94A3B8; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }

/* Calendar */
.calendar-card{
  max-width: 480px; margin: 0 auto; background: var(--surface); border:1px solid var(--border-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 26px;
}
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.cal-head h3{ font-size:1.05rem; font-family: var(--font-display); }
.cal-nav{ display:flex; gap:6px; }
.cal-nav button{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background: var(--platform); cursor:pointer;
  display:flex; align-items:center; justify-content:center; color: var(--ink); transition: background .18s;
}
.cal-nav button:hover{ background: var(--rail-blue-50); color: var(--rail-blue); }
.cal-nav svg{ width:16px; height:16px; }
.cal-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:4px; text-align:center; }
.cal-dow{ font-size:.7rem; font-weight:700; color: var(--muted-2); padding:6px 0; }
.cal-day{
  position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size:.86rem; border-radius:10px; color: var(--ink); cursor:default;
}
.cal-day.pad{ visibility:hidden; }
.cal-day.today{ box-shadow: inset 0 0 0 2px var(--rail-blue); font-weight:700; }
.cal-day.booking{ background: var(--go-green); color:#fff; font-weight:700; }
.cal-day.journey{ background: var(--tatkal); color:#fff; font-weight:700; }
.cal-legend{ display:flex; justify-content:center; gap:18px; margin-top:18px; flex-wrap:wrap; }
.cal-legend span{ display:flex; align-items:center; gap:6px; font-size:.78rem; color: var(--muted); font-weight:600; }
.leg-dot{ width:10px; height:10px; border-radius:3px; }
.leg-dot.today{ border:2px solid var(--rail-blue); }
.leg-dot.booking{ background: var(--go-green); }
.leg-dot.journey{ background: var(--tatkal); }

/* Smart features */
.feature-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.feature-card{
  background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--r-md);
  padding:22px 18px; text-align:center; cursor:pointer; color: var(--ink); font-family: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.feature-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--rail-blue); }
.feature-icon{
  width:46px; height:46px; border-radius:12px; background: var(--rail-blue-50); color: var(--rail-blue);
  display:flex; align-items:center; justify-content:center; margin: 0 auto 14px;
}
.feature-icon svg{ width:21px; height:21px; }
.feature-card h3{ font-size:.92rem; margin-bottom:4px; }
.feature-card p{ font-size:.78rem; color: var(--muted); }

/* =========================================================
   Travel Recommendation Engine — card design
   Deliberately styled like the rest of the site's content
   cards, not like an ad unit: soft shadow, rounded corners,
   no flashing colors, no banner-style borders. Injected by
   /assets/js/travel-recommendation.js into any
   <div id="affiliate-section"> on any page.
   ========================================================= */
.tr-section{ padding: 8px 0; }
.tr-head{ max-width: 640px; margin: 0 auto 32px; text-align:center; }
.tr-head h2{ font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom:10px; }
.tr-head p{ color: var(--muted); font-size:1rem; }

.tr-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; align-items:stretch; }

.tr-card{
  position:relative; background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--r-md);
  padding:24px 20px; display:flex; flex-direction:column; height:100%;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s;
}
.tr-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--rail-blue-100); }

.tr-icon{ margin-bottom:12px; line-height:1; }
.tr-icon svg{ width:30px; height:30px; color: var(--rail-blue); }
.tr-title{ font-size:1.02rem; font-weight:700; color: var(--ink); margin-bottom:8px; line-height:1.3; }
.tr-desc{ font-size:.86rem; color: var(--muted); margin-bottom:14px; line-height:1.55; }

/* Always exactly 3 feature lines (see SERVICE_TYPE_CONTENT in
   travel-recommendation-config.js) — flex:1 absorbs any remaining
   height difference between cards so the button and "Powered by"
   footer line up at the same vertical position across the whole row. */
.tr-features{ list-style:none; padding:0; margin:0 0 18px; flex:1 0 auto; }
.tr-features li{
  font-size:.82rem; color: var(--ink); padding:4px 0 4px 22px; position:relative; line-height:1.4;
}
.tr-features li::before{
  content:"✓"; position:absolute; left:0; top:4px; color: var(--go-green); font-weight:700; font-size:.8rem;
}

.tr-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:12px 16px; border-radius: var(--r-pill); background: var(--rail-blue); color:#fff;
  font-weight:700; font-size:.88rem; border:none; cursor:pointer; text-decoration:none; transition: background .18s;
  margin-top:auto;
}
.tr-btn:hover{ background:#1D4ED8; color:#fff; }

/* Merchant trust line: bigger, rectangular logo so real brand marks
   (usually wider than tall) are actually recognizable at a glance,
   rather than squeezed into a small square icon. */
.tr-powered-by{
  display:flex; align-items:center; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border-soft);
  font-size:.76rem; color: var(--muted-2);
}
.tr-logo{
  width:75px; height:30px; border-radius:6px; background: var(--rail-blue-50); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.tr-logo img{ width:100%; height:100%; object-fit:contain; }
.tr-logo-fallback{ font-family: var(--font-display); font-weight:700; color: var(--rail-blue); font-size:.9rem; }
.tr-powered-by span:nth-child(2){ flex:1; }

.tr-disclosure{
  margin-top:26px; font-size:.8rem; color: var(--muted-2); text-align:center; max-width:70ch; margin-left:auto; margin-right:auto;
}
.tr-disclosure a{ color: var(--muted-2); text-decoration:underline; font-weight:600; }
.tr-disclosure a:hover{ color: var(--rail-blue); }

.tr-skeleton{ pointer-events:none; }

@media (max-width: 1024px){
  .tr-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .tr-grid{ grid-template-columns: 1fr; }
}


/* Info / accordion */
.info-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-bottom:20px; }
.info-card{ background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--r-md); padding:24px; box-shadow: var(--shadow-sm); }
.info-card .ic-icon{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.info-card.general .ic-icon{ background: var(--rail-blue-50); color: var(--rail-blue); }
.info-card.tatkal .ic-icon{ background: var(--tatkal-50); color: var(--tatkal); }
.info-card.premium .ic-icon{ background: var(--go-green-50); color: var(--go-green); }
.info-card .ic-icon svg{ width:19px; height:19px; }
.info-card h3{ font-size:1rem; margin-bottom:8px; }
.info-card p{ font-size:.88rem; color: var(--muted); }
.info-card ul{ margin-top:10px; }
.info-card li{ font-size:.85rem; color: var(--muted); padding:4px 0 4px 18px; position:relative; }
.info-card li::before{ content:"—"; position:absolute; left:0; color: var(--rail-blue); }

.notice-banner{
  display:flex; gap:14px; align-items:flex-start; background: var(--tatkal-50); border:1px solid #FDE0C4;
  border-radius: var(--r-md); padding:18px 20px; margin-top:8px;
}
:root[data-theme="dark"] .notice-banner{ border-color: #3a2612; }
.notice-banner svg{ width:22px; height:22px; color: var(--tatkal); flex-shrink:0; margin-top:2px; }
.notice-banner h4{ font-size:.92rem; margin-bottom:4px; }
.notice-banner p{ font-size:.85rem; color: var(--muted); }

/* Tips */
.tips-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:14px; }
.tip-card{
  background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--r-md);
  padding:18px 16px; text-align:center;
}
.tip-num{ font-family: var(--font-mono); font-weight:700; color: var(--rail-blue); font-size:.78rem; margin-bottom:8px; }
.tip-card p{ font-size:.84rem; color: var(--ink); font-weight:600; }

/* Content sections (how it works, mistakes, disclaimer) */
.content-cols{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px; }
.content-card{ background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--r-md); padding:26px; }
.content-card h3{ font-size:1.05rem; margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.content-card h3 svg{ width:20px; height:20px; color: var(--rail-blue); }
.content-card p, .content-card li{ font-size:.9rem; color: var(--muted); }
.content-card ol{ padding-left:20px; margin-top:8px; }
.content-card ol li{ padding:3px 0; }
.content-card ul li{ position:relative; padding:4px 0 4px 18px; }
.content-card ul li::before{ content:"•"; position:absolute; left:2px; color: var(--tatkal); font-weight:700; }

/* Steps (how it works) numbered — legitimate sequence */
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
.step{ text-align:center; }
.step-num{
  width:44px; height:44px; border-radius:50%; background: var(--navy); color:#fff; font-family: var(--font-mono); font-weight:700;
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
}
.step h3{ font-size:.95rem; margin-bottom:6px; }
.step p{ font-size:.84rem; color: var(--muted); }

/* Popular searches */
.popular-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.popular-card{
  background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--r-md); padding:20px;
  display:flex; align-items:center; gap:14px; transition: border-color .2s, transform .2s;
}
.popular-card:hover{ border-color: var(--rail-blue); transform: translateY(-2px); }
.popular-card .pc-icon{ width:40px; height:40px; border-radius:10px; background: var(--rail-blue-50); color: var(--rail-blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.popular-card .pc-icon svg{ width:18px; height:18px; }
.popular-card h3{ font-size:.92rem; margin-bottom:2px; }
.popular-card p{ font-size:.78rem; color: var(--muted); }

/* FAQ */
.faq-list{ max-width: 780px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--border-soft); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; padding:20px 4px; text-align:left; font-family: var(--font-display);
  font-size:1rem; font-weight:600; color: var(--ink); cursor:pointer;
}
.faq-q svg{ width:20px; height:20px; flex-shrink:0; transition: transform .25s var(--ease); color: var(--muted); }
.faq-item.open .faq-q svg{ transform: rotate(45deg); color: var(--rail-blue); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .3s var(--ease); }
.faq-a-inner{ padding: 0 4px 20px; font-size:.92rem; color: var(--muted); max-width: 68ch; }

/* CTA band */
.cta-band{
  background: linear-gradient(135deg, var(--navy), var(--navy-2)); color:#fff; border-radius: var(--r-lg);
  padding: 48px; text-align:center; max-width: var(--container); margin: 0 auto;
}
.cta-band h2{ color:#fff; font-size: clamp(1.5rem,3vw,2rem); margin-bottom:12px; }
.cta-band p{ color:#CBD5E1; margin-bottom:24px; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background: var(--navy); color:#CBD5E1; padding: 60px 0 30px; margin-top: 40px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:40px; }
.footer-brand .brand{ color:#fff; margin-bottom:14px; }
.footer-brand p{ font-size:.86rem; color:#94A3B8; max-width: 32ch; }
.footer-col h4{ color:#fff; font-size:.84rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; }
.footer-col a{ display:block; font-size:.88rem; color:#94A3B8; padding:6px 0; transition: color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding-top:24px; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:12px; font-size:.8rem; color:#64748B;
}
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center;
}
.footer-social svg{ width:16px; height:16px; }

/* Toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform: translateX(-50%) translateY(20px);
  background: var(--navy); color:#fff; padding:14px 22px; border-radius: var(--r-pill); font-size:.88rem; font-weight:600;
  box-shadow: var(--shadow-lg); opacity:0; pointer-events:none; transition: all .3s var(--ease); z-index:999;
  display:flex; align-items:center; gap:10px;
}
.toast svg{ width:16px; height:16px; color:#86EFAC; }
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); pointer-events:auto; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px){
  .info-grid, .content-cols{ grid-template-columns: 1fr 1fr; }
  .feature-grid{ grid-template-columns: repeat(2,1fr); }
  .tips-grid{ grid-template-columns: repeat(3,1fr); }
  .popular-grid{ grid-template-columns: repeat(2,1fr); }
  .steps{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
}

@media (max-width: 640px){
  .section{ padding: 56px 0; }
  .info-grid, .content-cols, .tips-grid, .popular-grid, .steps{ grid-template-columns: 1fr; }
  .feature-grid{ grid-template-columns: repeat(2,1fr); }
  .ticket-bottom{ grid-template-columns: 1fr 1fr; }
  .flap{ width:60px; height:60px; font-size:1.5rem; }
  .flap-row{ gap:8px; }
  .cta-band{ padding:32px 22px; }
  .timeline{ flex-direction:column; align-items:stretch; gap:26px; }
  .timeline::before{ display:none; }
  .timeline-step{ width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; }
  .footer-grid{ grid-template-columns: 1fr; gap:28px; }
}