/* ============================================================
   css/06-enhancements-brandorder.css  (urutan load 6 dari 8)
   Isi: Enhancement v4 (animasi welcome, glow brand, ripple, empty cart, dll) + modal order brand Tomoro & Fore.
   Pecahan dari style.css lama. Urutan file = urutan eksekusi/cascade, jangan ditukar.
   ============================================================ */

/* ═══════════════════════════════════════════════════════
   🔥 ENHANCEMENT v4 — All upgrades
   ═══════════════════════════════════════════════════════ */

/* ── 1. Welcome Modal: Spring slide-up + grain texture ── */
@keyframes welcomeSpringUp {
  0%   { transform: translateY(110%) scale(.96); opacity:0; }
  55%  { transform: translateY(-8px) scale(1.01); opacity:1; }
  75%  { transform: translateY(4px) scale(.995); }
  90%  { transform: translateY(-2px) scale(1.003); }
  100% { transform: translateY(0) scale(1); opacity:1; }
}
@keyframes welcomeFadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
.welcome-overlay.open {
  display: flex;
  animation: welcomeFadeIn .2s ease forwards;
}
.welcome-overlay.open .welcome-modal {
  animation: welcomeSpringUp .55s cubic-bezier(.22,1,.36,1) forwards;
}
/* Grain texture overlay on modal — FIX: position absolute (was fixed + touch-action:none → blocked scroll on mobile) */
.welcome-modal::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:24px 24px 0 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  pointer-events:none;
  z-index:0;opacity:.55;
}
.welcome-modal > * { position:relative;z-index:1; }

/* Coffee ring watermark — NOTE: Jangan pakai overflow:hidden di modal!
   Itu akan mematikan kemampuan scroll. Ring decoration di-clip via mask di pseudo-element. */
.welcome-modal .coffee-ring {
  position:absolute;
  width:160px;height:160px;
  border-radius:50%;
  border:18px solid color-mix(in srgb,var(--caramel) 5%,transparent);
  top:-40px;right:-40px;
  pointer-events:none;z-index:0;
}
.welcome-modal .coffee-ring-2 {
  position:absolute;
  width:90px;height:90px;
  border-radius:50%;
  border:12px solid color-mix(in srgb,var(--caramel) 4%,transparent);
  bottom:60px;left:-20px;
  pointer-events:none;z-index:0;
}

/* ── 2. Welcome emoji: Steam animation ── */
.welcome-emoji {
  position:relative;display:inline-block;
}
.steam-wrap {
  position:absolute;
  top:-22px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;
  pointer-events:none;
}
.steam {
  width:4px;height:18px;
  border-radius:4px;
  background:color-mix(in srgb,var(--caramel) 35%,transparent);
  animation:steamRise 1.6s ease-in-out infinite;
  transform-origin:bottom center;
}
.steam:nth-child(2){ animation-delay:.35s; height:14px; }
.steam:nth-child(3){ animation-delay:.7s; height:16px; }
@keyframes steamRise {
  0%   { transform:scaleX(1) translateY(0); opacity:.6; }
  50%  { transform:scaleX(1.5) translateY(-10px); opacity:.3; }
  100% { transform:scaleX(.8) translateY(-20px); opacity:0; }
}

/* ── 3. Brand card glow per brand ── */
.brand-btn[data-brand="kopken"].active,
.brand-btn[data-brand="kopken"]:hover:not(.active) {
  box-shadow: 0 0 14px rgba(220,50,50,.25);
}
.brand-btn[data-brand="tomoro"].active,
.brand-btn[data-brand="tomoro"]:hover:not(.active) {
  box-shadow: 0 0 14px rgba(255,200,0,.22);
}
.brand-btn[data-brand="fore"].active,
.brand-btn[data-brand="fore"]:hover:not(.active) {
  box-shadow: 0 0 14px rgba(0,200,130,.2);
}

