/*
 * Design system for Bus Ticket System. One shared stylesheet across the
 * customer-facing site, the admin/staff/agent console, and the install
 * wizard (all three layouts link this same file) — component class
 * names below (`.card`, `.btn`, `.badge`, ...) are the contract every
 * view template relies on; keep them stable when extending this file.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  /* Neutrals */
  --bg:#F6F8F6; --surface:#FFFFFF; --surface-alt:#F0F3F0;
  --ink:#14201B; --ink-soft:#57655D; --ink-faint:#8B968E;
  --border:#E1E7E1; --border-strong:#CBD5CD;

  /* Brand */
  --accent:#187A63; --accent-dark:#0E4E3F; --accent-600:#146B57;
  --accent-soft:#E1F1EB; --accent-soft-strong:#C3E4D8;

  /* Semantic */
  --warn:#C6792E; --warn-dark:#8A5420; --warn-soft:#FBEBD8;
  --danger:#B7402C; --danger-dark:#8A2F20; --danger-soft:#F8E2DD;
  --info:#2B6CB0; --info-dark:#1E4E82; --info-soft:#E1EBF7;

  /* Seat map */
  --seat-avail:#FFFFFF; --seat-held:var(--warn-soft); --seat-booked:#E7EAE6; --seat-selected:var(--accent);

  /* Elevation */
  --shadow-xs:0 1px 2px rgba(20,32,27,.05);
  --shadow-sm:0 2px 6px rgba(20,32,27,.06), 0 1px 2px rgba(20,32,27,.05);
  --shadow-md:0 8px 20px rgba(20,32,27,.08), 0 2px 6px rgba(20,32,27,.05);
  --shadow-lg:0 20px 40px rgba(20,32,27,.12), 0 6px 16px rgba(20,32,27,.06);

  /* Shape */
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-pill:999px;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

/*
 * Customer-site color themes. The base :root above IS the "green" theme
 * (kept there so the site still looks right if this block is ever
 * removed) — [data-theme="green"] just restates the same values so the
 * switcher's four options are symmetric in the markup/JS rather than
 * treating "no attribute" as a hidden fifth state. Only `--bg`,
 * `--surface-alt` and the `--accent*` family shift between themes;
 * neutrals (ink/border) stay put so contrast and legibility don't ride
 * on which theme is picked. Set only by customer/layouts/customer.php's
 * switcher (see assets/js/theme.js) — the admin/staff/agent console
 * never sets data-theme, so it always renders the plain :root values
 * above regardless of what a customer has picked on the public site.
 */
:root[data-theme="green"]{
  --bg:#F6F8F6; --surface-alt:#F0F3F0;
  --accent:#187A63; --accent-dark:#0E4E3F; --accent-600:#146B57;
  --accent-soft:#E1F1EB; --accent-soft-strong:#C3E4D8;
}
:root[data-theme="blue"]{
  --bg:#F2F7FC; --surface-alt:#E9F1FA;
  --accent:#1D6FC2; --accent-dark:#123E6E; --accent-600:#1A62AA;
  --accent-soft:#E0EDFB; --accent-soft-strong:#C2DCF7;
}
:root[data-theme="sunset"]{
  --bg:#FDF6F0; --surface-alt:#FBEBDC;
  --accent:#D9721A; --accent-dark:#8A4710; --accent-600:#C05F13;
  --accent-soft:#FBE6D1; --accent-soft-strong:#F5D0A9;
}
:root[data-theme="purple"]{
  --bg:#F8F5FC; --surface-alt:#F0E9FA;
  --accent:#7A3FC4; --accent-dark:#4B2178; --accent-600:#6931AC;
  --accent-soft:#EDE2FA; --accent-soft-strong:#DAC3F2;
}

