/*
 * April design system — tokens + ไอคอน + component ที่ใช้ซ้ำ (ต้นฉบับ: April_Icon_Set_preview/ และ
 * "Design brief ขอบเขตรอบแรก/" ที่ Claude Design ออกแบบหน้าร้านใหม่ — Spec.dc.html คือสเปกของไฟล์นี้)
 * ไฟล์ CSS ร่วมไฟล์เดียวของทุกหน้า — ต่างจากหลัก "หน้าเดียวจบในไฟล์" ของ TabaRandom โดยตั้งใจ
 * เพราะ token สี/ขนาดชุดนี้ต้องตรงกันทุกหน้า ก็อปแยกหลายหน้าจะเพี้ยนกันแน่ (เหตุผลเดียวกับ tiers.mjs)
 * สีโซนราคาไม่อยู่ที่นี่ — มาจาก tiers.mjs ทาง API เพราะผูกกับข้อมูลกล่อง
 */
:root{
  --april-black:#000000; --april-cream:#FFF4D8; --april-brick:#C1391A; --april-red-deep:#BC0012; --april-brown:#604824;
  --page-bg:#FAF3E0; --surface-card:#FFFFFF;
  --ink:#1F1A17; --ink-2:#5A4A3A; --ink-3:#7A6A58; --ink-soft:#CDBFAA; --ink-line:#3A322B;
  --accent:#C0392B; --accent-hover:#8E2A1F; --accent-tint:#F8E3DE;
  --line-green:#06C755;
  --ok:#2F7A78; --ok-tint:#E4EEEC;
  --warn:#9A5B2E; --warn-tint:#F3E8DC;
  --field-bg:#FFFCF4; --field-line:#E6D8B8;
  --scrim:rgba(31,26,23,.55);
  /* ปุ่มหลักเป็นดำ ink ตามคู่สีหลักดำ-ครีม — สีอิฐเก็บไว้เฉพาะจุดเด่น (เปิดขาย, SOLD, เวลาใกล้หมด) */
  --btn-primary:#1F1A17; --btn-primary-hover:#3A322B; --btn-secondary:#FFF4D8;

  --font-sans:'Anuphan',sans-serif;
  --text-page-title:700 32px/1.2 var(--font-sans);
  --text-section:700 22px/1.2 var(--font-sans);
  --text-box-number:700 22px/1 var(--font-sans);

  --radius-box:12px; --radius-card:16px; --radius-zone-card:18px; --radius-pill:999px;
  --icon-badge:12px; --icon-xs:14px; --icon-sm:16px; --icon-md:20px; --icon-lg:24px; --icon-status:34px; --icon-mascot:72px;
  --bow-on-box:26px; --badge-dot:20px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/*
 * ไอคอนเส้น: ใช้ไฟล์ SVG เป็น mask แล้วระบายด้วย currentColor — ย้อมสีตามข้อความรอบๆ ได้ (ตามกติกา design system)
 * ใช้: <i class="ic ic-lock" aria-hidden="true"></i> ขนาดตั้งผ่าน --ic
 * ชิ้นแบรนด์สีเต็ม (bow, gift, april-*) ใช้ <img src="/icons/…svg"> แทน ห้ามย้อมสี
 */
.ic{display:inline-block;flex:none;width:var(--ic,var(--icon-md));height:var(--ic,var(--icon-md));vertical-align:-.22em;
  background:currentColor;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.ic-gift{--src:url(/icons/gift-line.svg)}
.ic-lock{--src:url(/icons/lock.svg)}
.ic-lock-sm{--src:url(/icons/lock-sm.svg)}
.ic-hourglass{--src:url(/icons/hourglass.svg)}
.ic-hourglass-sm{--src:url(/icons/hourglass-sm.svg)}
.ic-sold{--src:url(/icons/sold-stamp.svg)}
.ic-sold-sm{--src:url(/icons/sold-stamp-sm.svg)}
.ic-package{--src:url(/icons/package.svg)}
.ic-truck{--src:url(/icons/truck.svg)}
.ic-refund{--src:url(/icons/refund-chat.svg)}
.ic-check{--src:url(/icons/check.svg)}
.ic-alarm{--src:url(/icons/alarm.svg)}
.ic-flame{--src:url(/icons/flame.svg)}
.ic-eyes{--src:url(/icons/eyes.svg)}
.ic-user{--src:url(/icons/user.svg)}
.ic-form{--src:url(/icons/form.svg)}
.ic-download{--src:url(/icons/download.svg)}
.ic-paperclip{--src:url(/icons/paperclip.svg)}
.ic-phone{--src:url(/icons/phone.svg)}
.ic-help{--src:url(/icons/help.svg)}
.ic-back{--src:url(/icons/arrow-back.svg)}
.ic-logout{--src:url(/icons/logout.svg)}
.ic-alert{--src:url(/icons/alert.svg)}
.ic-calendar{--src:url(/icons/calendar.svg)}
.ic-info{--src:url(/icons/info.svg)}
.ic-close{--src:url(/icons/close.svg)}
.ic-chevron-right{--src:url(/icons/chevron-right.svg)}
.ic-chevron-down{--src:url(/icons/chevron-down.svg)}
.ic-timer{--src:url(/icons/timer.svg)}
.ic-camera{--src:url(/icons/camera.svg)}
.ic-receipt{--src:url(/icons/receipt.svg)}
.ic-share{--src:url(/icons/share.svg)}
.ic-map-pin{--src:url(/icons/map-pin.svg)}
.ic-copy{--src:url(/icons/copy.svg)}
.ic-live{--src:url(/icons/live.svg)}
.ic-star{--src:url(/icons/star.svg)}
.ic-refresh{--src:url(/icons/refresh.svg)}
.ic-edit{--src:url(/icons/edit.svg)}
.ic-hot{color:var(--april-brick)}

/* ---------- ปุ่ม (Spec: สูง 52 รัศมี 12 · hover ดำ → #3A322B · กดอยู่ scale .98 · focus กรอบ 3px ink ห่าง 2px) ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 16px;border:0;border-radius:12px;
  background:var(--btn-primary);color:#FFFFFF;font:600 16px/1.3 var(--font-sans);text-decoration:none;cursor:pointer;
  transition:background-color .15s var(--ease),transform .08s var(--ease)}
.btn:hover:not(:disabled){background:var(--btn-primary-hover)}
.btn:active:not(:disabled){transform:scale(.98)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn:focus-visible,.btn-2:focus-visible,.btn-3:focus-visible,.btn-text:focus-visible,.btn-line:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.btn-2{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 16px;border:0;border-radius:12px;
  background:var(--btn-secondary);color:var(--ink);font:600 16px/1.3 var(--font-sans);text-decoration:none;cursor:pointer;transition:transform .08s var(--ease)}
.btn-2:active{transform:scale(.98)}
.btn-3{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border:0;border-radius:12px;
  background:var(--surface-card);color:var(--ink);font:600 15px/1.3 var(--font-sans);text-decoration:none;cursor:pointer}
.btn-text{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 8px;border:0;background:none;
  color:var(--ink-2);font:600 14px/1.3 var(--font-sans);text-decoration:none;cursor:pointer;--ic:16px}
.btn-block{width:100%}
/* ปุ่ม LINE: โลโก้ทางการ 30px บนพื้น #06C755 มีเส้นคั่นบางหลังโลโก้ (ห้ามวาดใหม่/ย้อมสี) */
.btn-line{display:flex;align-items:center;width:100%;min-height:52px;padding:0;border:0;border-radius:12px;overflow:hidden;
  background:var(--line-green);color:#FFFFFF;font:600 16px/1.3 var(--font-sans);text-decoration:none;cursor:pointer}
.btn-line:hover{filter:brightness(.96)}
.btn-line .logo{width:52px;height:52px;flex:none;display:flex;align-items:center;justify-content:center;border-right:1px solid rgba(0,0,0,.08)}
.btn-line .logo img{width:30px;height:30px}
.btn-line span:last-child{flex:1;text-align:center;padding-right:12px}
.btn-line.sm{min-height:48px;font-size:15px}
.btn-line.sm .logo{width:48px;height:48px}
.btn-line.sm .logo img{width:28px;height:28px}

/* ---------- ป้ายสถานะ: เขียว = เรียบร้อย · น้ำตาล = รอคนอื่น · แดง = ต้องทำ/เรื่องเงิน · ครีม = ปิดแล้ว ---------- */
.pill{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 8px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.5;--ic:14px}
.pill.ok{background:var(--ok-tint);color:var(--ok)}
.pill.wait{background:var(--warn-tint);color:var(--warn)}
.pill.act{background:var(--accent-tint);color:var(--accent)}
.pill.done{background:var(--page-bg);color:var(--ink-3)}

/* ---------- toast: ยืนยันสั้นๆ ล่างจอ 3 วินาที role="status" ---------- */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);max-width:calc(100% - 32px);
  display:flex;align-items:center;gap:8px;background:var(--ink);color:#FFFFFF;border-radius:12px;padding:10px 14px;font-size:14px;line-height:1.45;
  z-index:70;opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);--ic:16px}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.ok{background:var(--ok)}
