/* ============================================================
   EV PLAZA CARS CAMPING 3 — Design system กลาง
   ถอดจาก design handoff: forest #526B35 · terracotta #C96A32 ·
   gold #E5A93D · cream #F1E5C8 · ink #26261C · ไม่ใช้ shadow
   ============================================================ */
:root{
  --forest:#526B35; --terra:#C96A32; --gold:#E5A93D; --cream:#F1E5C8;
  --off:#FBF8F0; --tint:#F5F7F0; --warn:#FBEDE3; --ink:#26261C;
  --ink72:rgba(38,38,28,.72); --ink62:rgba(38,38,28,.62); --ink55:rgba(38,38,28,.55);
  --ink45:rgba(38,38,28,.45); --ink30:rgba(38,38,28,.3);
  --brown:#5c4b22; --deepbrown:#3d3418; --olive:#4a5a34;
  --bd:rgba(0,0,0,.09); --bd2:rgba(0,0,0,.06);
  --f-ui:'Anuphan','Leelawadee UI','Segoe UI','Thonburi',sans-serif;
  --f-body:'Sarabun','Leelawadee UI','Segoe UI','Thonburi',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:#EADDBC;color:var(--ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased}
button{font-family:var(--f-ui);cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}
a{color:inherit}
input,select{font-family:var(--f-body)}
img{max-width:100%}
.num{font-variant-numeric:tabular-nums}
button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---------- mobile shell ---------- */
.shell{max-width:430px;margin:0 auto;min-height:100svh;display:flex;flex-direction:column;background:var(--cream)}
@media (min-width:431px){.shell{border-left:1px solid var(--bd);border-right:1px solid var(--bd)}}

/* ---------- appbar + steps ---------- */
.appbar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--bd);padding:12px 16px 10px}
.appbar .logo{font:700 10.5px var(--f-ui);letter-spacing:2px;color:var(--forest);display:flex;justify-content:space-between;align-items:center;gap:8px}
.appbar .logo a{text-decoration:none}
.appbar .logo .r{font:600 9.5px var(--f-ui);letter-spacing:.5px;color:var(--ink45);white-space:nowrap}
.steps{display:flex;gap:7px;margin-top:10px}
.stp{flex:1;text-align:left}
.stp .bar{height:5px;border-radius:3px;background:rgba(0,0,0,.1)}
.stp .lb{display:flex;align-items:center;gap:4px;font:600 10px var(--f-ui);color:var(--ink45);margin-top:6px}
.stp .lb svg{width:11px;height:11px;display:none}
.stp.act .bar{background:var(--forest)}
.stp.act .lb{color:var(--ink)}
.stp.done .bar{background:var(--forest);opacity:.45}
.stp.done .lb{color:var(--forest)}
.stp.done .lb svg{display:block}
.stp.jump{cursor:pointer}