/* ---------- theme switcher ---------- */
.theme-switcher{display:flex; align-items:center; gap:6px; padding-left:10px; margin-left:4px; border-left:1px solid var(--border);}
.theme-swatch{
  width:20px; height:20px; border-radius:50%; border:2px solid transparent; padding:0; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); transition:transform .12s ease, border-color .12s ease;
}
.theme-swatch:hover{transform:scale(1.12);}
.theme-swatch[aria-pressed="true"]{border-color:var(--ink);}
.theme-swatch.theme-green{background:linear-gradient(135deg,#187A63,#1FA084);}
.theme-swatch.theme-blue{background:linear-gradient(135deg,#1D6FC2,#4E9BE0);}
.theme-swatch.theme-sunset{background:linear-gradient(135deg,#D9721A,#F0A356);}
.theme-swatch.theme-purple{background:linear-gradient(135deg,#7A3FC4,#A671E3);}
@media (max-width:860px){ .theme-switcher{border-left:none; padding-left:0; margin-left:0;} }

*{box-sizing:border-box;}
html{accent-color:var(--accent);}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-sans);
  line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--accent-600); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{margin:0 0 .45em; line-height:1.22; font-weight:700; letter-spacing:-.01em;}
h1{font-size:1.7rem;}
h2{font-size:1.2rem;}
h3{font-size:1.02rem;}
code{font-family:var(--font-mono); background:var(--surface-alt); padding:.15em .45em; border-radius:5px; font-size:.9em;}
::selection{background:var(--accent-soft-strong);}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}

.container{max-width:1180px; margin:0 auto; padding:0 24px;}
.container.narrow{max-width:460px;}

/* ---------- top nav ---------- */
.topbar{
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:30;
}
.topbar .container{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:16px; flex-wrap:wrap;}
.brand{font-weight:800; font-size:1.05rem; color:var(--accent-dark); text-decoration:none; letter-spacing:-.01em; white-space:nowrap;}
.brand:hover{text-decoration:none; opacity:.85;}
.topbar nav{display:flex; align-items:center; flex-wrap:wrap; gap:6px 4px; margin-left:auto;}
.topbar nav a{padding:6px 11px; border-radius:var(--radius-pill); color:var(--ink-soft); text-decoration:none; font-size:.86rem; font-weight:500; white-space:nowrap; transition:background .15s ease,color .15s ease;}
.topbar nav a:hover{color:var(--accent-dark); background:var(--accent-soft); text-decoration:none;}
.topbar form{display:inline;}
.topbar .muted{font-size:.84rem; padding:0 2px; white-space:nowrap;}
.nav-links{display:flex; align-items:center; flex-wrap:wrap; gap:2px;}
.nav-account{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-left:14px; margin-left:6px; border-left:1px solid var(--border);}
@media (max-width:860px){ .nav-account{border-left:none; padding-left:0; margin-left:0;} }

main.page{padding:40px 0 72px;}

/* ---------- booking flow step trail ---------- */
.booking-steps{display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:.83rem; color:var(--ink-faint); margin-bottom:22px;}
.booking-steps a{color:var(--ink-soft);}
.booking-steps .step-sep{color:var(--border-strong);}
.booking-steps .step-current{color:var(--accent-dark); font-weight:700;}

/* ---------- cards ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:26px; margin-bottom:22px; box-shadow:var(--shadow-xs);}
.card h2{font-size:1.1rem;}
.grid{display:grid; gap:18px;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:720px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr;}}

.stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px 22px; box-shadow:var(--shadow-xs); transition:box-shadow .15s ease, transform .15s ease;}
.stat:hover{box-shadow:var(--shadow-sm); transform:translateY(-1px);}
.stat .label{font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); font-weight:600;}
.stat .value{font-size:1.8rem; font-weight:800; color:var(--accent-dark); font-variant-numeric:tabular-nums; margin-top:4px; letter-spacing:-.02em;}

/* ---------- forms ---------- */
label{display:block; font-size:.85rem; font-weight:600; margin:16px 0 6px; color:var(--ink);}
label:first-child{margin-top:0;}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=datetime-local],input[type=tel],select,textarea{
  width:100%; padding:10px 13px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); font-size:.95rem;
  font-family:inherit; background:var(--surface); color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease;
}
input:hover,select:hover,textarea:hover{border-color:var(--ink-faint);}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
textarea{resize:vertical;}
.field-hint{font-size:.82rem; color:var(--ink-soft); margin-top:6px;}
fieldset{border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 20px; margin:0 0 18px;}
legend{padding:0 8px; font-weight:700; font-size:.88rem; color:var(--ink);}

.phone-input-group{display:flex; align-items:stretch;}
.phone-prefix{
  display:flex; align-items:center; padding:0 12px; border:1px solid var(--border-strong); border-right:none;
  border-radius:var(--radius-sm) 0 0 var(--radius-sm); background:var(--surface-alt); color:var(--ink-soft); font-weight:600; font-size:.9rem;
}
.phone-input-group input[type=tel]{border-radius:0 var(--radius-sm) var(--radius-sm) 0;}

.gender-toggle{display:flex; gap:8px; flex-wrap:wrap;}
.gender-option{
  display:inline-flex; align-items:center; gap:6px; margin:0; padding:9px 14px; border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); font-size:.87rem; font-weight:500; color:var(--ink-soft); cursor:pointer;
  background:var(--surface); transition:all .12s ease;
}
.gender-option:hover{border-color:var(--accent);}
.gender-option input[type=radio]{display:none;}
.gender-option:has(input:checked){background:var(--accent-soft); border-color:var(--accent); color:var(--accent-dark); font-weight:700;}
.gender-icon{font-size:1rem; line-height:1;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 20px; border-radius:var(--radius-sm); border:1px solid transparent;
  background:var(--accent); color:#fff; font-weight:600; font-size:.92rem; font-family:inherit;
  cursor:pointer; text-decoration:none; box-shadow:var(--shadow-xs);
  transition:background .15s ease, box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}
.btn:hover{background:var(--accent-600); text-decoration:none; box-shadow:var(--shadow-sm);}
.btn:active{transform:translateY(1px); box-shadow:none;}
.btn.secondary{background:var(--surface); color:var(--ink); border-color:var(--border-strong); box-shadow:none;}
.btn.secondary:hover{border-color:var(--accent); color:var(--accent-dark); background:var(--accent-soft);}
.btn.danger{background:var(--danger);}
.btn.danger:hover{background:var(--danger-dark);}
.btn[disabled]{opacity:.5; cursor:not-allowed; box-shadow:none; transform:none;}
.btn-row{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap;}

/* ---------- tables ---------- */
table{width:100%; border-collapse:collapse; font-size:.91rem;}
th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--border);}
th{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:700; background:var(--surface-alt);}
tbody tr{transition:background .12s ease;}
tbody tr:hover{background:var(--surface-alt);}
tr:last-child td{border-bottom:none;}
.table-actions{display:flex; gap:8px;}
.table-actions form{display:inline;}
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); box-shadow:var(--shadow-xs);}
.table-wrap table{border:none;}
.table-wrap th:first-child,.table-wrap td:first-child{padding-left:18px;}
.table-wrap th:last-child,.table-wrap td:last-child{padding-right:18px;}

