/* ============================================================
   SIRIKATHA TRAVELS — brand design system
   Palette pulled from intercity coach livery + highway signage:
   maroon body, cream destination-board, amber distance markers,
   charcoal ink, running-green for "on the road" states.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --maroon:      #8E1F2B;
  --maroon-dark: #5E1319;
  --charcoal:    #1C1B1A;
  --cream:       #F7F1E6;
  --amber:       #E2A03F;
  --green:       #2F7D52;
  --grey:        #8A8478;
  --line:        rgba(28,27,26,0.12);
  --radius:      10px;
  --shadow:      0 6px 20px rgba(28,27,26,0.14);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Work Sans',sans-serif;
  background:var(--cream);
  color:var(--charcoal);
  min-height:100vh;
}
h1,h2,h3,.display{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin:0;
}

/* ---- destination-board header, shared across pages ---- */
.headerboard{
  background:var(--maroon);
  background-image:linear-gradient(180deg,var(--maroon) 0%, var(--maroon-dark) 100%);
  color:var(--cream);
  padding:18px 20px 16px; position:relative;
  box-shadow:var(--shadow);
  position:relative;
}
.headerboard::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:4px;
  background:repeating-linear-gradient(90deg,var(--amber) 0 18px, transparent 18px 30px);
}
.headerboard .brand{
  font-size:26px; font-weight:700; line-height:1;
}
.headerboard .subline{
  margin-top:6px; font-size:12.5px; letter-spacing:0.08em;
  color:var(--amber); font-weight:600;
}
.headerboard .subline{
  margin-top:6px; font-size:12.5px; letter-spacing:0.08em;
  color:var(--amber); font-weight:600;
}

.wrap{max-width:720px; margin:0 auto; padding:0 0 40px;}

/* ---- prominent route direction banner ---- */
.routebanner{
  margin:16px 20px 4px; padding:14px 18px;
  background:var(--charcoal); color:var(--cream);
  border-radius:var(--radius); box-shadow:var(--shadow);
  font-family:'Oswald',sans-serif; font-weight:600; font-size:22px;
  letter-spacing:0.01em; text-align:center;
}
.routebanner .arrow{ color:var(--amber); margin:0 8px; }

/* ---- status band ---- */
.statusband{
  display:flex; align-items:center; gap:12px;
  padding:14px 20px; margin:16px 20px;
  border-radius:var(--radius); background:#fff; box-shadow:var(--shadow);
  border-left:6px solid var(--grey);
}
.statusband.running{border-left-color:var(--green);}
.statusband.stopped{border-left-color:var(--grey);}
.statusband .dot{
  width:12px; height:12px; border-radius:50%; background:var(--grey); flex:none;
}
.statusband.running .dot{background:var(--green); box-shadow:0 0 0 4px rgba(47,125,82,0.18);}
.statusband .text{flex:1;}
.statusband .state{font-family:'Oswald',sans-serif; font-weight:600; font-size:15px; text-transform:uppercase;}
.statusband .meta{font-size:12px; color:var(--grey); margin-top:2px;}

/* ---- route progress strip (signature element) ---- */
.routestrip{
  margin:0 20px 16px; padding:16px 18px 20px;
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
}
.routestrip .label{font-size:11px; letter-spacing:0.1em; color:var(--grey); text-transform:uppercase; margin-bottom:10px;}
.routestrip .track{
  position:relative; height:6px; background:var(--line); border-radius:3px; margin:22px 4px 46px;
}
.routestrip .fill{
  position:absolute; left:0; top:0; height:100%; background:var(--amber); border-radius:3px;
  transition:width 1.2s ease;
}
.routestrip .stopmark{
  position:absolute; top:-1px; width:8px; height:8px; margin-left:-4px;
  border-radius:50%; background:var(--cream); border:2px solid var(--maroon);
}
.routestrip .stopmark.passed{background:var(--maroon);}
.routestrip .stoplabel{
  position:absolute; top:14px; font-size:10.5px; color:var(--charcoal); white-space:nowrap;
  transform:translateX(-50%); font-weight:500;
}
.routestrip .stoplabel::before{
  content:""; position:absolute; left:50%; top:-8px; width:1px; height:7px;
  background:var(--line);
}
.routestrip .stoplabel.row2{ top:32px; }
.routestrip .stoplabel.row2::before{ height:25px; }
.routestrip .busmark{
  position:absolute; top:-14px; width:26px; height:26px; margin-left:-13px;
  display:flex; align-items:center; justify-content:center; font-size:15px;
  background:var(--maroon); color:var(--cream); border-radius:50%; box-shadow:var(--shadow);
  transition:left 1.2s ease;
}