/* ---------- layout ---------- */
.screen{display:none;flex-direction:column;flex:1 1 auto}
.screen.on{display:flex}
.pad{padding:16px;display:flex;flex-direction:column;gap:13px}
.h-page{font:700 24px var(--f-ui)}
.h-sub{font:400 11.5px/1.65 var(--f-body);color:var(--ink55);margin-top:3px}
.h-sec{font:600 13.5px var(--f-ui);display:flex;align-items:center;gap:6px}
.h-sec svg{width:15px;height:15px;color:var(--forest);flex:0 0 auto}
.h-sec .note{font:400 10.5px var(--f-body);color:var(--ink45);margin-left:auto}
.card{background:#fff;border:1px solid var(--bd);border-radius:14px;padding:13px}
.note-line{font:400 10.5px/1.6 var(--f-body);color:var(--ink45);text-align:center}

/* ---------- แถบรอบขาย ---------- */
.eb{border:1px solid rgba(201,106,50,.35);border-radius:12px;overflow:hidden;background:#fff}
.eb-top{background:var(--terra);color:#fff;padding:9px 12px;display:flex;align-items:center;gap:8px}
.eb-top svg{width:15px;height:15px;flex:0 0 auto}
.eb-top .t1{font:700 12px var(--f-ui);letter-spacing:.5px}
.eb-top .t2{font:400 10px var(--f-body);opacity:.85}
.eb-top .cd{margin-left:auto;text-align:right}
.eb-top .cd .d{font:700 15px var(--f-ui)}
.eb-top .cd .h{font:400 9.5px var(--f-body);opacity:.85}
.eb-bot{padding:8px 12px;font:400 10.5px var(--f-body);color:var(--ink55);background:var(--off)}

/* ---------- การ์ดบัตร ---------- */
.tk{background:#fff;border:1px solid var(--bd);border-radius:14px;padding:13px;transition:border-color .18s ease,background .18s ease}
.tk.sel{border:1.5px solid var(--forest);background:var(--tint)}
.tk-row{display:flex;gap:11px}
.tk-ic{width:38px;height:38px;border-radius:11px;background:var(--tint);color:var(--forest);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.tk-ic svg{width:20px;height:20px}
.tk-name{font:700 14.5px var(--f-ui);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tk-name .hot{font:700 8.5px var(--f-ui);letter-spacing:.5px;background:var(--terra);color:#fff;border-radius:5px;padding:2px 6px}
.tk-desc{font:400 11.5px/1.6 var(--f-body);color:var(--ink55);margin-top:3px}
.tk-price{margin-left:auto;text-align:right;flex:0 0 auto}
.tk-price .ebg{font:700 8.5px var(--f-ui);letter-spacing:.5px;background:var(--cream);color:#8a5a22;border-radius:5px;padding:2px 6px;display:inline-block}
.tk-price .p{font:700 18px var(--f-ui);color:var(--terra);margin-top:3px}
.tk-price .old{font:400 11px var(--f-body);color:var(--ink45);text-decoration:line-through}
.tk-foot{display:flex;align-items:center;margin-top:11px;padding-top:10px;border-top:1px solid var(--bd2)}
.tk-left{font:400 10.5px var(--f-body);color:var(--ink45)}
.tk-left.low{color:var(--terra);font-weight:600}
.tk.vip{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.tk.vip.sel{border:1.5px solid var(--gold)}
.tk.vip .tk-ic{background:rgba(229,169,61,.18);color:var(--gold)}
.tk.vip .tk-desc{color:rgba(241,229,200,.65)}
.tk.vip .tk-price .ebg{background:rgba(229,169,61,.22);color:var(--gold)}
.tk.vip .tk-price .p{color:var(--gold)}
.tk.vip .tk-price .old{color:rgba(241,229,200,.45)}
.tk.vip .tk-foot{border-top-color:rgba(241,229,200,.14)}
.tk.vip .tk-left{color:rgba(241,229,200,.5)}
.tk.vip .stepper .mi{background:transparent;border-color:rgba(241,229,200,.3);color:var(--cream)}
.tk.vip .stepper .pl{background:var(--gold);color:var(--ink)}
.selrow.rv.vip-disabled,.tk.vip.vip-disabled{filter:grayscale(1);opacity:1;background:#444;border-color:#666;color:#bdbdbd;cursor:not-allowed}
.vip-disabled button{pointer-events:none;cursor:not-allowed}
.vip-disabled .stepper[hidden]{display:none!important}
.vip-disabled .vip-sold-action{flex:0 0 98px;width:98px;min-height:44px;border:1px solid #bcbcb2;border-radius:7px;background:#d6d6cc;color:#35362e;font:700 9px/1.4 var(--f-ui);letter-spacing:.4px;cursor:pointer;pointer-events:auto}
.tk-foot .vip-sold-action{margin-left:auto}
.vip-sold-dialog{width:min(360px,calc(100% - 32px));padding:26px;border:1px solid var(--bd);border-radius:14px;background:var(--cream);color:var(--ink);font-family:var(--f-ui);margin:auto}
.vip-sold-dialog::backdrop{background:#0008}
.vip-sold-dialog h2{font-size:21px;margin:0 0 12px}
.vip-sold-dialog p{font-size:13px;line-height:1.8;color:var(--ink72)}
.vip-sold-dialog button{margin-top:20px;padding:12px;border-radius:10px;background:var(--forest);color:white;width:100%;font:600 13px var(--f-ui)}
.tk.vip [data-left="vip"]{display:none}

/* ---------- สเต็ปเปอร์ ---------- */
.stepper{display:flex;align-items:center;gap:11px;margin-left:auto}
.stepper button{width:30px;height:30px;border-radius:7px;font:700 16px var(--f-ui);display:flex;align-items:center;justify-content:center;transition:opacity .18s ease}
.stepper .mi{border:1px solid var(--bd);background:#fff;color:var(--ink)}
.stepper .pl{background:var(--forest);color:#fff}
.stepper button:disabled{opacity:.35;cursor:default}
.stepper .q{font:700 15px var(--f-ui);min-width:16px;text-align:center}

/* ---------- แถบข้อมูล ---------- */
.strip{background:var(--tint);border-radius:12px;padding:11px 13px;display:flex;gap:10px;align-items:flex-start}
.strip svg{width:17px;height:17px;color:var(--forest);flex:0 0 auto;margin-top:1px}
.strip .t{font:600 12px var(--f-ui);color:var(--olive)}
.strip .d{font:400 10.5px/1.6 var(--f-body);color:var(--ink55);margin-top:2px}
.strip.warn{background:var(--warn)}
.strip.warn svg,.strip.warn .t{color:var(--terra)}

/* ---------- ตัวเลือก (radio/checkbox row) ---------- */
.opt-row{display:flex;align-items:center;gap:9px;border:1px solid var(--bd);border-radius:10px;padding:10px 11px;cursor:pointer;transition:border-color .18s ease,background .18s ease;background:#fff}
.opt-row.on{border-color:var(--forest);background:var(--tint)}
.opt-row .ck{width:17px;height:17px;border-radius:50%;border:1.5px solid rgba(0,0,0,.2);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff}
.opt-row .ck svg{width:10px;height:10px;display:none}
.opt-row.on .ck{background:var(--forest);border-color:var(--forest)}
.opt-row.on .ck svg{display:block}
.opt-row .nm{font:600 12px var(--f-ui)}
.opt-row .d{font:400 10px var(--f-body);color:var(--ink45)}
.opt-row .pr{margin-left:auto;font:700 12.5px var(--f-ui);color:var(--terra);flex:0 0 auto}
.opt-row .rec{font:700 8.5px var(--f-ui);letter-spacing:.5px;background:var(--tint);color:var(--olive);border-radius:5px;padding:2px 6px;margin-left:6px}

details.addons{background:#fff;border:1px solid var(--bd);border-radius:14px}
details.addons summary{list-style:none;display:flex;align-items:center;gap:8px;padding:12px 13px;font:600 13px var(--f-ui);cursor:pointer}
details.addons summary::-webkit-details-marker{display:none}
details.addons summary .opt{font:400 10.5px var(--f-body);color:var(--ink45)}
details.addons summary .sico{width:15px;height:15px;color:var(--forest)}
details.addons summary .chev{margin-left:auto;width:14px;height:14px;color:var(--ink30);transition:transform .18s ease}
details.addons[open] summary .chev{transform:rotate(90deg)}
.ad-body{padding:0 13px 13px;display:flex;flex-direction:column;gap:8px}

/* ---------- CTA bar (มือถือ: ตรึงล่างจอเสมอ) ---------- */
.ctabar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:430px;z-index:20;background:#fff;border-top:1px solid var(--bd);padding:11px 16px;display:flex;align-items:center;gap:12px}
.bookpage .pad{padding-bottom:104px}
.ctabar .sum .a{font:400 10.5px var(--f-body);color:var(--ink45)}
.ctabar .sum .b{font:700 16px var(--f-ui)}
.ctabar .sum.right{margin-left:auto;text-align:right}
.cta{margin-left:auto;background:var(--terra);color:#fff;font:700 13.5px var(--f-ui);border-radius:11px;padding:13px 22px;display:flex;align-items:center;gap:7px;transition:opacity .18s ease;text-decoration:none}
.cta svg{width:14px;height:14px}
.cta:disabled{opacity:.4;cursor:default}
.cta.green{background:var(--forest)}
.back{font:600 11.5px var(--f-ui);color:var(--ink55);display:flex;align-items:center;gap:4px}
.back svg{width:12px;height:12px;transform:rotate(180deg)}

/* ---------- ฟอร์ม ---------- */
.field label{font:600 12px var(--f-ui);display:block}
.field input{width:100%;margin-top:6px;border:1px solid rgba(0,0,0,.14);border-radius:9px;padding:12px;font:400 13.5px var(--f-body);color:var(--ink);background:#fff;transition:border-color .18s ease}
.field input:focus{border-color:var(--forest);outline:none}
.field .why{font:400 10.5px var(--f-body);color:var(--ink45);margin-top:5px}
.privacy{background:var(--tint);border-radius:12px;padding:12px 13px;display:flex;gap:10px}
.privacy svg{width:19px;height:19px;color:var(--forest);flex:0 0 auto;margin-top:1px}
.privacy .t{font:600 12.5px var(--f-ui);color:var(--olive)}
.privacy .d{font:400 10.5px/1.65 var(--f-body);color:var(--ink55);margin-top:3px}
.consent{display:flex;gap:9px;align-items:flex-start;cursor:pointer}
.consent .bx{width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(0,0,0,.25);flex:0 0 auto;margin-top:1px;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .18s ease,border-color .18s ease}
.consent .bx svg{width:11px;height:11px;display:none}
.consent.on .bx{background:var(--forest);border-color:var(--forest)}
.consent.on .bx svg{display:block}
.consent .tx{font:400 11px/1.6 var(--f-body);color:var(--ink72)}

/* ---------- ชำระเงิน ---------- */
.hold{background:var(--warn);border-radius:11px;padding:10px 13px;display:flex;align-items:center;gap:8px;color:var(--terra)}
.hold svg{width:15px;height:15px;flex:0 0 auto}
.hold .t{font:600 11.5px var(--f-ui)}
.hold .tm{margin-left:auto;font:700 15px var(--f-ui)}
.rv .grp{padding:10px 0;border-top:1px solid var(--bd2);display:flex;align-items:flex-start;gap:10px}
.rv .grp:first-child{border-top:none;padding-top:0}
.rv .grp:last-child{padding-bottom:0}
.rv .grp svg{width:15px;height:15px;color:var(--forest);flex:0 0 auto;margin-top:2px}
.rv .k{font:600 12px var(--f-ui)}
.rv .v{font:400 11px/1.65 var(--f-body);color:var(--ink55);margin-top:2px}
.rv .edit{margin-left:auto;font:600 11px var(--f-ui);color:var(--forest);padding:3px 9px;border:1px solid rgba(82,107,53,.4);border-radius:20px;flex:0 0 auto}
.bill .ln{display:flex;justify-content:space-between;font:400 11.5px var(--f-body);color:var(--ink72);padding:3px 0;gap:12px}
.bill .ln.save{color:var(--forest);font-weight:600}
.bill .tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--bd);margin-top:8px;padding-top:9px}
.bill .tot .k{font:600 13px var(--f-ui)}
.bill .tot .v{font:700 19px var(--f-ui);color:var(--terra)}
.qrbox{background:#fff;border:1px solid var(--bd);border-radius:14px;padding:15px;text-align:center}
.qrbox .q{width:190px;height:190px;margin:8px auto 0;border:1px solid var(--bd2);border-radius:8px;padding:8px;background:#fff}
.qrbox .q img{width:100%;height:100%;display:block}
.qrbox .amt{font:700 20px var(--f-ui);margin-top:9px}
.qrbox .to{font:400 10.5px var(--f-body);color:var(--ink45);margin-top:2px}
.slip{border:1.5px dashed rgba(0,0,0,.2);border-radius:12px;padding:15px;text-align:center;display:block;cursor:pointer;background:#fff;transition:border-color .18s ease,background .18s ease;position:relative}
.slip input{position:absolute;width:1px;height:1px;opacity:0}
.slip svg{width:34px;height:34px;color:var(--ink45);margin:0 auto;display:block}
.slip .st{font:600 12.5px var(--f-ui);margin-top:7px}
.slip .d{font:400 10.5px/1.6 var(--f-body);color:var(--ink45);margin-top:3px}
.slip.ok{border:1.5px solid var(--forest);background:var(--tint)}
.slip.ok svg,.slip.ok .st{color:var(--forest)}
.slip.err{border-color:var(--terra)}
.slip.err .st{color:var(--terra)}
.req{font:700 8.5px var(--f-ui);letter-spacing:.5px;background:var(--warn);color:var(--terra);border-radius:5px;padding:2px 6px;vertical-align:2px;margin-left:5px}

/* ---------- สำเร็จ / บัตร ---------- */
.okbar{background:var(--forest);color:var(--cream);border-radius:14px;padding:14px;display:flex;gap:11px;align-items:center}
.okbar .ic{width:36px;height:36px;border-radius:50%;background:rgba(241,229,200,.18);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.okbar .ic svg{width:18px;height:18px}
.okbar .t{font:700 15px var(--f-ui)}
.okbar .d{font:400 10.5px var(--f-body);opacity:.8;margin-top:2px}
.okbar.warn{background:var(--terra);color:#fff}
.okbar.dark{background:var(--ink)}
.eticket{background:#fff;border:1px solid var(--bd);border-radius:14px;overflow:hidden}
.eticket .top{padding:14px;display:flex;gap:11px;align-items:center}
.eticket .who{font:700 15px var(--f-ui)}
.eticket .what{font:400 11px/1.6 var(--f-body);color:var(--ink55);margin-top:2px}
.tear{position:relative;border-top:2px dashed rgba(0,0,0,.14);margin:0 6px}
.tear::before,.tear::after{content:'';position:absolute;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--cream)}
.tear::before{left:-13px}.tear::after{right:-13px}
.eticket .bot{padding:14px;display:flex;align-items:center;gap:12px}
.eticket .q{width:104px;height:104px;flex:0 0 auto;border:1px solid var(--bd2);border-radius:8px;padding:5px;background:#fff}
.eticket .q img{width:100%;height:100%;display:block}
.eticket .meta{font:400 10.5px/1.7 var(--f-body);color:var(--ink55)}
.eticket .meta b{font:600 11.5px var(--f-ui);color:var(--ink)}
.btnrow{display:flex;gap:8px}
.btn2{flex:1;border:1px solid var(--bd);border-radius:11px;background:#fff;padding:11px;font:600 12px var(--f-ui);text-align:center;text-decoration:none;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:6px}
.btn2 svg{width:14px;height:14px;color:var(--forest)}
.btn2.solid{background:var(--forest);border-color:var(--forest);color:#fff}
.btn2.solid svg{color:#fff}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(8px);background:var(--ink);color:var(--cream);font:600 12px var(--f-ui);padding:11px 18px;border-radius:11px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:99;max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- skeleton ---------- */
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:.9}}
.skel{animation:pulse 1.2s ease infinite;background:rgba(0,0,0,.08);border-radius:8px;color:transparent!important}

.pagefoot{padding:18px 16px 26px;text-align:center;font:400 10.5px/1.8 var(--f-body);color:var(--ink45)}
.pagefoot a{color:var(--brown)}

/* ============================================================
   Desktop (≥980px) — โครง 2 คอลัมน์ + สรุปคำสั่งซื้อ sticky
   ============================================================ */
.dsum{display:none}
@media (min-width:980px){
  body{background:var(--cream)}
  .shell{max-width:1120px;background:transparent;border:none!important;padding:0 28px}

  /* appbar: โลโก้ซ้าย สเต็ปขวา */
  .appbar{display:flex;align-items:center;gap:34px;margin:0 -28px;padding:15px 36px}
  .appbar .logo{flex:0 0 auto;font-size:12px;letter-spacing:2.5px}
  .appbar .logo .r{display:block;margin-top:2px;letter-spacing:.5px}
  .appbar .steps{margin:0 0 0 auto;flex:0 1 470px}
  .stp .lb{font-size:10.5px}

  /* จอจอง: เนื้อหาซ้าย + การ์ดสรุป sticky ขวา (เฉพาะหน้า /book) */
  .bookpage .screen.on{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:26px;align-items:start;padding:28px 0 46px}
  .bookpage .screen#scClosed.on{display:flex;padding:40px 0}
  .bookpage .pad{padding:0;gap:14px}
  .h-page{font-size:29px}
  .bookpage .ctabar{position:sticky;top:96px;bottom:auto;left:auto;transform:none;width:auto;max-width:none;margin-top:0;border:1px solid var(--bd);border-radius:16px;padding:20px;flex-direction:column;align-items:stretch;gap:14px}
  .bookpage .ctabar::before{content:'สรุปคำสั่งซื้อ';font:600 13.5px var(--f-ui);order:0}
  .dsum{display:flex;flex-direction:column;gap:6px;order:1}
  .dsum .ln{display:flex;justify-content:space-between;gap:12px;font:400 12px var(--f-body);color:var(--ink72)}
  .dsum .ln.mut{color:var(--ink45);font-size:11px}
  .dsum .ln.tot{font:700 14px var(--f-ui);color:var(--terra);border-top:1px solid var(--bd);padding-top:9px;margin-top:5px}
  .dsum:empty{display:none}
  .bookpage .ctabar .sum{order:2;display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--bd);padding-top:12px}
  .bookpage .ctabar .sum.right{margin-left:0;text-align:left}
  .bookpage .ctabar .sum .a{font:600 12px var(--f-ui);color:var(--ink)}
  .bookpage .ctabar .sum .b{font-size:21px;color:var(--terra)}
  .bookpage .ctabar .cta{order:3;margin-left:0;width:100%;justify-content:center;padding:15px 22px;font-size:14.5px}
  .bookpage .ctabar .back{order:4;justify-content:center;padding:4px}

  /* จอชำระเงิน: QR ซ้าย · รายการขวา */
  .paycols{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .pc-a,.pc-b{display:flex;flex-direction:column;gap:13px;min-width:0}

  .qrbox .q{width:220px;height:220px}
}
@media (max-width:979.9px){
  .paycols,.pc-a,.pc-b{display:contents}
}