/* ---------- badges / alerts ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 11px; border-radius:var(--radius-pill); font-size:.74rem; font-weight:700; letter-spacing:.01em;}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85;}
.badge.ok{background:var(--accent-soft); color:var(--accent-dark);}
.badge.warn{background:var(--warn-soft); color:var(--warn-dark);}
.badge.off{background:var(--seat-booked); color:var(--ink-soft);}
.badge.info{background:var(--info-soft); color:var(--info-dark);}
.badge.danger{background:var(--danger-soft); color:var(--danger-dark);}

.alert{padding:13px 18px; border-radius:var(--radius-sm); margin-bottom:18px; font-size:.9rem; border:1px solid transparent;}
.alert.error{background:var(--danger-soft); color:var(--danger-dark); border-color:#EFC3B8;}
.alert.success{background:var(--accent-soft); color:var(--accent-dark); border-color:var(--accent-soft-strong);}

.muted{color:var(--ink-soft);}
.text-right{text-align:right;}
.empty{color:var(--ink-faint); font-style:italic; padding:28px 0; text-align:center;}

/* ---------- seat map ---------- */
.seatmap-layout{display:flex; align-items:flex-start; gap:28px;}
.seatmap-panel{flex:1 1 auto; min-width:0;}
.seatmap-summary{flex:0 0 300px; position:sticky; top:84px;}
.seatmap-summary .card{padding:22px;}
@media (max-width:900px){
  .seatmap-layout{flex-direction:column;}
  .seatmap-summary{width:100%; position:static;}
}

.bus-frame{
  display:inline-block; max-width:100%; background:var(--surface); border:1px solid var(--border);
  border-radius:26px 26px var(--radius-lg) var(--radius-lg); padding:0 26px 26px; box-shadow:var(--shadow-sm); overflow:hidden;
}
.bus-frame-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 -26px 20px; padding:12px 20px;
  background:var(--surface-alt); border-bottom:1px solid var(--border);
}
.bus-tag{
  display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-pill); padding:4px 12px;
}
.bus-tag.driver::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ink-faint); display:inline-block;}