.toast.lifted{bottom:calc(96px + env(safe-area-inset-bottom,0px))}

/* ---------- กล่องของขวัญ (BoxTile) — ทุกขนาดคำนวณจากขนาดกล่อง --s: โบว์ 28/96, ริบบิ้น 12/96, เลข 24/96, ป้ายมุม 22/96 ---------- */
.tile{--s:96px;position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:var(--s);height:var(--s);padding:0;border:0;border-radius:clamp(8px,calc(var(--s) * .1375),12px);background:var(--zc);
  font-family:var(--font-sans);cursor:default;outline-offset:3px;
  transition:background-color .35s var(--ease),opacity .3s var(--ease),transform .08s var(--ease),outline-color .3s}
.tile .rib{position:absolute;background:rgba(255,255,255,.3)}
.tile .rib.v{top:0;bottom:0;left:50%;width:max(4px,calc(var(--s) * .125));transform:translateX(-50%)}
.tile .rib.h{left:0;right:0;top:50%;height:max(4px,calc(var(--s) * .125));transform:translateY(-50%)}
.tile .bow{position:absolute;top:calc(-1 * max(7px,calc(var(--s) * .1458)));left:50%;width:max(14px,calc(var(--s) * .2917));height:max(14px,calc(var(--s) * .2917));
  transform:translateX(-50%);pointer-events:none}
