/* ==========================================================
   MODAL - popup detail produk / checkout
   HTML-nya dibuat di public/assets/js/modules/modal.js
   Mobile: muncul dari bawah (bottom sheet). Desktop: di tengah.
   ========================================================== */
.modal{position:fixed;inset:0;z-index:50}
.modal-overlay{position:absolute;inset:0;background:rgba(15,23,42,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:background-color .28s ease,backdrop-filter .28s ease,-webkit-backdrop-filter .28s ease;will-change:background-color,backdrop-filter}
.modal-sheet{position:absolute;left:0;right:0;bottom:0;max-height:92dvh;overflow-y:auto;padding:20px 16px 0;background:#fff;border-radius:20px 20px 0 0;overscroll-behavior:contain;transform:translate3d(0,100%,0);opacity:1;transition:transform .34s cubic-bezier(.22,.9,.28,1),opacity .2s ease;will-change:transform;backface-visibility:hidden}
/* tombol tutup: menempel di atas saat isi digulir, tapi tidak memakan ruang
   (margin-bottom negatif sebesar tingginya, jadi kepala popup tetap di posisi semula) */
.modal-close{position:sticky;top:8px;z-index:3;display:grid;place-items:center;width:36px;height:36px;margin:0 0 -36px auto;padding:0;border:0;border-radius:50%;background:var(--bg);font-size:22px;line-height:1;cursor:pointer}
.modal-close:hover{background:var(--line)}

/* kepala popup: logo + nama + rating dalam satu baris (rating tidak lagi jadi kotak sendiri) */
.modal-head{display:flex;align-items:center;gap:12px;padding-right:40px}
.modal-head h3{margin:0;font-size:18px;line-height:1.25}
.modal-id{min-width:0}
.modal-meta{display:flex;align-items:center;gap:7px;margin:3px 0 0;font-size:12.5px;color:var(--mut)}
.modal-meta .modal-star{color:var(--star);font-size:13px}
.modal-meta i{width:1px;height:11px;background:var(--line)}
.modal-logo{flex:none;width:52px;height:52px;border-radius:12px;overflow:hidden;display:grid;place-items:center;font-weight:800;font-size:24px;color:#fff;background:linear-gradient(145deg,var(--c),color-mix(in srgb,var(--c) 55%,#000))}
.modal-logo img{width:100%;height:100%;object-fit:cover}

/* bagian: tiap kelompok dipisah garis tipis supaya tidak terlihat menumpuk */
.msec{padding:16px 0}
.msec+.msec{border-top:1px solid var(--line)}
.msec>.field-label:first-child{margin-top:0}
.msec-qty{display:flex;align-items:center;justify-content:space-between;gap:12px}
.msec-qty .field-label{margin:0}

/* label & input */
.field-label{display:block;margin:16px 0 6px;font-size:13px;font-weight:700}
.field-label small,.field-hint{font-weight:400;font-size:12px;color:var(--mut)}
.field-hint{display:block;margin-top:4px}
.in{flex:1;width:100%;min-height:44px;margin-top:4px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#fff}

/* pilihan varian */
.variants{display:grid;gap:8px}
/* Judul kelompok varian (Bulanan). Harian pakai tombol lipat .variant-more. */
.variant-group{margin:8px 0 0;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.variant-group:first-child{margin-top:0}
/* Tombol "Harian" yang dilipat: baris ringkas, harga termurah sebagai petunjuk. */
.variant-more{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:12px;border:1px dashed var(--line);border-radius:14px;background:transparent;color:inherit;font:inherit;cursor:pointer;text-align:left}
.variant-more:hover{border-color:var(--brand);background:var(--brand-l)}
.variant-more span{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.variant-more b{font-size:13.5px}
.variant-more small{color:var(--mut);font-size:12px}
.variant-more svg,.variant-more .ic{flex:none;color:var(--mut);transition:transform .2s}
.variant-more[aria-expanded="true"] svg,.variant-more[aria-expanded="true"] .ic{transform:rotate(180deg)}
.variant-wrap{display:grid;gap:8px}
/* Link "penjelasan paket" di bawah daftar varian: membuka panduan jenis akun. */
/* ---------- "Penting sebelum beli": satu kotak berisi S&K ----------
   3 poin terpenting selalu terlihat, sisanya dilipat ("Lihat selengkapnya").
   Warna ikut tema (biru brand), bukan kuning: ini pengingat, bukan peringatan bahaya.
   Garis tebal di kiri memberi kesan "baca dulu" tanpa keluar dari palet toko. */
.tn{margin:2px 0 4px;padding:13px 14px 13px 15px;border:1px solid color-mix(in srgb,var(--brand) 20%,transparent);border-left:3px solid var(--brand);border-radius:12px;background:color-mix(in srgb,var(--brand) 7%,var(--surface))}
.tn-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.tn-ic{flex:none;display:grid;place-items:center;color:var(--brand-d)}
.tn-head b{font-size:13px;font-weight:800;color:var(--brand-d)}
.tn-list{gap:6px;font-size:12.5px;line-height:1.45;color:var(--ink)}
.tn-list li.is-no{color:var(--mut)}
.tn-rest{margin-top:6px}
.tn-more{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:0;border:0;background:none;color:var(--brand-d);font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.tn-more:hover{text-decoration:underline}
.tn-count{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand-d);font-size:10.5px;font-weight:800}

/* Link "Lihat penjelasan paket" di bawah daftar paket (terpisah dari kotak S&K). */
.variant-info{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;font-size:12.5px;font-weight:700;color:var(--brand-d);text-decoration:none;padding:2px 0}
.variant-info:hover{text-decoration:underline}
.variant-info .ic{flex:none}
.variant{position:relative;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.variant input{position:absolute;opacity:0;pointer-events:none}
.variant span{flex:1;display:flex;flex-direction:column;line-height:1.3}
.variant small{color:var(--mut)}
.variant strong{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.variant-check{display:none;font-style:normal;color:var(--brand-d)}
.variant.on{border-color:var(--brand-d);background:var(--brand-l)}
.variant.on .variant-check{display:block}
.variant.off{opacity:.5;cursor:not-allowed}
.variant.off small{color:#dc2626}

/* poin fitur (S&K produk) */
.feature-list{list-style:none;display:grid;gap:7px;margin:0;padding:0;font-size:12.5px;line-height:1.5;color:var(--mut)}
.feature-list li{display:flex;align-items:flex-start;gap:8px}
.feature-list li::before{flex:none;content:"\2713";font-weight:800;color:#16a34a;line-height:1.5}
.feature-list li.is-no::before{content:"\2715";color:#dc2626}

/* jumlah */
.qty{display:flex;align-items:center;gap:10px}
.qty button{width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:20px}
.qty output{min-width:32px;text-align:center;font-weight:700}
.qty small{color:var(--mut)}

/* kirim ke email */
.mail{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:10px}
.mail-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;font-weight:600}
.mail-switch span{flex:1;display:flex;flex-direction:column}
.mail-switch small{font-weight:400;color:var(--mut)}
.mail-icon{display:grid;color:var(--brand-d)}
.toggle{appearance:none;flex:none;position:relative;width:44px;height:24px;border-radius:999px;background:#cbd5e1;cursor:pointer;accent-color:var(--brand-d)}
.toggle::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}
.toggle:checked{background:var(--brand-d)}
.toggle:checked::after{transform:translateX(20px)}
#emi{margin-top:10px}

/* kupon: kode dicek otomatis, status muncul di kanan kolom (tanpa tombol) */
.coup{margin-top:14px}
.coup-row{display:flex;align-items:center;gap:8px}
.coup-row .in{margin-top:0}
.coup-state{flex:none;font-size:12px;font-weight:700;white-space:nowrap}
.coup-state.is-ok{color:#15803d}
.coup-state.is-bad{color:#dc2626}
.coup-state.is-wait,.coup-state.is-mut{color:var(--mut);font-weight:600}
/* kalau pesannya panjang (mis. "Kode kupon tidak berlaku atau sudah habis."), turun ke baris baru */
.coup-row{flex-wrap:wrap}
.coup-row .coup-state{order:3;width:100%;white-space:normal;line-height:1.4}
.coup-row .coup-state:empty{display:none}
/* "Cara aktivasi": baris kartu dengan panah, isinya dibuka kalau diklik. */
.desc-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:12px;padding:14px 15px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;font-weight:800;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.desc-btn:hover{border-color:var(--brand);background:var(--brand-l)}
.desc-btn .ic{flex:none;color:var(--mut);transition:transform .2s}
.desc-btn[aria-expanded="true"]{border-bottom-left-radius:0;border-bottom-right-radius:0}
.desc-btn[aria-expanded="true"] .ic{transform:rotate(180deg)}
.desc-box{margin:0;padding:14px 15px;border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;background:var(--bg);font-size:13px;line-height:1.65;color:var(--mut)}
.desc-box p{margin:0}
.desc-box p+p{margin-top:8px}
.link-btn{display:flex;align-items:center;gap:6px;margin:10px 0 6px;padding:0;border:0;background:none;color:var(--brand-d);font-weight:600;text-decoration:underline}

/* kaki popup: total + tombol Beli. Menempel di bawah saat isi digulir,
   jadi pembeli tidak perlu menggulir balik ke bawah untuk membeli. */
.modal-foot{position:sticky;bottom:0;z-index:1;margin:0 -16px;padding:12px 16px calc(14px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -10px 24px rgba(15,23,42,.06)}
.summary{padding:10px 12px;background:var(--bg);border-radius:10px}
.summary p{display:flex;justify-content:space-between;margin:0;font-size:13px}
.summary small{color:var(--mut)}
.summary .summary-total{align-items:center;margin-top:6px;padding:6px 0 0;border-top:1px solid var(--line);font-size:19px}
/* baris potongan kupon: hanya muncul kalau kupon sah */
.summary .summary-disc{color:#15803d;font-weight:600}
.summary .summary-disc span:last-child{font-weight:800}
.summary-total strong{transition:color .15s}
.summary-total strong.is-disc{color:#15803d}
.form-msg{min-height:0;margin:0;font-size:12.5px;color:var(--brand-d)}
.form-msg:not(:empty){margin:8px 0 0}
.modal-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.safe-note{margin:8px 0 0;text-align:center;font-size:11.5px;line-height:1.45;color:var(--mut)}

/* desktop: popup di tengah layar */
@media (min-width:700px){
  .modal{display:grid;place-items:center}
  .modal-sheet{position:relative;width:min(440px,calc(100% - 32px));max-height:90dvh;border-radius:20px}
  /* kaki ikut melengkung supaya tidak menonjol keluar sudut lembar */
  .modal-foot{border-radius:0 0 20px 20px}
}

/* animasi buka/tutup popup (class .is-open dipasang modal.js setelah popup tampil, jadi transisinya selalu jalan dari awal)
   overlay: gelap + blur masuk bareng (tanpa lompatan). lembar: naik dari bawah (mobile) / membesar halus (desktop) */
.modal.is-open .modal-overlay{background:rgba(15,23,42,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal.is-open .modal-sheet{transform:translate3d(0,0,0)}
@media (min-width:700px){
  .modal-sheet{transform:translate3d(0,12px,0) scale(.97);opacity:0}
  .modal.is-open .modal-sheet{transform:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){.modal .modal-overlay,.modal .modal-sheet{transition:none!important}}

/* HP: font input 16px supaya iOS tidak zoom sendiri saat mengetik */
@media (max-width:699px){.in{font-size:16px}}

/* ---------- Ulasan pembeli di popup produk ----------
   Baris ringkas (bintang + rata-rata + jumlah), daftar 3 terbaru dilipat.
   Pola lipatan sama dengan tombol "Harian" supaya terasa satu bahasa. */
.rv-more{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:12px;padding:12px;border:1px dashed var(--line);border-radius:14px;background:transparent;color:inherit;font:inherit;cursor:pointer;text-align:left}
.rv-more:hover{border-color:var(--brand);background:var(--brand-l)}
.rv-head{display:flex;flex-direction:column;gap:3px;line-height:1.3}
.rv-more b{font-size:13.5px}
.rv-more small{display:inline-flex;align-items:center;gap:6px;color:var(--mut);font-size:12px}
.rv-more svg,.rv-more .ic{flex:none;color:var(--mut);transition:transform .2s}
.rv-more[aria-expanded="true"] svg,.rv-more[aria-expanded="true"] .ic{transform:rotate(180deg)}
.rv-stars{display:inline-flex;gap:1px;font-size:12px;line-height:1;color:#f0a92a;letter-spacing:.5px}
.rv-stars i{font-style:normal;color:var(--line)}
.rv-wrap{margin-top:10px}
.rv-list{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.rv-item{padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.rv-item .rv-stars{font-size:13px}
.rv-item p{margin:6px 0 0;font-size:12.5px;line-height:1.55}
.rv-item small{display:block;margin-top:6px;font-size:11.5px;color:var(--mut)}

/* nama penulis di daftar ulasan popup */
.rv-item-top{display:flex;align-items:center;gap:8px}
.rv-item-top b{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}