.seatmap{display:inline-block;}
.seatmap .row{display:flex; gap:9px; margin-bottom:9px; align-items:center;}
.seat{
  width:46px; height:44px; border-radius:11px 11px 6px 6px; border:1px solid var(--border-strong); background:var(--seat-avail);
  display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; color:var(--ink);
  cursor:pointer; font-variant-numeric:tabular-nums; transition:all .12s ease; box-shadow:inset 0 -3px 0 rgba(20,32,27,.05), var(--shadow-xs);
  position:relative;
}
.seat::before{
  content:""; position:absolute; top:4px; left:6px; right:6px; height:3px; border-radius:2px;
  background:rgba(20,32,27,.06);
}
.seat:hover{border-color:var(--accent); transform:translateY(-1px); box-shadow:inset 0 -3px 0 rgba(20,32,27,.05), var(--shadow-sm);}
.seat.aisle-gap{background:transparent; border:none; box-shadow:none; cursor:default; width:22px;}
.seat.aisle-gap::before{display:none;}
.seat.aisle-gap:hover{transform:none;}
.seat[data-status="held"]{background:var(--seat-held); border-color:var(--warn); cursor:not-allowed; color:var(--warn-dark); transform:none; box-shadow:none;}
.seat[data-status="held"]::before{background:rgba(138,84,32,.12);}
.seat[data-status="held"]:hover{transform:none; box-shadow:none;}
.seat[data-status="booked"]{background:var(--seat-booked); border-color:var(--seat-booked); color:var(--ink-faint); cursor:not-allowed; transform:none; box-shadow:none;}
.seat[data-status="booked"]::before{display:none;}
.seat[data-status="booked"]:hover{transform:none; box-shadow:none; border-color:var(--seat-booked);}
.seat.selected{background:var(--seat-selected); border-color:var(--accent-dark); color:#fff; box-shadow:inset 0 -3px 0 rgba(0,0,0,.12), var(--shadow-sm);}
.seat.selected::before{background:rgba(255,255,255,.35);}
.seat:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.seat-label{pointer-events:none;}

.legend{display:flex; gap:18px; margin-top:18px; flex-wrap:wrap; font-size:.82rem; color:var(--ink-soft);}
.legend .swatch{display:inline-block; width:15px; height:14px; border-radius:5px 5px 2px 2px; margin-right:6px; vertical-align:-2px; border:1px solid var(--border-strong);}
.legend .swatch.avail{background:var(--seat-avail);}
.legend .swatch.selected{background:var(--seat-selected); border-color:var(--accent-dark);}
.legend .swatch.held{background:var(--seat-held); border-color:var(--warn);}
.legend .swatch.booked{background:var(--seat-booked); border-color:var(--seat-booked);}

.summary-dl{display:grid; grid-template-columns:auto 1fr; gap:7px 14px; margin:16px 0; font-size:.87rem;}
.summary-dl dt{color:var(--ink-faint); font-weight:600;}
.summary-dl dd{margin:0; font-weight:600; text-align:right;}
.summary-picked{border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:14px 0; margin:16px 0;}
.summary-picked .label{display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:700; margin-bottom:8px;}
.chip-row{display:flex; flex-wrap:wrap; gap:6px; min-height:26px;}
.chip{
  display:inline-flex; align-items:center; background:var(--accent-soft); color:var(--accent-dark); font-weight:700;
  font-size:.8rem; padding:4px 10px; border-radius:var(--radius-pill); font-variant-numeric:tabular-nums;
}

/* ---------- ticket ---------- */
.ticket{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:0;
  max-width:560px; margin:0 auto; box-shadow:var(--shadow-lg); overflow:hidden;
}
.ticket > *{padding-left:32px; padding-right:32px;}
.ticket::before{content:""; display:block; height:6px; background:linear-gradient(90deg,var(--accent),var(--accent-600)); margin-bottom:26px;}
.ticket .ref{font-family:var(--font-mono); font-size:1.35rem; font-weight:700; color:var(--accent-dark); letter-spacing:.02em;}
.ticket dl{display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:20px 0;}
.ticket dt{color:var(--ink-faint); font-size:.83rem; font-weight:600;}
.ticket dd{margin:0; font-weight:600;}
.ticket .pay-note{background:var(--warn-soft); color:var(--warn-dark); padding:13px 16px; border-radius:var(--radius-sm); font-size:.9rem; margin-top:18px;}
.ticket > .pay-note,.ticket > div > .pay-note{margin-left:0; margin-right:0;}
.ticket > *:last-child{padding-bottom:32px;}
@media print{ .topbar, .no-print{display:none !important;} main.page{padding:0;} .ticket{box-shadow:none; border:1px solid var(--border);} }

/* ---------- search card (homepage + inline "modify search") ---------- */
.search-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-md);}
.search-card .grid{grid-template-columns:1fr 1fr 1fr auto; align-items:end;}
.search-card.compact{padding:18px 20px; box-shadow:var(--shadow-xs);}
.search-card.compact label{margin:0 0 6px;}
@media (max-width:820px){ .search-card .grid{grid-template-columns:1fr;} }

