/* ============================================================
   JASDORBYSPLASH — Design System v4 "Forest Coffee" (modern)
   Redesign modern ala referensi: bg cream kehijauan, kartu putih
   gading rounded + soft shadow, header/hero gradient hijau pekat
   + glow amber, tombol caramel, bottom nav blur + garis caramel.
   Semua class lama tetap didukung (struktur HTML/JS tidak berubah).
   Shell: #app flex-column, .view.on{flex:1} (botnav selalu di dasar),
   catbar sticky, desktop full-bleed 900px/1280px.
   ============================================================ */

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

:root{
  /* ---- Palette Forest Green + Caramel ---- */
  --espresso:#0C241B;          /* hijau pekat (gradient gelap) */
  --espresso-2:#0E3B2D;
  --coffee:#1E6B4F;            /* hijau aksen utama */
  --mocha:#16573F;
  --gold:#C9972E;              /* caramel — garis aktif, aksen */
  --gold-lt:#E3B341;           /* amber — highlight */
  --gold-dk:#A87B1F;
  --cream:#F2F7F1;             /* background halaman */
  --cream-2:#EDF4EF;           /* chip / hover lembut */
  --paper:#FFFEFA;             /* kartu putih gading */
  --ink:#1A2621;               /* teks utama */
  --ink-2:#7E8C82;             /* teks sekunder */
  --sage:#12996B;              /* success / open */
  --sage-dk:#0F6B47;
  --terra:#D0344A;             /* danger / closed */
  --terra-dk:#C0263E;
  --berry:#D0344A;
  --berry-dk:#C0263E;
  --line:#DDE7DC;              /* border halus */

  /* ---- Modern tokens ---- */
  --bw:1px;
  --bw-2:1.5px;
  --r:14px;
  --r-2:18px;
  --r-3:26px;
  --shadow-sm:0 1px 3px rgba(18,58,44,.07), 0 1px 2px rgba(18,58,44,.05);
  --shadow:0 6px 18px rgba(18,58,44,.10);
  --shadow-lg:0 18px 44px rgba(12,36,27,.22);
  --grad-coffee:linear-gradient(140deg,#0E3B2D 0%,#16573F 48%,#2E7A57 100%);
  --grad-caramel:linear-gradient(135deg,#E3B34C,#A87B1F);

  /* ---- Type ---- */
  --f-display:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --f-head:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --f-body:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  background:var(--cream);
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.5;
}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;color:inherit}
input,textarea,select{font-family:inherit;color:inherit}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold-lt);color:var(--espresso)}

/* ============ VIEW ROUTER + ANIMASI ============ */
.view{display:none}
.view.on{display:block;animation:fadeUp .34s ease}
/* botnav selalu di dasar layar walau konten pendek */
#app > .view.on{flex:1 1 auto}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ APP SHELL ============ */
#app{
  position:relative;z-index:1;
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  display:flex;flex-direction:column;
  background:var(--cream);
}
@media(min-width:560px){
  #app{box-shadow:0 0 0 1px rgba(18,58,44,.08), 0 24px 60px rgba(18,58,44,.14)}
}

/* ============ HERO ============ */
.hero{
  margin:14px 14px 0;
  padding:28px 18px 24px;
  background:
    radial-gradient(130% 150% at 88% -22%, rgba(227,179,76,.35), transparent 52%),
    radial-gradient(90% 110% at -8% 112%, rgba(227,179,76,.18), transparent 55%),
    var(--grad-coffee);
  color:#fff;text-align:center;
  border-radius:26px;
  box-shadow:0 18px 40px rgba(14,59,44,.32);
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:-46px;right:-46px;width:150px;height:150px;
  border-radius:50%;border:24px solid rgba(255,255,255,.07);pointer-events:none;
}
.hero::after{
  content:'';position:absolute;bottom:-64px;left:-34px;width:130px;height:130px;
  border-radius:50%;background:rgba(230,162,60,.15);pointer-events:none;
}
.hero > *{position:relative;z-index:1}
.hero h2{
  font-family:var(--f-display);
  font-size:1.9rem;line-height:1.16;font-weight:800;letter-spacing:.2px;
  text-shadow:0 2px 8px rgba(0,0,0,.22);
}
.hero h2 .hl{color:var(--gold-lt)}
.hero p{
  margin:12px auto 0;max-width:38ch;
  font-size:.76rem;font-weight:500;color:rgba(255,255,255,.92);
  line-height:1.65;
}
.hero-tags{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.hero-tags span{
  font-size:.58rem;font-weight:700;letter-spacing:.2px;
  padding:4px 11px;border-radius:99px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(4px);
}
.hero-cta{
  margin-top:18px;
  font-family:var(--f-body);font-weight:800;
  font-size:.8rem;letter-spacing:.06em;
  padding:13px 36px;
  border:none;border-radius:99px;
  background:var(--grad-caramel);
  color:#fff;
  box-shadow:0 10px 22px rgba(168,123,31,.35);
  transition:transform .16s ease, box-shadow .2s ease, filter .2s ease;
}
.hero-cta:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 12px 26px rgba(168,123,31,.42)}
.hero-cta:active{transform:scale(.97)}

