/* ============================================================
   css/08-favorites-promo-mix.css  (urutan load 8 dari 8)
   Isi: Favorit bottom sheet, promo banner & popup, diskon di keranjang, bundling, foto menu, Custom Mix.
   Pecahan dari style.css lama. Urutan file = urutan eksekusi/cascade, jangan ditukar.
   ============================================================ */

/* ─────────── V7 FIX: FAVORITES BOTTOM SHEET (proper) ─────────── */
.fav-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  z-index:400;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.fav-backdrop.open{
  opacity:1;
  pointer-events:auto;
}
.fav-sheet{
  position:fixed;
  left:0;right:0;
  bottom:0;
  background:var(--surface);
  border-top:1px solid var(--border);
  border-radius:20px 20px 0 0;
  z-index:401;
  height:88vh;
  max-height:88vh;
  display:flex;
  flex-direction:column;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow:0 -10px 40px rgba(0,0,0,.5);
  overflow:hidden;
}
body.light-mode .fav-sheet{
  box-shadow:0 -10px 40px rgba(0,0,0,.15);
}
.fav-sheet.open{
  transform:translateY(0);
}
@media(min-width:600px){
  .fav-sheet{
    left:auto;
    right:0;
    top:0;bottom:0;
    width:min(420px, 100vw);
    height:100vh;
    max-height:100vh;
    border-radius:0;
    border-left:1px solid var(--border);
    border-top:none;
    transform:translateX(100%);
  }
  .fav-sheet.open{ transform:translateX(0); }
}
.fav-sheet-handle{
  width:42px;
  height:4px;
  border-radius:2px;
  background:var(--border-glow);
  margin:8px auto 0;
  flex-shrink:0;
  opacity:.7;
}
@media(min-width:600px){
  .fav-sheet-handle{ display:none; }
}
.fav-sheet-head{
  padding:12px 18px 14px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;
}
.fav-sheet-title{
  font-family:'Familjen Grotesk', serif;
  font-size:19px;
  font-weight:800;
  color:var(--caramel-light);
}
.fav-sheet-close{
  background:var(--card);
  border:1px solid var(--border);
  color:var(--cream);
  width:34px;
  height:34px;
  border-radius:50%;
  font-size:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s;
}
.fav-sheet-close:active{ transform:scale(.9); }
.fav-sheet-body{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:14px 16px 24px;
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
.fav-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.fav-item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  display:flex;
  gap:12px;
  align-items:center;
  cursor:pointer;
  transition:transform .15s ease, border-color .2s;
  -webkit-tap-highlight-color:transparent;
  position:relative;
}
.fav-item:active{
  transform:scale(.98);
  border-color:var(--caramel);
}
.fav-item-img{
  width:64px;
  height:64px;
  border-radius:10px;
  background:linear-gradient(135deg, var(--caramel-pale), var(--surface2));
  overflow:hidden;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.fav-item-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.fav-item-body{
  flex:1;
  min-width:0;
}
.fav-item-name{
  font-size:14px;
  font-weight:700;
  color:var(--cream);
  margin-bottom:4px;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fav-item-price{
  display:flex;
  gap:6px;
  align-items:baseline;
  margin-bottom:2px;
}
.fav-item-disc{
  color:var(--accent-text);
  font-weight:800;
  font-size:14px;
}
.fav-item-normal{
  color:var(--muted);
  font-size:11px;
  text-decoration:line-through;
}
.fav-item-tap{
  font-size:10px;
  color:var(--caramel-light);
  opacity:.7;
  font-weight:600;
}
.fav-item-remove{
  background:rgba(224,82,82,.12);
  border:1px solid rgba(224,82,82,.3);
  color:var(--red);
  width:30px;
  height:30px;
  border-radius:50%;
  font-size:18px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.fav-item-remove:active{ transform:scale(.85); }
.fav-empty{
  text-align:center;
  padding:50px 20px 30px;
}
.fav-empty-emo{
  font-size:54px;
  margin-bottom:14px;
}
.fav-empty-title{
  font-family:'Familjen Grotesk', serif;
  font-size:18px;
  font-weight:700;
  color:var(--cream);
  margin-bottom:6px;
}
.fav-empty-sub{
  font-size:13px;
  color:var(--cream-dim);
  line-height:1.5;
  margin-bottom:20px;
}
.fav-empty-cta{
  background:linear-gradient(135deg, var(--caramel), var(--caramel-light));
  color:var(--on-accent);
  border:none;
  font-family:inherit;
  font-weight:800;
  font-size:14px;
  padding:11px 24px;
  border-radius:10px;
  cursor:pointer;
  transition:transform .15s;
}
.fav-empty-cta:active{ transform:scale(.95); }

/* ─────────── PROMO BANNER ─────────── */
.promo-banner{
  display:flex;align-items:center;gap:8px;
  margin:0 16px 12px;
  padding:10px 14px;
  background:var(--card);
  border:1px solid var(--caramel);
  border-radius:12px;
  cursor:pointer;
  transition:transform .15s,box-shadow .15s;
  animation:promoPulse 2.5s ease-in-out infinite;
}
.promo-banner:active{transform:scale(.98);}
.promo-banner-icon{font-size:18px;flex-shrink:0;}
.promo-banner-text{flex:1;font-size:13px;color:var(--cream);line-height:1.4;}
.promo-banner-text b{color:var(--caramel-light);}
.promo-banner-arrow{font-size:20px;color:var(--caramel-light);font-weight:700;flex-shrink:0;}
@keyframes promoPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(14,124,134,.4);}
  50%{box-shadow:0 0 0 6px rgba(14,124,134,0);}
}
/* Wadah 3 banner promo: di desktop tumpuk seperti biasa */
.promo-strip{display:flex;flex-direction:column}
/* HP: banner digeser ke samping (satu terlihat, sisanya mengintip) supaya menu cepat kelihatan */
@media(max-width:600px){
  .promo-strip{
    flex-direction:row;overflow-x:auto;gap:10px;
    padding:0 16px 12px;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .promo-strip::-webkit-scrollbar{display:none}
  .promo-strip .promo-banner{flex:0 0 86%;margin:0;scroll-snap-align:start;min-width:0}
}

/* ─────────── PROMO POPUP ─────────── */
.promo-popup-overlay{
  display:none;position:fixed;inset:0;z-index:600;
  background:rgba(0,0,0,.75);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;
}
.promo-popup-overlay.open{display:flex;}
.promo-popup{
  position:relative;
  background:linear-gradient(160deg,#2A1500,var(--on-accent));
  border:1px solid var(--caramel);
  border-radius:20px;
  padding:28px 24px 24px;
  width:min(340px,90vw);
  text-align:center;
  animation:popupIn .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popupIn{
  from{opacity:0;transform:scale(.85) translateY(20px);}
  to{opacity:1;transform:scale(1) translateY(0);}
}
.promo-popup-close{
  position:absolute;top:12px;right:14px;
  background:rgba(255,255,255,.1);border:none;
  color:var(--cream);font-size:14px;
  width:28px;height:28px;border-radius:50%;
  cursor:pointer;transition:background .15s;
}
.promo-popup-close:hover{background:rgba(255,255,255,.2);}
.promo-popup-badge{
  display:inline-block;
  background:var(--caramel);color:var(--on-accent);
  font-size:11px;font-weight:800;letter-spacing:1px;
  padding:4px 12px;border-radius:20px;
  margin-bottom:12px;
}
.promo-popup-title{
  font-size:32px;font-weight:900;
  color:var(--cream);line-height:1.1;
  margin-bottom:4px;
}
.promo-popup-title span{color:var(--caramel-light);}
.promo-popup-divider{
  width:40px;height:2px;
  background:var(--caramel);
  margin:14px auto;border-radius:2px;
}
.promo-popup-syarat{
  display:flex;flex-direction:column;gap:8px;
  margin-bottom:16px;
}
.promo-syarat-item{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(14,124,134,.3);
  border-radius:10px;padding:10px 14px;
  font-size:14px;color:var(--cream);
}
.promo-syarat-icon{font-size:18px;}
.promo-syarat-or{
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:1px;
}
.promo-popup-note{
  font-size:12px;color:var(--muted);
  margin-bottom:18px;line-height:1.5;
}
.promo-popup-cta{
  width:100%;
  background:linear-gradient(135deg,var(--caramel),var(--caramel-light));
  color:var(--on-accent);border:none;
  font-family:inherit;font-weight:800;font-size:15px;
  padding:13px;border-radius:12px;
  cursor:pointer;transition:transform .15s;
}
.promo-popup-cta:active{transform:scale(.97);}

/* ─────────── CART PROMO DISCOUNT ROW ─────────── */
.cart-promo-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 16px;margin:4px 12px 0;
  background:rgba(14,124,134,.12);
  border:1px solid rgba(14,124,134,.3);
  border-radius:10px;
  animation:fadeIn .3s ease;
}
.cart-promo-label{font-size:13px;color:var(--caramel-light);font-weight:600;}
.cart-promo-amount{font-size:14px;color:#4CAF50;font-weight:800;}


/* ─────────── BUNDLING ─────────── */
.bundle-banner{background:linear-gradient(135deg,#5C2E00,#8A4B12);animation:none}
.bundle-note{font-size:12.5px;color:var(--cream-dim);margin:-4px 0 6px;line-height:1.45}
.bundle-note b{color:var(--caramel-light)}
.bundle-group-title{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-family:'Familjen Grotesk','Plus Jakarta Sans',system-ui,sans-serif;font-size:16px;font-weight:700;
  color:var(--cream);margin:16px 0 10px;
}
.bundle-group-title span{font-family:inherit;font-size:12px;font-weight:500;color:var(--cream-dim)}
.bundle-card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  transition:transform .15s,border-color .2s;
}
.bundle-card:active{transform:scale(.98)}
.bundle-card:hover{border-color:var(--caramel)}
.bundle-photos{
  position:relative;height:124px;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;
  padding:14px 8px 0;
  background:radial-gradient(ellipse at 50% 85%,color-mix(in srgb,var(--caramel) 32%,transparent),rgba(18,28,30,.9) 70%);
}
.bundle-photos img{
  height:100px;width:auto;max-width:34%;object-fit:contain;
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.45));
  position:relative;
}
.bundle-photos.cups-2 img{height:104px}
.bundle-photos.cups-2 img:nth-of-type(1){margin-right:-10px;transform:rotate(-5deg);z-index:1}
.bundle-photos.cups-2 img:nth-of-type(2){margin-left:-10px;transform:rotate(5deg);z-index:2}
.bundle-photos.cups-3 img{height:92px}
.bundle-photos.cups-3 img:nth-of-type(1){margin-right:-12px;transform:rotate(-7deg);z-index:1}
.bundle-photos.cups-3 img:nth-of-type(2){height:106px;z-index:3}
.bundle-photos.cups-3 img:nth-of-type(3){margin-left:-12px;transform:rotate(7deg);z-index:2}
.bundle-cups-badge{
  position:absolute;top:8px;left:8px;z-index:5;
  background:var(--caramel);color:var(--on-accent);font-size:11px;font-weight:800;
  padding:3px 9px;border-radius:999px;
}
.bundle-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.bundle-save{font-size:11.5px;font-weight:700;color:#4CAF50}
.stock-note{font-size:11px;font-weight:600;color:var(--accent-text)}


/* ─────────── FOTO MENU RAPI (kartu & modal) ─────────── */
.card-emoji{height:150px}
@media(min-width:600px){.card-emoji{height:150px}}
.menu-card .card-emoji{
  background:radial-gradient(ellipse at 50% 88%,color-mix(in srgb,var(--caramel) 34%,transparent),rgba(18,28,30,.92) 68%);
}
.menu-card .card-emoji img{box-sizing:border-box;padding:6px 0 4px}
.menu-card .card-emoji.img-loaded img{
  filter:drop-shadow(0 6px 7px rgba(0,0,0,.45));
}
.modal-image{
  background:radial-gradient(ellipse at 50% 90%,color-mix(in srgb,var(--caramel) 36%,transparent),rgba(18,28,30,.95) 70%);
}
.modal-image img{box-sizing:border-box;padding:8px 0;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5))}


/* ─────────── CUSTOM MIX ─────────── */
.mix-cta{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;
  background:linear-gradient(135deg,color-mix(in srgb,var(--caramel) 22%,transparent),rgba(18,28,30,.9));
  border:1px dashed var(--caramel);border-radius:14px;padding:12px 14px;margin:0 0 12px;
  color:var(--cream);font-family:inherit;-webkit-tap-highlight-color:transparent;
}
.mix-cta:active{transform:scale(.99)}
.mix-cta-ico{font-size:26px}
.mix-cta-txt{flex:1;display:flex;flex-direction:column;gap:2px}
.mix-cta-txt b{font-size:15px;color:var(--caramel-light)}
.mix-cta-txt small{font-size:12px;color:var(--cream-dim)}
.mix-cta-arrow{font-size:22px;color:var(--accent-text)}

.mix-overlay{
  display:none;position:fixed;inset:0;z-index:560;
  background:rgba(0,0,0,.75);backdrop-filter:blur(6px);
  align-items:flex-end;justify-content:center;
}
.mix-overlay.open{display:flex}
.mix-sheet{
  width:100%;max-width:640px;max-height:92vh;display:flex;flex-direction:column;
  background:var(--surface,#1E1308);border:1px solid var(--border);border-bottom:none;
  border-radius:22px 22px 0 0;overflow:hidden;
}
.mix-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:16px 16px 6px}
.mix-title{font-family:'Familjen Grotesk','Plus Jakarta Sans',system-ui,sans-serif;font-size:19px;font-weight:700;color:var(--caramel-light)}
.mix-sub{font-size:12.5px;color:var(--cream-dim);margin-top:2px}
.mix-close{
  width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;
  background:rgba(224,82,82,.9);color:#fff;font-size:15px;
}
.mix-progress{display:flex;align-items:center;gap:10px;padding:6px 16px 10px;font-size:12.5px;color:var(--cream)}
.mix-bar{flex:1;height:7px;border-radius:99px;background:var(--caramel-pale);overflow:hidden}
.mix-bar span{display:block;height:100%;background:var(--caramel);border-radius:99px;transition:width .2s}
.mix-body{overflow-y:auto;padding:4px 16px 12px;flex:1;-webkit-overflow-scrolling:touch}
.mix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:520px){.mix-grid{grid-template-columns:repeat(4,1fr)}}
.mix-tile{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:6px 6px 8px;text-align:center;display:flex;flex-direction:column;gap:5px;
}
.mix-tile.has{border-color:var(--caramel)}
.mix-tile-img{
  position:relative;height:84px;border-radius:10px;cursor:pointer;
  background:radial-gradient(ellipse at 50% 90%,color-mix(in srgb,var(--caramel) 30%,transparent),rgba(18,28,30,.9) 70%);
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
}
.mix-tile-img img{height:78px;width:auto;max-width:90%;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(0,0,0,.45))}
.mix-count{
  position:absolute;top:4px;right:4px;min-width:20px;height:20px;border-radius:99px;padding:0 5px;
  background:var(--caramel);color:var(--on-accent);font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.mix-tile-name{font-size:11.5px;font-weight:700;line-height:1.2;min-height:28px;color:var(--cream)}
.mix-tile-ctl{display:flex;gap:6px;justify-content:center}
.mix-q{
  width:34px;height:28px;border-radius:8px;border:1px solid var(--border);cursor:pointer;
  background:var(--caramel-pale);color:var(--cream);font-size:16px;font-weight:700;
}
.mix-q-add{background:var(--caramel);color:var(--on-accent);border-color:var(--caramel)}
.mix-q:disabled{opacity:.35;cursor:default}
.mix-section-title{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cream-dim);margin:16px 0 8px}
.mix-hint{margin:16px 0 4px;font-size:12.5px;color:var(--cream-dim);text-align:center}
.mix-row{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:9px 10px;margin-bottom:8px}
.mix-row-top{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--cream);margin-bottom:7px}
.mix-del{width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;background:rgba(224,82,82,.2);color:#E05252;font-size:16px;line-height:1}
.mix-row-sel{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mix-row-sel select{
  width:100%;padding:8px 8px;border-radius:9px;border:1px solid var(--border);
  background:var(--caramel-pale);color:var(--cream);font-family:inherit;font-size:13px;
}
.mix-foot{padding:10px 16px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border)}
.mix-add{
  width:100%;padding:14px;border:none;border-radius:14px;cursor:pointer;
  background:var(--caramel);color:var(--on-accent);font-family:inherit;font-size:15px;font-weight:800;
}
.mix-add:disabled{background:var(--caramel-pale);color:var(--cream-dim);cursor:default}


/* kartu Custom Mix (kartu pertama di grid paket) */
.mix-card{border:1px dashed var(--caramel);background:linear-gradient(160deg,color-mix(in srgb,var(--caramel) 16%,transparent),var(--card) 55%)}
.mix-card .bundle-photos{background:radial-gradient(ellipse at 50% 85%,color-mix(in srgb,var(--caramel) 50%,transparent),rgba(18,28,30,.9) 72%)}
.mix-badge{background:var(--caramel-light,var(--caramel-light))}
.mix-note{color:var(--caramel-light)}
.mix-card .card-add-btn{background:var(--caramel);color:var(--on-accent);border-color:var(--caramel);font-weight:800}


/* Custom Mix: scroll di dalam lembar tidak "bocor" ke halaman / tarik-refresh browser */
.mix-overlay,.mix-sheet,.mix-body{overscroll-behavior:contain}
.mix-body{touch-action:pan-y}

.mix-tile-sub{font-size:10px;line-height:1.3;opacity:.75;text-align:center;margin-top:2px}