/*! © 2569 เที่ยวนี่เหอะ (tiaewneehur.com) สงวนลิขสิทธิ์ · ห้ามคัดลอก ดัดแปลง หรือนำไปใช้โดยไม่ได้รับอนุญาต · TNH-ECAEB7B82022 */
/* ================================================================
   ผังเบาะแบบใหม่ — ตัวรถเป็นกรอบมีกระจกหน้า, เบาะทรงเก้าอี้ (มีพนักพิงด้านหลัง)
   สีนุ่มลง: ว่าง = เขียวขอบเรือง, คุณเลือก = ทอง, จองแล้ว = แดงหม่น + รูปโปรไฟล์
   ================================================================ */

/* ---------- คำอธิบายสี ---------- */
.seat-legend{gap:6px 14px!important;padding:9px 12px!important;margin:12px 0 16px!important;border-radius:14px!important}
.seat-legend .leg-item{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#cbd5e1;font-weight:600}
.seat-legend .lg{width:14px;height:14px;border-radius:4px 6px 6px 4px;display:inline-block;flex:none}
.lg-empty{background:rgba(16,185,129,.18);border:1.5px solid #34d399}
.lg-sel{background:linear-gradient(145deg,#fde047,#f59e0b)}
.lg-lock{background:rgba(245,158,11,.15);border:1.5px dashed #f59e0b}
.lg-booked{background:#5b2330;border:1.5px solid #b4434f}
.lg-off{background:#0b1118;border:1.5px solid #273444}

/* ---------- หัวคัน ---------- */
.van-block-title{border-radius:16px!important}
.van-grid-header{font-size:11.5px!important;color:#64748b!important;padding:0 6px!important;margin:8px 0 6px!important}

/* ---------- ตัวรถ ---------- */
.van-grid-seats{position:relative;gap:10px!important;padding:16px 16px 16px 22px!important;
  border-radius:34px 20px 20px 34px!important;border:1.5px solid rgba(148,163,184,.22)!important;
  background:linear-gradient(90deg,rgba(56,189,248,.07),rgba(12,21,34,.92) 18%,rgba(9,16,26,.96))!important;
  box-shadow:inset 0 0 0 5px rgba(8,14,22,.55),0 10px 24px rgba(0,0,0,.35)!important}
/* กระจกหน้า (ด้านซ้าย = ด้านหน้ารถ) */
.van-grid-seats::before{content:'';position:absolute;left:5px;top:18%;bottom:18%;width:5px;border-radius:6px;
  background:linear-gradient(180deg,rgba(125,211,252,.15),rgba(125,211,252,.55),rgba(125,211,252,.15));pointer-events:none}
.van-grid-seats::after{display:none!important}

/* ---------- เบาะ ---------- */
.van-grid-seats .seat{position:relative;aspect-ratio:1/1.02!important;transform:none!important;
  border-radius:12px 16px 16px 12px!important;gap:2px;padding:4px 8px 4px 4px;
  font-weight:700;overflow:hidden;transition:transform .15s,background .2s,box-shadow .2s,border-color .2s!important}
/* พนักพิง (อยู่ด้านหลังของเบาะ = ขวา) */
.van-grid-seats .seat:not(.spacer):not(.driver)::after{content:'';position:absolute;right:4px;top:12%;bottom:12%;width:5px;border-radius:5px;background:rgba(255,255,255,.14)}
.van-grid-seats .seat .seat-id{font-size:10px!important;font-weight:700;opacity:.75;letter-spacing:.2px;line-height:1!important;margin:0!important}
.van-grid-seats .seat .seat-big{font-size:17px!important;font-weight:800;line-height:1.05!important;margin:0!important;display:flex;flex-direction:column;align-items:center}
.van-grid-seats .seat .seat-big small{font-size:9.5px;font-weight:700;opacity:.8;margin-top:1px}
.van-grid-seats .seat .seat-nick{font-size:11.5px!important;font-weight:700;line-height:1.15!important;margin:0!important;max-width:100%;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.van-grid-seats .seat .seat-ic{font-size:16px;line-height:1}

/* ว่าง */
.van-grid-seats .seat.empty{background:rgba(16,185,129,.12)!important;border:1.5px solid rgba(52,211,153,.75)!important;color:#d1fae5!important;
  box-shadow:inset 0 0 14px rgba(52,211,153,.12)!important;cursor:pointer}
.van-grid-seats .seat.empty .seat-nick{color:#6ee7b7;font-size:10.5px!important;font-weight:600}
.van-grid-seats .seat.empty::after{background:rgba(52,211,153,.35)}
.van-grid-seats .seat.empty:active{transform:scale(.95)!important}
@media(hover:hover){.van-grid-seats .seat.empty:hover{background:rgba(16,185,129,.22)!important;box-shadow:0 0 0 3px rgba(52,211,153,.18),inset 0 0 14px rgba(52,211,153,.2)!important}}

/* คุณเลือก */
.van-grid-seats .seat.empty.selected,.van-grid-seats .seat.selected{background:linear-gradient(145deg,#fde047,#f59e0b)!important;border:1.5px solid #fde68a!important;color:#1c1300!important;
  box-shadow:0 0 0 3px rgba(250,204,21,.25),0 6px 16px rgba(245,158,11,.35)!important;animation:seatBeat 1.1s ease-in-out infinite!important}
/* เต้นตุบๆ แบบหัวใจ (ใช้ scale แยก ไม่ชนกับ transform ของเบาะ) + เรืองทองเป็นจังหวะ */
@keyframes seatBeat{0%,100%{scale:1;box-shadow:0 0 0 3px rgba(250,204,21,.25),0 6px 16px rgba(245,158,11,.35)}14%{scale:1.07;box-shadow:0 0 0 5px rgba(250,204,21,.35),0 0 22px rgba(250,204,21,.6)}28%{scale:.99}42%{scale:1.05;box-shadow:0 0 0 4px rgba(250,204,21,.3),0 0 18px rgba(250,204,21,.5)}60%{scale:1}}
@media (prefers-reduced-motion:reduce){.van-grid-seats .seat.selected{animation:none!important}}
.van-grid-seats .seat.selected .seat-nick{display:none!important}
.van-grid-seats .seat.selected .seat-big::after{content:'✓ เลือก';display:block;margin-top:3px;font-size:10.5px;font-weight:800;color:#3b2a00}
.van-grid-seats .seat.selected::after{background:rgba(120,72,0,.35)}

/* จองแล้ว */
.van-grid-seats .seat.booked{background:linear-gradient(160deg,#4a1d28,#3a1620)!important;border:1.5px solid rgba(239,68,68,.45)!important;color:#fecaca!important;box-shadow:none!important;cursor:not-allowed}
.van-grid-seats .seat.booked::after{background:rgba(239,68,68,.3)}
.van-grid-seats .seat .seat-av{position:relative;flex:none;width:26px;height:26px;margin:2px 0 1px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  font-size:12px;font-weight:800;color:#fff;background:linear-gradient(145deg,#f87171,#b91c1c);border:1.5px solid rgba(255,255,255,.35)}
.van-grid-seats .seat .seat-av i{position:absolute;inset:0;background:center/cover no-repeat}
.van-grid-seats .seat.booked .seat-nick{color:#fee2e2}

/* มีคนกำลังเลือก */
.van-grid-seats .seat.locking{background:rgba(245,158,11,.1)!important;border:1.5px dashed rgba(245,158,11,.8)!important;color:#fde68a!important;box-shadow:none!important}
.van-grid-seats .seat.locking .seat-nick{font-size:10px!important}
.van-grid-seats .seat.locking::after{background:rgba(245,158,11,.3)}

/* งดจอง / ตู้ปิด */
.van-grid-seats .seat.hidden-seat{background:repeating-linear-gradient(135deg,#0b1118 0 6px,#0e1620 6px 12px)!important;border:1.5px solid #1f2b3a!important;box-shadow:none!important}
.van-grid-seats .seat.hidden-seat::after{background:rgba(255,255,255,.05)}

/* คนขับ */
.van-grid-seats .seat.driver{background:transparent!important;border:1.5px dashed rgba(148,163,184,.25)!important;color:#64748b!important;box-shadow:none!important}
.van-grid-seats .seat .seat-wheel{width:24px;height:24px;border-radius:50%;border:3px solid #64748b;position:relative;margin-bottom:2px}
.van-grid-seats .seat .seat-wheel::before{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#64748b}
.van-grid-seats .seat .seat-wheel::after{content:'';position:absolute;left:1px;right:1px;top:50%;height:3px;margin-top:-1.5px;background:#64748b}

/* ไฮไลต์เบาะจากประวัติการจอง */
.van-grid-seats .seat.seat-highlight-pulse{box-shadow:0 0 0 3px #38bdf8,0 0 18px rgba(56,189,248,.6)!important}

@media(min-width:900px){
  .van-grid-seats{gap:8px!important;padding:12px 12px 12px 18px!important}
  .van-grid-seats .seat .seat-big{font-size:18px!important}
  .van-grid-seats .seat .seat-nick{font-size:12px!important}
  .van-grid-seats .seat.empty .seat-nick{font-size:11px!important}
  .van-grid-seats .seat .seat-av{width:28px;height:28px;font-size:12px}
}
/* หน้าคอม: เดิมล็อกความสูงเบาะไว้ 66px → ให้เป็นทรงเดียวกับมือถือ */
@media(min-width:900px){#bookingPage2 .van-grid-seats .seat{height:auto!important;aspect-ratio:1/1!important;border-radius:12px 16px 16px 12px!important}}

/* ---------- สวิตช์เปิด/ปิดตู้ (แอดมิน) ---------- */
#van2ToggleWrap,#van3ToggleWrap,#vanonsiteToggleWrap,#vanonsiteToggleWrap{gap:8px!important;padding:5px 6px 5px 12px!important;right:8px!important;border-radius:999px!important;
  background:rgba(16,185,129,.12);border:1px solid rgba(52,211,153,.45);font-size:12px!important;font-weight:800!important;color:#6ee7b7!important;
  transition:background .2s,border-color .2s,color .2s;user-select:none;-webkit-tap-highlight-color:transparent}
#van2ToggleWrap.is-off,#van3ToggleWrap.is-off,#vanonsiteToggleWrap.is-off{background:rgba(239,68,68,.12);border-color:rgba(248,113,113,.5);color:#fca5a5!important}
#van2ToggleWrap .van3-switch,#van3ToggleWrap .van3-switch,#vanonsiteToggleWrap .van3-switch{width:46px;height:26px}
#van2ToggleWrap .van3-switch-slider,#van3ToggleWrap .van3-switch-slider,#vanonsiteToggleWrap .van3-switch-slider{background:#7f1d1d;border-radius:26px;transition:background .15s ease;box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
#van2ToggleWrap .van3-switch-slider::before,#van3ToggleWrap .van3-switch-slider::before,#vanonsiteToggleWrap .van3-switch-slider::before{content:'✕';display:grid;place-items:center;width:20px;height:20px;left:3px;bottom:3px;
  font-size:11px;font-weight:900;color:#b91c1c;background:#fff;transition:transform .15s ease}
#van2ToggleWrap input:checked+.van3-switch-slider,#van3ToggleWrap input:checked+.van3-switch-slider,#vanonsiteToggleWrap input:checked+.van3-switch-slider{background:#10b981}
#van2ToggleWrap input:checked+.van3-switch-slider::before,#van3ToggleWrap input:checked+.van3-switch-slider::before,#vanonsiteToggleWrap input:checked+.van3-switch-slider::before{content:'✓';color:#059669;transform:translateX(20px)}
/* กำลังบันทึกเบื้องหลัง: จุดกะพริบเล็กๆ (สวิตช์เปลี่ยนไปแล้ว ไม่ต้องรอ) */
#van2ToggleWrap.is-saving::after,#van3ToggleWrap.is-saving::after,#vanonsiteToggleWrap.is-saving::after{content:'';position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:#facc15;animation:vanSave 1s ease-in-out infinite}
@keyframes vanSave{0%,100%{opacity:.3}50%{opacity:1}}
/* แอดมินเห็นสวิตช์ → ย้ายชื่อคันไปชิดซ้าย ไม่ให้ทับกัน */
.van-block-title:has(> label[style*="display: flex"]){text-align:left!important;justify-content:flex-start!important;padding-left:16px!important;padding-right:170px!important}

/* ---------- หัวคัน (ชื่อคัน + ตู้ + จำนวนที่ว่าง) ---------- */
.van-block-title.vt{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;text-align:left!important;
  margin:0 0 4px!important;padding:2px 4px!important;min-height:40px;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;
  font-size:16px!important;color:#e2e8f0!important}
.vt-ic{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:11px;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.3);color:#7dd3fc}
.vt-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vt-name{font-weight:800;font-size:16px;color:#f1f5f9}
.vt-tag{padding:2px 8px;border-radius:7px;background:rgba(148,163,184,.14);color:#cbd5e1;font-size:12px;font-weight:700}
.vt-count{padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:800;white-space:nowrap}
.vt-count:empty{display:none}
.vt-count.ok{background:rgba(16,185,129,.14);color:#6ee7b7}
.vt-count.low{background:rgba(250,204,21,.14);color:#fde68a}
.vt-count.full{background:rgba(239,68,68,.16);color:#fca5a5}
.vt-count.off{background:rgba(100,116,139,.2);color:#94a3b8}
/* สวิตช์แอดมินอยู่ท้ายแถวเดียวกัน (ไม่ลอยทับ) */
.van-block-title.vt>label{position:static!important;transform:none!important;margin-left:auto!important}
.van-block-title.vt:has(> label[style*="display: flex"]){padding-right:4px!important}
@media(max-width:380px){.vt-tag{display:none}}
/* หัวคันมีกล่อง (โทนเดียวกับตัวรถ) */
.van-block-title.vt{padding:8px 10px!important;min-height:52px;border-radius:16px!important;margin-bottom:6px!important;
  background:linear-gradient(90deg,rgba(56,189,248,.10),rgba(12,21,34,.9) 45%)!important;border:1px solid rgba(148,163,184,.2)!important;
  box-shadow:0 6px 16px rgba(0,0,0,.25)!important}
.van-block-title.vt:has(> label[style*="display: flex"]){padding-right:8px!important}
.vt-name,.vt-tag,.vt-count,.van-block-title.vt>label span{white-space:nowrap}
.van-block-title.vt>label{flex:none}
@media(max-width:899px){
  .van-block-title.vt:has(> label[style*="display: flex"]){gap:6px!important}
  .van-block-title.vt:has(> label[style*="display: flex"]) .vt-tag{display:none}
  .van-block-title.vt:has(> label[style*="display: flex"]) .vt-ic{width:30px;height:30px}
  .van-block-title.vt>label{padding:4px 5px 4px 10px!important;font-size:11.5px!important;gap:6px!important}
}
/* จองแล้ว: ชื่อเล่นอย่างเดียว ตัวใหญ่ขึ้น ตัดบรรทัดได้ 2 บรรทัด */
.van-grid-seats .seat.booked{gap:5px}
.van-grid-seats .seat .seat-nick.seat-nick-lg{font-size:13px!important;font-weight:800;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2!important;text-align:center;word-break:break-word}
@media(min-width:900px){.van-grid-seats .seat .seat-nick.seat-nick-lg{font-size:13.5px!important}}

/* ช่องหน้างานที่ปิดอยู่ (แอดมินเห็นเท่านั้น) */
.onsite-slot.closed{background:repeating-linear-gradient(135deg,#0f1722 0 8px,#141e2b 8px 16px)!important;color:#475569!important;box-shadow:none!important;cursor:not-allowed;border:1px solid rgba(148,163,184,.12)}
#onsiteBlock .vt-ic svg{stroke-width:1.8}