/* ==========================================================
   Travelers · ADIT → Vadodara Bus Pass
   Neo-brutalist theme · light + dark mode · mobile first
   ========================================================== */

/* ---------- Design tokens ---------- */
:root{
  --pink:#ff3d81; --yellow:#ffd23f; --blue:#3a86ff; --purple:#8338ec; --mint:#06d6a0; --orange:#ffb347;
  --on-color:#14110f;            /* text that sits on bright colours (always dark) */
  --text:#14110f;                /* normal page text */
  --muted:#5b544c;
  --line:#14110f;                /* borders */
  --shadow:#14110f;              /* hard shadows */
  --paper:#fff8ec;               /* page background */
  --card:#ffffff;                /* card background */
  --radius:18px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --text:#f6eedd; --muted:#b9b0a0;
  --line:#e9dfc9; --shadow:#05040a;
  --paper:#15121c; --card:#221d31;
  color-scheme:dark;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Space Grotesk',system-ui,sans-serif;background:var(--paper);color:var(--text);line-height:1.55;min-height:100vh;display:flex;flex-direction:column;transition:background .25s,color .25s}
main{width:100%;max-width:1040px;margin:0 auto;padding:28px 16px 64px;flex:1}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:4px solid var(--blue);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:8px;background:var(--yellow);color:var(--on-color);border:3px solid var(--line);padding:8px 14px;border-radius:10px;z-index:20;font-weight:700}
.skip:focus{left:8px}
.muted{color:var(--muted)}