.tile .num{position:relative;font-weight:700;font-size:max(13px,calc(var(--s) * .25));line-height:1;color:#FFFFFF;font-variant-numeric:tabular-nums}
.tile .stamp{position:relative;display:none;width:calc(var(--s) * .4583);height:calc(var(--s) * .4583);margin:calc(var(--s) * -.094) 0;
  background:var(--april-brick);-webkit-mask:url(/icons/sold-stamp.svg) center/contain no-repeat;mask:url(/icons/sold-stamp.svg) center/contain no-repeat}
.tile .badge{position:absolute;right:max(3px,calc(var(--s) * .0625));bottom:max(3px,calc(var(--s) * .0625));display:none;align-items:center;justify-content:center;
  width:max(14px,calc(var(--s) * .229));height:max(14px,calc(var(--s) * .229));border-radius:50%;background:var(--zc)}
.tile .badge i{width:max(9px,calc(var(--s) * .125));height:max(9px,calc(var(--s) * .125));background:#FFFFFF;
  -webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.tile .yours{position:absolute;left:50%;bottom:calc(var(--s) * .083);transform:translateX(-50%);display:none;background:var(--ink);color:var(--april-cream);
  font-size:max(10px,calc(var(--s) * .125));font-weight:600;line-height:1.5;padding:0 8px;border-radius:999px;white-space:nowrap}
.tile.can{cursor:pointer}
.tile.can:active{transform:scale(.96)}
.tile.pressed{transform:scale(.96)}
.tile:focus-visible{outline:3px solid var(--ink)}
.tile.no-bow .bow,.tile.preopen .bow,.tile.sold .bow{display:none}
.tile.reserved,.tile.pending,.tile.lost,.tile.waiting{background:var(--zr)}
.tile.reserved .badge,.tile.pending .badge,.tile.lost .badge,.tile.waiting .badge{display:flex}
.tile.sold{background:var(--zs);gap:calc(var(--s) * .02)}
.tile.sold .rib{background:rgba(255,255,255,.7)}
.tile.sold .num{font-size:max(12px,calc(var(--s) * .208));color:var(--ink-3)}
.tile.sold .stamp{display:block}
.tile.mine{outline:3px solid var(--ink)}
.tile.mine.big .yours{display:block}
.tile.lost{outline:3px solid var(--april-brick)}
.tile.dim{opacity:.32}
.tile.anim-bow .bow{animation:april-bowdrop .24s var(--ease) both;animation-delay:var(--d,0ms)}
.tile.anim-pop .badge{animation:april-pop .2s var(--ease) both}
.tile.anim-stamp .stamp{animation:april-stamp .25s var(--ease) both}
.tile.anim-wiggle .bow{animation:april-wiggle .6s var(--ease) both}

@keyframes april-bowdrop{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes april-pop{from{transform:scale(.6)}to{transform:scale(1)}}
@keyframes april-stamp{from{opacity:0;transform:rotate(-6deg) scale(1.15)}to{opacity:1;transform:none}}
@keyframes april-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes april-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes april-wiggle{0%,100%{transform:translateX(-50%) rotate(0)}30%{transform:translateX(-50%) rotate(-6deg)}70%{transform:translateX(-50%) rotate(6deg)}}

/* น้องเอพริลรอผล — โยกเบาๆ ±5° แทน spinner (design system: animation แบบนุ่มนวลเท่านั้น) */
.april-rock{animation:april-rock 2.4s ease-in-out infinite;transform-origin:50% 90%}
@keyframes april-rock{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

/* เครื่องตั้งลดการเคลื่อนไหว: ระยะเวลาทุกอันเป็น 0 เปลี่ยนสีทันที น้องเอพริลหยุดนิ่ง (พลุปิดใน JS) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0s !important;animation-iteration-count:1 !important;transition-duration:0s !important}
  .april-rock{animation:none}
}