/* ============================================================
   css/03-modal-cart.css  (urutan load 3 dari 8)
   Isi: Item modal, cart drawer, form order, toast, float cart hint, fly animation, no-results, confirm modal, bottom sheet cart, layar besar.
   Pecahan dari style.css lama. Urutan file = urutan eksekusi/cascade, jangan ditukar.
   ============================================================ */

/* ─────────── ITEM MODAL (bottom sheet) ─────────── */
.item-modal-overlay{
  display:none;
  position:fixed;inset:0;z-index:520;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(6px);
  align-items:flex-end;justify-content:center;
  animation:fadeIn .2s ease;
}
.item-modal-overlay.open{display:flex}
.item-modal{
  background:var(--surface);
  border-top:2px solid var(--caramel);
  border-radius:24px 24px 0 0;
  width:100%;max-width:480px;
  max-height:90vh;overflow-y:auto;
  animation:slideUp .3s cubic-bezier(.4,0,.2,1);
  position:relative;
  -webkit-overflow-scrolling:touch;
}
.item-modal::-webkit-scrollbar{width:4px}
.item-modal::-webkit-scrollbar-thumb{background:var(--border-glow);border-radius:2px}
.item-modal::before{
  content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:44px;height:4px;border-radius:2px;background:var(--border-glow);
  z-index:2;
}
.item-modal-close{
  position:absolute;top:12px;right:12px;
  width:38px;height:38px;border-radius:50%;
  background:var(--red);
  color:white;
  font-size:18px;font-weight:900;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  z-index:5;
  box-shadow:0 4px 12px rgba(224,82,82,0.5);
  border:2px solid rgba(255,255,255,0.15);
  transition:transform .15s, background .2s;
}
.item-modal-close:active{
  transform:scale(.92);
  background:#C04040;
}

.modal-image{
  width:100%;height:200px;
  background:var(--surface2);
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--border);
}
.modal-body{padding:18px 18px 12px}
.modal-title{
  font-family:'Familjen Grotesk','Plus Jakarta Sans',system-ui,sans-serif;font-size:22px;font-weight:700;
  color:var(--caramel-light);line-height:1.2;
  margin-bottom:6px;
}
.modal-price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:18px}
.modal-price-old{
  font-size:12px;color:var(--muted);
  text-decoration:line-through;
}
.modal-price-new{
  font-size:20px;font-weight:800;
  color:var(--accent-text);font-family:'Familjen Grotesk','Plus Jakarta Sans',system-ui,sans-serif;
}
.modal-section{margin-bottom:18px}
.modal-label{
  font-size:11px;font-weight:700;
  color:var(--cream-dim);
  letter-spacing:.5px;text-transform:uppercase;
  margin-bottom:8px;
}
.modal-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.modal-options-3{grid-template-columns:repeat(3,1fr)}
.modal-options-2{grid-template-columns:repeat(2,1fr)}
.modal-opt{
  background:var(--card);
  border:1.5px solid var(--border);
  border-radius:10px;
  padding:10px 8px;
  cursor:pointer;
  transition:all .15s;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  text-align:center;
}
.modal-opt:active{transform:scale(.97)}
.modal-opt.active{
  background:var(--caramel-pale);
  border-color:var(--caramel);
}
.modal-opt .opt-main{
  font-size:13px;font-weight:700;color:var(--cream);
}
.modal-opt.active .opt-main{color:var(--caramel-light)}
.modal-opt .opt-sub{
  font-size:10.5px;color:var(--muted);margin-top:2px;
}
.modal-opt.active .opt-sub{color:var(--accent-text)}

.modal-fixed-size{
  background:var(--surface2);
  border:1px dashed var(--border-glow);
  border-radius:10px;padding:12px;
  text-align:center;
  font-size:13px;font-weight:600;
  color:var(--cream-dim);
}

.modal-qty-row{
  display:flex;align-items:center;justify-content:center;gap:18px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:12px;padding:8px;
}
.modal-qty-btn{
  width:38px;height:38px;border-radius:50%;
  background:var(--caramel);
  border:none;color:var(--on-accent);
  font-size:20px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform .15s;
}
.modal-qty-btn:active{transform:scale(.92)}
.modal-qty-num{
  font-family:'Familjen Grotesk','Plus Jakarta Sans',system-ui,sans-serif;
  font-size:24px;font-weight:800;color:var(--caramel-light);
  min-width:48px;text-align:center;
}

