@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700;800&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap');

:root {
  --orange:     #E8622A;
  --orange-d:   #C94F1A;
  --orange-l:   #F47A44;
  --orange-xl:  #FFF0EB;
  --orange-2:   rgba(232,98,42,0.10);
  --orange-3:   rgba(232,98,42,0.06);
  --white:      #FFFFFF;
  --bg:         #F8F5F2;
  --bg2:        #F2EDE8;
  --surface:    #FFFFFF;
  --ink:        #1C1410;
  --ink2:       #3D2B1F;
  --text:       #2D1F16;
  --text2:      #7A6255;
  --text3:      #B8A898;
  --border:     #E8DDD5;
  --border2:    rgba(232,98,42,0.25);
  --gold:       #D4902A;
  --gold-l:     rgba(212,144,42,0.12);
  --sage:       #3DAB7A;
  --sage-l:     rgba(61,171,122,0.12);
  --sky:        #2E86C1;
  --sky-l:      rgba(46,134,193,0.10);
  --rose:       #C0392B;
  --rose-l:     rgba(192,57,43,0.10);
  --shadow:     0 2px 20px rgba(28,20,16,0.08);
  --shadow-m:   0 6px 36px rgba(28,20,16,0.12);
  --shadow-o:   0 4px 24px rgba(232,98,42,0.20);
  --radius:     16px;
  --radius-sm:  10px;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body {
  font-family: 'Prompt','Noto Sans Thai',sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 430px;
  margin: 0 auto;
}

.page-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  animation: pageUp .38s cubic-bezier(.22,1,.36,1);
}
@keyframes pageUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── BOTTOM NAV ── */
.bnav {
  position: fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:430px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1.5px solid var(--border);
  display: flex; z-index:300;
  padding-bottom: env(safe-area-inset-bottom, 10px);
}
.bnav-item {
  flex:1; display:flex; flex-direction:column; align-items:center;
  padding:10px 0 5px; gap:3px; cursor:pointer;
  position:relative; transition:all .2s;
  text-decoration: none;
}
.bnav-icon { font-size:21px; transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.bnav-lbl  { font-size:10px; color:var(--text3); font-weight:600; letter-spacing:.3px; transition:color .2s; }
.bnav-item.active .bnav-icon { transform:translateY(-2px) scale(1.05); }
.bnav-item.active .bnav-lbl  { color:var(--orange); font-weight:700; }
.bnav-item.active::after {
  content:''; position:absolute; bottom:-1px; left:50%; transform:translateX(-50%);
  width:24px; height:2.5px; background:var(--orange); border-radius:2px;
}
.bnav-pip {
  position:absolute; top:8px; right:calc(50% - 16px);
  width:7px; height:7px; background:var(--orange); border-radius:50%;
  border:2px solid var(--white);
}
.spacer { height:88px; }

/* ── PILLS ── */
.pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 11px; border-radius:20px;
  font-size:11px; font-weight:700; letter-spacing:.3px;
}
.pill-orange { background:var(--orange-2); color:var(--orange); }
.pill-sage   { background:var(--sage-l);   color:var(--sage); }
.pill-sky    { background:var(--sky-l);    color:var(--sky); }
.pill-rose   { background:var(--rose-l);   color:var(--rose); }
.pill-gold   { background:var(--gold-l);   color:var(--gold); }

/* ── CARD ── */
.card {
  background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--radius); padding:18px;
  transition:all .22s;
}
.card:hover { border-color:var(--border2); box-shadow:var(--shadow); }

/* ── BUTTONS ── */
.btn {
  width:100%; padding:15px; border:none; border-radius:12px;
  font-family:'Prompt',sans-serif; font-size:15px; font-weight:700;
  cursor:pointer; transition:all .2s; letter-spacing:.2px;
}
.btn-orange {
  background: linear-gradient(135deg, var(--orange), var(--orange-l));
  color:#fff; box-shadow:var(--shadow-o);
}
.btn-orange:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(232,98,42,.30); }
.btn-orange:active { transform:translateY(0); }
.btn-ghost {
  background:transparent; color:var(--text2);
  border:1.5px solid var(--border); margin-top:10px;
}
.btn-ghost:hover { border-color:var(--border2); color:var(--orange); }
.btn-line {
  background:#06C755; color:#fff;
  box-shadow:0 4px 20px rgba(6,199,85,.25);
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.btn-line:hover { background:#05b34c; transform:translateY(-2px); }

/* ── SECTION HEADER ── */
.sec-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.sec-title { font-size:15px; font-weight:700; color:var(--text); }
.sec-link  { font-size:12px; color:var(--orange); font-weight:700; cursor:pointer; text-decoration:none; }

/* ── HERO BACK BUTTON ── */
.hero-back {
  display:flex; align-items:center; gap:6px; margin-bottom:16px;
  cursor:pointer; font-size:12px; font-weight:600;
  color:rgba(255,255,255,.75); text-decoration:none;
  width:fit-content; transition:color .2s;
}
.hero-back:hover { color:#fff; }

/* ── TOAST ── */
#toast {
  position:fixed; bottom:96px; left:50%;
  transform:translateX(-50%) translateY(8px);
  background:var(--ink); color:var(--white); border-radius:10px;
  padding:11px 20px; font-size:13px; font-weight:600;
  z-index:999; opacity:0; transition:all .3s;
  white-space:nowrap; pointer-events:none;
  box-shadow:var(--shadow-m);
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── FLOATING POINTS ── */
.float-pt {
  position:fixed; font-size:15px; font-weight:800; color:var(--orange);
  pointer-events:none; z-index:999;
  animation:fUp 1.4s ease-out forwards;
}
@keyframes fUp {
  0%   { opacity:1; transform:translateY(0); }
  100% { opacity:0; transform:translateY(-56px); }
}

/* ── CONFETTI ── */
.cfwrap { position:fixed; inset:0; pointer-events:none; z-index:998; overflow:hidden; }
.cf {
  position:absolute; border-radius:2px;
  animation:cfFall linear forwards;
}
@keyframes cfFall {
  0%   { transform:translateY(-20px) rotate(0); opacity:1; }
  100% { transform:translateY(110vh) rotate(540deg); opacity:0; }
}

/* ── OVERLAY ── */
.overlay {
  position:fixed; inset:0; background:rgba(28,20,16,.65);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center;
  z-index:900; padding:24px;
}
.overlay.show { display:flex; animation:pageUp .35s ease; }
.ov-card {
  background:var(--white); border:1.5px solid var(--border);
  border-radius:22px; padding:34px 26px;
  width:100%; max-width:360px; text-align:center;
  box-shadow:var(--shadow-m);
  animation:pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop { from{transform:scale(.82);opacity:0} to{transform:scale(1);opacity:1} }

/* ── SCROLL X ── */
.scroll-x { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.scroll-x::-webkit-scrollbar { display:none; }

/* ── STAGGER ── */
.stagger > * { animation:pageUp .4s cubic-bezier(.22,1,.36,1) both; }
.stagger > *:nth-child(1) { animation-delay:.04s; }
.stagger > *:nth-child(2) { animation-delay:.10s; }
.stagger > *:nth-child(3) { animation-delay:.16s; }
.stagger > *:nth-child(4) { animation-delay:.22s; }
.stagger > *:nth-child(5) { animation-delay:.28s; }
.stagger > *:nth-child(6) { animation-delay:.34s; }