/* Brand intro clickable glow per brand */
.brand-intro-clickable[onclick*="kopken"]:hover {
  box-shadow: 0 8px 22px rgba(220,50,50,.2) !important;
  border-color: rgba(220,50,50,.5) !important;
}
.brand-intro-clickable[onclick*="tomoro"]:hover {
  box-shadow: 0 8px 22px rgba(255,200,0,.2) !important;
  border-color: rgba(255,200,0,.5) !important;
}
.brand-intro-clickable[onclick*="fore"]:hover {
  box-shadow: 0 8px 22px rgba(0,200,130,.2) !important;
  border-color: rgba(0,200,130,.45) !important;
}

/* ── 4. Brand page slide transition ── */
.brand-page, #page-kopken {
  animation: none;
}
.brand-page.page-enter-left {
  animation: slideFromLeft .32s cubic-bezier(.4,0,.2,1) forwards;
}
.brand-page.page-enter-right {
  animation: slideFromRight .32s cubic-bezier(.4,0,.2,1) forwards;
}
#page-kopken.page-enter-left {
  animation: slideFromLeft .32s cubic-bezier(.4,0,.2,1) forwards;
}
#page-kopken.page-enter-right {
  animation: slideFromRight .32s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes slideFromLeft {
  from { opacity:0; transform:translateX(-28px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes slideFromRight {
  from { opacity:0; transform:translateX(28px); }
  to   { opacity:1; transform:translateX(0); }
}

/* ── 5. Ripple on menu card ── */
.menu-card {
  overflow: hidden;
}
.ripple-effect {
  position:absolute;
  border-radius:50%;
  background:color-mix(in srgb,var(--caramel) 18%,transparent);
  transform:scale(0);
  animation:rippleAnim .55s linear;
  pointer-events:none;
}
@keyframes rippleAnim {
  to { transform:scale(4); opacity:0; }
}

/* ── 6. Cart count pop/bounce ── */
@keyframes cartCountPop {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.55) rotate(-8deg); }
  65%  { transform:scale(.88) rotate(4deg); }
  85%  { transform:scale(1.12); }
  100% { transform:scale(1); }
}
.cart-count.pop {
  animation: cartCountPop .45s cubic-bezier(.22,1,.36,1);
}


/* ── 7. (Removed: brand-switcher scrolled compact mode)
   Brand-switcher tidak lagi sticky → ga butuh compact mode. ── */

/* ── 8. Empty cart animation ── */
.cart-empty {
  position:relative;
}
.cart-empty .emo {
  display:block;
  animation: emptyFloat 2.4s ease-in-out infinite;
}
@keyframes emptyFloat {
  0%,100% { transform:translateY(0) rotate(-3deg); }
  50%     { transform:translateY(-10px) rotate(4deg); }
}
/* Shadow di-anchor ke posisi emoji (top area), bukan bottom — biar
   ga overlap dengan suggestion list di bawah */
.cart-empty::before {
  content:'';
  position:absolute;
  top:78px;left:50%;transform:translateX(-50%);
  width:60px;height:10px;border-radius:50%;
  background:color-mix(in srgb,var(--caramel) 12%,transparent);
  animation:shadowPulse 2.4s ease-in-out infinite;
}
@keyframes shadowPulse {
  0%,100% { transform:translateX(-50%) scaleX(1); opacity:.4; }
  50%     { transform:translateX(-50%) scaleX(.6); opacity:.15; }
}
/* ── Suggestion menu di empty cart ── */
.cart-empty-sugg{
  margin-top:24px;
  padding-top:18px;
  border-top:1px dashed var(--border);
}
.cart-empty-sugg-label{
  font-size:11px;font-weight:700;letter-spacing:1px;
  color:var(--caramel-light);text-transform:uppercase;
  margin-bottom:12px;
}
.cart-empty-sugg-list{
  display:flex;flex-direction:column;gap:8px;
  text-align:left;
}
.sugg-item{
  display:flex;align-items:center;gap:10px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px 10px 8px 8px;
  cursor:pointer;
  transition:transform .15s ease, border-color .2s, background .2s;
  -webkit-tap-highlight-color:transparent;
}
.sugg-item:active{
  transform:scale(.97);
  background:var(--caramel-pale);
  border-color:var(--border-glow);
}
.sugg-item-img{
  width:42px;height:42px;border-radius:8px;
  object-fit:cover;flex-shrink:0;
  background:var(--card);
}
.sugg-item-info{
  flex:1;min-width:0;
}
.sugg-item-name{
  font-size:12.5px;font-weight:600;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:2px;
}
.sugg-item-price{
  display:flex;align-items:center;gap:6px;
  font-size:11px;
}
.sugg-item-price-old{
  color:var(--muted);text-decoration:line-through;
  font-size:10.5px;
}
.sugg-item-price-new{
  color:var(--caramel-light);font-weight:700;
}
.sugg-item-arrow{
  color:var(--accent-text);font-size:14px;flex-shrink:0;
  opacity:.6;
}

/* ── 9. Hero section: floating coffee emojis ── */
.hero-floaters {
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  z-index:0;
}
.hero-floater {
  position:absolute;font-size:22px;opacity:0;
  animation:floatUp 8s ease-in-out infinite;
}
.hero-floater:nth-child(1) { left:8%;  animation-delay:0s;   animation-duration:7s; }
.hero-floater:nth-child(2) { left:22%; animation-delay:1.5s; animation-duration:9s; font-size:16px; }
.hero-floater:nth-child(3) { left:70%; animation-delay:0.8s; animation-duration:8s; }
.hero-floater:nth-child(4) { left:85%; animation-delay:2.5s; animation-duration:10s; font-size:14px; }
.hero-floater:nth-child(5) { left:45%; animation-delay:3.5s; animation-duration:7.5s; font-size:18px; }
@keyframes floatUp {
  0%   { transform:translateY(60px) rotate(-10deg); opacity:0; }
  15%  { opacity:.25; }
  80%  { opacity:.15; }
  100% { transform:translateY(-80px) rotate(15deg); opacity:0; }
}
.hero { position:relative; }
.hero > *:not(.hero-floaters) { position:relative;z-index:1; }

/* ── 10. Pop-up swipe indicator ── */
.welcome-swipe-hint {
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  font-size:10px;color:color-mix(in srgb,var(--caramel) 45%,transparent);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  animation:swipeHintPulse 2s ease-in-out infinite;
  pointer-events:none;
  letter-spacing:.08em;
  font-weight:600;
}
.swipe-arrow {
  font-size:14px;animation:swipeArrowBounce 1.2s ease-in-out infinite;
}
@keyframes swipeHintPulse {
  0%,100% { opacity:.5; }
  50% { opacity:1; }
}
@keyframes swipeArrowBounce {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(4px); }
}