.modal-footer{
  position:sticky;bottom:0;
  padding:14px 18px 20px;
  background:linear-gradient(180deg, transparent 0%, var(--surface) 20%);
  z-index:2;
}
.modal-add-cart{
  width:100%;
  background:var(--caramel);color:var(--on-accent);
  border:none;border-radius:14px;
  padding:15px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:15px;font-weight:800;
  cursor:pointer;letter-spacing:.3px;
  transition:transform .15s;
  box-shadow:0 6px 20px color-mix(in srgb,var(--caramel) 40%,transparent);
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.modal-add-cart:active{transform:scale(.98)}

/* SIZE selector */
.size-row{display:flex;gap:4px;margin-bottom:6px}
.size-btn{
  flex:1;padding:5px 4px;
  border:1px solid var(--border);border-radius:7px;
  background:var(--surface);color:var(--muted);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:10.5px;font-weight:600;
  cursor:pointer;transition:all .15s;text-align:center;
}
.size-btn.active{background:var(--caramel);color:var(--on-accent);border-color:var(--caramel)}

/* Fixed (non-interactive) size label */
.size-fixed{
  flex:1;padding:5px 8px;
  border:1px dashed var(--border-glow);border-radius:7px;
  background:var(--surface2);
  color:var(--cream-dim);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:10px;font-weight:600;
  text-align:center;
  letter-spacing:.3px;
}

/* PER-ITEM SUGAR / ICE chips */
.opt-row{
  display:flex;flex-direction:column;gap:5px;
  padding:6px 0;margin-bottom:4px;
  border-top:1px dashed var(--border);
}
.opt-line{display:flex;align-items:center;gap:5px;flex-wrap:nowrap}
.opt-icon{font-size:11px;width:14px;text-align:center;flex-shrink:0}
.opt-chips{display:flex;gap:3px;flex:1}
.opt-chip{
  flex:1;padding:3px 4px;
  border:1px solid var(--border);border-radius:6px;
  background:var(--surface);color:var(--muted);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:9.5px;font-weight:600;
  cursor:pointer;transition:all .15s;text-align:center;
  white-space:nowrap;
}
.opt-chip.active{background:var(--caramel);color:var(--on-accent);border-color:var(--caramel)}

/* QTY */
.qty-row{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:4px}
.qty-btn{
  width:28px;height:28px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);
  color:var(--cream);font-size:15px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;
}
.qty-btn:active{background:var(--caramel);color:var(--on-accent);border-color:var(--caramel);transform:scale(.92)}
.qty-btn.add{
  background:var(--caramel);color:var(--on-accent);border-color:var(--caramel);
}
.qty-num{font-size:13px;font-weight:800;color:var(--accent-text)}

/* ─────────── CART DRAWER ─────────── */
.overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.7);z-index:299;
  backdrop-filter:blur(3px);
}
.overlay.open{display:block}
.cart-drawer{
  position:fixed;right:0;top:0;bottom:0;
  width:min(420px,100vw);
  background:var(--surface);
  border-left:1px solid var(--border);
  z-index:300;
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.cart-drawer.open{transform:translateX(0)}
.drawer-head{
  padding:16px 18px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.drawer-title{
  font-family:'Familjen Grotesk','Plus Jakarta Sans',system-ui,sans-serif;font-size:19px;font-weight:700;color:var(--caramel-light);
}
.close-btn{
  background:var(--card);border:1px solid var(--border);
  color:var(--cream);width:34px;height:34px;border-radius:50%;
  font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;
}

.drawer-body{flex:1;overflow-y:auto;padding:14px 18px;-webkit-overflow-scrolling:touch}
.cart-item{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:11px;
  margin-bottom:8px;
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  animation:cartItemIn .25s ease;
  transition:transform .15s,background .15s,border-color .15s;
}
@keyframes cartItemIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.ci-left{flex:1;min-width:0}
.ci-thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--surface2)}
.ci-name{font-size:13px;font-weight:700;color:var(--cream);margin-bottom:3px}
.ci-meta{font-size:10.5px;color:var(--muted);line-height:1.4}
.ci-meta .pipe{margin:0 4px;opacity:.5}
.ci-price{font-size:12px;color:var(--accent-text);font-weight:700;margin-top:5px}
.ci-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.ci-qty{display:flex;align-items:center;gap:4px;background:var(--surface2);border-radius:14px;padding:2px}
.ci-q-btn{
  width:24px;height:24px;border-radius:50%;
  border:none;background:transparent;
  color:var(--cream);font-size:13px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.ci-q-btn:active{background:var(--caramel);color:var(--on-accent)}
.ci-qty span{font-size:12px;font-weight:700;color:var(--accent-text);min-width:16px;text-align:center}
.ci-del{
  background:none;border:none;color:var(--muted);font-size:11px;
  cursor:pointer;padding:2px 4px;
}
.ci-del:active{color:var(--red)}

.cart-empty{text-align:center;padding:36px 20px 20px;color:var(--muted)}
.cart-empty .emo{font-size:48px;margin-bottom:12px}
.cart-empty p{font-size:14px}

/* ORDER FORM */
.order-form{
  padding:14px 18px;
  border-top:1px solid var(--border);
  background:var(--surface);
}
.form-group{margin-bottom:10px}
.form-label{
  font-size:11px;font-weight:600;color:var(--cream-dim);
  letter-spacing:.5px;text-transform:uppercase;
  display:block;margin-bottom:5px;
}
.form-input{
  width:100%;
  background:var(--card);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:9px 12px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:14px;
  color:var(--cream);
  transition:border-color .2s;
  outline:none;
}
.form-input:focus{border-color:var(--caramel)}
.form-input::placeholder{color:var(--muted)}

.total-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;margin-bottom:10px;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.total-label{font-size:13px;color:var(--cream-dim)}
.total-price{font-size:20px;font-weight:800;color:var(--accent-text);font-family:'Familjen Grotesk','Plus Jakarta Sans',system-ui,sans-serif}

.cart-actions{display:flex;gap:8px}
.reset-btn{
  background:var(--surface2);
  color:var(--cream-dim);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:13px 14px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:13px;font-weight:700;
  cursor:pointer;transition:all .2s;
  flex-shrink:0;
}
.reset-btn:active:not(:disabled){background:var(--card);color:var(--red);border-color:var(--red)}
.reset-btn:disabled{opacity:.4;cursor:not-allowed}

.send-btn{
  flex:1;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:white;border:none;border-radius:var(--radius);
  padding:13px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:14.5px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;
  transition:opacity .2s,transform .15s;
  letter-spacing:.3px;
}
.send-btn:active{transform:scale(.98)}
.send-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.send-btn svg{width:18px;height:18px;fill:white}

/* ─────────── TOAST ─────────── */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--caramel);color:var(--on-accent);
  padding:10px 20px;border-radius:30px;
  font-size:13px;font-weight:700;
  transition:transform .3s;z-index:400;white-space:nowrap;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ─────────── FLOAT CART HINT ─────────── */
