/* ════════════════════════════════════════
   MANGANKENE CUSTOMER APP v3
   main.css — ES Modules + Outfit Font
   Heading: Outfit 600/700/800
   Body:    Plus Jakarta Sans 400/500/600/700
════════════════════════════════════════ */

:root {
  --y:    #F5C200;
  --ydk:  #D4A800;
  --ylt:  #FFF9DB;
  --org:  #E85D04;
  --blk:  #1A1A1A;
  --ink:  #1E1E1E;
  --sub:  #6B6760;
  --bdr:  #E8E5DF;
  --bg:   #F5F4EF;
  --srf:  #FFFFFF;
  --red:  #D13F1F;
  --grn:  #1E9952;
  --blu:  #1E6FCC;
  --amb:  #C97A00;
  --nav:  64px;
  --r:    16px;
  --rs:   10px;
  --sh:   0 2px 12px rgba(0,0,0,.07);
  --shm:  0 6px 24px rgba(245,194,0,.3);
}

/* ── RESET ── */
*,*::before,*::after { margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent }
html { scroll-behavior:smooth }
body {
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;
  background:var(--bg);color:var(--ink);
  max-width:480px;margin:0 auto;min-height:100dvh;overflow-x:hidden;
  line-height:1.6;
}
img  { max-width:100%;display:block }
button { font-family:inherit;font-weight:600;cursor:pointer;border:none;outline:none;background:none }
input,select,textarea { font-family:inherit;font-weight:500;outline:none;border:none }
a { text-decoration:none;color:inherit }
::-webkit-scrollbar { width:3px }
::-webkit-scrollbar-thumb { background:var(--bdr);border-radius:3px }

svg { display:inline-block;vertical-align:middle;flex-shrink:0 }

/* ── PAGES ── */
#pg-auth { display:none;flex-direction:column;min-height:100dvh;background:var(--srf);animation:fadeUp .22s ease }
#pg-auth.active { display:flex }

/* FIX #1: app-shell tinggi penuh, tab-pane scroll mandiri agar navbar tidak menutupi */
#app-shell {
  display:none;flex-direction:column;
  height:100dvh;overflow:hidden;position:relative;
  /* prevent any child overflow from escaping */
}
.tab-pane {
  display:none;flex-direction:column;flex:1;
  /* overflow on tab-pane itself clips sticky headers and avatar */
  overflow:hidden;
  position:relative;
}
.tab-pane.active { display:flex }
/* Scrollable inner wrapper — each tab-pane's first child handles scroll */
.tab-scroll {
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--nav) + 80px);
  display:flex;flex-direction:column;
}
.sub-view  { display:none;flex-direction:column;flex:1;min-height:0 }
.sub-view.active { display:flex }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes sp    { to{transform:rotate(360deg)} }
@keyframes shim  { to{background-position:-200% 0} }
@keyframes popIn { 0%{transform:scale(.85);opacity:0} 100%{transform:scale(1);opacity:1} }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }

/* ── LOADING ── */
#lov {
  display:none;position:fixed;inset:0;background:rgba(245,244,239,.95);
  backdrop-filter:blur(8px);z-index:9999;
  align-items:center;justify-content:center;flex-direction:column;gap:14px
}
#lov.show { display:flex }
.spin {
  width:44px;height:44px;border:3.5px solid var(--bdr);border-top-color:var(--y);
  border-radius:50%;animation:sp .7s linear infinite
}
.lov-txt { font-size:13px;font-weight:700;color:var(--sub) }
.mini-spin {
  display:inline-block;width:16px;height:16px;
  border:2px solid var(--bdr);border-top-color:var(--y);
  border-radius:50%;animation:sp .6s linear infinite;
  vertical-align:middle;margin-right:6px
}

/* ── TOAST ── */
#toast {
  position:fixed;bottom:calc(var(--nav)+16px);left:50%;
  transform:translateX(-50%) translateY(16px);
  background:var(--blk);color:#fff;
  padding:11px 20px;border-radius:100px;
  font-size:13px;font-weight:700;z-index:9998;
  white-space:nowrap;opacity:0;
  pointer-events:none;transition:opacity .22s,transform .22s;
  max-width:calc(100vw - 40px);text-align:center;
  display:flex;align-items:center;gap:8px;
}
#toast.show { opacity:1;transform:translateX(-50%) translateY(0) }
#toast.ok   { background:var(--grn) }
#toast.err  { background:var(--red) }
#toast.warn { background:var(--amb) }
.toast-icon { display:flex;align-items:center;flex-shrink:0 }

