/* ============================================================
   Jasdorin.aja — Design System v4 "Premium Coffee"
   Full visual redesign. All IDs / JS logic / data unchanged.
   Every legacy class is still supported.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* legacy tokens (dipakai template inline var(--brown)/var(--coffee)) */
  --brown:#123A2C;
  --coffee:#1E6B4F;
  --ink:#1A2621;
  --cream:#F2F7F1;
  --green:#12996B;
  --red:#D0344A;
  --radius:18px;
  /* new tokens */
  --espresso:#0C241B;
  --caramel:#C9972E;
  --amber:#E3B341;
  --card:#FFFEFA;
  --muted:#7E8C82;
  --line:#DDE7DC;
  --green-soft:#E2F3EA;
  --red-soft:#FCEBEE;
  --shadow-sm:0 1px 3px rgba(18,58,44,.07),0 1px 2px rgba(18,58,44,.05);
  --shadow-md: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);
}

*{margin:0;padding:0;box-sizing:border-box;font-family:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);-webkit-tap-highlight-color:transparent}
::selection{background:var(--amber);color:var(--espresso)}

/* view transition — replay tiap kali tab ditampilkan */
#view-home,#view-kategori,#view-lokasi,#view-menu,#view-cart{animation:fadeUp .34s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.container{max-width:480px;margin:0 auto;padding:16px 16px 108px;position:relative}