/* ---- map ---- */
#map{
  height:280px; margin:0 20px 16px; border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden;
}

/* ---- generic card / section ---- */
.card{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  margin:0 20px 16px; padding:18px 20px;
}
.card .label{font-size:11px; letter-spacing:0.1em; color:var(--grey); text-transform:uppercase; margin-bottom:8px;}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.03em;
  font-size:14px; padding:12px 18px; border-radius:12px; border:none; cursor:pointer;
  width:100%; transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{filter:brightness(1.04); transform:translateY(-2px);}
.btn:active{transform:translateY(1px); filter:brightness(0.98);}
.btn-primary{
  background:linear-gradient(180deg, #a8384a 0%, var(--maroon) 55%, var(--maroon-dark) 100%);
  color:#fff; box-shadow:0 4px 0 var(--maroon-dark), 0 8px 16px rgba(94,19,25,0.3);
}
.btn-primary:hover{box-shadow:0 5px 0 var(--maroon-dark), 0 10px 20px rgba(94,19,25,0.35);}
.btn-primary:active{box-shadow:0 2px 0 var(--maroon-dark), 0 4px 10px rgba(94,19,25,0.25);}
.btn-amber{
  background:linear-gradient(180deg, #f3c579 0%, var(--amber) 55%, #c9822a 100%);
  color:#3a2708; box-shadow:0 4px 0 #a8701f, 0 8px 16px rgba(168,112,31,0.3);
}
.btn-amber:hover{box-shadow:0 5px 0 #a8701f, 0 10px 20px rgba(168,112,31,0.35);}
.btn-amber:active{box-shadow:0 2px 0 #a8701f, 0 4px 10px rgba(168,112,31,0.25);}
.btn-green{
  background:linear-gradient(180deg, #6fb98a 0%, var(--green) 55%, #1f5c3a 100%);
  color:#fff; box-shadow:0 4px 0 #1f5c3a, 0 8px 16px rgba(31,92,58,0.3);
}
.btn-green:hover{box-shadow:0 5px 0 #1f5c3a, 0 10px 20px rgba(31,92,58,0.35);}
.btn-green:active{box-shadow:0 2px 0 #1f5c3a, 0 4px 10px rgba(31,92,58,0.25);}
.btn-outline{
  background:#fff; color:var(--maroon); border:1.5px solid var(--line);
  text-transform:none; font-weight:600; letter-spacing:0;
  box-shadow:0 2px 0 rgba(28,27,26,0.08), 0 3px 8px rgba(28,27,26,0.05);
}
.btn-outline:hover{background:#fdf6ee; box-shadow:0 3px 0 rgba(28,27,26,0.1), 0 5px 10px rgba(28,27,26,0.07);}
.btn-outline:active{box-shadow:0 1px 0 rgba(28,27,26,0.08);}
.btn:disabled{opacity:0.5; cursor:not-allowed; transform:none !important; filter:none !important;}

/* ---- call button ---- */
.reservecard{
  margin:0 20px 16px; padding:18px;
  background:linear-gradient(160deg, #fff 0%, var(--cream) 100%);
  border-radius:16px; box-shadow:var(--shadow);
  border:1px solid var(--line);
}
.reservecard-title{
  font-size:13px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--grey); font-weight:600; margin-bottom:12px; text-align:center;
}
.reserveoptions{ display:flex; align-items:stretch; gap:10px; }
.reserveoption{
  flex:1; display:flex; align-items:center; gap:10px;
  padding:14px 12px; border-radius:14px; text-decoration:none;
  border:1.5px solid var(--line); background:#fff; color:var(--charcoal);
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
  box-shadow:0 3px 0 rgba(28,27,26,0.1), 0 6px 12px rgba(28,27,26,0.08);
}
.reserveoption:hover{ transform:translateY(-2px); filter:brightness(1.03); }
.reserveoption:active{ transform:translateY(1px); box-shadow:0 1px 0 rgba(28,27,26,0.1); }
.reserveoption-primary{
  background:linear-gradient(180deg, #f3c579 0%, var(--amber) 65%, #c9822a 100%);
  border-color:transparent; color:#3a2708;
  box-shadow:0 4px 0 #a8701f, 0 8px 16px rgba(168,112,31,0.35);
}
.reserveoption-primary:active{ box-shadow:0 1px 0 #a8701f; }
.reserveoption-call{
  background:linear-gradient(180deg, #fff 0%, #fbe9ea 100%);
  border-color:rgba(142,31,43,0.25); color:var(--maroon-dark);
}
.reserveicon{ font-size:22px; }
.reservetext{ display:flex; flex-direction:column; text-align:left; }
.reservetext strong{ font-size:14px; }
.reservetext small{ font-size:11px; opacity:0.75; }
.reserveor{ align-self:center; font-size:12px; color:var(--grey); font-weight:600; }
.reservedivider{ border:none; border-top:1px dashed var(--line); margin:14px 0; }
.reserveoption-lookup{
  background:linear-gradient(180deg, #fff 0%, #eaf1f2 100%);
  border-color:rgba(58,110,120,0.3); color:#2c5058; width:100%;
}
.reserveoption-track{
  background:linear-gradient(180deg, #fff 0%, #f5eeda 100%);
  border-color:rgba(168,112,31,0.3); color:#7a5b1e; justify-content:center;
}
@media (max-width:420px){
  .reserveoptions{ flex-direction:column; }
  .reserveor{ padding:2px 0; }
}

/* ---- notification list ---- */
.notif{
  display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);
}
.notif:last-child{border-bottom:none;}
.notif .who{flex:1;}
.notif .who .name{font-weight:600; font-size:14.5px;}
.notif .who .phone{font-size:12.5px; color:var(--grey);}
.notif .when{font-size:11px; color:var(--grey); white-space:nowrap;}
.notif .actions{display:flex; gap:6px;}
.notif .actions button{
  border:none; border-radius:6px; padding:7px 10px; font-size:12px; cursor:pointer;
  font-family:'Work Sans',sans-serif; font-weight:600;
}
.act-call{background:var(--charcoal); color:#fff;}
.act-done{background:var(--green); color:#fff;}
.act-dismiss{background:var(--line); color:var(--charcoal);}
.empty{color:var(--grey); font-size:13.5px; text-align:center; padding:14px 0;}

/* ---- modal ---- */
.overlay{
  position:fixed; inset:0; background:rgba(28,27,26,0.55); display:none;
  align-items:flex-end; justify-content:center; z-index:2000;
}
.overlay.open{display:flex;}
.modal{
  background:#fff; width:100%; max-width:480px; border-radius:16px 16px 0 0;
  padding:22px 20px 26px; box-shadow:0 -8px 30px rgba(0,0,0,0.25);
}
.modal h3{font-size:18px; margin-bottom:14px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:12px; color:var(--grey); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.05em;}
.field input{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:8px;
  font-size:15px; font-family:'Work Sans',sans-serif;
}
.field input:focus{outline:none; border-color:var(--maroon);}
.modal-actions{display:flex; gap:10px; margin-top:6px;}
.modal-actions .btn{width:auto; flex:1;}

/* ---- login form (conductor / owner) ---- */
.loginwrap{max-width:380px; margin:60px auto; padding:0 20px;}
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--charcoal); color:#fff; padding:12px 20px; border-radius:8px;
  font-size:13.5px; z-index:2100; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.toast.show{opacity:1;}

.footer-note{text-align:center; font-size:11.5px; color:var(--grey); padding:0 20px;}

/* ---- direction segmented toggle ---- */
.segwrap{
  display:flex; gap:0; margin:0 20px 16px; background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow); padding:5px; position:relative;
}
.segbtn{
  flex:1; border:none; background:transparent; padding:11px 8px; border-radius:7px;
  font-family:'Oswald',sans-serif; font-weight:600; font-size:12.5px; text-transform:uppercase;
  letter-spacing:0.02em; color:var(--grey); cursor:pointer; transition:background .15s ease,color .15s ease;
}
.segbtn.active{background:var(--maroon); color:var(--cream);}

/* ---- wake / keep-screen-on notice ---- */
.wakenote{
  display:flex; align-items:center; gap:10px; margin:0 20px 16px; padding:12px 14px;
  background:#FBEBD0; color:#6B4A0E; border-radius:var(--radius); font-size:12.5px; line-height:1.4;
}
.wakenote .ico{font-size:18px; flex:none;}

.sharestatus{font-size:13px; color:var(--grey); margin-bottom:12px;}
.sharestatus.active{color:var(--green); font-weight:600;}

.etabox{margin:0 20px 16px; padding:2px 4px;}
.etaline{font-size:13px; color:var(--charcoal); margin-bottom:4px;}
.etaline .clock{margin-right:4px;}

/* ---- seat booking ---- */
.fareline{font-size:13px; color:var(--charcoal); margin:10px 0; font-weight:600;}
.seatgrid{display:flex; flex-direction:column; gap:6px; margin:10px 0; align-items:center; position:relative; z-index:1;}
.seatmap-wrap{position:relative; width:fit-content; margin:0 auto; padding:48px 14px 14px 14px;}
.langtoggle{display:flex; justify-content:flex-end; gap:0; margin-bottom:10px;}
.langtoggle .langbtn{
  border:1px solid var(--maroon); background:#fff; color:var(--maroon);
  font-size:12px; font-weight:600; padding:5px 12px; cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
}
.langtoggle .langbtn:hover{filter:brightness(0.97); transform:translateY(-1px);}
.langtoggle .langbtn:first-child{border-radius:16px 0 0 16px; border-right:none;}
.langtoggle .langbtn:last-child{border-radius:0 16px 16px 0;}
.langtoggle .langbtn.active{background:var(--maroon); color:#fff;}
.langtoggle-header{position:absolute; top:14px; right:16px; margin-bottom:0;}
.langtoggle-header .langbtn{
  border:1px solid rgba(247,241,230,0.5); background:rgba(0,0,0,0.15); color:var(--cream);
}
.langtoggle-header .langbtn.active{background:var(--amber); color:var(--charcoal); border-color:var(--amber);}
.wizard-progress{margin-bottom:16px;}
.wizard-dots{display:flex; gap:6px; margin-bottom:6px;}
.wdot{flex:1; height:5px; border-radius:3px; background:var(--line);}
.wdot.done{background:var(--maroon);}
.wdot.current{background:var(--amber);}
.wizard-steplabel{font-size:12px; color:var(--grey);}
.reviewrow{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:10px 0; border-bottom:1px solid var(--line); gap:10px;
}
.reviewrow strong{font-size:12px; text-transform:uppercase; letter-spacing:0.04em; color:var(--grey); display:block; margin-bottom:2px;}
.reviewedit{
  background:none; border:1px solid var(--maroon); color:var(--maroon);
  font-size:12px; font-weight:600; padding:5px 12px; border-radius:14px; cursor:pointer; white-space:nowrap;
}
.busillustration{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
.seatrow{display:flex; gap:6px; align-items:center;}
.seataisle{width:32px;}
.seat{
  width:32px; height:32px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600; cursor:pointer; border:1.5px solid var(--line); background:#fff; color:var(--charcoal);
}
.seat.taken{background:var(--line); color:var(--grey); cursor:not-allowed;}
.seat.locked{background:#f0efe9; color:#bbb; cursor:not-allowed; border-style:dashed;}
.seat.confirmedseat{background:#3f7d4a; color:#fff; border-color:#2c5934; cursor:not-allowed;}
.seat.pendingseat{background:#f3d9a0; color:#7a5b1e; border-color:var(--amber); cursor:not-allowed;}
.seat.selected{background:var(--green); color:#fff; border-color:var(--green);}
.seat.available:hover{border-color:var(--maroon);}
.seat.phantom{ visibility:hidden; }
.bookingcard{background:#fff; border-radius:10px; box-shadow:var(--shadow); padding:12px 14px; margin-bottom:10px; font-size:13px;}
.bookingcard .status{font-size:11px; padding:2px 8px; border-radius:20px; font-weight:600;}
.status-pending{background:#FBEBD0; color:#8A5A0E;}
.status-confirmed{background:#E1F0E6; color:var(--green);}
.status-cancelled{background:var(--line); color:var(--grey);}

.bookingrow{padding:10px 0; border-bottom:1px solid var(--line); font-size:13px;}
.bookingrow:last-child{border-bottom:none;}
.bookingrow .top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:4px; gap:10px;}
.bookingrow .actions{display:flex; gap:8px; margin-top:8px;}
.bookingrow .actions button{border:none; border-radius:6px; padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer;}
.act-confirm{background:var(--green); color:#fff;}
.act-cancel{background:var(--line); color:var(--charcoal);}
.bookingcaller{font-weight:800; font-size:16.5px; color:var(--charcoal); line-height:1.3;}
.bookinggroup-label{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:11.5px; text-transform:uppercase;
  letter-spacing:0.04em; color:var(--maroon); margin:16px 0 4px; padding-top:10px; border-top:1px solid var(--line);
}
.bookinggroup-label:first-child{margin-top:0; padding-top:0; border-top:none;}
.bookinggroup-confirmed{color:var(--green);}
.farerow{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px;}
.farerow:last-child{border-bottom:none;}
.farerow a{color:var(--maroon); font-weight:600; text-decoration:none; font-size:12px;}

/* ---- chat ---- */
.chatbox{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); margin:0 20px 16px; overflow:hidden;}
.chathead{padding:14px 16px; border-bottom:1px solid var(--line); font-family:'Oswald',sans-serif; font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:0.02em;}
.chatmsgs{max-height:260px; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:8px;}
.bubble{max-width:78%; padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.35;}
.bubble.them{align-self:flex-start; background:var(--line); color:var(--charcoal); border-bottom-left-radius:4px;}
.bubble.me{align-self:flex-end; background:var(--maroon); color:var(--cream); border-bottom-right-radius:4px;}
.chatinputrow{display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line);}
.chatinputrow input{
  flex:1; padding:10px 13px; border:1.5px solid var(--line); border-radius:20px; font-size:13.5px;
  font-family:'Work Sans',sans-serif;
}
.chatinputrow input:focus{outline:none; border-color:var(--maroon);}
.chatinputrow button{
  border:none; background:var(--maroon); color:var(--cream); border-radius:20px; padding:0 18px;
  font-family:'Oswald',sans-serif; font-weight:600; font-size:12.5px; text-transform:uppercase; cursor:pointer;
}
.chatempty{color:var(--grey); font-size:12.5px; text-align:center; padding:10px 0;}

/* ---- passenger location link + expandable panel (conductor) ---- */
.notif-expand{padding:12px 0 4px; border-top:1px dashed var(--line); margin-top:8px;}
.loclink{
  display:inline-block; font-size:12px; color:var(--maroon); text-decoration:none; font-weight:600;
  margin-bottom:8px;
}
.locbadge{font-size:12px; font-weight:600; color:var(--green); margin-bottom:8px;}
.locframe{width:100%; height:160px; border:none; border-radius:8px; margin-bottom:10px;}
.notifrow-wrap{padding:2px 0;}