/* ── CONFIRM DIALOG ── */
#confirm-overlay {
  display:none;position:fixed;inset:0;z-index:8000;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:24px;
}
#confirm-overlay.on { display:flex }
#confirm-box {
  background:var(--srf);border-radius:20px;padding:28px 24px;
  max-width:320px;width:100%;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
  animation:popIn .2s ease;
}
#confirm-icon { font-size:36px;margin-bottom:12px }
#confirm-msg  {
  font-size:15px;font-weight:600;color:var(--ink);
  line-height:1.5;margin-bottom:20px;
}
.confirm-btns { display:flex;gap:10px }
.confirm-btns .btn { flex:1 }

/* ── BUTTONS ── */
.btn {
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:100px;font-size:15px;font-weight:700;
  transition:all .15s;user-select:none;cursor:pointer;
}
.btn:active { transform:scale(.97) }
.by  { background:var(--y);color:var(--blk);box-shadow:var(--shm) }
.by:hover { background:var(--ydk) }
.bk  { background:var(--blk);color:#fff }
.bo  { background:transparent;color:var(--ink);border:1.5px solid var(--bdr) }
.bf  { width:100% }
.bs  { padding:9px 16px;font-size:13px }

/* ── FORMS ── */
.fg  { display:flex;flex-direction:column;gap:6px }
.fl  { font-size:11px;font-weight:800;color:var(--sub);text-transform:uppercase;letter-spacing:.07em }
.fi  {
  background:var(--bg);border:1.5px solid var(--bdr);border-radius:var(--rs);
  padding:12px 15px;font-size:15px;font-weight:500;color:var(--ink);transition:border-color .15s
}
.fi:focus { border-color:var(--y);background:var(--srf) }
.fi::placeholder { color:#C0BBAA;font-weight:400 }
.pw  { position:relative }
.pwe {
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:var(--sub);padding:5px;
  display:flex;align-items:center;justify-content:center;transition:color .15s
}
.pwe:hover { color:var(--ink) }

/* ── SKELETON ── */
.sk {
  background:linear-gradient(90deg,var(--bdr) 25%,#E5E2DB 50%,var(--bdr) 75%);
  background-size:200% 100%;animation:shim 1.3s infinite;border-radius:8px
}

/* ── EMPTY / LOAD ── */
.load-row { text-align:center;padding:30px;color:var(--sub);font-size:14px;font-weight:600 }
.emp-state {
  text-align:center;padding:60px 24px;color:var(--sub);
  display:flex;flex-direction:column;align-items:center;gap:10px
}
.emp-state svg { opacity:.35 }
.emp-state p   { font-size:16px;font-weight:700;color:var(--ink);margin-top:4px }
.emp-state span{ font-size:14px }
.emp-state.err svg { opacity:.5;color:var(--red) }
.stl {
  font-size:11px;font-weight:800;color:var(--sub);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:10px
}

/* ════════════════════════════════════════
   BOTTOM NAVIGATION
════════════════════════════════════════ */
.bnav {
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;height:var(--nav);
  background:var(--srf);border-top:1.5px solid var(--bdr);
  display:flex;align-items:stretch;z-index:200;
  box-shadow:0 -4px 20px rgba(0,0,0,.06);
}
.bni {
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;cursor:pointer;position:relative;color:var(--sub);transition:color .2s;
  padding:6px 0;background:none;border:none;font-family:inherit
}
.bni:active { background:rgba(0,0,0,.03) }
.bni.active { color:var(--blk) }
.bni-icon {
  position:relative;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:10px;transition:all .2s;overflow:hidden;
  flex-shrink:0;
}
.bni.active .bni-icon { background:var(--ylt) }
.bni-label { font-size:10px;font-weight:700;letter-spacing:.01em;text-transform:uppercase }

/* FIX UI #2: Cart FAB bulat di pojok kanan bawah */
.cart-fab {
  position:fixed;
  bottom:calc(var(--nav) + 14px);
  right:16px;
  width:56px;height:56px;
  background:var(--blk);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  z-index:190;
  box-shadow:0 4px 20px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.15);
  cursor:pointer;
  opacity:0;pointer-events:none;
  transition:all .28s cubic-bezier(.34,1.56,.64,1);
  transform:scale(.7);
  border:none;
}
.cart-fab.on {
  opacity:1;pointer-events:all;transform:scale(1);
}
.cart-fab:active { transform:scale(.9) }
.cart-fab-badge {
  position:absolute;top:-4px;right:-4px;
  background:var(--y);color:var(--blk);
  border-radius:50%;min-width:20px;height:20px;
  font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;border:2px solid var(--srf);
  font-family:'Plus Jakarta Sans',sans-serif;
}

/* ════════════════════════════════════════
   AUTH
════════════════════════════════════════ */
.ahero {
  background:linear-gradient(135deg,var(--y) 0%,#FFD740 100%);
  padding:52px 24px 44px;position:relative;overflow:hidden
}
.ahero-waves {
  position:absolute;bottom:0;left:0;right:0;height:30px;
  background:var(--srf);
  clip-path:ellipse(55% 100% at 50% 100%);
}
.ahero::before { content:'';position:absolute;top:-80px;right:-80px;width:220px;height:220px;border-radius:50%;background:rgba(0,0,0,.06) }
.ahero::after  { content:'';position:absolute;bottom:-50px;left:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.15) }
.abrand  { position:relative;z-index:1;display:flex;align-items:center;gap:14px }
.alogobox{ width:64px;height:64px;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.15);flex-shrink:0 }
.aname   { font-family:'Outfit',sans-serif;font-size:27px;font-weight:800;color:var(--blk);line-height:1;letter-spacing:-0.02em }
.atag    { font-size:12px;font-weight:600;color:rgba(26,26,26,.6);margin-top:3px }
.abody   { flex:1;padding:28px 22px 40px;display:flex;flex-direction:column }
.atabs   { display:flex;border-bottom:2px solid var(--bdr);margin-bottom:24px }
.atab    {
  flex:1;padding:12px;text-align:center;font-size:14px;font-weight:700;color:var(--sub);
  background:none;border:none;cursor:pointer;border-bottom:2.5px solid transparent;
  margin-bottom:-2px;transition:all .15s;font-family:inherit
}
.atab.on { color:var(--blk);border-bottom-color:var(--y) }
.aform   { display:none;flex-direction:column;gap:13px }
.aform.on{ display:flex;animation:fadeUp .2s ease }
.ahint   { text-align:center;font-size:13px;color:var(--sub);margin-top:4px }
.ahint a { color:var(--org);font-weight:700 }

/* ════════════════════════════════════════
   HOME — GREETING
════════════════════════════════════════ */
.otop {
  background:linear-gradient(135deg,var(--y) 0%,#FFDD00 100%);
  padding:20px 18px 28px;position:relative;overflow:hidden
}
.otop::after {
  content:'';position:absolute;bottom:-30px;right:-30px;
  width:120px;height:120px;border-radius:50%;background:rgba(0,0,0,.05)
}
.greeting-box { position:relative;z-index:1;margin-bottom:12px }
.greeting-salam {
  font-size:12px;font-weight:700;color:rgba(26,26,26,.6);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px
}
.greeting-name {
  font-family:'Outfit',sans-serif;
  font-size:24px;font-weight:800;color:var(--blk);line-height:1.2;margin-bottom:4px;letter-spacing:-0.02em
}
.greeting-sub {
  font-size:13px;font-weight:600;color:rgba(26,26,26,.65);line-height:1.4
}
.uchip {
  margin-top:4px;position:relative;z-index:1;
  background:rgba(0,0,0,.08);border-radius:100px;
  padding:7px 14px;display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:700;color:var(--blk)
}
.dot { width:8px;height:8px;border-radius:50%;background:var(--grn);box-shadow:0 0 0 3px rgba(30,153,82,.25) }
.obody  { padding:18px 16px;flex:1 }
.ohint  {
  background:var(--ylt);border:1.5px solid rgba(245,194,0,.4);border-radius:var(--rs);
  padding:11px 14px;margin-bottom:14px;font-size:13px;font-weight:600;color:#7A6500;
  display:flex;gap:9px;align-items:center
}
.hint-ico-wrap { flex-shrink:0;color:#7A6500 }
.olist  { display:flex;flex-direction:column;gap:10px }
.ocard  {
  background:var(--srf);border-radius:var(--r);padding:15px 16px;
  display:flex;align-items:center;gap:13px;box-shadow:var(--sh);
  cursor:pointer;border:2px solid transparent;transition:all .18s
}
.ocard:active,.ocard:hover { border-color:var(--y);box-shadow:var(--shm);transform:translateY(-1px) }
.oico   {
  width:46px;height:46px;border-radius:12px;background:var(--ylt);
  border:1.5px solid rgba(245,194,0,.4);display:flex;align-items:center;
  justify-content:center;flex-shrink:0;color:var(--org)
}
.oinfo  { flex:1;min-width:0 }
.oname  { font-weight:800;font-size:15px;color:var(--blk) }
.oaddr  { font-size:12px;font-weight:500;color:var(--sub);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.oarr   { color:var(--sub) }

/* ════════════════════════════════════════
   HOME — MENU
════════════════════════════════════════ */
.mtop  {
  background:var(--srf);border-bottom:1px solid var(--bdr);padding:12px 16px;
  position:sticky;top:0;z-index:50
}
.mrow1 { display:flex;align-items:center;gap:10px;margin-bottom:10px }
.bkbtn {
  width:36px;height:36px;background:var(--bg);border:1.5px solid var(--bdr);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink);transition:background .15s;flex-shrink:0
}
.bkbtn:active { background:var(--bdr) }
.mton  { font-size:16px;font-weight:800;color:var(--blk);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.mtsub { font-size:11px;font-weight:600;color:var(--sub);margin-top:1px }
.ctabs { display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none }
.ctabs::-webkit-scrollbar { display:none }
.ctab  {
  flex-shrink:0;padding:7px 16px;border-radius:100px;font-size:13px;font-weight:700;
  cursor:pointer;transition:all .15s;border:1.5px solid var(--bdr);background:var(--bg);color:var(--sub)
}
.ctab.on { background:var(--blk);color:#fff;border-color:var(--blk) }

/* Search bar */
.msrch {
  display:flex;align-items:center;gap:10px;
  margin:0 16px 0;padding:10px 14px;
  background:var(--bg);border:1.5px solid var(--bdr);border-radius:var(--rs);
  transition:border-color .15s
}
.msrch:focus-within { border-color:var(--y);background:var(--srf) }
.msrch input { flex:1;background:none;border:none;font-size:14px;color:var(--ink) }
.msrch input::placeholder { color:#C0BBAA }

/* Menu grid */
.mgwrap {
  padding:12px 12px calc(var(--nav) + 80px);
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  min-height:0;
}
.mgrid  { display:grid;grid-template-columns:repeat(2,1fr);gap:10px }

/* Menu card */
.mcard {
  background:var(--srf);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh);transition:transform .18s,box-shadow .18s;
  display:flex;flex-direction:column;border:1.5px solid transparent;
}
.mcard:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.1) }
.mcard.out-of-stock { opacity:.65 }
.mimg {
  position:relative;width:100%;aspect-ratio:1/1;
  background:var(--ylt);overflow:hidden;
  display:flex;align-items:center;justify-content:center
}
.mimgph {
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--org);opacity:.4
}
.mcbody { padding:10px 11px;display:flex;flex-direction:column;gap:4px;flex:1 }
.mcname { font-size:13px;font-weight:700;color:var(--blk);line-height:1.3 }
.mcprice{ font-size:14px;font-weight:800;color:var(--org) }

/* Stock info text */
.mstock { font-size:11px;font-weight:600;border-radius:6px;padding:2px 0 }
.mstock.ok-txt   { color:var(--grn) }
.mstock.warn-txt { color:var(--amb) }
.mstock.out-txt  { color:var(--red) }

.mcbot  { margin-top:auto;padding-top:6px }
.madd   {
  width:100%;background:var(--y);color:var(--blk);border-radius:9px;
  padding:8px;font-size:12px;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:5px;
  transition:all .15s;border:none;font-family:inherit
}
.madd:active { background:var(--ydk);transform:scale(.97) }
.madd.disabled { background:var(--bdr);color:var(--sub);cursor:default }
.mqc { display:flex;align-items:center;justify-content:space-between;gap:2px }
.mqb {
  width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .13s;border:none;font-family:inherit;
  background:rgba(245,194,0,.2);color:var(--blk)
}
.mqb:active { background:var(--y) }
.mqb.dim { color:var(--bdr);cursor:default;background:transparent;pointer-events:none }
.mqv { width:28px;text-align:center;font-size:15px;font-weight:800;color:var(--blk) }

/* Stock badge */
.sbadge {
  position:absolute;top:7px;left:7px;
  border-radius:100px;padding:3px 8px;font-size:10px;font-weight:800;
}
.sbadge.out   { background:rgba(209,63,31,.12);color:var(--red) }
.sbadge.low   { background:rgba(201,122,0,.12);color:var(--amb) }
.sbadge.avail { background:rgba(30,153,82,.1);color:var(--grn) }

/* List view */
.mgrid.list-view { grid-template-columns:1fr;gap:8px }
.mgrid.list-view .mcard  { flex-direction:row;align-items:center }
.mgrid.list-view .mimg   { width:80px;height:80px;aspect-ratio:unset;flex-shrink:0;border-radius:12px 0 0 12px }
.mgrid.list-view .mcbody { flex-direction:row;align-items:center;gap:10px;padding:10px 12px;flex:1 }
.mgrid.list-view .mcname { font-size:14px;flex:1 }
.mgrid.list-view .mcprice{ font-size:13px;white-space:nowrap }
.mgrid.list-view .mstock { display:none }
.mgrid.list-view .mcbot  { flex-shrink:0;margin-top:0;padding-top:0 }
.mgrid.list-view .madd   { padding:8px 14px;white-space:nowrap }
.mgrid.list-view .mqc    { min-width:90px }

/* View toggle */
.view-toggle { display:flex;gap:4px;flex-shrink:0 }
.vbtn {
  width:34px;height:34px;border-radius:9px;border:1.5px solid var(--bdr);background:var(--bg);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;color:var(--sub)
}
.vbtn.on { background:var(--y);border-color:var(--y);color:var(--blk) }

/* Empty menu */
.emp {
  grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--sub);
  display:flex;flex-direction:column;align-items:center;gap:10px
}
.emp svg { opacity:.3 }
.emp div { font-size:15px;font-weight:700;color:var(--ink) }
.emp small { font-size:12px }

/* ════════════════════════════════════════
   ORDERS TAB
════════════════════════════════════════ */
.orders-header { background:linear-gradient(135deg,var(--y) 0%,#FFDD00 100%);padding:20px 18px 22px }
.orders-header h1 { font-family:'Outfit',sans-serif;font-size:22px;font-weight:800;color:var(--blk);letter-spacing:-0.02em }
.orders-header p  { font-size:12px;font-weight:600;color:rgba(26,26,26,.6);margin-top:2px }
.orders-body  { padding:14px 16px;display:flex;flex-direction:column;gap:10px }
.ocard-trx {
  background:var(--srf);border-radius:var(--r);padding:15px 16px;
  box-shadow:var(--sh);border:1.5px solid var(--bdr);
  transition:border-color .2s;
}
.ocard-trx.active-order { border-color:rgba(245,194,0,.5);box-shadow:0 4px 16px rgba(245,194,0,.2) }
.otrx-head { display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px }
.otrx-num  { font-size:13px;font-weight:800;color:var(--blk) }
.otrx-wn   { font-size:12px;font-weight:600;color:var(--sub);margin-top:2px }
.otrx-items{
  border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);
  padding:9px 0;margin-bottom:9px;display:flex;flex-direction:column;gap:5px
}
.oi-row    { display:flex;align-items:center;gap:8px;font-size:13px }
.oi-qty    { font-weight:800;color:var(--org);width:26px;flex-shrink:0 }
.oi-name   { flex:1;font-weight:600;color:var(--ink) }
.oi-price  { font-weight:700;color:var(--sub);font-size:12px }
.oi-more   { font-size:12px;font-weight:600;color:var(--sub);padding-top:2px }
.otrx-note {
  font-size:12px;font-weight:500;color:var(--sub);margin-bottom:8px;
  background:var(--bg);border-radius:7px;padding:6px 10px;
  display:flex;align-items:flex-start;gap:6px
}
.otrx-foot { display:flex;align-items:center;justify-content:space-between }
.otrx-date { font-size:11px;font-weight:600;color:var(--sub) }
.otrx-total{ font-size:16px;font-weight:800;color:var(--blk) }

/* Status badges */
.stbadge { border-radius:100px;padding:4px 10px;font-size:11px;font-weight:800;white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:5px }
.st-pending    { background:#FFF3E0;color:#C97A00 }
.st-confirmed  { background:#E3F2FD;color:#1E6FCC }
.st-processing { background:#FFF8E1;color:#B07D00 }
.st-ready      { background:#E8F5E9;color:#1E9952 }
.st-done       { background:#F5F5F5;color:#555 }
.st-cancelled  { background:#FFEBEE;color:var(--red) }

/* ════════════════════════════════════════
   PROFILE TAB
════════════════════════════════════════ */
.profile-header {
  background: linear-gradient(160deg, #FFD700 0%, #F5C200 60%, #E8B800 100%);
  padding: calc(env(safe-area-inset-top, 0px) + 44px) 20px 32px;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.profile-header::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(0,0,0,.06);
  pointer-events: none;
  z-index: 0;
}
.profile-header::after {
  content: '';
  position: absolute;
  bottom: -40px; left: -40px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  pointer-events: none;
  z-index: 0;
}

/* Avatar upload */
.pf-avatar-wrap {
  position: relative;
  z-index: 2;
  margin-bottom: 14px;
  width: 96px; height: 96px;
  flex-shrink: 0;
}
.pf-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--blk);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.6);
  transition: opacity .2s;
}
.pf-avatar.loading { opacity: .5 }
.pf-cam-btn {
  position: absolute;
  bottom: 2px; right: 2px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--blk); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: 2.5px solid #fff;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  z-index: 3;
}
.pf-cam-btn:hover { transform: scale(1.12); box-shadow: 0 4px 14px rgba(0,0,0,.35) }
.pf-cam-hint {
  font-size: 11px; font-weight: 600;
  color: rgba(26,26,26,.6);
  margin-bottom: 10px;
  position: relative; z-index: 2;
  letter-spacing: .02em;
}
.pf-hname {
  font-family: 'Outfit', sans-serif;
  font-size: 21px; font-weight: 800; color: var(--blk);
  position: relative; z-index: 2;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  max-width: 280px; word-break: break-word;
}
.pf-hphone {
  font-size: 13px; font-weight: 600; color: rgba(26,26,26,.7);
  position: relative; z-index: 2;
  background: rgba(0,0,0,.08);
  border-radius: 100px;
  padding: 4px 14px;
  display: inline-flex; align-items: center; gap: 5px;
  margin-bottom: 0;
}

.profile-body { padding:20px 16px;display:flex;flex-direction:column;gap:16px }
.pf-card { background:var(--srf);border-radius:var(--r);padding:18px 16px;box-shadow:var(--sh) }
.pf-card-title { font-size:13px;font-weight:800;color:var(--blk);margin-bottom:14px;display:flex;align-items:center;gap:7px }
.pf-msg { font-size:13px;font-weight:600;color:var(--grn);margin-top:10px;min-height:18px }
.logout-btn {
  background:rgba(209,63,31,.06);border:1.5px solid rgba(209,63,31,.15);
  color:var(--red);border-radius:var(--rs);padding:14px;font-size:14px;font-weight:700;
  width:100%;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;gap:9px;font-family:inherit
}
.logout-btn:active { background:rgba(209,63,31,.15) }

/* ════════════════════════════════════════
   CART SHEET
════════════════════════════════════════ */
.shov { position:fixed;inset:0;background:rgba(0,0,0,0);z-index:400;pointer-events:none;transition:background .25s }
.shov.on { background:rgba(0,0,0,.45);pointer-events:all }
.csh  {
  position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);
  width:100%;max-width:480px;background:var(--srf);border-radius:22px 22px 0 0;z-index:500;
  transition:transform .3s cubic-bezier(.32,0,.67,0);
  max-height:92dvh;display:flex;flex-direction:column;overflow:hidden
}
.csh.on { transform:translateX(-50%) translateY(0);transition:transform .3s cubic-bezier(.33,1,.68,1) }
.drag { width:44px;height:4px;border-radius:2px;background:var(--bdr);margin:12px auto 0 }
.shdr { padding:12px 16px 10px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--bdr) }
.shtitle { font-size:16px;font-weight:800;color:var(--blk);flex:1;display:flex;align-items:center;gap:8px }
.cicnt  {
  background:var(--y);color:var(--blk);border-radius:100px;min-width:22px;height:22px;
  padding:0 6px;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center
}
.shclr {
  background:rgba(209,63,31,.07);border:1.5px solid rgba(209,63,31,.13);border-radius:9px;
  padding:6px 11px;font-size:12px;font-weight:700;color:var(--red);cursor:pointer;
  display:flex;align-items:center;gap:5px;transition:background .15s
}
.shclr:active { background:rgba(209,63,31,.15) }
.shx  {
  width:32px;height:32px;background:var(--bg);border-radius:8px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--sub);transition:background .15s
}
.shx:active { background:var(--bdr) }
.shbody { overflow-y:auto;flex:1;padding:14px 16px }
.shft-inner { padding:14px 16px;border-top:1px solid var(--bdr);background:var(--srf) }

/* Cart empty */
.cart-empty { text-align:center;padding:50px 20px;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--sub) }
.cart-empty svg { opacity:.3 }
.ce-title { font-weight:700;font-size:16px;color:var(--ink) }
.ce-sub   { font-size:14px }

/* Order note */
.onbox {
  background:var(--bg);border:1.5px solid var(--bdr);border-radius:var(--rs);
  padding:11px 14px;display:flex;align-items:flex-start;gap:9px;margin-bottom:12px
}
.onbox svg { opacity:.5;margin-top:1px }
.onbox textarea {
  background:none;border:none;flex:1;font-size:14px;font-weight:500;
  color:var(--ink);resize:none;line-height:1.4;min-height:20px
}
.onbox textarea::placeholder { color:#C0BBAA;font-weight:400 }

/* Cart items */
.cil  { display:flex;flex-direction:column;gap:10px;margin-bottom:12px }
.ci   { background:var(--bg);border-radius:var(--rs);padding:12px 13px }
.cir1 { display:flex;align-items:center;gap:11px }
.cimg { width:50px;height:50px;border-radius:10px;object-fit:cover;background:var(--ylt);flex-shrink:0 }
.cimgph {
  width:50px;height:50px;border-radius:10px;background:var(--ylt);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--org);opacity:.5
}
.cinf { flex:1;min-width:0 }
.cin  { font-size:14px;font-weight:700;color:var(--blk) }
.cip  { font-size:13px;font-weight:800;color:var(--org);margin-top:2px }
.cctl { display:flex;align-items:center;gap:2px;flex-shrink:0 }
.cbtn {
  width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .13s;border:none
}
.cbtn.mn { background:rgba(209,63,31,.07);color:var(--red) }
.cbtn.mn:active { background:rgba(209,63,31,.2) }
.cbtn.pl { background:rgba(245,194,0,.15);color:var(--blk) }
.cbtn.pl:active { background:rgba(245,194,0,.4) }
.cbtn.dim { color:var(--bdr);cursor:default;background:transparent;pointer-events:none }
.cdel {
  width:30px;height:30px;border-radius:8px;background:transparent;color:#CCC;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  margin-left:2px;transition:all .13s;border:none
}
.cdel:active { color:var(--red);background:rgba(209,63,31,.08) }
.cqty { width:28px;text-align:center;font-size:14px;font-weight:800;color:var(--blk) }

/* Item note */
.cnote { margin-top:8px }
.cntbtn {
  background:var(--srf);border:1.5px dashed var(--bdr);border-radius:8px;
  padding:6px 12px;font-size:12px;font-weight:600;color:var(--sub);cursor:pointer;
  display:flex;align-items:center;gap:6px;transition:all .15s;width:100%;font-family:inherit
}
.cntbtn svg { opacity:.6 }
.cntbtn.has { border-color:var(--y);color:var(--blk);background:var(--ylt);border-style:solid }
.cntbtn.has svg { opacity:1;color:var(--org) }
.cntwrap { display:none;margin-top:6px }
.cntwrap textarea {
  width:100%;background:var(--srf);border:1.5px solid var(--bdr);border-radius:8px;
  padding:8px 12px;font-size:13px;font-weight:500;color:var(--ink);resize:none;min-height:40px
}
.cntwrap textarea:focus { border-color:var(--y) }

/* Voucher */
.vcrow {
  background:var(--bg);border:1.5px solid var(--bdr);border-radius:var(--rs);
  padding:13px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;
  margin-bottom:12px;transition:border-color .15s;width:100%;font-family:inherit;font-size:14px
}
.vcrow:active { border-color:var(--y) }
.vclbl { flex:1;font-size:14px;font-weight:600;color:var(--sub);display:flex;align-items:center;gap:8px }
.vclbl svg { color:var(--org);opacity:.8 }
.vccv  { color:var(--sub);display:flex;align-items:center;transition:transform .2s }
.vccv.on { transform:rotate(180deg) }
.vcfld    { display:none;margin-top:-4px;margin-bottom:12px;padding:0 2px }
.vcfld.on { display:flex;gap:8px }
.vc-applied {
  flex:1;background:rgba(30,153,82,.07);border:1.5px solid rgba(30,153,82,.25);
  border-radius:var(--rs);padding:10px 14px;font-size:13px;font-weight:700;
  color:var(--grn);display:flex;align-items:center;gap:8px
}
.vc-rm { background:none;border:none;cursor:pointer;color:var(--red);padding:2px;display:flex;align-items:center }

/* Summary */
.csum { border-top:1.5px solid var(--bdr);padding-top:12px }
.csr  { display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:4px 0;color:var(--sub);font-weight:600 }
.csr.grn { color:var(--grn) }
.csr.grn span { display:flex;align-items:center;gap:5px }
.csr.tot { padding-top:10px;margin-top:6px;border-top:1px solid var(--bdr);font-size:20px;font-weight:800;color:var(--blk) }
.csr.tot .amt { color:var(--org) }
.pay-badge { background:var(--ylt);color:var(--blk);border-radius:6px;padding:2px 10px;font-size:12px;font-weight:800 }

/* Checkout button */
.baybtn {
  width:100%;background:linear-gradient(135deg,var(--y) 0%,#FFD740 100%);
  color:var(--blk);border-radius:14px;padding:16px;font-size:16px;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:10px;
  cursor:pointer;transition:all .15s;box-shadow:var(--shm);border:none;font-family:inherit
}
.baybtn:active { filter:brightness(.95);transform:scale(.98) }
.baybtn svg { color:rgba(26,26,26,.6) }
.baytot { background:rgba(0,0,0,.08);border-radius:100px;padding:4px 12px;font-size:13px }


/* ════════════════════════════════════════════════════════════════════════════
   PWA INSTALL BANNER
   ════════════════════════════════════════════════════════════════════════════ */

#pwa-install-banner {
  position: fixed;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 10px);
  left: 12px;
  right: 12px;
  z-index: 9000;
  animation: pwaSlideUp .35s cubic-bezier(.34,1.56,.64,1) both;
}

#pwa-install-banner.pwa-hide {
  animation: pwaSlideDown .25s ease-in both;
}

@keyframes pwaSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes pwaSlideDown {
  from { opacity: 1; transform: translateY(0);    }
  to   { opacity: 0; transform: translateY(20px); }
}

.pwa-banner-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 16px;
  padding: 12px 12px 12px 14px;
  box-shadow:
    0 4px 6px -1px rgba(0,0,0,.08),
    0 10px 30px -4px rgba(0,0,0,.15),
    0 0 0 1px rgba(0,0,0,.06);
}

.pwa-banner-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  object-fit: cover;
}

.pwa-banner-text {
  flex: 1;
  min-width: 0;
}

.pwa-banner-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink, #1a1a1a);
  line-height: 1.2;
}

.pwa-banner-sub {
  font-size: 12px;
  color: var(--sub, #888);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-install-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #F5C200;
  color: #1a1a1a;
  border: none;
  border-radius: 10px;
  padding: 9px 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
}

.pwa-install-btn:active {
  background: #e0b000;
  transform: scale(.96);
}

.pwa-banner-close {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--sub, #888);
  flex-shrink: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.pwa-banner-close:active { background: #f0f0f0; }