/* ---------- trip result rows ---------- */
.results-summary{color:var(--ink-soft); font-size:.9rem; margin:-6px 0 18px;}
.results-summary strong{color:var(--ink);}
.trip-list{display:flex; flex-direction:column; gap:14px;}
.trip-card{
  display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 22px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-xs); transition:box-shadow .15s ease, border-color .15s ease;
}
.trip-card:hover{box-shadow:var(--shadow-sm); border-color:var(--border-strong);}
.trip-card-main{min-width:0;}
.type-badge{margin-bottom:8px;}
.type-badge.type-ac{background:var(--info-soft); color:var(--info-dark);}
.type-badge.type-non_ac{background:var(--surface-alt); color:var(--ink-soft);}
.type-badge.type-sleeper{background:var(--accent-soft); color:var(--accent-dark);}
.trip-times{font-size:1.15rem; letter-spacing:-.01em;}
.trip-times-arrow{color:var(--ink-faint); margin:0 8px;}
.trip-bus{font-size:.87rem; margin-top:4px;}
.trip-via{font-size:.82rem; margin-top:3px;}
.trip-card-side{text-align:right; flex-shrink:0;}
.trip-card-side .fare{font-weight:800; color:var(--accent-dark); font-size:1.25rem; font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.seats-left{font-size:.8rem; color:var(--ink-soft); margin:8px 0 10px;}
.seats-left.low{color:var(--warn-dark); font-weight:700;}
@media (max-width:640px){
  .trip-card{flex-direction:column; align-items:stretch; text-align:left;}
  .trip-card-side{text-align:left;}
}

/* ---------- update-log output (Admin > System) ---------- */
.log-output{
  background:#101915; color:#A9E8CE; font-family:var(--font-mono); font-size:.85rem;
  line-height:1.65; padding:18px 20px; border-radius:var(--radius-md); overflow-x:auto; white-space:pre-wrap;
  margin:0 0 18px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

/* ---------- site footer (customer layout only) ---------- */
.site-footer{margin-top:56px; border-top:1px solid var(--border); background:var(--surface-alt);}
.site-footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; padding:40px 24px 28px;}
.site-footer-brand p{margin:10px 0 0; font-size:.88rem; max-width:34ch;}
.site-footer h3{font-size:.78rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); margin:0 0 12px;}
.footer-links{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:.9rem;}
.footer-links a{color:var(--ink-soft);}
.footer-links a:hover{color:var(--accent-dark);}
.site-footer-bottom{padding:16px 24px 22px; border-top:1px solid var(--border); font-size:.82rem;}
@media (max-width:720px){ .site-footer-grid{grid-template-columns:1fr; gap:24px;} }

/* ---------- landing page (homepage) ---------- */
.hero{
  border-radius:var(--radius-lg); padding:48px 40px; margin-bottom:36px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--accent-dark),var(--accent) 60%,var(--accent-600));
  color:#fff; box-shadow:var(--shadow-lg);
}
.hero h1{color:#fff; font-size:2.1rem; max-width:20ch;}
.hero p.lead{color:rgba(255,255,255,.88); font-size:1.05rem; max-width:52ch; margin:0 0 26px;}
.hero .search-card{background:var(--surface); box-shadow:var(--shadow-lg);}
@media (max-width:720px){ .hero{padding:32px 22px;} .hero h1{font-size:1.6rem;} }

.section-heading{text-align:center; max-width:560px; margin:0 auto 30px;}
.section-heading p{margin:0;}

.steps-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:48px;}
.step-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px 20px; text-align:center; box-shadow:var(--shadow-xs);}
.step-card .step-num{
  width:34px; height:34px; border-radius:50%; background:var(--accent-soft); color:var(--accent-dark); font-weight:800;
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:.95rem;
}
.step-card h3{font-size:.95rem; margin:0 0 6px;}
.step-card p{margin:0; font-size:.85rem; color:var(--ink-soft);}
@media (max-width:820px){ .steps-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .steps-grid{grid-template-columns:1fr;} }

.routes-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:12px;}
.route-card{
  display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:18px 20px; box-shadow:var(--shadow-xs); transition:box-shadow .15s ease, border-color .15s ease, transform .12s ease;
}
.route-card:hover{box-shadow:var(--shadow-sm); border-color:var(--accent); transform:translateY(-1px); text-decoration:none;}
.route-card .route-names{font-weight:700; font-size:1rem; color:var(--ink);}
.route-card .route-meta{font-size:.82rem; color:var(--ink-soft); margin-top:5px;}
@media (max-width:820px){ .routes-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .routes-grid{grid-template-columns:1fr;} }