/* ============ QUICK GRID ============ */
.quick-grid{padding:16px 14px 14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick-grid > .qcard:nth-child(3){display:none}
.info-shortcuts{padding:0 14px 14px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.info-shortcuts .qcard{padding:13px 11px 12px}
.info-shortcuts .qcard .qic{width:40px;height:40px;font-size:1.15rem}
.info-shortcuts .qcard h4{font-size:.7rem;margin-top:8px}
.info-shortcuts .qcard p{font-size:.58rem}
.qcard{
  background:var(--paper);
  border:1px solid rgba(221,231,220,.6);
  border-radius:var(--r-2);
  padding:16px 14px 14px;
  text-align:left;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .22s ease;
}
.qcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.qcard:active{transform:scale(.96)}
.qcard .qic{
  font-size:1.4rem;line-height:1;
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;
  background:linear-gradient(135deg,#EDF4EF,#DCE9E0);
  box-shadow:inset 0 0 0 1px rgba(201,151,46,.16);
}
.qcard .qic-social{gap:3px}
.qcard h4{font-family:var(--f-display);font-size:.8rem;margin-top:10px;color:var(--espresso);font-weight:800;line-height:1.3}
.qcard p{font-size:.62rem;font-weight:500;color:var(--ink-2);margin-top:4px;line-height:1.5}

/* ============ SECTION HEAD ============ */
.sec-head{
  display:flex;align-items:center;gap:10px;
  padding:16px 18px 10px;
}
.sec-head .sq{
  width:36px;height:36px;flex:0 0 36px;
  border-radius:12px;
  background:var(--grad-caramel);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
  box-shadow:0 6px 14px rgba(168,123,31,.30);
}
.sec-head h3{
  font-family:var(--f-display);
  font-size:1rem;color:var(--espresso);
  font-weight:800;letter-spacing:.02em;
  flex:1;
}
.sec-head .more{
  font-size:.64rem;font-weight:800;letter-spacing:.04em;
  padding:7px 13px;border-radius:99px;
  background:var(--paper);color:var(--coffee);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:background .2s, transform .16s;
}
.sec-head .more:hover{background:var(--cream-2)}
.sec-head .more:active{transform:scale(.96)}

/* ============ GENERIC CARDS ============ */
.bcard{
  background:var(--paper);
  border:1px solid rgba(221,231,220,.65);
  border-radius:var(--r);
  padding:14px;
  margin:0 14px 12px;
  box-shadow:var(--shadow-sm);
  font-size:.72rem;
}
.bcard.amber{background:#FBF3DC;border-color:#E3D5A6;border-left:4px solid var(--gold-lt);color:#7A6420}
.bcard.gold{background:linear-gradient(135deg,#FBF3DC,#F5EACB);border-color:#E3D5A6;border-left:4px solid var(--gold-lt)}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mb12{margin-bottom:12px}
.spacer{flex:1}

/* ============ FEE TAGS (badge generik) ============ */
.fee-tag{
  display:inline-block;
  font-size:.56rem;font-weight:800;
  padding:3px 9px;border-radius:99px;
  background:var(--cream-2);color:var(--coffee);
  border:1px solid rgba(18,58,44,.14);
  letter-spacing:.02em;
}
.fee-tag.gold{background:var(--grad-caramel);color:#fff;border-color:transparent;box-shadow:0 3px 8px rgba(168,123,31,.30)}
.fee-tag.live{background:var(--sage);color:#fff;border-color:var(--sage-dk);box-shadow:0 3px 8px rgba(18,153,107,.32)}
.fee-tag.warn{background:#FCEBEE;color:var(--terra-dk);border-color:#EFC6CD}
.fee-tag.dist{background:var(--cream-2);color:var(--coffee);border-color:var(--line)}
.fee-tag.cat{background:transparent;color:var(--ink-2);border-color:rgba(126,140,130,.35)}

/* ============ OUTLET LIST ============ */
.outlet-list{padding:0 14px 20px}
.outlet-item{
  display:flex;align-items:center;gap:12px;
  background:var(--paper);
  border:1px solid rgba(221,231,220,.6);
  border-radius:var(--r-2);
  padding:12px 14px;
  margin-bottom:12px;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .22s ease;
}
.outlet-item:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.outlet-item:active{transform:scale(.98)}
.outlet-item.sel{border-color:rgba(201,151,46,.55);box-shadow:0 0 0 1px rgba(201,151,46,.55), var(--shadow-sm)}
.outlet-item .oi-st{font-size:.9rem}
.outlet-item .oi-body{flex:1;min-width:0}
.outlet-item .oi-name{font-family:var(--f-display);font-size:.84rem;font-weight:800;color:var(--espresso);line-height:1.3}
.oi-addr{font-size:.64rem;font-weight:600;color:var(--ink-2);line-height:1.45;margin-top:3px;word-break:break-word}
.outlet-item .oi-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.outlet-item .oi-go{
  font-size:.6rem;font-weight:800;letter-spacing:.04em;
  padding:8px 13px;border-radius:99px;
  background:var(--grad-coffee);color:#fff;
  flex:0 0 auto;
  box-shadow:0 6px 14px rgba(22,87,63,.32);
  transition:filter .2s;
}
.outlet-item .oi-go:hover{filter:brightness(1.08)}

/* ============ SEARCH ============ */
.out-search,.m-search{padding:14px 14px 8px;display:flex;gap:8px}
.out-search input,.m-search input{
  flex:1;
  padding:12px 16px;
  border-radius:99px;
  border:1.5px solid var(--line);
  background:var(--paper);
  font-size:.76rem;font-weight:500;
  outline:none;
  box-shadow:var(--shadow-sm);
  transition:border-color .2s, box-shadow .2s;
}
.out-search input::placeholder,.m-search input::placeholder{color:#A3B2A9}
.out-search input:focus,.m-search input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,151,46,.13), var(--shadow-sm)}
.out-search button{
  padding:12px 18px;border-radius:99px;border:none;
  background:var(--grad-coffee);color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:.04em;
  box-shadow:0 6px 14px rgba(22,87,63,.32);
  transition:filter .2s;
}
.out-search button:hover{filter:brightness(1.08)}

/* ============ CITY CHIPS ============ */
.citychips{padding:2px 14px 10px;display:flex;gap:7px;flex-wrap:wrap}
.citychips button{
  font-size:.62rem;font-weight:700;
  padding:7px 13px;border-radius:99px;
  background:var(--paper);color:var(--coffee);
  border:1.5px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:all .2s ease;
}
.citychips button:hover{border-color:var(--gold);color:var(--coffee)}
.citychips button.sel{background:var(--grad-coffee);color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(22,87,63,.32)}

/* ============ CAT TABS ============ */
.catbar{
  position:sticky;top:0;z-index:40;
  display:flex;gap:8px;
  padding:10px 14px;
  overflow-x:auto;
  background:rgba(242,247,241,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(221,231,220,.7);
  scrollbar-width:none;
}
.catbar::-webkit-scrollbar{display:none}
.catbar button{
  font-size:.66rem;font-weight:700;
  padding:8px 15px;border-radius:99px;
  background:var(--paper);color:var(--ink-2);
  border:1.5px solid var(--line);
  white-space:nowrap;
  box-shadow:var(--shadow-sm);
  transition:all .22s ease;
}
.catbar button:hover{border-color:var(--gold);color:var(--coffee)}
.catbar button.sel{
  background:var(--grad-coffee);color:#fff;border-color:transparent;
  box-shadow:0 8px 18px rgba(22,87,63,.32);
}

/* ============ TICKETS (kartu menu) ============ */
#product-list{padding:12px 12px 20px;display:grid;gap:12px;grid-template-columns:1fr 1fr}
#product-list .bcard{grid-column:1/-1}
.promo-bundling-grid{grid-template-columns:1fr!important;gap:10px!important}
.promo-bundling-grid .ticket.bundle{display:flex;flex-direction:row;min-height:96px;border-radius:12px;background:#fff;border:1px solid rgba(221,231,220,.75);box-shadow:0 4px 12px rgba(12,36,27,.08)}
.promo-bundling-grid .ticket.bundle .tk-img{width:88px;height:88px;margin:4px;aspect-ratio:auto;border-radius:9px;align-self:center}
.promo-bundling-grid .ticket.bundle .tk-body{padding:9px 10px 8px;gap:4px}
.promo-bundling-grid .ticket.bundle .tk-top{position:static;min-height:14px}
.promo-bundling-grid .ticket.bundle .tk-top .tag.flat{display:none}
.promo-bundling-grid .ticket.bundle .tk-body h4{font-size:.7rem;line-height:1.25;-webkit-line-clamp:3}
.promo-bundling-grid .ticket.bundle .tk-foot{display:grid;grid-template-columns:1fr;gap:5px;padding-top:2px}
.promo-bundling-grid .ticket.bundle .tk-price{line-height:1}
.promo-bundling-grid .ticket.bundle .p-new{font-size:.76rem}
.promo-bundling-grid .ticket.bundle .p-flat{display:none}
.promo-bundling-grid .ticket.bundle .add-btn{width:100%;padding:7px 8px;border-radius:0;background:#E5F8EF;color:#086044;box-shadow:none;font-size:.62rem}
.bundle-art{display:flex;align-items:center;justify-content:center;background:#fff!important;padding:8px}
.bundle-art img{width:100%;height:100%;object-fit:contain;display:block}
.ticket{
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  background:var(--paper);
  border:1px solid rgba(221,231,220,.6);
  border-radius:var(--r-2);
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .22s ease;
}
.ticket:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ticket.soldout{opacity:.55}
.ticket.bundle{
  background:linear-gradient(135deg,#FBF3DC 0%,#F5EACB 100%);
  border:1.5px solid rgba(201,151,46,.55);
  box-shadow:0 6px 18px rgba(201,151,46,.22);
}
.tk-img{
  width:100%;height:auto;aspect-ratio:1/1;flex:none;
  border-radius:0;
  object-fit:cover;
  background:#E4EEE6;
  display:block;
}
.tk-body{flex:1;min-width:0;display:flex;flex-direction:column;padding:10px 10px 12px}
.tk-top{position:absolute;top:8px;left:8px;display:flex;gap:5px;flex-wrap:wrap;z-index:2}
.tag{
  font-size:.52rem;font-weight:800;letter-spacing:.04em;
  padding:3px 8px;border-radius:6px;
}
.tag.hot{background:linear-gradient(135deg,#E3B34C,#A87B1F);color:#fff;border:1px solid transparent}
.tag.bd{background:linear-gradient(135deg,#2E9E6B,#1F7A50);color:#fff;border:1px solid transparent}
.tag.flat{background:var(--grad-coffee);color:#fff;border:1px solid transparent}
.tk-body h4{
  font-family:var(--f-display);
  font-size:.82rem;font-weight:800;
  color:var(--ink);
  line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tk-foot{display:flex;align-items:flex-end;gap:8px;margin-top:auto;padding-top:8px}
.tk-price{flex:1;min-width:0}
.p-new{font-family:var(--f-display);font-size:.9rem;font-weight:800;color:var(--coffee)}
.p-flat{font-size:.56rem;font-weight:600;color:var(--gold-dk);margin-left:5px}
.add-btn{
  font-size:.64rem;font-weight:800;letter-spacing:.03em;
  padding:10px 15px;border-radius:99px;border:none;
  background:var(--grad-caramel);
  color:#fff;
  box-shadow:0 6px 14px rgba(168,123,31,.32);
  transition:transform .16s ease, filter .2s;
  white-space:nowrap;
}
.add-btn:hover{filter:brightness(1.07)}
.add-btn:active{transform:scale(.92)}
.add-btn.disabled{background:var(--cream-2);color:var(--ink-2);box-shadow:none;border:1px solid var(--line)}
.add-btn.gold-add{
  background:linear-gradient(135deg,#2E9E6B,#1F7A50);
  color:#fff;
  box-shadow:0 6px 14px rgba(31,122,80,.30);
}
.cart-choice-list{display:grid;gap:10px}
.cart-choice-title{font-size:.72rem;font-weight:800;color:var(--ink-2);text-transform:uppercase}
.cart-choice{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--cream-2)}
.cart-choice b,.cart-choice span{display:block}
.cart-choice b{font-size:.72rem}
.cart-choice span{font-size:.62rem;color:var(--ink-2);margin-top:3px}
.cart-choice .btn{padding:8px 11px;font-size:.62rem;white-space:nowrap}

/* ============ HOURS BANNER ============ */
.hours-banner{
  margin:12px 14px 0;
  padding:11px 14px;
  border-radius:var(--r);
  font-size:.66rem;font-weight:600;
  background:var(--cream-2);
  border:1px solid var(--line);
  color:var(--coffee);
  line-height:1.6;
}
.hours-banner.ok{background:#E2F3EA;border-color:rgba(18,153,107,.28);color:var(--sage-dk)}
.hours-banner.amber{background:#FBF3DC;border-color:#E3D5A6;color:#7A6420}

/* ============ INFO / MASTER HERO ============ */
.info-hero{
  margin:14px;
  padding:24px 20px;
  border-radius:var(--r-3);
  background:
    radial-gradient(130% 150% at 88% -22%, rgba(227,179,76,.30), transparent 52%),
    var(--grad-coffee);
  color:#fff;
  position:relative;overflow:hidden;
  box-shadow:0 18px 40px rgba(14,59,44,.32);
}
.info-hero::before{
  content:'';position:absolute;top:-42px;right:-42px;width:140px;height:140px;
  border-radius:50%;border:22px solid rgba(255,255,255,.07);pointer-events:none;
}
.info-hero h2{font-family:var(--f-display);font-size:1.3rem;font-weight:800;position:relative;text-shadow:0 2px 8px rgba(0,0,0,.22)}
.info-hero p{font-size:.68rem;font-weight:500;margin-top:8px;line-height:1.65;opacity:.92;position:relative}

/* ============ STEPS ============ */
.steps{padding:4px 14px 14px;display:grid;gap:10px}
.step{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--paper);
  border:1px solid rgba(221,231,220,.6);
  border-radius:var(--r-2);
  padding:14px;
  box-shadow:var(--shadow-sm);
}
.step .st-n{
  width:30px;height:30px;flex:0 0 30px;
  border-radius:10px;
  background:var(--grad-caramel);
  color:#fff;
  font-family:var(--f-display);font-weight:800;font-size:.84rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 12px rgba(168,123,31,.28);
}
.step h4{font-family:var(--f-display);font-size:.82rem;color:var(--espresso);font-weight:800}
.step p{font-size:.64rem;color:var(--ink-2);font-weight:500;margin-top:4px;line-height:1.6}
.chip-info{
  font-size:.6rem;font-weight:700;
  background:var(--cream-2);padding:2px 8px;border-radius:6px;
  border:1px solid var(--line);
}

/* ============ FAQ ============ */
.info-switcher{
  display:flex;gap:6px;margin:14px 14px 0;padding:4px;
  background:var(--cream-2);border:1px solid var(--line);border-radius:14px;
}
.info-tab{
  flex:1;border:0;border-radius:10px;padding:10px 6px;
  background:transparent;color:var(--ink-2);font-size:.62rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.02em;transition:all .2s ease;
}
.info-tab.active{background:var(--paper);color:var(--espresso);box-shadow:var(--shadow-sm)}
.info-panel[hidden]{display:none}
.info-panel.active{animation:fadeIn .2s ease}
#faq-list{padding:0 14px 14px;display:grid;gap:10px}
.faq-item{
  background:var(--paper);
  border:1px solid rgba(221,231,220,.6);
  border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.fq-q{
  width:100%;
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  background:none;border:none;
  font-family:var(--f-body);font-size:.72rem;font-weight:800;
  color:var(--espresso);text-align:left;
}
.fq-q span:first-child{flex:1}
.fq-ic{
  font-family:var(--f-display);font-weight:700;
  font-size:1.05rem;color:var(--gold-dk);
  transition:transform .2s ease;
}
.faq-item.open .fq-ic{transform:rotate(45deg)}
.fq-a{
  padding:0 16px 14px;
  font-size:.66rem;font-weight:500;color:var(--ink-2);
  line-height:1.7;
}

/* ============ SYARAT & KETENTUAN MODAL ============ */
.modal-ov{
  position:fixed;inset:0;z-index:200;
  background:rgba(8,28,21,.55);
  backdrop-filter:blur(5px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.modal-ov.show{opacity:1;pointer-events:auto}
.modal-sheet{
  width:100%;max-width:520px;
  max-height:88vh;
  background:var(--paper);
  border-radius:26px 26px 0 0;
  display:flex;flex-direction:column;
  transform:translateY(30px);
  transition:transform .3s ease;
  box-shadow:var(--shadow-lg);
}
.modal-ov.show .modal-sheet{transform:translateY(0)}
.modal-head{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px 12px;
  border-bottom:1px solid rgba(221,231,220,.7);
}
.modal-head img{
  width:56px;height:56px;flex:0 0 56px;
  border-radius:14px;object-fit:cover;
  background:#E4EEE6;
  box-shadow:var(--shadow-sm);
}
.mh-t{flex:1;min-width:0}
.mh-t h3{font-family:var(--f-display);font-size:.98rem;color:var(--espresso);line-height:1.25;font-weight:800}
.mh-sub{font-size:.6rem;color:var(--ink-2);font-weight:500;margin-top:4px;line-height:1.5}
.mh-x{
  width:34px;height:34px;flex:0 0 34px;
  border-radius:50%;border:none;
  background:#EAF1EC;
  font-size:1.1rem;font-weight:700;color:var(--ink-2);
  transition:transform .2s, background .2s;
}
.mh-x:hover{transform:rotate(90deg);background:#E4EDE6}
.modal-body{flex:1;overflow-y:auto;padding:16px 18px}
.modal-foot{padding:12px 18px 18px;border-top:1px solid rgba(221,231,220,.7)}
.m-btns{display:flex;gap:10px}
.m-btns .btn{flex:1}

/* ============ WARNING MODAL (outlet switch / confirm) ============ */
.warning-ov{
  position:fixed;inset:0;z-index:260;
  background:rgba(12,24,20,.38);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.warning-ov.show{opacity:1;pointer-events:auto}
.warning-sheet{
  width:min(100%, 420px);
  background:linear-gradient(180deg,#fffefc 0%, #ffffff 100%);
  border:1px solid rgba(221,231,220,.8);
  border-radius:24px;
  box-shadow:0 24px 60px rgba(15,34,28,.12), 0 8px 24px rgba(15,34,28,.06);
  padding:20px 20px 18px;
  transform:translateY(18px) scale(.98);
  transition:transform .3s ease;
}
.warning-ov.show .warning-sheet{transform:translateY(0) scale(1)}
.warning-head{
  display:flex;align-items:center;gap:12px;
  margin-bottom:10px;
}
.warning-icon{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f9f1dd 0%, #f4dfab 100%);
  box-shadow:inset 0 0 0 1px rgba(201,151,46,.18);
  font-size:1.5rem;
}
.warning-badge{
  display:inline-block;
  border-radius:999px;
  padding:5px 10px;
  background:rgba(18,153,107,.08);
  border:1px solid rgba(18,153,107,.18);
  color:var(--sage-dk);
  font-size:.55rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.warning-sheet h3{
  margin:0;
  font-family:var(--f-display);font-size:1.28rem;line-height:1.25;color:var(--espresso);font-weight:800;
  letter-spacing:-.02em;
}
.warning-sheet p{
  margin:12px 0 0;
  font-size:.73rem;line-height:1.7;font-weight:500;color:var(--ink-2);
}
.warning-sheet strong{color:var(--espresso);font-weight:700}
.warning-sheet .danger-text{color:var(--terra-dk);font-weight:800}
.warning-actions{
  display:flex;gap:10px;justify-content:flex-end;
  margin-top:18px;
}
.warning-actions .btn{
  min-width:120px;
  font-size:.7rem;padding:12px 14px;border-radius:12px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.warning-actions .btn:hover{transform:translateY(-1px)}
.warning-actions .btn-cancel{
  background:#f7f8f7;border:1px solid var(--line);color:var(--ink);
}
.warning-actions .btn.primary{
  background:linear-gradient(135deg,#0f4638 0%, #1c604a 100%);
  color:#fff;border:none;box-shadow:0 10px 18px rgba(15,70,56,.14);
}
.warning-actions .btn.primary:hover{box-shadow:0 12px 20px rgba(15,70,56,.2)}

/* ============ SK MODAL (Syarat & Ketentuan) ============ */
#sk-ov .modal-sheet{border-top:3px solid var(--gold)}
.sk-intro{
  font-size:.66rem;font-weight:600;color:var(--ink-2);
  line-height:1.65;padding-bottom:12px;
  border-bottom:1px dashed var(--line);
}
.sk-item{margin-top:14px}
.sk-item h4{font-family:var(--f-display);font-size:.76rem;color:var(--espresso);font-weight:800}
.sk-item p{font-size:.64rem;font-weight:500;color:var(--ink-2);margin-top:4px;line-height:1.65}

/* ============ OPTION GROUPS (modal kustom) ============ */
.cm-edit-banner{
  margin-bottom:14px;
  padding:10px 14px;
  border-radius:12px;
  background:#E2F3EA;
  border:1px solid rgba(18,153,107,.28);
  color:var(--sage-dk);
  font-size:.66rem;font-weight:700;
}
.ogrp{margin-bottom:14px}
.lbl{
  font-size:.62rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--coffee);
  margin-bottom:7px;
}
.lbl .hint{font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink-2)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt{
  padding:11px 12px;
  border-radius:12px;
  border:1.5px solid var(--line);
  background:var(--paper);
  font-size:.68rem;font-weight:600;
  color:var(--ink);
  text-align:center;
  transition:all .18s ease;
  box-shadow:var(--shadow-sm);
}
.opt:hover{border-color:var(--gold)}
.opt.sel{
  border-color:var(--gold);
  background:linear-gradient(135deg,#FBF3DC,#F5EACB);
  box-shadow:0 0 0 1px var(--gold);
  color:var(--espresso);font-weight:800;
}
.odelta{font-size:.58rem;font-weight:800;color:var(--gold-dk)}
.qty-row{display:flex;align-items:center;gap:14px}
.qbtn{
  width:38px;height:38px;border-radius:50%;border:none;
  background:var(--grad-coffee);color:#fff;
  font-size:1.1rem;font-weight:700;
  box-shadow:0 6px 14px rgba(22,87,63,.30);
  transition:filter .2s, transform .15s;
}
.qbtn:hover{filter:brightness(1.08)}
.qbtn:active{transform:scale(.9)}
.cqty{
  font-family:var(--f-display);font-size:1.2rem;font-weight:800;
  min-width:32px;text-align:center;color:var(--espresso);
}
.note-inp,.nama-inp{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1.5px solid var(--line);
  background:var(--paper);
  font-size:.72rem;font-weight:500;
  outline:none;
  box-shadow:var(--shadow-sm);
  transition:border-color .2s, box-shadow .2s;
}
.note-inp:focus,.nama-inp:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,151,46,.13), var(--shadow-sm)}
.note-inp::placeholder,.nama-inp::placeholder{color:#A3B2A9}

/* ============ PRICE BOX ============ */
.pbox{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:12px 14px;
}
.pb-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.66rem;font-weight:600;color:var(--ink-2);
  padding:4px 0;
}
.pb-row b{color:var(--ink);font-weight:800}
.pb-cut span,.pb-cut b{color:var(--sage-dk)}
.pb-fee span,.pb-fee b{color:var(--gold-dk)}
.pb-row.tot{
  border-top:1.5px dashed var(--line);
  margin-top:6px;padding-top:9px;
  font-family:var(--f-display);
  font-size:.78rem;color:var(--espresso);font-weight:800;
}
.pb-row.tot span:first-child{font-size:.64rem}

/* ============ BUNDLING MODAL (tambahan) ============ */
.bd-variants{display:grid;grid-template-columns:1fr;gap:8px}
.bd-v{
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 15px;
  border-radius:12px;
  border:1.5px solid var(--line);
  background:var(--paper);
  box-shadow:var(--shadow-sm);
}
.bd-v.sel{
  border-color:var(--gold);
  background:linear-gradient(135deg,#FBF3DC,#F5EACB);
  box-shadow:0 0 0 1px var(--gold);
}
.bd-v-name{font-size:.72rem;font-weight:700;color:var(--ink)}
.bd-v-price{font-family:var(--f-display);font-size:.8rem;font-weight:800;color:var(--coffee)}
.bd-mixlist{display:grid;gap:8px}
.bd-mixrow{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(221,231,220,.7);
  background:var(--paper);
}
.bd-mix-name{font-size:.7rem;font-weight:600;color:var(--ink);flex:1}
.bd-slot-list{
  display:grid;gap:8px;
  margin-top:10px;
  max-height:220px;overflow-y:auto;
  padding-right:4px;
}
.bd-slot-option{
  width:100%;text-align:left;
  padding:11px 12px;border-radius:12px;
  border:1px solid var(--line);
  background:var(--paper);color:var(--ink);
  font-size:.68rem;font-weight:600;
  box-shadow:var(--shadow-sm);
}
.bd-slot-option:hover{border-color:var(--gold)}
.bd-slot-option.sel{border-color:var(--gold);background:linear-gradient(135deg,#FBF3DC,#F5EACB);color:var(--espresso)}
.bd-slot-block{
  display:grid;gap:10px;
  margin-top:10px;
}
.bd-slot{
  border:1px solid rgba(221,231,220,.7);
  background:var(--paper);
  border-radius:14px;
  padding:12px 12px 10px;
  box-shadow:var(--shadow-sm);
}
.bd-slot-head{
  display:flex;justify-content:space-between;align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.bd-slot-head span{font-size:.68rem;font-weight:800;color:var(--espresso)}
.bd-slot-head button{
  border:none;border-radius:999px;padding:7px 10px;
  background:var(--cream-2);color:var(--coffee);
  font-size:.58rem;font-weight:800;letter-spacing:.02em;
}
.bd-slot-card{
  display:grid;gap:8px;
  padding:10px 10px 0;
  border-top:1px solid rgba(221,231,220,.7);
}
.bd-slot-name{font-size:.74rem;font-weight:800;color:var(--espresso)}
.bd-slot-empty{font-size:.68rem;font-weight:600;color:var(--ink-2)}
.bd-slot-customs{display:flex;gap:8px;flex-wrap:wrap}
.bd-slot-customs button{
  border:1px solid var(--line);background:#f7f9f8;border-radius:999px;
  padding:6px 10px;font-size:.56rem;font-weight:700;color:var(--ink);
}
.bd-slot-customs button.sel{
  background:linear-gradient(135deg,#E2F3EA,#D9F1E5);border-color:rgba(18,153,107,.35);color:var(--sage-dk);
}
.bd-counter{
  display:flex;justify-content:space-between;align-items:center;
  margin:4px 0 14px;
  padding:11px 15px;
  border-radius:12px;
  background:var(--cream-2);
  border:1px solid var(--line);
  font-size:.68rem;font-weight:700;color:var(--coffee);
}
.bd-counter.ok{
  background:#E2F3EA;border-color:rgba(18,153,107,.35);color:var(--sage-dk);
}
.bd-c-price{font-family:var(--f-display);font-size:.82rem;font-weight:800;color:var(--coffee)}

/* ============ CART ============ */
#view-cart{padding-bottom:20px}
.cart-empty{
  margin:40px 24px;text-align:center;
  padding:36px 20px;
  background:var(--paper);
  border:1.5px dashed var(--line);
  border-radius:var(--r-3);
  box-shadow:var(--shadow-sm);
}
.ce-ic{font-size:2.4rem}
.cart-empty h3{
  font-family:var(--f-display);font-size:1rem;color:var(--espresso);
  margin-top:12px;letter-spacing:.04em;font-weight:800;
}
.cart-empty p{font-size:.66rem;font-weight:500;color:var(--ink-2);margin-top:8px;line-height:1.7}
.cart-item{
  display:flex;gap:12px;
  background:var(--paper);
  border:1px solid rgba(221,231,220,.6);
  border-radius:var(--r-2);
  padding:12px;margin:0 14px 12px;
  box-shadow:var(--shadow-sm);
}
.cart-item img{
  width:64px;height:64px;flex:0 0 64px;
  border-radius:14px;object-fit:cover;
  background:#E4EEE6;
  box-shadow:var(--shadow-sm);
}
.ci-body{flex:1;min-width:0}
.ci-name{font-family:var(--f-display);font-size:.8rem;font-weight:800;color:var(--espresso);line-height:1.3}
.ci-cfg{font-size:.6rem;font-weight:600;color:var(--coffee);margin-top:3px;line-height:1.5}
.ci-note{font-size:.6rem;font-weight:500;color:var(--ink-2);margin-top:3px}
.ci-brk{
  font-size:.62rem;font-weight:600;color:var(--ink-2);
  margin-top:6px;line-height:1.55;
}
.ci-brk b{color:var(--coffee)}
.ci-brk.flat{color:var(--gold-dk)}
.ci-brk.sub{font-size:.56rem;color:var(--ink-2);opacity:.85}
.ci-line{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.ci-price{font-size:.66rem;font-weight:700;color:var(--coffee)}
.ci-price small{font-size:.54rem;font-weight:500;color:var(--ink-2)}
.ci-acts{display:flex;gap:6px}
.ci-acts button{
  font-size:.58rem;font-weight:700;
  padding:6px 10px;border-radius:99px;
  border:1px solid var(--line);
  background:var(--cream-2);color:var(--coffee);
  transition:background .2s;
}
.ci-acts button:hover{background:#E4EDE6}
.ci-acts button.del{background:#FCEBEE;color:var(--terra-dk);border-color:#EFC6CD}
.mpill{
  display:inline-flex;align-items:center;gap:0;
  border-radius:99px;overflow:hidden;
  border:1.5px solid var(--line);
  background:#EAF1EC;
  box-shadow:inset 0 0 0 1px rgba(221,231,220,.7);
}
.mpill button{
  width:30px;height:30px;border:none;
  background:var(--paper);color:var(--espresso);
  font-size:.9rem;font-weight:800;
  transition:background .2s, transform .15s;
}
.mpill button:hover{background:#E4EDE6}
.mpill button:active{transform:scale(.88)}
.mpill .mq{
  min-width:30px;text-align:center;
  font-size:.72rem;font-weight:800;color:var(--espresso);
}

/* ============ BAG TOGGLE ============ */
.bag-toggle{
  display:flex;align-items:center;gap:12px;
  margin:12px 14px 0;
  padding:13px 15px;
  border-radius:var(--r-2);
  background:var(--paper);
  border:1.5px solid var(--line);
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.bag-toggle.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold), var(--shadow-sm)}
.bt-cb{
  width:22px;height:22px;flex:0 0 22px;
  border-radius:7px;
  border:1.5px solid rgba(18,58,44,.28);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:800;color:#fff;
  background:var(--paper);
  transition:background .2s;
}
.bag-toggle.on .bt-cb{background:var(--grad-caramel);border-color:var(--gold-dk)}
.bt-body{flex:1}
.bt-t{font-family:var(--f-display);font-size:.78rem;font-weight:800;color:var(--espresso)}
.bt-d{font-size:.58rem;font-weight:500;color:var(--ink-2);margin-top:2px}
.bt-price{font-family:var(--f-display);font-size:.86rem;font-weight:800;color:var(--coffee)}

/* ============ PICKUP SLOTS ============ */
.pk-sec{margin:14px 14px 0}
.pickup-trigger{
  width:calc(100% - 28px);margin:14px 14px 0;padding:13px 14px;
  display:flex;align-items:center;gap:11px;text-align:left;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-sm);color:var(--espresso);
}
.pickup-trigger-icon{font-size:1.65rem;line-height:1;color:var(--coffee)}
.pickup-trigger b{display:block;font-size:.78rem;font-weight:800}
.pickup-trigger small{display:block;margin-top:2px;color:var(--ink-2);font-size:.6rem}
.pickup-trigger-arrow{margin-left:auto;font-size:1.5rem;color:var(--ink-2)}
.pickup-ov{
  position:fixed;inset:0;z-index:220;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(8,28,21,.45);opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.pickup-ov.show{opacity:1;pointer-events:auto}
.pickup-sheet{width:100%;max-width:520px;background:var(--paper);border-radius:26px 26px 0 0;box-shadow:var(--shadow-lg);overflow:hidden;transform:translateY(24px);transition:transform .3s ease}
.pickup-ov.show .pickup-sheet{transform:translateY(0)}
.pickup-head{display:flex;align-items:center;gap:11px;padding:16px 14px 13px;border-bottom:1px solid var(--line)}
.pickup-clock{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:3px solid var(--espresso);border-radius:50%;font-size:1.8rem;line-height:1;color:var(--espresso)}
.pickup-head h3{font-family:var(--f-display);font-size:1rem;font-weight:800;color:var(--espresso)}
.pickup-head p{font-size:.58rem;color:var(--ink-2);margin-top:2px}
.pickup-x{margin-left:auto;width:34px;height:34px;border:0;border-radius:50%;background:var(--cream-2);color:var(--ink-2);font-size:1.2rem;font-weight:800}
.pickup-body{padding:18px 10px 10px}
.pickup-now{width:100%;padding:12px;border:0;border-radius:8px;background:#F0545E;color:#fff;font-size:.72rem;font-weight:800}
.pickup-slots{height:215px;overflow-y:auto;margin-top:10px;scroll-snap-type:y proximity}
.pickup-slot{display:block;width:100%;height:41px;border:0;background:transparent;color:#AEB0B4;font-size:.9rem;font-weight:700;scroll-snap-align:center}
.pickup-slot.sel{background:#F1EDF2;border-radius:8px;color:#9B9BA0}
.pickup-foot{display:grid;gap:11px;padding:14px 10px 12px;border-top:1px solid var(--line)}
.pickup-foot .pickup-now{background:transparent;border:1px solid #F0545E;color:#F0545E}
.pickup-next{width:100%;padding:13px;border:0;border-radius:7px;background:#F0545E;color:#fff;font-size:.72rem;font-weight:800}
.pickup-now-inline{display:block}
.pk-t{
  font-size:.62rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--coffee);
  margin-bottom:8px;
}
.pk-t .ic{margin-right:4px}
.slots{display:flex;gap:7px;flex-wrap:wrap}
.slot{
  font-size:.64rem;font-weight:700;
  padding:8px 12px;border-radius:99px;
  background:var(--paper);color:var(--coffee);
  border:1.5px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:all .18s ease;
}
.slot:hover{border-color:var(--gold)}
.slot.sel{background:var(--grad-coffee);color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(22,87,63,.32)}
.slot.now{background:var(--cream-2);border-color:rgba(201,151,46,.5)}

/* ============ RECEIPT ============ */
.nama-inp{margin:14px 14px 0;width:calc(100% - 28px)}
.receipt{
  margin:14px 14px 0;
  background:var(--paper);
  border:1px solid rgba(221,231,220,.6);
  border-radius:22px;
  padding:18px 16px 16px;
  box-shadow:var(--shadow);
}
.receipt h4{
  font-family:var(--f-display);font-size:.8rem;color:var(--espresso);
  letter-spacing:.06em;text-align:center;margin-bottom:10px;font-weight:800;
}
.rc-row{
  display:flex;justify-content:space-between;gap:10px;
  font-size:.66rem;font-weight:600;color:var(--ink-2);
  padding:4px 0;
}
.rc-row b{color:var(--ink);font-weight:800}
.rc-sep{border-top:1.5px dashed var(--line);margin:8px 0}
.rc-tot{
  display:flex;justify-content:space-between;align-items:center;
  border-top:2px solid var(--gold);
  margin-top:10px;padding-top:10px;
  font-family:var(--f-display);
}
.rc-tot span:first-child{font-size:.72rem;font-weight:800;color:var(--espresso)}
.rc-tot .val{font-size:1.06rem;font-weight:800;color:var(--coffee)}
.rc-note{font-size:.56rem;font-weight:500;color:var(--ink-2);margin-top:10px;line-height:1.6}

/* ============ BUTTONS ============ */
.btn{
  font-family:var(--f-body);
  font-size:.74rem;font-weight:800;letter-spacing:.03em;
  padding:13px 20px;border-radius:99px;border:none;
  transition:transform .16s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:active{transform:scale(.97)}
.btn.primary{
  background:var(--grad-caramel);
  color:#fff;
  box-shadow:0 10px 22px rgba(168,123,31,.35);
}
.btn.primary:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 12px 26px rgba(168,123,31,.42)}
.btn.primary.disabled{background:var(--cream-2);color:var(--ink-2);box-shadow:none;border:1px solid var(--line);cursor:not-allowed}
.btn.gold-btn{
  background:linear-gradient(135deg,#2E9E6B,#1F7A50);
  color:#fff;
  box-shadow:0 8px 20px rgba(31,122,80,.32);
}
.btn.gold-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn.btn-cancel{
  background:var(--cream-2);color:var(--coffee);
  border:1px solid var(--line);
}
.btn.ghost{
  background:var(--paper);color:var(--coffee);
  border:1.5px solid rgba(30,107,79,.4);
  box-shadow:var(--shadow-sm);
}
.btn.wide{display:block;width:calc(100% - 28px);margin:12px 14px 0}
.btn.lg{font-size:.8rem;padding:15px 24px}

/* ============ CONTACT CARD (info) ============ */
.contact-row{display:grid;gap:8px;padding:0 14px 8px}
.contact-card{
  display:flex;align-items:center;gap:12px;
  padding:13px 15px;
  border-radius:var(--r-2);
  background:var(--paper);
  border:1px solid rgba(221,231,220,.6);
  box-shadow:var(--shadow-sm);
  text-decoration:none;
  transition:transform .16s ease, box-shadow .2s ease;
}
.contact-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.contact-card .cc-ic{
  width:38px;height:38px;flex:0 0 38px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
}
.contact-card.wa .cc-ic{background:#E2F3EA}
.contact-card.wach .cc-ic{background:#E2F3EA}
.contact-card.ig .cc-ic{background:linear-gradient(135deg,#FCEBEE,#FBF3DC)}
.contact-card .cc-ic svg{display:block}
.contact-card.wa:hover{border-color:rgba(37,211,102,.5)}
.contact-card.wach:hover{border-color:rgba(37,211,102,.5)}
.contact-card.ig:hover{border-color:rgba(138,58,185,.45)}
.contact-card .cc-body{flex:1}
.contact-card .cc-t{font-size:.72rem;font-weight:800;color:var(--espresso)}
.contact-card .cc-d{font-size:.58rem;font-weight:500;color:var(--ink-2);margin-top:2px}
.contact-card .cc-go{font-size:1rem;color:var(--ink-2)}

/* ============ GATE NAMA+OUTLET (view menu) ============ */
.gate-card{
  margin:12px 14px 4px;padding:16px 16px 14px;
  background:var(--paper);
  border:1.5px dashed rgba(201,151,46,.5);
  border-radius:var(--r-2);
  box-shadow:var(--shadow-sm);
}
.gate-h{
  font-family:var(--f-display);font-size:.9rem;font-weight:800;color:var(--espresso);
  margin-bottom:12px;
}
.gate-steps{list-style:none;margin:0;padding:0}
.gate-steps li{
  display:flex;gap:10px;align-items:flex-start;
  padding:10px 10px 12px;border-radius:14px;
  background:var(--cream-2,#F6F9F4);
  margin-bottom:8px;
  border:1px solid rgba(18,58,44,.08);
}
.gate-steps li.done{background:rgba(46,158,107,.10);border-color:rgba(46,158,107,.30)}
.gs-n{
  width:24px;height:24px;flex:0 0 24px;
  border-radius:50%;background:var(--grad-coffee);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.62rem;font-weight:800;
}
.gate-steps li.done .gs-n{background:linear-gradient(135deg,#2E9E6B,#1F7A50)}
.gs-t{flex:1;min-width:0}
.gs-t b{font-size:.72rem;color:var(--espresso)}
.gs-d{display:block;font-size:.58rem;color:var(--ink-2);margin-top:2px;line-height:1.5}
.gate-inp{margin-top:8px}
.gate-inp .nama-inp{width:100%;margin:0}
.gate-note{font-size:.6rem;color:var(--ink-2);text-align:center;margin:8px 0 0}

/* ============ TOAST ============ */
#toast{
  position:fixed;left:50%;bottom:88px;
  transform:translateX(-50%) translateY(18px) scale(.94);
  background:rgba(12,36,27,.93);
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:.78rem;font-weight:700;
  padding:11px 20px;border-radius:99px;
  box-shadow:0 12px 30px rgba(12,36,27,.35);
  border:1px solid rgba(255,255,255,.12);
  opacity:0;pointer-events:none;
  transition:all .32s cubic-bezier(.34,1.56,.64,1);
  z-index:300;
  max-width:88vw;text-align:center;
  white-space:nowrap;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}

/* ============ CLOSED OVERLAY (dashboard) ============ */
#closed-ov{
  position:fixed;inset:0;z-index:500;
  background:
    radial-gradient(130% 150% at 88% -22%, rgba(227,179,76,.30), transparent 52%),
    var(--grad-coffee);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
#closed-ov.show{opacity:1;pointer-events:auto}
.closed-card{
  max-width:400px;width:calc(100% - 48px);
  background:rgba(255,254,250,.07);
  border:1px solid rgba(227,179,76,.35);
  border-radius:var(--r-3);
  padding:34px 26px;
  text-align:center;
  box-shadow:var(--shadow-lg);
}
.closed-card img.logo{
  width:92px;height:92px;margin:0 auto 18px;
  border-radius:24px;border:2px solid rgba(227,179,76,.75);
  box-shadow:0 0 24px rgba(201,151,46,.4);
  object-fit:cover;
  background:#FBF3DF;
}
.closed-card h2{
  font-family:var(--f-display);color:#fff;
  font-size:1.24rem;font-weight:800;
  text-shadow:0 2px 8px rgba(0,0,0,.22);
}
.closed-card .cl-sub{
  color:var(--gold-lt);font-size:.6rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;margin-top:6px;
}
.closed-card p{
  color:rgba(255,255,255,.85);
  font-size:.7rem;font-weight:500;line-height:1.7;
  margin-top:14px;
}
.closed-links{display:grid;gap:10px;margin-top:20px}
.closed-links a{
  display:flex;align-items:center;gap:10px;justify-content:center;
  padding:12px 16px;border-radius:99px;
  font-size:.7rem;font-weight:800;
  text-decoration:none;
  transition:transform .16s;
}
.closed-links a:active{transform:scale(.97)}
.closed-links a.wach{
  background:var(--grad-caramel);color:#fff;
  box-shadow:0 8px 20px rgba(168,123,31,.32);
}
.closed-links a.ig{
  background:transparent;color:var(--gold-lt);
  border:1.5px solid rgba(227,179,76,.6);
}

/* ============ BOTTOM NAV (floating modern) ============ */
.botnav{
  position:sticky;bottom:0;z-index:80;
  display:flex;gap:4px;
  background:rgba(255,254,250,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(18,58,44,.09);
  box-shadow:0 -10px 30px rgba(18,58,44,.10);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
}
.botnav button{
  flex:1;
  padding:7px 4px 8px;
  background:none;border:none;
  color:var(--ink-2);
  font-size:.6rem;font-weight:800;letter-spacing:.2px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  position:relative;
  border-radius:15px;
  transition:color .2s ease, background .25s ease;
}
.botnav button .bic{font-size:1.22rem;line-height:1;transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.botnav button:hover{color:var(--coffee)}
.botnav button.sel{color:var(--coffee);background:linear-gradient(180deg,rgba(201,151,46,.16),rgba(201,151,46,.05))}
.botnav button.sel .bic{transform:translateY(-1px) scale(1.16)}
.botnav button.sel::after{
  content:'';position:absolute;top:4px;left:50%;transform:translateX(-50%);
  width:20px;height:3px;border-radius:99px;
  background:var(--grad-caramel);
}
.botnav .bdg{
  position:absolute;top:1px;right:calc(50% - 26px);
  background:var(--terra);color:#fff;
  font-size:.55rem;font-weight:800;
  min-width:16px;height:16px;
  border-radius:99px;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;
  box-shadow:0 3px 8px rgba(208,52,74,.4);
  border:1.5px solid var(--paper);
}

/* ============ LOADBOX ============ */
.loadbox{text-align:center;padding:30px 0}
.loadbox .ld{
  width:34px;height:34px;margin:0 auto 12px;
  border-radius:50%;
  border:3px solid var(--cream-2);
  border-top-color:var(--gold);
  animation:spin 1s linear infinite;
}
.loadbox p{font-size:.66rem;font-weight:600;color:var(--ink-2)}

/* ============ BADGES ============ */
.badge-open,.badge-amber,.badge-closed{
  font-size:.56rem;font-weight:800;
  padding:3px 9px;border-radius:99px;
  letter-spacing:.3px;
}
.badge-open{background:#E2F3EA;color:var(--sage-dk);border:1px solid rgba(18,153,107,.25)}
.badge-amber{background:#FBF3DC;color:#7A6420;border:1px solid #E3D5A6}
.badge-closed{background:#FCEBEE;color:var(--terra-dk);border:1px solid rgba(208,52,74,.22)}
.hours-note{font-size:.56rem;font-weight:600;color:var(--ink-2)}

/* ============ RESPONSIVE ============ */
@media(max-width:380px){
  .hero h2{font-size:1.6rem}
  .qcard h4{font-size:.74rem}
  .opts{grid-template-columns:1fr}
}

/* ============ DESKTOP (>=900px) ============ */
@media(min-width:900px){

    /* shell full-bleed: botnav menyentuh tepi layar,
     konten tetap center max 1240px */
  #app{max-width:none}

  /* botnav full-bleed — tombol center + max-width */
  .botnav{padding:9px max(24px, calc(50vw - 620px)) calc(9px + env(safe-area-inset-bottom));box-sizing:border-box;justify-content:center}
  .botnav button{max-width:190px}

  .view{max-width:1240px;margin:0 auto;width:100%}
  .catbar{top:0}

  /* hero lebih lega */
  .hero{margin:20px 24px 0;padding:48px 32px 40px;border-radius:30px}
  .hero h2{font-size:2.4rem}
  .hero p{font-size:.86rem;max-width:52ch}
  .hero-tags{margin-top:18px}
  .hero-tags span{font-size:.66rem;padding:5px 13px}
  .hero-cta{font-size:.88rem;padding:15px 42px}

  /* quick grid 4 kartu sejajar */
  .quick-grid{grid-template-columns:repeat(4,1fr);padding:20px 24px 18px;gap:14px}
  .qcard{padding:18px 18px 16px}
  .qcard .qic{font-size:1.6rem;width:56px;height:56px}
  .qcard h4{font-size:.94rem}
  .qcard p{font-size:.68rem}

  /* section head + heading konten */
  .sec-head{padding:20px 24px 12px}
  .sec-head h3{font-size:1.1rem}
  .sec-head .sq{width:40px;height:40px;flex-basis:40px;font-size:1.2rem}
  .info-hero{margin:20px 24px 0;padding:34px 28px;border-radius:30px}
  .info-hero h2{font-size:1.7rem}

  /* outlet & menu grid — minmax(0,1fr) supaya track tidak melebar */
  .outlet-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:0 24px 24px}
  .outlet-list .outlet-item{margin-bottom:0;min-width:0}
  .outlet-list .bcard{grid-column:1/-1;margin:0}
  #product-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:14px 24px 26px}
  #product-list .bcard{grid-column:1/-1;margin:0}
  .tk-body{padding:12px 12px 14px}
  .tk-body h4{font-size:.9rem}

  /* search & category bar */
  .out-search,.m-search{padding:16px 24px 10px}
  .catbar{padding:12px 24px;justify-content:flex-start}
  .catbar button{font-size:.72rem;padding:9px 18px}
  .citychips{padding:4px 24px 12px}
  .citychips button{font-size:.66rem;padding:7px 14px}

  /* steps 2 kolom & FAQ 2 kolom */
  .steps{grid-template-columns:1fr 1fr;gap:12px;padding:4px 24px 18px}
  .faq-list,#faq-list{grid-template-columns:1fr 1fr;gap:11px;padding:0 24px 18px}
  .faq-item .fq-q{padding:16px 18px;font-size:.78rem}
  .faq-item .fq-a{padding:0 18px 16px;font-size:.72rem;line-height:1.8}

  /* bcard & banner full-width di dalam view center */
  .bcard{margin-left:24px;margin-right:24px}
  .hours-banner{margin:14px 24px 0}

  /* kontak 2 kolom */
  .contact-row{grid-template-columns:1fr 1fr;gap:10px;padding:0 24px 12px}

  /* keranjang: 2 kolom (items kiri + struk sticky kanan) */
  .cart-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start;padding:0 24px}
  .cart-main{min-width:0}
  .cart-side{position:sticky;top:12px}
  .cart-item{padding:14px;margin:0 0 12px}
  .cart-item img{width:84px;height:84px}

  /* modal jadi dialog desktop (center, rounded semua sisi) */
  .modal-ov{align-items:center;padding:24px}
  .modal-sheet{max-width:640px;border-radius:24px;transform:translateY(20px) scale(.98)}
  .modal-ov.show .modal-sheet{transform:translateY(0) scale(1)}
  .modal-head img{width:64px;height:64px;flex-basis:64px;border-radius:16px}
  .mh-t h3{font-size:1.08rem}
  .modal-body{padding:20px 24px}
  .modal-foot{padding:14px 24px 20px}
  .m-btns .btn{padding:13px 10px}

  /* jam pickup slots & tombol besar */
  .slot{font-size:.7rem;padding:9px 14px}
  .btn.wide.lg, .btn.primary.wide.lg{padding:16px 20px;font-size:.86rem}
  .bag-toggle,.pk-sec,.nama-inp,.receipt{margin-left:0;margin-right:0;width:100%}
  .btn.wide{width:100%;margin:12px 0 0}

  /* banner tutup & toast */
  .closed-card{max-width:460px;padding:40px 32px}
  #toast{bottom:36px}

  .botnav button{padding:12px 6px 14px}
  .botnav button .bic{font-size:1.28rem}
}

/* ============ DESKTOP BESAR (>=1280px) ============ */
@media(min-width:1280px){
  #app{max-width:none}
  #product-list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .outlet-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero{margin:24px 32px 0;padding:58px 40px 48px;border-radius:32px}
  .hero h2{font-size:2.8rem}
  .quick-grid{grid-template-columns:repeat(4,1fr)}
  .faq-list,#faq-list{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .contact-row{grid-template-columns:repeat(3,1fr)}
  .cart-grid{grid-template-columns:1.7fr 1fr;gap:26px}
  .cart-side{top:12px}
  .modal-sheet{max-width:720px}
}

@media print{
  .botnav{display:none}
}