/* ============================================================
   ride-theme.css · v1 · 2026-07-27
   ธีม travel-app กลางสำหรับหน้าย่อย form/functional/admin (ทุกกลุ่ม)
   โหลด "หลัง" inline <style> ของแต่ละหน้า → override ด้วย !important
   หน้าฟอร์ม/ฟังก์ชัน = header ไล่สีกระชับ (rt-head) ไม่มี hero รูปใหญ่
   คู่กับโทเคน Together CI (magenta) · ให้ทุกหน้าย่อยดูเป็นแอปเดียวกัน
   ============================================================ */
:root{
  --accent:#E42369;--tg-acc:#E42369;--tg-acc2:#F77BA5;--tg-acc-soft:#fde8f0;
  --ink:#16121a;--ink-2:#4a4152;--ink-3:#8b8494;--rule:#eef0f3;--bg:#f5f4f7;
}
body{
  font-family:Kanit,"Noto Sans Thai","Sukhumvit Set","Prompt",system-ui,sans-serif!important;
  background:var(--bg)!important;color:var(--ink)!important;
}

/* ---------- HEADER (full-bleed gradient · ดึงออกจาก body padding: top safe+12 · sides 14) ---------- */
.rt-head{
  position:relative;
  margin:calc(-1*(env(safe-area-inset-top,0px) + 12px)) -14px 16px;
  padding:calc(env(safe-area-inset-top,0px) + 62px) 20px 20px;
  background:linear-gradient(150deg,#3a0f26 0%,var(--tg-acc) 82%,var(--tg-acc2) 130%);
  color:#fff;border-radius:0 0 24px 24px;
}
.rt-head h1{font-size:23px!important;font-weight:800!important;letter-spacing:-.01em;line-height:1.14;margin:0!important;color:#fff!important}
.rt-head .sub{color:rgba(255,255,255,.92)!important;font-size:12.5px!important;margin:7px 0 0!important;font-weight:300!important;line-height:1.55}
.rt-head .sub .bizpill,.rt-head .sub span{color:#fff}
.rt-back{
  position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);left:16px;
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;cursor:pointer
}
.rt-back svg{width:20px;height:20px}

/* ---------- MAP ---------- */
#map{border-radius:18px!important;border:1px solid var(--rule)!important;box-shadow:0 8px 22px -18px rgba(30,10,25,.4)}

/* ---------- FORM CONTROLS ---------- */
input,textarea,select{
  border-radius:12px!important;border:1px solid var(--rule)!important;padding:12px!important;
  font-family:inherit!important;background:#fff!important;color:var(--ink)!important
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--tg-acc-soft)!important}
label{font-weight:600!important;color:var(--ink-2)!important}

/* ---------- CARDS / FARE ---------- */
.card,.fare{border-radius:18px!important;border:1px solid var(--rule)!important;box-shadow:0 8px 22px -18px rgba(30,10,25,.4)!important;background:#fff!important}

/* ---------- CTA BUTTON ---------- */
.btn{
  border-radius:16px!important;font-weight:700!important;
  box-shadow:0 12px 30px -14px rgba(228,35,105,.5)!important
}
.btn[disabled]{box-shadow:none!important}

/* ---------- SIZE / OPTION SELECTORS ---------- */
.sizes button{border-radius:14px!important;border:1.5px solid var(--rule)!important}
.sizes button.on{border-color:var(--accent)!important;background:var(--tg-acc-soft)!important}

/* ---------- GENERIC LIST ROWS (stn/item cards ที่ใช้ชื่อ class ต่างกันในบางหน้า) ---------- */
.stn,.item,.row-card,.lostcard,.kyccard{border-radius:16px!important;box-shadow:0 8px 22px -18px rgba(30,10,25,.4)!important}

/* ============================================================
   .top HEADER BAR → gradient (opt-in เฉพาะหน้าที่ include subpage-theme.css)
   หน้าเดิมที่ใช้ .top แต่ไม่ include ไฟล์นี้ (event-list/venues ฯลฯ) ไม่กระทบ
   ============================================================ */
.top{
  background:linear-gradient(150deg,#3a0f26 0%,var(--tg-acc) 82%,var(--tg-acc2) 130%)!important;
  border-bottom:0!important;color:#fff!important;border-radius:0 0 20px 20px!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:0 8px 24px -14px rgba(47,19,60,.5)!important
}
.top h1,.top h1 *,.top .back,.top .r1 h1,.top .intro{color:#fff!important}
.top .back{opacity:.95}
.top .tab{color:rgba(255,255,255,.72)!important;background:transparent!important}
.top .tab.on{color:#fff!important;border-color:#fff!important;background:rgba(255,255,255,.16)!important}
.top .live{color:#fff!important}