/* ---------- Navigation ---------- */
.nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--yellow);border-bottom:4px solid var(--line);position:sticky;top:0;z-index:10}
.logo{font-weight:700;font-size:1.5rem;color:var(--on-color);text-decoration:none;display:flex;align-items:center;gap:8px}
.logo small{display:block;margin:0;font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--on-color);opacity:.75;line-height:1}
.logo .ico{display:inline-grid;place-items:center;width:40px;height:40px;background:var(--on-color);border-radius:12px;font-size:1.3rem;transform:rotate(-6deg);transition:transform .2s}
.logo:hover .ico{transform:rotate(6deg) scale(1.06)}
.nav-right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nav nav{display:flex;flex-wrap:wrap;gap:2px}
.nav nav a{color:var(--on-color);text-decoration:none;font-weight:600;padding:6px 14px;border-radius:999px}
.nav nav a:hover,.nav nav a.on{background:var(--on-color);color:var(--yellow)}
.theme-btn{font:inherit;font-size:1.1rem;cursor:pointer;width:40px;height:40px;border-radius:50%;border:3px solid var(--on-color);background:#fff;color:var(--on-color);display:grid;place-items:center;box-shadow:3px 3px 0 var(--on-color);transition:.12s}
.theme-btn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--on-color)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;border:4px solid var(--line);box-shadow:8px 8px 0 var(--shadow);border-radius:24px;padding:52px 32px 44px;margin-bottom:44px;animation:rise .6s both}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.25),transparent 40%),repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 14px,transparent 14px 28px);pointer-events:none}
.hero>*{position:relative}
.eyebrow{display:inline-block;background:var(--on-color);color:var(--yellow);font-weight:700;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;padding:5px 14px;border-radius:999px;margin-bottom:18px}
.hero h1{font-size:clamp(2.2rem,6vw,4rem);line-height:1.05;margin:0 0 16px}
.hero h1 span{background:var(--yellow);color:var(--on-color);padding:0 10px;border-radius:10px;white-space:nowrap}
.hero p{font-size:1.15rem;max-width:540px;margin:0 0 18px}
.hero .art{position:absolute;right:22px;bottom:-6px;font-size:clamp(5rem,15vw,10.5rem);line-height:1;opacity:.95;transform:rotate(-4deg);filter:drop-shadow(6px 6px 0 rgba(20,17,15,.35));animation:float 4s ease-in-out infinite}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips span{background:rgba(255,255,255,.18);border:2px solid #fff;border-radius:999px;padding:4px 14px;font-weight:600;font-size:.92rem}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font:inherit;font-weight:700;color:var(--on-color);text-decoration:none;cursor:pointer;border:3px solid var(--line);border-radius:14px;padding:10px 20px;box-shadow:4px 4px 0 var(--shadow);transition:.1s;margin:4px 6px 4px 0}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--shadow)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--shadow)}
.yellow{background:var(--yellow)}.white{background:#fff;color:var(--on-color)}.pink{background:var(--pink);color:#fff}.blue{background:var(--blue);color:#fff}.mint{background:var(--mint)}
.btn.block{display:block;width:100%;text-align:center;margin-right:0}

/* ---------- Cards & titles ---------- */
.card{background:var(--card);border:3px solid var(--line);border-radius:var(--radius);box-shadow:6px 6px 0 var(--shadow);padding:22px;margin-bottom:22px}
.title{font-size:1.8rem;margin:36px 0 6px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.title::after{content:"";flex:1;min-width:40px;height:5px;background:var(--yellow);border:2px solid var(--line);border-radius:99px}
.sub{margin:0 0 18px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid .card{margin:0}

/* ---------- Visual route line (home page) ---------- */
.route-wrap{padding:30px 18px 24px;overflow:hidden}
.route-track{position:relative}
.route-line{list-style:none;margin:0;padding:0;display:flex;counter-reset:stop}
.route-line li{position:relative;flex:1;text-align:center;padding-top:40px;min-width:0}
.route-line li::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:6px;background:repeating-linear-gradient(90deg,var(--line) 0 12px,transparent 12px 18px)}
.route-line li:first-child::before{display:none}
.route-line li::after{content:"";position:absolute;top:0;left:50%;width:32px;height:32px;margin-left:-16px;border-radius:50%;background:var(--card);border:4px solid var(--line);z-index:1;transition:transform .15s}
.route-line li:hover::after{transform:scale(1.2)}
.route-line li:nth-child(5n+1)::after{background:var(--yellow)}
.route-line li:nth-child(5n+2)::after{background:var(--blue)}
.route-line li:nth-child(5n+3)::after{background:var(--mint)}
.route-line li:nth-child(5n+4)::after{background:var(--orange)}
.route-line li:nth-child(5n)::after{background:var(--purple)}
.route-line li.start::after{background:var(--pink);width:40px;height:40px;margin-left:-20px;top:-4px}
.route-line li.end::after{background:var(--mint);width:40px;height:40px;margin-left:-20px;top:-4px;animation:pulse 1.8s infinite}
.route-line b{display:block;font-size:.95rem;line-height:1.2;padding:0 4px;word-break:break-word}
.route-line small{display:block;margin-top:4px;font-size:.78rem;color:var(--muted)}
.route-line .tag{display:inline-block;margin-top:6px;background:var(--on-color);color:var(--yellow);font-size:.7rem;font-weight:700;padding:1px 9px;border-radius:99px;letter-spacing:.04em}
.route-track .bus{position:absolute;top:-30px;left:0;font-size:1.7rem;animation:drive 10s linear infinite;pointer-events:none;z-index:2}

/* ---------- Fare cards ---------- */
.route{color:var(--on-color);position:relative;transition:transform .15s,box-shadow .15s}
.route:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--shadow)}
.route:nth-child(5n+1){background:var(--pink);color:#fff}
.route:nth-child(5n+2){background:var(--blue);color:#fff}
.route:nth-child(5n+3){background:var(--mint)}
.route:nth-child(5n+4){background:var(--yellow)}
.route:nth-child(5n){background:var(--purple);color:#fff}
.route h3{margin:0}
.route .km{display:inline-block;margin-top:4px;background:rgba(255,255,255,.3);border:2px solid currentColor;border-radius:99px;padding:0 10px;font-size:.78rem;font-weight:700}
.price{font-size:2.2rem;font-weight:700;margin:8px 0 0;line-height:1.1}
.price small{font-size:1rem;display:inline;color:inherit;margin:0}

/* ---------- How it works / features / FAQ ---------- */
.step b{display:inline-grid;place-items:center;width:42px;height:42px;background:var(--yellow);color:var(--on-color);border:3px solid var(--line);border-radius:50%;font-size:1.3rem}
.step h3,.feature h3{margin:10px 0 4px}
.step p,.feature p{margin:0;color:var(--muted)}
.feature .ico{display:inline-grid;place-items:center;width:46px;height:46px;font-size:1.5rem;background:var(--mint);border:3px solid var(--line);border-radius:14px;transform:rotate(-5deg)}
.grid .feature:nth-child(3n+2) .ico{background:var(--pink)}
.grid .feature:nth-child(3n) .ico{background:var(--blue)}
.faq{padding:0;overflow:hidden}
.faq details{border-bottom:3px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;font-weight:700;padding:16px 20px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{background:var(--yellow);color:var(--on-color)}
.faq p{margin:0;padding:14px 20px 18px;color:var(--muted)}
.cta{text-align:center;background:var(--yellow);color:var(--on-color)}
.cta h2{margin:0 0 6px}.cta p{margin:0 0 12px}

/* ---------- Forms ---------- */
.form{max-width:540px}
.form label{display:block;font-weight:600;margin-bottom:14px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.form .two{grid-template-columns:1fr}}
input,select{display:block;width:100%;font:inherit;color:var(--text);padding:11px 13px;margin-top:5px;border:3px solid var(--line);border-radius:12px;background:var(--paper);transition:.12s}
input::placeholder{color:var(--muted);opacity:.7}
input:focus,select:focus{outline:none;background:var(--card);box-shadow:0 0 0 4px var(--yellow)}
small{color:var(--muted);display:block;margin-top:8px}
.total{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:1.2rem;margin:6px 0 16px;padding:12px 16px;background:var(--yellow);color:var(--on-color);border:3px dashed var(--line);border-radius:14px}
.total b{font-size:1.5rem}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:56px}
.pw-wrap button{position:absolute;right:6px;bottom:6px;font:inherit;font-weight:700;font-size:.8rem;cursor:pointer;background:var(--yellow);color:var(--on-color);border:2px solid var(--line);border-radius:8px;padding:4px 9px}

/* ---------- Alerts & badges ---------- */
.alert{border:3px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:16px;font-weight:600;background:var(--mint);color:var(--on-color);animation:rise .4s both}
.alert.bad{background:var(--pink);color:#fff}
.badge{display:inline-block;font-weight:700;border:3px solid var(--line);border-radius:999px;padding:2px 14px;font-size:.85rem;color:var(--on-color)}
.badge.active{background:var(--mint)}.badge.expired{background:var(--yellow)}.badge.suspended{background:var(--pink);color:#fff}

/* ---------- Manage page ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:16px 0}
.kpi{background:var(--paper);border:3px solid var(--line);border-radius:14px;padding:12px 14px}
.kpi span{display:block;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.kpi b{font-size:1.35rem}
.meter{height:16px;border:3px solid var(--line);border-radius:99px;background:var(--paper);overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;background:var(--mint);border-right:3px solid var(--line)}

/* ---------- Boarding-pass ticket ---------- */
.ticket{position:relative;display:grid;grid-template-columns:1fr auto;border:4px solid var(--line);border-radius:24px;box-shadow:8px 8px 0 var(--shadow);background:linear-gradient(135deg,var(--yellow),var(--orange));color:var(--on-color);animation:rise .5s both}
.ticket .info{padding:28px}
.ticket .brand{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-weight:700}
.ticket h2{font-size:2rem;margin:12px 0 4px;line-height:1.1}
.ticket p{margin:4px 0}
.ticket .journey{display:flex;align-items:center;gap:10px;margin:16px 0;font-weight:700;font-size:1.15rem;flex-wrap:wrap}
.ticket .journey i{flex:1;min-width:40px;height:0;border-top:4px dotted var(--on-color);position:relative}
.ticket .journey i::after{content:"🚌";position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-style:normal;background:transparent;font-size:1.2rem}
.ticket .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:6px}
.ticket .facts span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.ticket .facts b{font-size:1.1rem}
.ticket.suspended,.ticket.expired{filter:grayscale(.75)}
.qr{position:relative;background:#fff;color:var(--on-color);border-left:4px dashed var(--on-color);border-radius:0 20px 20px 0;padding:24px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.qr #qr{display:flex;justify-content:center;padding:8px;border:3px solid var(--on-color);border-radius:14px;background:#fff}
.qr small{color:#555}
/* notches that make it look like a torn ticket */
.qr::before,.qr::after{content:"";position:absolute;left:-14px;width:24px;height:24px;border-radius:50%;background:var(--paper);border:4px solid var(--line);z-index:1}
.qr::before{top:-14px;clip-path:inset(50% 0 0 0)}
.qr::after{bottom:-14px;clip-path:inset(0 0 50% 0)}
@media(max-width:700px){
  .ticket{grid-template-columns:1fr}
  .qr{border-left:0;border-top:4px dashed var(--on-color);border-radius:0 0 20px 20px}
  .qr::before,.qr::after{top:-14px;bottom:auto}
  .qr::before{left:-14px;clip-path:inset(0 0 0 50%)}
  .qr::after{left:auto;right:-14px;clip-path:inset(0 50% 0 0)}
}
.actions{margin:22px 0}

/* ---------- Conductor result ---------- */
.result{border:4px solid var(--line);border-radius:24px;box-shadow:8px 8px 0 var(--shadow);padding:32px;text-align:center;font-size:1.2rem;color:var(--on-color);animation:pop .35s both}
.result .big{font-size:clamp(2.2rem,8vw,3.5rem);font-weight:700;margin-bottom:10px;line-height:1.1}
.result.active{background:var(--mint)}.result.expired{background:var(--yellow)}.result.suspended,.result.invalid{background:var(--pink);color:#fff}
#reader{max-width:420px;margin:0 auto;border:3px solid var(--line);border-radius:14px;overflow:hidden}
#msg{text-align:center}

/* ---------- Footer ---------- */
.site-footer{background:#14110f;color:#fff8ec;border-top:4px solid var(--yellow);margin-top:auto}
.site-footer .wrap{max-width:1040px;margin:0 auto;padding:26px 16px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.site-footer .made{font-size:1.1rem;font-weight:700}
.site-footer .made span{color:var(--yellow)}
.site-footer .made .heart{display:inline-block;color:var(--pink);animation:beat 1.4s infinite}
.site-footer .note{display:block;margin:4px 0 0;font-size:.82rem;font-weight:400;color:#bdb4a4}
.social{display:flex;gap:10px;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;gap:8px;color:var(--yellow);text-decoration:none;font-weight:700;border:2px solid var(--yellow);border-radius:999px;padding:6px 16px;transition:.12s}
.social a:hover{background:var(--yellow);color:#14110f;transform:translateY(-2px)}
.social svg{width:18px;height:18px;fill:currentColor}

/* ---------- Animations ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-10px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(6,214,160,.7)}70%{box-shadow:0 0 0 14px rgba(6,214,160,0)}100%{box-shadow:0 0 0 0 rgba(6,214,160,0)}}
@keyframes drive{from{left:0}to{left:calc(100% - 34px)}}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- Mobile: route line turns vertical ---------- */
@media(max-width:760px){
  .nav{padding:10px 14px}
  .nav nav{width:100%;order:3;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .nav nav a{white-space:nowrap}
  .hero{padding:36px 20px 34px}
  .hero .art{opacity:.22;right:8px}
  .route-track .bus{display:none}
  .route-line{flex-direction:column;padding-left:6px}
  .route-line li{flex:none;text-align:left;padding:0 0 22px 52px;min-height:44px}
  .route-line li::before{top:30px;left:15px;width:6px;height:100%;background:repeating-linear-gradient(180deg,var(--line) 0 10px,transparent 10px 16px)}
  .route-line li:first-child::before{display:block}
  .route-line li:last-child::before{display:none}
  .route-line li::after{left:0;margin-left:0;top:0}
  .route-line li.start::after,.route-line li.end::after{left:-4px;margin-left:0;top:-4px}
  .route-line li:last-child{padding-bottom:0}
}

/* ---------- Print: only the pass ---------- */
@media print{
  body{background:#fff;color:#000}
  .nav,.site-footer,.actions,.skip,.theme-btn,.alert{display:none!important}
  main{padding:0}
  .ticket{box-shadow:none;animation:none}
  .qr::before,.qr::after{display:none}
}