.float-hint{
  display:none;
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  width:calc(100vw - 24px);max-width:460px;
  background:var(--surface2);color:var(--cream);
  border:1.5px solid var(--caramel);border-radius:var(--radius);
  padding:8px 8px 8px 14px;
  font-size:14px;font-weight:700;
  cursor:pointer;z-index:180;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  align-items:center;justify-content:space-between;gap:10px;
}
.float-info{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.float-btn{
  flex-shrink:0;min-height:44px;padding:0 16px;
  background:var(--caramel);color:var(--on-accent);
  border:none;border-radius:10px;
  font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap;
}
.float-btn:focus-visible{outline:2px solid var(--caramel-light);outline-offset:2px}
/* Progres ke Paket 3 Hemat Mix di bar bawah */
.float-up{font-size:11.5px;font-weight:600;color:var(--caramel-light)}
.float-hint.visible{display:flex;animation:slideUpIn .3s ease}
@keyframes slideUpIn{from{transform:translateX(-50%) translateY(20px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
.float-hint:active{transform:translateX(-50%) scale(.98)}
/* Badge "Hemat Rp..." di samping harga total */
.float-savings{
  display:inline-block;
  background:var(--on-accent);color:var(--green);
  font-size:10.5px;font-weight:800;letter-spacing:.3px;
  padding:3px 8px;border-radius:14px;
  margin-left:4px;
  animation:savingsPulse 2.2s ease-in-out infinite;
}
@keyframes savingsPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}

/* ─────────── FLY ANIMATION ─────────── */
.fly-item{
  position:fixed;
  width:40px;height:40px;border-radius:50%;
  background:var(--caramel);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:800;
  z-index:350;pointer-events:none;
  opacity:0;
  box-shadow:0 4px 16px color-mix(in srgb,var(--caramel) 50%,transparent);
}

/* ─────────── CATEGORY SECTIONS ─────────── */
.cat-section{scroll-margin-top:200px}
.cat-section.hidden{display:none}

/* ─────────── NO RESULTS ─────────── */
.no-results{
  text-align:center;padding:60px 20px 40px;color:var(--muted);
}
.no-results .emo{font-size:48px;margin-bottom:12px;opacity:.6}
.no-results p{font-size:14px;line-height:1.6}
.no-results small{font-size:12px;color:var(--muted);opacity:.8}

.no-results-suggestions{
  margin-top:20px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.no-results-label{
  font-size:11px;font-weight:600;color:var(--cream-dim);
  text-transform:uppercase;letter-spacing:1px;
  opacity:.7;
}
.no-results-chips{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  max-width:340px;
}
.no-results-chip{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:14px;padding:6px 12px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:12px;font-weight:600;
  color:var(--caramel-light);cursor:pointer;
  transition:all .15s;
}
.no-results-chip:hover,.no-results-chip:active{
  background:var(--caramel-pale);border-color:var(--caramel);color:var(--cream);
  transform:translateY(-1px);
}
.no-results-reset{
  margin-top:8px;
  background:transparent;border:1px solid var(--caramel);
  border-radius:18px;padding:8px 18px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:12px;font-weight:700;
  color:var(--accent-text);cursor:pointer;letter-spacing:.3px;
  transition:all .15s;
}
.no-results-reset:hover,.no-results-reset:active{
  background:var(--caramel);color:var(--on-accent);
}

/* ─────────── CONFIRM MODAL ─────────── */
.confirm-overlay{
  display:none;
  position:fixed;inset:0;z-index:450;
  background:rgba(0,0,0,.75);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .2s ease;
}
.confirm-overlay.open{display:flex}
.confirm-modal{
  background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:24px 22px 18px;
  max-width:340px;width:100%;text-align:center;
  animation:scaleIn .25s ease;
}
@keyframes scaleIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.confirm-emoji{font-size:42px;margin-bottom:10px}
.confirm-title{
  font-family:'Familjen Grotesk','Plus Jakarta Sans',system-ui,sans-serif;font-size:20px;font-weight:700;
  color:var(--caramel-light);margin-bottom:6px;
}
.confirm-text{font-size:13px;color:var(--cream-dim);margin-bottom:18px}
.confirm-actions{display:flex;gap:8px}
.confirm-no, .confirm-yes{
  flex:1;padding:12px;border-radius:10px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:13.5px;font-weight:700;
  cursor:pointer;border:none;
}
.confirm-no{background:var(--card);color:var(--cream);border:1px solid var(--border)}
.confirm-yes{background:var(--red);color:white}
.confirm-no:active{background:var(--surface2)}
.confirm-yes:active{opacity:.8}

.success-modal .confirm-title{color:var(--green)}
.success-tips{
  display:flex;flex-direction:column;gap:6px;
  margin-bottom:14px;text-align:left;
}
.success-tip{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;padding:8px 12px;
  font-size:12.5px;color:var(--cream-dim);
}
/* Fallback WA block */
.success-fallback{
  background:color-mix(in srgb,var(--caramel) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--caramel) 20%,transparent);
  border-radius:10px;padding:12px 14px;
  margin-bottom:14px;text-align:left;
}
.success-fallback-title{
  font-size:12px;font-weight:800;color:var(--accent-text);
  margin-bottom:4px;letter-spacing:.2px;
}
.success-fallback-text{
  font-size:11.5px;color:var(--cream-dim);margin-bottom:10px;
}
.success-fallback-options{
  display:flex;flex-direction:column;gap:8px;
}
.success-fallback-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;font-size:12.5px;font-weight:700;
  padding:9px 16px;border-radius:9px;
  text-decoration:none;
  transition:opacity .15s;
}
.success-fallback-btn:active{opacity:.8}
.success-fallback-or{
  text-align:center;font-size:11px;
  color:var(--muted);letter-spacing:.5px;
}
.success-fallback-manual{
  font-size:12px;color:var(--cream-dim);
  line-height:1.7;
}
.success-fallback-link{
  color:var(--accent-text);font-weight:700;
  text-decoration:none;border-bottom:1px dashed color-mix(in srgb,var(--caramel) 40%,transparent);
}

/* ─────────── BOTTOM SHEET CART (mobile) ─────────── */
/* HP: keranjang jadi halaman penuh (bukan bottom sheet), seluruh isi bisa di-scroll:
   daftar menu di atas, form nama/outlet/catatan + tombol kirim di bawah */
@media(max-width:600px){
  .cart-drawer{
    right:0;left:0;top:0;bottom:0;
    width:100%;max-height:none;height:100%;
    border-left:none;border-top:none;border-radius:0;
    transform:translateX(100%);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  .cart-drawer.open{transform:translateX(0)}
  .drawer-head{position:sticky;top:0;z-index:2;background:var(--surface)}
  .drawer-head::before{display:none}
  .drawer-body{flex:none;overflow:visible}
  .order-form{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .order-form .cart-notice{font-size:10.5px;padding:7px 10px;margin-bottom:8px;line-height:1.5}
  .order-form .ruko-note{padding:7px 10px;font-size:11.5px;margin-top:6px}
}

/* ─────────── BIGGER SCREENS ─────────── */
@media(min-width:600px){
  .menu-grid{grid-template-columns:repeat(3,1fr)}
  .hero h1{font-size:42px}
  .hero{padding:42px 24px 36px}
  .card-emoji{height:140px}
}
@media(min-width:900px){
  .menu-grid{grid-template-columns:repeat(4,1fr)}
}