/* ===== HERO HEADER ===== */
header.top{
  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;border-radius:26px;padding:26px 18px 24px;text-align:center;
  box-shadow:0 18px 40px rgba(14,59,44,.32);position:relative;overflow:hidden;
}
header.top::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}
header.top::after{content:'';position:absolute;bottom:-64px;left:-34px;width:130px;height:130px;border-radius:50%;background:rgba(230,162,60,.15);pointer-events:none}
header.top>*{position:relative;z-index:1}
header.top img.logo{height:52px;width:52px;object-fit:cover;border-radius:14px;box-shadow:0 6px 16px rgba(18,58,44,.22),0 1px 3px rgba(18,58,44,.14);margin-bottom:6px;background:#FBF3DF}
header.top h1{font-size:1.32rem;font-weight:800;letter-spacing:.2px;text-shadow:0 2px 8px rgba(0,0,0,.22)}
header.top p.sub{font-size:.74rem;opacity:.92;margin-top:4px;font-weight:500}
header.top .change{position:absolute;top:12px;right:14px;font-size:.68rem;background:rgba(255,255,255,.2);padding:5px 10px;border-radius:99px;color:#fff;text-decoration:none}

/* compact hero untuk sub-view */
header.top.compact{padding:18px 16px 17px;border-radius:22px;box-shadow:0 12px 28px rgba(14,59,44,.26)}
header.top.compact h1{font-size:1.08rem}

.hero-chips{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:13px}
.hero-chips span{font-size:.58rem;font-weight:700;letter-spacing:.2px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);padding:4px 10px;border-radius:99px;backdrop-filter:blur(4px)}

/* ===== CATATAN / NOTE ===== */
.info-note{
  background:linear-gradient(135deg,#FBF3DC,#F5EACB);
  border:1px solid #E3D5A6;border-left:4px solid var(--amber);
  border-radius:14px;padding:11px 14px;font-size:.72rem;font-weight:600;
  margin:14px 0 4px;color:#7A6420;box-shadow:var(--shadow-sm);
}

/* ===== BUTTONS ===== */
.btn{display:block;width:100%;padding:13px;border:0;border-radius:16px;font-weight:800;cursor:pointer;font-size:.95rem;transition:transform .16s ease,box-shadow .2s ease,filter .2s ease,background .2s}
.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{filter:brightness(1.06);box-shadow:0 12px 26px rgba(168,123,31,.42)}
.btn-outline{background:var(--card);border:1.5px solid var(--coffee);color:var(--coffee);box-shadow:var(--shadow-sm)}
.btn-outline:hover{background:#EDF4EF}

/* ===== SEARCH ===== */
.search{
  width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:16px;
  font-size:.9rem;font-weight:500;margin:12px 0;background:var(--card);
  box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s;color:var(--ink);
}
.search::placeholder{color:#A3B2A9}
.search:focus{outline:0;border-color:var(--caramel);box-shadow:0 0 0 4px rgba(201,151,46,.13),var(--shadow-sm)}

/* ===== OUTLET CARD ===== */
.outlet-card{
  background:var(--card);border-radius:var(--radius);padding:14px;display:flex;gap:13px;
  margin-bottom:12px;box-shadow:var(--shadow-sm);cursor:pointer;
  border:1px solid rgba(221,231,220,.6);
  transition:transform .18s ease,box-shadow .22s ease;
}
.outlet-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.outlet-card:active{transform:scale(.98)}
.outlet-card img{width:66px;height:66px;border-radius:14px;object-fit:cover;background:#E4EEE6;box-shadow:var(--shadow-sm)}
.outlet-card h3{font-size:.92rem;color:var(--brown);font-weight:800;line-height:1.3}
.badge-open,.badge-closed{display:inline-block;font-size:.62rem;font-weight:800;padding:3px 9px;border-radius:99px;letter-spacing:.3px;margin-top:3px}
.badge-open{background:var(--green-soft);color:#0F6B47;box-shadow:inset 0 0 0 1px rgba(18,153,107,.25)}
.badge-closed{background:var(--red-soft);color:#C0263E;box-shadow:inset 0 0 0 1px rgba(208,52,74,.22)}
.outlet-card p.addr{font-size:.7rem;color:var(--muted);margin:5px 0 2px;line-height:1.45}
.outlet-card p.hours{font-size:.7rem;color:var(--coffee);font-weight:700}

/* ===== CATEGORY TABS ===== */
.cat-tabs{display:flex;gap:8px;overflow-x:auto;padding:12px 2px;position:sticky;top:0;background:rgba(242,247,241,.96);backdrop-filter:blur(10px);z-index:10;scrollbar-width:none}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tab{
  white-space:nowrap;padding:8px 16px;border-radius:99px;background:var(--card);
  border:1.5px solid var(--line);font-size:.76rem;font-weight:700;color:var(--muted);
  cursor:pointer;transition:all .22s ease;box-shadow:var(--shadow-sm);
}
.cat-tab:hover{border-color:var(--caramel);color:var(--coffee)}
.cat-tab.active{background:var(--grad-coffee);color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(22,87,63,.32)}

.menu-title{font-size:1.08rem;color:var(--brown);margin:14px 0 3px;font-weight:800}
.menu-count{font-size:.72rem;color:var(--muted);margin-bottom:12px;font-weight:500}

/* ===== PRODUCT CARD ===== */
.product-card{
  background:var(--card);border-radius:var(--radius);padding:14px;display:flex;gap:13px;
  margin-bottom:12px;box-shadow:var(--shadow-sm);border:1px solid rgba(221,231,220,.55);
  transition:transform .18s ease,box-shadow .22s ease;
}
.product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.product-card img{width:78px;height:78px;border-radius:14px;object-fit:cover;background:#E4EEE6;box-shadow:var(--shadow-sm)}
.product-card h4{font-size:.88rem;color:var(--ink);font-weight:800;line-height:1.35}
.product-card p.desc{font-size:.68rem;color:var(--muted);margin:4px 0 3px;line-height:1.45}
.price{font-weight:800;font-size:.98rem;color:var(--espresso)}
.price.is-promo{color:var(--red)}
.price-original{font-size:.72rem;color:#9DACA2;text-decoration:line-through;margin-left:6px;font-weight:600}
.promo-tag{
  display:inline-block;background:linear-gradient(135deg,#2E9E6B,#1F7A50);color:#fff;
  font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  padding:3px 8px;border-radius:6px;vertical-align:middle;margin-left:4px;
  box-shadow:0 3px 8px rgba(31,122,80,.3);
}
.add-btn{
  margin-left:auto;background:var(--grad-caramel);color:#fff;border:0;border-radius:99px;
  font-size:.68rem;font-weight:800;letter-spacing:.3px;padding:8px 15px;cursor:pointer;
  white-space:nowrap;box-shadow:0 6px 14px rgba(168,123,31,.32);
  transition:transform .16s ease,filter .2s;
}
.add-btn:hover{filter:brightness(1.07)}
.add-btn:active{transform:scale(.92)}

/* ===== BACK LINK ===== */
.back-link{
  display:inline-flex;align-items:center;gap:6px;color:var(--coffee);font-weight:800;
  font-size:.78rem;text-decoration:none;margin-bottom:10px;background:var(--card);
  border:1px solid var(--line);padding:8px 14px;border-radius:99px;box-shadow:var(--shadow-sm);
  transition:background .2s,transform .16s;
}
.back-link:hover{background:#EDF4EF}
.back-link:active{transform:scale(.96)}

footer{text-align:center;font-size:.68rem;color:var(--muted);padding:18px 0 8px;line-height:1.6;font-weight:500}

/* ===== MODAL ===== */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(8,28,21,.55);backdrop-filter:blur(5px);z-index:50;overflow-y:auto}
.modal-bg.show{display:block;animation:fadeIn .25s ease}
.modal{
  background:var(--card);max-width:480px;margin:44px auto;border-radius:24px;padding:24px 20px;
  position:relative;box-shadow:var(--shadow-lg);
  animation:popIn .34s cubic-bezier(.34,1.4,.64,1);
}
@keyframes popIn{from{opacity:0;transform:translateY(26px) scale(.95)}to{opacity:1;transform:none}}
.modal h2{color:var(--brown);font-size:1.08rem;margin-bottom:14px;text-align:center;font-weight:800}
.modal .close{
  position:absolute;top:12px;right:12px;font-size:1.05rem;cursor:pointer;color:var(--muted);
  background:#EAF1EC;border:0;width:32px;height:32px;border-radius:50%;
  transition:transform .2s,background .2s;line-height:1;
}
.modal .close:hover{transform:rotate(90deg);background:#E4EDE6}

.best-item{display:flex;gap:13px;align-items:center;padding:11px 2px;border-bottom:1px solid #E4EEE6}
.best-item:last-child{border-bottom:0}
.best-item img{width:58px;height:58px;border-radius:14px;object-fit:cover;box-shadow:var(--shadow-sm)}

.fee-card{
  border:1px solid var(--line);border-left:4px solid var(--caramel);
  border-radius:16px;padding:13px 14px;margin-bottom:10px;background:#FBFDF9;
  font-size:.85rem;box-shadow:var(--shadow-sm);
}
.wifi-pass{
  background:linear-gradient(135deg,#F9F4E0,#EFE8D0);border:1.5px dashed var(--caramel);
  border-radius:16px;padding:14px;text-align:center;font-weight:800;font-size:1.08rem;
  letter-spacing:1.5px;color:var(--brown);margin:8px 0;
}
.contact a{display:block;text-decoration:none;text-align:center;padding:15px;border-radius:16px;font-weight:800;margin:11px 0;transition:transform .16s,box-shadow .2s}
.contact a:active{transform:scale(.97)}
.contact .wa{background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;box-shadow:0 8px 20px rgba(18,140,126,.32)}
.contact .ch{background:var(--green-soft);color:#0F6B47;border:1.5px solid #25D366}
.contact .copy-num{margin:10px 0 0;font-size:.78rem;font-weight:700;color:var(--coffee);background:var(--card);border:1.5px dashed var(--caramel);border-radius:14px;padding:10px 12px;text-align:center;cursor:pointer;user-select:none}
.contact .copy-num:hover{background:#EDF4EF}

/* ===== HOME MENU GRID ===== */
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.menu-item{
  background:var(--card);border-radius:18px;padding:16px 10px 14px;text-align:center;
  box-shadow:var(--shadow-sm);cursor:pointer;border:1px solid rgba(221,231,220,.55);
  transition:transform .18s ease,box-shadow .22s ease;
}
.menu-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.menu-item:active{transform:scale(.96)}
.menu-item .icon{
  font-size:1.45rem;width:48px;height:48px;line-height:48px;margin:0 auto 9px;
  border-radius:15px;background:linear-gradient(135deg,#EDF4EF,#DCE9E0);
  box-shadow:inset 0 0 0 1px rgba(201,151,46,.14);
}
.menu-item h4{font-size:.76rem;margin:0 0 3px;color:var(--brown);font-weight:800;line-height:1.3}
.menu-item p{font-size:.64rem;color:var(--muted);line-height:1.4;font-weight:500}

.loading{text-align:center;padding:34px 10px;color:var(--muted);font-size:.85rem;line-height:1.7;animation:fadeIn .3s ease}
.skel{background:linear-gradient(90deg,#E2EBE4,#EFF5F0,#E2EBE4);background-size:200% 100%;animation:sh 1.2s infinite;border-radius:16px;height:92px;margin-bottom:11px}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== SECTION TITLES ===== */
.sec-title{font-size:1.02rem;color:var(--brown);margin:24px 0 3px;text-align:center;font-weight:800}
.sec-sub{font-size:.72rem;color:var(--muted);margin-bottom:12px;text-align:center;font-weight:500}

/* ===== BOTTOM NAV (floating modern) ===== */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,253,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(18,58,44,.09);display:flex;gap:4px;
  padding:9px 10px calc(9px + env(safe-area-inset-bottom));z-index:40;
  box-shadow:0 -10px 30px rgba(18,58,44,.10);
}
.bottom-nav .nav-btn{
  flex:1;text-align:center;padding:7px 4px 8px;font-size:.62rem;font-weight:800;
  color:#7E8C82;cursor:pointer;position:relative;border-radius:15px;
  transition:color .2s ease,background .25s ease;
  letter-spacing:.2px;
}
.bottom-nav .nav-btn .ic{display:block;font-size:1.28rem;margin-bottom:2px;transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.bottom-nav .nav-btn:hover{color:var(--coffee)}
.bottom-nav .nav-btn.active{color:var(--coffee);background:linear-gradient(180deg,rgba(201,151,46,.16),rgba(201,151,46,.05))}
.bottom-nav .nav-btn.active .ic{transform:translateY(-1px) scale(1.16)}
.bottom-nav .nav-btn.active::after{
  content:'';position:absolute;top:4px;left:50%;transform:translateX(-50%);
  width:20px;height:3px;border-radius:99px;background:var(--grad-caramel);
}
.nav-badge{
  position:absolute;top:1px;right:calc(50% - 26px);background:var(--red);color:#fff;
  font-size:.55rem;font-weight:800;border-radius:99px;padding:2px 6px;
  box-shadow:0 3px 8px rgba(208,52,74,.4);border:1.5px solid var(--card);
}

/* ===== KERANJANG ===== */
.cart-item{
  background:var(--card);border-radius:var(--radius);padding:14px;display:flex;gap:13px;
  margin-bottom:12px;box-shadow:var(--shadow-sm);border:1px solid rgba(221,231,220,.55);
}
.cart-item img{width:62px;height:62px;border-radius:14px;object-fit:cover;background:#E4EEE6;box-shadow:var(--shadow-sm)}
.cart-item h4{font-size:.86rem;font-weight:800;line-height:1.35}
.qty-box{display:inline-flex;align-items:center;gap:11px;background:#EAF1EC;border-radius:99px;padding:5px 11px;box-shadow:inset 0 0 0 1px rgba(221,231,220,.7)}
.qty-box b{font-size:.92rem;min-width:16px;text-align:center}
.qty-btn{
  width:27px;height:27px;border-radius:50%;border:1.5px solid var(--line);
  background:var(--card);font-weight:800;cursor:pointer;font-size:.9rem;line-height:1;
  transition:transform .15s,background .2s;box-shadow:var(--shadow-sm);
}
.qty-btn:hover{background:#EDF4EF}
.qty-btn:active{transform:scale(.88)}
.qty-btn.del{border-color:#F0CDD3;color:#C0263E;background:var(--red-soft)}

.cart-sum{
  background:var(--card);border-radius:22px;padding:18px 16px;margin-top:14px;
  box-shadow:var(--shadow-md);border:1px solid rgba(221,231,220,.55);
}
.sum-row{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);padding:5px 0;font-weight:500}
.sum-row b{color:var(--ink);font-weight:800}
.sum-row.green{color:#0F6B47}.sum-row.green b{color:#0F6B47}
.sum-row.total{border-top:1.5px dashed var(--line);margin-top:8px;padding-top:12px;font-size:.92rem;color:var(--brown);font-weight:700}
.sum-row.total b{color:var(--coffee);font-size:1.12rem;font-weight:800}

/* ===== TOAST ===== */
.toast{
  position:fixed;bottom:112px;left:50%;
  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;
  opacity:0;transition:all .32s cubic-bezier(.34,1.56,.64,1);z-index:60;
  pointer-events:none;white-space:nowrap;box-shadow:0 12px 30px rgba(12,36,27,.35);
  border:1px solid rgba(255,255,255,.12);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}

@media(max-width:500px){
  .modal{margin:18px 12px}
}

/* ============================================================
   v4.1 — RESPONSIVE DESKTOP
   Mobile (<768px) sepenuhnya tidak berubah. Di layar besar:
   container melebar, list jadi grid multi-kolom, bottom nav
   jadi pill mengambang. Murni CSS — logika & data tak tersentuh.
   ============================================================ */
@media(min-width:768px){
  .container{max-width:940px;padding:24px 24px 130px}
  header.top{padding:36px 28px 32px;border-radius:30px}
  header.top h1{font-size:1.7rem}
  header.top p.sub{font-size:.85rem}
  header.top img.logo{height:64px;width:64px}
  header.top.compact{padding:24px 24px 22px}
  header.top.compact h1{font-size:1.25rem}
  .hero-chips span{font-size:.66rem;padding:5px 13px}

  .info-note{font-size:.78rem;padding:13px 16px}

  /* input & tombol utama jadi proporsional (tidak full lebar layar) */
  .search{max-width:600px;margin:16px auto 18px;font-size:.95rem;padding:14px 18px}
  .btn{max-width:600px;margin-left:auto;margin-right:auto}
  .modal .btn,.cart-sum .btn{max-width:none}

  /* daftar jadi grid 2 kolom */
  #home-outlet-list,#outlet-list,#mk-list,#product-list,#cart-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
  #outlet-list>p,#home-outlet-list>p,.loading{grid-column:1/-1}
  .outlet-card,.product-card,.cart-item{margin-bottom:0}
  .outlet-card img{width:78px;height:78px}
  .product-card img{width:86px;height:86px}

  /* menu grid home jadi 4 kolom */
  .menu-grid{grid-template-columns:repeat(4,1fr);gap:14px}
  .menu-item .icon{font-size:1.7rem;width:56px;height:56px;line-height:56px;border-radius:18px}

  /* ringkasan keranjang tetap nyaman dibaca */
  .cart-sum{max-width:760px;margin:18px auto 0;padding:22px 20px}

  .sec-title{font-size:1.15rem;margin-top:30px}
  .sec-sub{font-size:.78rem}
  .menu-title{font-size:1.18rem}
  .cat-tab{font-size:.8rem;padding:9px 18px}
  .toast{bottom:104px}
  .modal{max-width:520px;margin:60px auto;border-radius:28px}
}

@media(min-width:1200px){
  .container{max-width:1140px;padding:28px 32px 140px}
  #home-outlet-list,#outlet-list,#mk-list,#product-list,#cart-list{grid-template-columns:repeat(3,1fr);gap:16px}
  #cart-list{grid-template-columns:1fr 1fr}
  header.top{padding:42px 32px 36px}
  header.top h1{font-size:1.9rem}
  .search,.btn{max-width:640px}
}

/* ====== v6: voucher picker + split bill ====== */
.outlet-bar{display:flex;align-items:center;gap:6px;background:var(--card,#FFFEFA);border:1.5px solid var(--line,#DDE7DC);border-radius:12px;padding:10px 14px;margin-bottom:12px;font-size:.8rem;font-weight:800;color:var(--brown,#123A2C)}
.outlet-bar small{font-weight:600;color:var(--muted,#7E8C82);font-size:.64rem}
.warn-box{background:#FCEBEE;border:1.5px solid #EFC6CD;border-radius:12px;padding:10px 14px;margin-bottom:12px;font-size:.72rem;font-weight:700;color:#C0263E;line-height:1.55}
.v-sec{margin-bottom:4px}
.v-sec-t{font-size:.72rem;font-weight:800;color:var(--brown,#123A2C);margin:10px 0 8px;text-transform:uppercase;letter-spacing:.4px}
.v-picker{display:flex;flex-direction:column;gap:8px}
.v-opt{border:1.5px solid var(--line,#DDE7DC);border-radius:12px;padding:10px 12px;background:#fff;transition:all .15s ease}
.v-opt.sel{border-color:var(--coffee,#1E6B4F);background:var(--green-soft,#E2F3EA);box-shadow:0 0 0 3px rgba(30,107,79,.12)}
.v-opt:not(.lock):hover{border-color:var(--caramel,#C9972E)}
.v-opt.lock{opacity:.5}
.v-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.v-name{font-size:.8rem;font-weight:800;color:var(--brown,#123A2C)}
.v-fee{font-size:.64rem;font-weight:800;color:#0F6B47;background:var(--green-soft,#E2F3EA);padding:2px 8px;border-radius:99px;white-space:nowrap}
.v-meta{font-size:.66rem;color:var(--muted,#7E8C82);margin-top:4px;line-height:1.5}
.v-meta b{color:var(--coffee,#1E6B4F)}
.v-lock{font-size:.62rem;color:#C0263E;font-weight:700;margin-top:4px}
.v-badge{display:inline-block;font-size:.56rem;font-weight:800;background:linear-gradient(135deg,#E3B34C,#A87B1F);color:#fff;padding:2px 8px;border-radius:99px;margin-left:4px;vertical-align:middle}
.split-card{border:1.5px solid var(--caramel,#C9972E);border-radius:14px;padding:12px 14px;background:#fff;margin-top:12px}
.split-head{display:flex;justify-content:space-between;align-items:center}
.split-title{font-size:.8rem;font-weight:800;color:var(--brown,#123A2C)}
.split-sub{font-size:.68rem;color:var(--ink,#1A2621);margin-top:6px;line-height:1.6}
.split-sub b{color:var(--coffee,#1E6B4F)}
.switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;cursor:pointer;inset:0;background:#CBD5CD;border-radius:99px;transition:.2s}
.switch span:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked + span{background:var(--coffee,#1E6B4F)}
.switch input:checked + span:before{transform:translateX(20px)}
.order-box{border:1.5px dashed var(--line,#DDE7DC);border-radius:12px;padding:10px 12px;margin-top:10px;background:var(--cream,#F2F7F1)}
.o-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.o-head span:first-child{font-size:.72rem;font-weight:800;color:var(--brown,#123A2C)}
.o-tag{font-size:.6rem;font-weight:800;color:#0F6B47;background:var(--green-soft,#E2F3EA);padding:2px 8px;border-radius:99px;white-space:nowrap}
.o-item{font-size:.68rem;color:var(--ink,#1A2621);padding:2px 0}
.o-item small{color:var(--muted,#7E8C82)}
.o-sum{font-size:.66rem;color:var(--muted,#7E8C82);margin-top:6px;padding-top:6px;border-top:1px dashed var(--line,#DDE7DC)}
.o-sum b{color:var(--coffee,#1E6B4F)}
@media(min-width:768px){
  .v-picker{gap:10px}
  .v-opt{padding:12px 14px}
  .order-box{padding:12px 14px}
}

/* ====== v7: JAM OPERASIONAL LIVE ====== */
.hours-banner{
  border-radius:14px;padding:11px 14px;margin:10px 0 4px;font-size:.74rem;font-weight:700;line-height:1.6;
  background:#FCEBEE;border:1.5px solid #EFC6CD;color:#C0263E;
  animation:fadeIn .25s ease;
}
.hours-banner.ok{
  background:#E2F3EA;border-color:#BFE5D2;color:#0F6B47;
}
.hours-banner.amber{
  background:#FBF3DF;border-color:#EBD9A8;color:#8A6519;
}
.badge-amber{
  display:inline-block;font-size:.62rem;font-weight:800;padding:3px 9px;border-radius:99px;letter-spacing:.3px;margin-top:3px;
  background:#FBF3DF;color:#8A6519;box-shadow:inset 0 0 0 1px rgba(190,151,58,.3);
}
.hours-note{
  display:inline-block;font-size:.6rem;font-weight:700;color:#7e8c82;margin-left:6px;margin-top:3px;
}
.hours-note.amber{color:#8A6519}
.add-btn.disabled{
  background:#E8E4DC;color:#9A948A;box-shadow:none;cursor:not-allowed;filter:none;
}
@media(min-width:768px){
  .hours-banner{font-size:.78rem;border-radius:16px}
  .hours-note{font-size:.64rem}
}


/* ============================================================
   v8 — Modal Kustomisasi Produk + Jam Pickup
   ============================================================ */
.cm-ov{position:fixed;inset:0;background:rgba(18,58,44,.55);backdrop-filter:blur(4px);display:none;align-items:flex-end;justify-content:center;z-index:55}
.cm-ov.show{display:flex}
.cm{background:var(--card);width:100%;max-width:460px;border-radius:22px 22px 0 0;padding:16px 16px 14px;max-height:90vh;overflow-y:auto;animation:cmUp .28s cubic-bezier(.34,1.3,.64,1)}
@keyframes cmUp{from{transform:translateY(50px);opacity:.4}to{transform:none;opacity:1}}
.cm-grip{width:38px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 12px}
.cm-head{display:flex;align-items:center;gap:12px}
.cm-head img{width:64px;height:64px;border-radius:16px;object-fit:cover;box-shadow:var(--shadow-sm);background:#F2F7F1;flex-shrink:0}
.cm-title{font-size:.98rem;font-weight:800;color:var(--brown);line-height:1.3;padding-right:26px}
.cm-price{font-size:.86rem;font-weight:800;color:var(--coffee);margin-top:3px;line-height:1.5}
.cm-sub{font-size:.62rem;color:var(--muted);font-weight:600}
.ogrp{margin-top:13px}
.ogrp .lbl{font-size:.6rem;font-weight:800;letter-spacing:1.2px;color:var(--muted);margin-bottom:7px;text-transform:uppercase}
.ogrp .hint{font-size:.58rem;color:#C0263E;margin-left:4px;letter-spacing:0;text-transform:none;font-weight:700}
.opts{display:flex;flex-wrap:wrap;gap:7px}
.opt{border:1.5px solid var(--line);background:#F6F8F5;color:#5B6B60;border-radius:10px;padding:8px 12px;font-size:.74rem;font-weight:600;cursor:pointer;transition:all .15s;user-select:none}
.opt:active{transform:scale(.95)}
.opt.sel{border-color:var(--coffee);background:var(--green-soft);color:#0F6B47;font-weight:800}
.opt.dis{opacity:.38;cursor:not-allowed}
.qty-row{display:flex;align-items:center;gap:14px;margin-top:14px}
.qty-row .lbl{font-size:.6rem;font-weight:800;letter-spacing:1.2px;color:var(--muted);margin-right:auto}
.qbtn{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:#F6F8F5;font-size:16px;font-weight:800;color:var(--brown);cursor:pointer;flex-shrink:0}
.qbtn:active{transform:scale(.92)}
.cqty{font-size:.95rem;font-weight:800;min-width:22px;text-align:center}
.note-inp{width:100%;margin-top:12px;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:.78rem;font-family:inherit;color:var(--ink);background:#F6F8F5;box-sizing:border-box}
.note-inp:focus{outline:none;border-color:var(--coffee)}
.m-btns{display:flex;gap:10px;margin-top:14px}
.btn-cancel{flex:1;padding:12px;border:0;border-radius:12px;background:var(--line);color:#5B6B60;font-size:.8rem;font-weight:700;cursor:pointer;font-family:inherit}
.btn-add{flex:1.6;padding:12px;border:0;border-radius:12px;background:var(--brown);color:var(--card);font-size:.8rem;font-weight:800;cursor:pointer;font-family:inherit;box-shadow:0 8px 20px rgba(18,58,44,.25)}
.btn-add:active,.btn-cancel:active{transform:scale(.98)}

/* v8: keranjang — opsi & catatan per item */
.cfg-tag{display:inline-block;background:var(--green-soft);color:#0F6B47;border:1px solid #BFE3CF;border-radius:8px;padding:2px 8px;font-size:.6rem;font-weight:700;margin-top:3px;line-height:1.6}
.note-line{font-size:.68rem;color:#8A6519;background:#FBF3DF;border:1px dashed var(--caramel);border-radius:8px;padding:5px 8px;margin-top:5px;line-height:1.5}

/* v8: jam pickup */
.pk-sec{margin:4px 0 12px;padding:12px;border:1.5px solid var(--line);border-radius:14px;background:#FBFDF9}
.pk-t{display:flex;align-items:center;gap:6px;font-size:.6rem;font-weight:800;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase;margin-bottom:8px}
.pk-t .ic{font-size:.75rem}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;max-height:172px;overflow-y:auto;padding:2px}
.slot{border:1.5px solid var(--line);background:#F6F8F5;border-radius:9px;padding:8px 2px;font-size:.68rem;font-weight:700;color:#5B6B60;text-align:center;cursor:pointer;transition:all .15s}
.slot:active{transform:scale(.95)}
.slot.now{grid-column:1/-1;background:var(--green-soft);border-color:#9CCDB6;color:#0F6B47}
.slot.sel{background:var(--coffee);border-color:var(--coffee);color:#fff}
.slot.xmid{border-style:dashed}
.pk-info{font-size:.62rem;color:var(--muted);margin-top:8px;line-height:1.7}
@media(max-width:500px){
  .slots{grid-template-columns:repeat(4,1fr)}
}

/* ============================================================
   v9 — UI/UX UPGRADE (CingOps integration)
   Navbar SVG pill · nama pemesan · sold-out · polish
   ============================================================ */

/* ---- BOTTOM NAV (redesign: floating pill, ikon SVG) ---- */
.bottom-nav{
  position:fixed;bottom:10px;left:50%;transform:translateX(-50%);
  width:calc(100% - 28px);max-width:452px;
  background:rgba(255,254,250,.92);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(18,58,44,.10);
  border-radius:26px;
  display:flex;gap:2px;
  padding:7px 8px;
  z-index:40;
  box-shadow:0 14px 38px rgba(12,36,27,.24),0 2px 8px rgba(12,36,27,.10);
}
.bottom-nav::before{
  content:'';position:absolute;inset:0;border-radius:26px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 40%);
}
.bottom-nav .nav-btn{
  flex:1;text-align:center;padding:5px 2px 4px;font-size:.6rem;font-weight:800;
  color:#8A978C;cursor:pointer;position:relative;border-radius:20px;
  transition:color .2s ease,background .25s ease,transform .18s ease;
  letter-spacing:.3px;
}
.bottom-nav .nav-btn:active{transform:scale(.93)}
.bottom-nav .nav-btn:hover{color:var(--coffee)}
.bottom-nav .nav-btn .nav-pill{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:30px;margin:0 auto 3px;border-radius:12px;
  transition:background .25s ease,box-shadow .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1);
}
.bottom-nav .ic-svg{width:19px;height:19px;stroke-width:2.1}
.bottom-nav .nav-btn.active{color:#0E4A34}
.bottom-nav .nav-btn.active .nav-pill{
  background:var(--grad-coffee);
  box-shadow:0 6px 14px rgba(14,59,45,.35);
  transform:translateY(-2px);
}
.bottom-nav .nav-btn.active .nav-pill .ic-svg{stroke:#F3E9CF}
.nav-badge{
  position:absolute;top:-4px;right:calc(50% - 24px);
  background:var(--red);color:#fff;
  font-size:.55rem;font-weight:800;border-radius:99px;padding:2px 6px;
  box-shadow:0 3px 8px rgba(208,52,74,.45);border:1.5px solid var(--card);
  min-width:17px;
}
.nav-badge::after{content:''}

/* ---- NAMA PEMESAN (keranjang) ---- */
.nama-box{
  background:linear-gradient(135deg,#FBF3DC 0%,#F5EACB 55%,#EFE0BC 100%);
  border:1.5px solid #E3D5A6;border-left:5px solid var(--caramel);
  border-radius:16px;padding:13px 14px 12px;margin-bottom:12px;
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.nama-box::after{content:'';position:absolute;top:-30px;right:-30px;width:90px;height:90px;border-radius:50%;background:rgba(201,151,46,.14);pointer-events:none}
.nama-box .lbl{font-size:.62rem;font-weight:800;letter-spacing:1.1px;color:#7A6420;text-transform:uppercase;margin-bottom:8px;position:relative;z-index:1}
.nama-inp{
  width:100%;border:1.5px solid #E3D5A6;border-radius:11px;padding:11px 13px;
  font-size:.85rem;font-weight:700;font-family:inherit;color:var(--ink);
  background:rgba(255,255,255,.92);box-sizing:border-box;position:relative;z-index:1;
  transition:border-color .2s,box-shadow .2s;
}
.nama-inp::placeholder{color:#C9B988;font-weight:600}
.nama-inp:focus{outline:none;border-color:var(--caramel);box-shadow:0 0 0 3px rgba(201,151,46,.18)}
.nama-inp.shake{animation:shakeX .5s ease}
@keyframes shakeX{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
.hint-nama{font-size:.62rem;color:#8A7433;margin-top:7px;font-weight:600;line-height:1.5;position:relative;z-index:1}

/* ---- SOLD OUT ---- */
.product-card.soldout{opacity:.62}
.product-card.soldout img{filter:grayscale(.85)}
.so-tag{
  display:inline-block;background:var(--red-soft);color:#C0263E;border:1px solid #F0CDD3;
  border-radius:6px;padding:1.5px 7px;font-size:.56rem;font-weight:800;margin-left:5px;letter-spacing:.4px;
}
.add-btn.disabled{opacity:.5;cursor:not-allowed}

/* ---- MODAL KUSTOMISASI (polish) ---- */
.cm-load{display:flex;align-items:center;justify-content:center;gap:8px;padding:34px 0;font-size:.8rem;font-weight:700;color:var(--muted)}
.cm-load::before{content:'';width:16px;height:16px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--coffee);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cm .ogrp .lbl .hint{letter-spacing:0;text-transform:none}
.cm-ov.show .cm{animation:cmUp .3s cubic-bezier(.34,1.3,.64,1)}

/* ---- badge cart pulse ---- */
#cart-badge:not([style*="none"]){
  animation:badgePulse 2.4s ease-in-out infinite;
}
@keyframes badgePulse{
  0%,100%{box-shadow:0 3px 8px rgba(208,52,74,.45)}
  50%{box-shadow:0 3px 8px rgba(208,52,74,.45),0 0 0 5px rgba(208,52,74,.18)}
}

/* ---- responsive ---- */
@media(max-width:500px){
  .bottom-nav{width:calc(100% - 20px);bottom:8px;border-radius:24px;padding:6px 6px}
  .bottom-nav .nav-btn{font-size:.56rem}
  .bottom-nav .nav-btn .nav-pill{width:34px;height:27px}
  .bottom-nav .ic-svg{width:17px;height:17px}
}
@media(min-width:520px){
  .container{padding-bottom:118px}
}

/* ---- print-friendly ---- */
@media print{
  .bottom-nav{display:none}
}

/* ====== v9: LEVEL ES + EDIT ITEM KERANJANG ====== */
.cm-edit-banner{margin:2px 0 8px;padding:9px 12px;background:#FFF7E0;border:1.5px dashed #E4B94C;border-radius:12px;font-size:.72rem;font-weight:800;color:#8A6D1F;text-align:center}
.qty-btn.edit{border-color:#CDE7D8;color:#0F6B47;background:#EAF5EF;font-weight:800}
.qty-btn.edit:hover{background:#DDF0E5}
.qty-btn.edit:active{transform:scale(.88)}
.edit-ink{font-size:.6rem;opacity:.5}
.cart-editable-title{cursor:pointer}
.cart-editable-title:hover{color:var(--coffee)}
.cart-editable-img{cursor:pointer}
.cart-editable-img:active{transform:scale(.95)}