/* ============================================================
   css/10-buttons-icons.css  (dimuat paling akhir)
   1) Perbaikan komponen yang warnanya hard-code: popup promo, kartu Custom Mix.
      Palet utama (tosca + netral kehijauan) ada di css/01-base.css.
   2) Warna teks tombol outline/tautan netral, bukan aksen.
   3) Icon di tombol lewat ::before + mask, warnanya ikut teks tombol.
   Tidak mengubah HTML/JS, jadi tombol hasil render JS ikut dapat icon.
   ============================================================ */

/* ── 1. KOMPONEN ── */
.hero-btn-primary,.cart-btn,.outlet-btn,.outlet-cta,.welcome-cta,.promo-popup-cta,.float-btn,
.mix-card .card-add-btn,.size-btn.active{color:#fff}
.cart-count{background:#fff;color:var(--caramel)}
body:not(.light-mode) .cart-count{color:var(--caramel)}
.outlet-bar[data-state="ok"] .outlet-btn,
.outlet-bar[data-state="manual"] .outlet-btn,
.outlet-bar[data-state="loading"] .outlet-btn,
.outlet-link,.gate-near,.gate-secondary{color:var(--cream)}
.outlet-link{text-decoration-color:var(--caramel-light)}

/* popup promo: permukaan solid seperti modal lain, aksen cuma di badge, garis, tombol */
.promo-popup{background:var(--card);border:1.5px solid var(--card-line);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.promo-popup-badge{border-radius:6px;letter-spacing:.08em}
.promo-popup-title{font-family:'Familjen Grotesk','Plus Jakarta Sans',system-ui,sans-serif;font-weight:700;letter-spacing:-.01em}
.promo-popup-title span{color:var(--accent-text)}
.promo-popup-divider{display:none}
.promo-syarat-item{background:var(--surface);border:1.5px solid var(--card-line);border-radius:8px}
.promo-popup-close{background:var(--surface);color:var(--cream);border:1.5px solid var(--card-line)}
.promo-popup-close:hover{background:var(--card-line)}
.promo-popup-cta{background:var(--caramel);border-radius:8px;border:1.5px solid var(--caramel)}
.promo-popup-note,.promo-syarat-or{color:var(--cream-dim)}

/* kartu Custom Mix: kartu gelap/putih biasa, dibedakan garis putus aksen (bukan blok krem) */
.menu-wrap .bundle-card.mix-card{background:var(--card);border:1.5px dashed var(--caramel);color:var(--cream)}
.mix-card .bundle-photos{background:color-mix(in srgb,var(--caramel) 14%,var(--card));border-bottom:1.5px dashed var(--caramel)}
.mix-card .card-name,.mix-card .mix-note{color:var(--cream)}
.mix-card .price-disc{color:var(--accent-text)}
@media (hover:hover){.menu-wrap .bundle-card.mix-card:hover{border-style:solid}.mix-card .card-add-btn:hover{background:var(--caramel-light);color:var(--bg);border-color:var(--caramel-light)}}

/* ── 3. SATU WARNA AKSEN: stiker, banner, fokus ikut palet (tanpa kuning) ── */
body{--sticker:var(--caramel-light);--sticker-ink:#0B1215;--focus:var(--caramel-light)}
body.light-mode{--sticker:var(--caramel-pale);--sticker-ink:#10171A;--focus:#10171A}
.promo-banner.bundle-banner{background:color-mix(in srgb,var(--caramel) 22%,var(--card));border-color:var(--caramel)}
.bundle-banner .promo-banner-text,.bundle-banner .promo-banner-text b,.bundle-banner .promo-banner-arrow{color:var(--cream)}

/* icon di banner promo, popup promo, dan pesan error */
.promo-banner-icon:empty,.promo-syarat-icon:empty{display:block;flex-shrink:0;background:var(--accent-text);
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.promo-banner-icon:empty{width:22px;height:22px;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1'/%3E%3C/svg%3E")}
.bundle-banner .promo-banner-icon:empty{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E")}
.promo-syarat-icon:empty{width:20px;height:20px}
.promo-popup-syarat>:nth-child(1) .promo-syarat-icon{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 1.75 12.28a2 2 0 0 0 2 1.72h4.54a2 2 0 0 0 2-1.72L18 8'/%3E%3Cpath d='M5 8h14'/%3E%3Cpath d='M7 15a6.47 6.47 0 0 1 5 0 6.47 6.47 0 0 0 5 0'/%3E%3Cpath d='m12 8 1-6h2'/%3E%3C/svg%3E")}
.promo-popup-syarat>:nth-child(3) .promo-syarat-icon{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E")}
.gate-error{display:flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--cream)}
.gate-error::before{content:"";flex-shrink:0;width:18px;height:18px;background:var(--red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat}

/* ── 2. ICON ── */
.hero-btn::before,.outlet-btn::before,.outlet-cta::before,.gate-near::before,.gate-secondary::before,
.card-add-btn::before,.welcome-cta::before,.promo-popup-cta::before,.float-btn::before,
.reset-btn::before,.contact-banner-btn::before,.promo-wa-btn::before,.confirm-no::before{
  content:"";display:inline-block;flex-shrink:0;width:18px;height:18px;margin-right:8px;vertical-align:-3px;
  background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.hero-btn,.outlet-btn,.outlet-cta,.gate-near,.gate-secondary,.welcome-cta,.promo-popup-cta,.float-btn,
.contact-banner-btn,.promo-wa-btn{display:inline-flex;align-items:center;justify-content:center}
.hero-btn-primary{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v2M14 2v2M6 2v2'/%3E%3Cpath d='M16 8h1a4 4 0 0 1 0 8h-1'/%3E%3Cpath d='M4 8h12v9a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z'/%3E%3C/svg%3E")}
.hero-btn-ghost{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3C/svg%3E")}
.outlet-btn{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
.outlet-cta{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1-5h16l1 5'/%3E%3Cpath d='M4 9v11h16V9'/%3E%3Cpath d='M3 9a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0'/%3E%3C/svg%3E")}
.gate-near{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E")}
#gateManual{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.8 2.8 0 0 1 4 4L7.5 20.5 2 22l1.5-5.5z'/%3E%3C/svg%3E")}
#gateLater{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E")}
.card-add-btn{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.card-add-btn::before{width:16px;height:16px;margin-right:6px;vertical-align:-2px}
.mix-card .card-add-btn{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.8L20 11l-6.1 2.2L12 19l-1.9-5.8L4 11l6.1-2.2z'/%3E%3C/svg%3E")}
.welcome-cta{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v2M14 2v2M6 2v2'/%3E%3Cpath d='M16 8h1a4 4 0 0 1 0 8h-1'/%3E%3Cpath d='M4 8h12v9a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z'/%3E%3C/svg%3E")}
.promo-popup-cta{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4z'/%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='black'/%3E%3C/svg%3E")}
.float-btn{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E")}
.reset-btn{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E")}
.contact-banner-btn,.promo-wa-btn{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3C/svg%3E")}
.confirm-no::before{display:none}
@media (prefers-reduced-motion:no-preference){
  .hero-btn::before,.outlet-btn::before,.card-add-btn::before{transition:transform .15s}
  .hero-btn:hover::before,.card-add-btn:hover::before{transform:scale(1.12)}
}