/* ── Progress dots for welcome modal ── */
.welcome-progress {
  display:flex;gap:6px;justify-content:center;
  margin:10px 0 0;
}
.wp-dot {
  width:6px;height:6px;border-radius:3px;
  background:var(--border);
  transition:all .3s;
}
.wp-dot.active {
  width:20px;background:var(--caramel);
}

/* ═══════════════════════════════════════════════════════
   BRAND ORDER MODAL (Tomoro & Fore)
   ═══════════════════════════════════════════════════════ */

.brand-order-overlay {
  z-index: 1500;
}

/* Brand preview harus di atas brand order modal */
#brandPreviewOverlay {
  z-index: 1600;
}
.brand-order-modal {
  width: 92%;
  max-width: 480px;
  max-height: 90vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
}

/* HEADER -- warna nyesuain brand via inline style */
.brand-order-head {
  position: relative;
  padding: 22px 20px 18px;
  text-align: center;
  color: #fff;
}
.brand-order-head.tomoro-head {
  background: var(--surface);
}
.brand-order-head.fore-head {
  background: linear-gradient(135deg, #002A1A 0%, #006B4D 50%, #00C882 100%);
}
.brand-order-close {
  position: absolute;
  top: 10px; right: 12px;
  width: 30px; height: 30px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background .2s;
}
.brand-order-close:hover {
  background: rgba(255,255,255,0.4);
}
.brand-order-logo {
  width: 60px; height: 60px;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  padding: 6px;
  margin: 0 auto 8px;
  display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.brand-order-title {
  margin: 4px 0 4px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.brand-order-sub {
  margin: 0;
  font-size: 13px;
  opacity: 0.92;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* STEP CONTAINER (scrollable body) */
.brand-order-step {
  padding: 18px 18px 16px;
  overflow-y: auto;
  flex: 1;
}
.brand-step-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.brand-step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--caramel);
  color: #1a0f06;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

/* PROMO CARDS (vertical list, tap-to-select) */
.brand-promo-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.brand-promo-card {
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: all .2s;
  background: var(--card-bg);
  color: #f5e9d8;
  text-align: left;
  width: 100%;
  font-family: inherit;
  position: relative;
  overflow: hidden;
}
.brand-promo-card:hover, .brand-promo-card:active {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.brand-promo-card.tomoro-card-pick {
  border-color: rgba(255,122,0,0.35);
}
.brand-promo-card.tomoro-card-pick:hover {
  border-color: #ff7a00;
  background: rgba(255,122,0,0.08);
}
.brand-promo-card.fore-card-pick {
  border-color: rgba(0,168,107,0.35);
}
.brand-promo-card.fore-card-pick:hover {
  border-color: #00a86b;
  background: rgba(0,168,107,0.08);
}

.brand-promo-card-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 10px;
  margin-bottom: 6px;
}
.tomoro-card-pick .brand-promo-card-tag {
  background: rgba(255,122,0,0.18);
  color: #ff9a3d;
}
.fore-card-pick .brand-promo-card-tag {
  background: rgba(0,168,107,0.18);
  color: #2dd49a;
}
.brand-promo-card-title {
  font-size: 17px;
  font-weight: 800;
  color: #f5e9d8 !important;
  margin: 0 0 4px;
}
.tomoro-card-pick .brand-promo-card-title {
  color: #FFCC00 !important;
}
.fore-card-pick .brand-promo-card-title {
  color: #00C882 !important;
}
.brand-promo-card-desc {
  font-size: 12.5px;
  color: rgba(245,233,216,0.7) !important;
  margin: 0 0 8px;
  line-height: 1.4;
}
.brand-promo-card-fee {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.tomoro-card-pick .brand-promo-card-fee {
  background: linear-gradient(135deg, #ff7a00, #ff5500);
  color: #fff;
}
.fore-card-pick .brand-promo-card-fee {
  background: linear-gradient(135deg, #00a86b, #007a4d);
  color: #fff;
}
.brand-promo-card-excl {
  font-size: 11.5px;
  color: rgba(245,233,216,0.75) !important;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 4px;
  border-left: 2px solid rgba(255,255,255,0.15);
}
.brand-promo-card-excl b {
  color: #f5e9d8 !important;
  font-weight: 700;
}

/* "Pertanyaan Lain" card - special muted style */
.brand-promo-card.brand-question-card {
  border-style: dashed;
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.02);
}
.brand-promo-card.brand-question-card:hover {
  border-color: var(--caramel);
  background: rgba(212,142,84,0.08);
}
.brand-promo-card.brand-question-card .brand-promo-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* SELECTED PROMO BADGE (di step 2) */
.brand-selected-promo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(212,142,84,0.1);
  border: 1px solid rgba(212,142,84,0.3);
  margin-bottom: 14px;
  font-size: 13px;
}
.brand-selected-promo-icon {
  font-size: 18px;
}
.brand-selected-promo-text {
  flex: 1;
  color: var(--text);
}
.brand-selected-promo-text b {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}

/* FORM */
.brand-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.brand-form-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.brand-form-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dim);
}
.brand-form-label .req {
  color: #ff5252;
}
.brand-form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--input-bg, rgba(255,255,255,0.03));
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .2s;
  box-sizing: border-box;
}
.brand-form-input:focus {
  outline: none;
  border-color: var(--caramel);
}
.brand-form-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.45;
}
.brand-form-hint {
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.75;
  margin-top: 2px;
}

/* FORM ACTIONS */
.brand-form-actions {
  display: flex;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border);
  background: var(--card-bg);
}
.brand-btn-back {
  flex: 0 0 auto;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.brand-btn-back:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
.brand-btn-send {
  flex: 1;
  padding: 11px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: transform .15s, box-shadow .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.brand-btn-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37,211,102,0.35);
}
.brand-btn-send:active {
  transform: translateY(0);
}