<?php
/* ================== GLOBAL SETTING ================== */
$set = $func->globalset("semua");

/* ================== TITLE ================== */
$nama = (isset($titel))
  ? $set->nama . " " . $titel
  : $set->nama . " " . $set->slogan;

/* ================== LOGO DARI DATABASE (FIX) ================== */
/*
  - logo diambil dari DB ($set->logo)
  - URL ABSOLUT (tidak terpengaruh route)
  - aman untuk spasi / karakter
*/

// nama file logo dari DB
$logoFile = !empty($set->logo) ? trim($set->logo) : 'logo.png';

// path absolut (ANTI broken di /ppob/pulsa)
$logoIcon = rtrim(base_url(), '/') . '/admin/assets/img/' . rawurlencode($logoFile);

// favicon tetap dari DB
$faviconFile = !empty($set->favicon) ? trim($set->favicon) : $logoFile;

/* ================== USER ================== */
$keranjang = (session()->get('usrid') > 0)
  ? $func->getKeranjang()
  : 0;
?>

<!doctype html>
<html lang="id" data-theme="light">
<head>

<script>
(function(){
  try{
    var t = localStorage.getItem('pm_theme');
    if(t === 'dark' || t === 'light'){
      document.documentElement.dataset.theme = t;
    }
  }catch(e){}
})();
</script>

<title><?= htmlspecialchars($nama, ENT_QUOTES) ?></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="<?= htmlspecialchars('Aplikasi toko online ' . $nama, ENT_QUOTES) ?>">

<link rel="icon"
      href="<?= base_url('admin/assets/img/' . rawurlencode($faviconFile)) ?>"
      type="image/png">

<!-- Open Graph / Social share -->
<meta property="og:title" content="<?= htmlspecialchars($nama, ENT_QUOTES) ?>">
<meta property="og:type" content="article">
<meta property="og:url" content="<?= site_url(); ?>">
<meta property="og:image" content="<?= base_url('admin/assets/img/' . rawurlencode($faviconFile)) ?>">
<meta property="og:description" content="<?= htmlspecialchars('Aplikasi toko online ' . $nama, ENT_QUOTES) ?>">
<meta property="og:site_name" content="<?= htmlspecialchars($nama, ENT_QUOTES) ?>">
<meta name="twitter:card" content="product">
<meta name="twitter:title" content="<?= htmlspecialchars($nama, ENT_QUOTES) ?>">
<meta name="twitter:description" content="<?= htmlspecialchars('Aplikasi toko online ' . $nama, ENT_QUOTES) ?>">
<meta name="twitter:image" content="<?= base_url('admin/assets/img/' . rawurlencode($faviconFile)) ?>">

<!-- Aset lama (dipakai halaman PPOB/checkout yang belum dirombak ke tema baru) -->
<link rel="stylesheet" href="<?= base_url('assets/css/material-icons.css') ?>">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
<link href="<?= base_url('assets/css/bootstrap.min.css') ?>" rel="stylesheet">
<link href="<?= base_url('assets/css/swiper.min.css') ?>" rel="stylesheet">
<link href="<?= base_url('assets/css/chosen.min.css') ?>" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<?= base_url('assets/vendor/select2/select2.min.css') ?>">
<link href="<?= base_url('assets/css/style.css') ?>" rel="stylesheet">
<link href="<?= base_url('assets/fonts/fontawesome.all.min.css') ?>" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script type="text/javascript" src="<?= base_url('assets/vendor/jquery/jquery-3.2.1.min.js') ?>"></script>

<style>
:root{
  --bg:#f4f6fb; --card:#ffffff; --text:#111827; --muted:#6b7280;
  --line:#e5e7eb;
}
html[data-theme="dark"]{
  --bg:#0b0f17; --card:#141925; --text:#f3f4f6; --muted:#9ca3af;
  --line:#23293a;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ===== TOPBAR ===== */
.topbar{
  position:sticky;
  top:0;
  z-index:999;
  background:var(--card);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:1200px;
  margin:auto;
  padding:10px 16px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{order:1}
.actions{order:2}
.topbar-search{order:3; flex:1 1 100%;}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand img{
  height:26px;
  width:auto;
  display:block;
  object-fit:contain;
}
</style>

</head>
<body>

<style>
:root{
  --bg:#f4f6fb; --card:#ffffff; --text:#111827; --muted:#6b7280; --line:#e5e7eb;
  --primary:#f80020; --ok:#16a34a;
  --btn:#eef1f6; --btnText:#111827;
  --shadow:0 18px 40px rgba(0,0,0,.10);

  /* bottom nav */
  --navBg:rgba(255,255,255,.92);
  --navIcon:#9ca3af;
  --navIconActive:#111827;
  --navBlue:#3b82f6;
}
html[data-theme="dark"]{
  --bg:#0b0f17; --card:#141925; --text:#f3f4f6; --muted:#9ca3af; --line:#23293a;
  --btn:#1c2332; --btnText:#f3f4f6;
  --shadow:0 18px 40px rgba(0,0,0,.45);

  --navBg:rgba(20,25,37,.92);
  --navIcon:#7b8496;
  --navIconActive:#f3f4f6;
  --navBlue:#60a5fa;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
a,
a:link,
a:visited,
a:hover,
a:active{text-decoration:none;color:inherit}
.hidden{display:none !important}
.muted{color:var(--muted)}
button{font-family:inherit}

/* ===== background abstrak ===== */
body::before{
  content:""; position:fixed; inset:0; z-index:-9999; background-color:var(--bg);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(248,0,32,.10) 0 120px, transparent 121px),
    radial-gradient(circle at 78% 22%, rgba(248,24,88,.08) 0 90px, transparent 91px),
    radial-gradient(circle at 70% 75%, rgba(120,130,150,.10) 0 140px, transparent 141px),
    radial-gradient(circle at 30% 70%, rgba(248,0,32,.06) 0 160px, transparent 161px);
  background-repeat:no-repeat;
}

/* ================= TOPBAR ================= */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
html[data-theme="dark"] .topbar{background:rgba(11,15,23,.85)}
.topbar-inner{
  max-width:1200px; margin:auto; padding:12px 16px;
  display:flex; gap:12px; align-items:center;
}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:34px;display:block;max-width:100%}
.search{
  flex:1 1 auto; display:flex; gap:8px; align-items:center;
  background:var(--card); border:1px solid var(--line);
  border-radius:999px; padding:10px 14px; min-width:160px;
}
.search input{border:none;outline:none;background:none;width:100%;color:var(--text);font-size:14px}

.actions{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.pill, .toggle{
  border:1px solid var(--line); background:var(--card);
  border-radius:999px; padding:8px 12px;
  font-weight:900; cursor:pointer; display:flex; align-items:center; gap:8px;
  transition:.12s;
}
.pill:hover,.toggle:hover{filter:brightness(.98)}
.pill .badge{
  display:none; min-width:18px;height:18px; padding:0 6px;
  border-radius:999px; background:var(--primary); color:#fff;
  font-size:12px; font-weight:900; line-height:18px; text-align:center;
}

@media (max-width:520px){
  .pill span{display:none}
  .brand img{height:30px}
}

/* ================= LAYOUT ================= */
.wrap{max-width:1200px;margin:auto;padding:18px}
.section{margin-top:10px}
.section h2{margin:10px 0 6px;font-size:34px}

/* ================= PROMO STRIP (BIAR HIDUP) ================= */
.promo-strip{
  background:linear-gradient(90deg, rgba(248,0,32,.10), rgba(59,130,246,.10));
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  margin:10px 0 14px;
  font-weight:900;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.promo-strip small{font-weight:700;color:var(--muted)}
.promo-chip{
  border:1px solid var(--line);
  background:rgba(255,255,255,.55);
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
}
html[data-theme="dark"] .promo-chip{background:rgba(20,25,37,.55)}

/* ================= QUICK ACTIONS ================= */
.quick{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 6px;
}
.qbtn{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:999px;
  padding:8px 12px;
  font-weight:900;
  cursor:pointer;
  transition:.12s;
}
.qbtn:hover{box-shadow:0 10px 20px rgba(0,0,0,.06); transform:translateY(-1px)}

/* ================= SLIDER ================= */
.slider{
  display:flex; gap:16px; overflow-x:auto; overflow-y:hidden;
  padding:14px 4px 28px; width:100%;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.slider::-webkit-scrollbar{display:none}

/* ================= GRID KATEGORI (tanpa slider, semua tampil) ================= */
.svc-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap:16px;
  padding:14px 4px 6px;
}
.svc-grid .svc{ width:auto; }

/* ================= LAYANAN ================= */
.svc{
  flex:0 0 auto; width:120px; background:var(--card);
  border:1px solid var(--line); border-radius:18px;
  padding:16px 10px; text-align:center;
  box-shadow:0 14px 28px rgba(0,0,0,.12);
  cursor:pointer; transition:.15s; user-select:none; scroll-snap-align:start;
}
.svc:hover{transform:translateY(-4px)}
.svc.active{border-color:var(--primary)}
.svc-ic{
  width:56px;height:56px;border-radius:999px;margin:0 auto 10px;
  display:grid;place-items:center;background:rgba(248,0,32,.12);font-size:22px;
}
.svc-link{ display:block; width:100%; color:inherit; }
.svc small{display:block;color:var(--muted);margin-top:6px}

/* ================= PRODUK (filter/hidup) ================= */
.product{
  flex:0 0 auto; width:290px; background:var(--card);
  border:1px solid var(--line); border-radius:18px; padding:14px;
  box-shadow:0 12px 26px rgba(0,0,0,.10);
  transition:.15s; scroll-snap-align:start;
  display:flex; flex-direction:column; min-height:170px;
}
.product:hover{transform:translateY(-3px)}
.product.dim{opacity:.25; filter:saturate(.6)}
.pname{font-weight:900;margin:0 0 4px;font-size:16px}
.pmeta{margin:0;color:var(--muted);font-size:13px}
.pfooter{margin-top:auto;padding-top:12px;border-top:1px dashed rgba(0,0,0,.08)}
html[data-theme="dark"] .pfooter{border-top:1px dashed rgba(255,255,255,.10)}
.price-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.price{font-weight:900;color:var(--ok)}
.btn-row{margin-top:8px;display:flex;gap:6px}
.btn-mini{
  border:1px solid rgba(248,0,32,.70);
  background:var(--btn); color:var(--btnText);
  border-radius:10px; padding:6px 10px;
  font-weight:800; font-size:13px; cursor:pointer; flex:1;
  display:flex; justify-content:center; align-items:center; gap:6px;
  transition:.12s;
}
.btn-mini:hover{border-color:var(--primary);box-shadow:0 0 0 2px rgba(248,0,32,.12)}
.btn-mini:active{transform:translateY(1px)}
@media (max-width:520px){ .btn-mini{font-size:12px;padding:6px 8px} }

/* ================= ABOUT ================= */
.about{max-width:1200px;margin:22px auto 0;padding:0 18px 26px}
.about-box{
  background:rgba(255,255,255,.45);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
}
html[data-theme="dark"] .about-box{background:rgba(20,25,37,.45)}
.about-title{margin:0 0 8px;font-weight:900}
.about-text{margin:0;color:var(--muted);line-height:1.6;font-size:14px}

/* ================= MODAL ================= */
.pm-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:none; align-items:center; justify-content:center;
  z-index:99999; padding:16px;
}
.pm-overlay.show{display:flex}
.pm-box{
  width:min(520px,100%); background:var(--card); border-radius:18px;
  box-shadow:var(--shadow); overflow:hidden; transform:translateY(8px); opacity:0;
  transition:.18s;
}
.pm-overlay.show .pm-box{transform:translateY(0);opacity:1}
.pm-head{
  padding:14px; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.pm-body{padding:14px}
.pm-actions{
  padding:14px; border-top:1px solid var(--line);
  display:flex; justify-content:flex-end; gap:10px;
}
.pm-input{
  width:100%; padding:12px 14px; border-radius:14px;
  border:1px solid var(--line); background:transparent; color:var(--text);
  outline:none;
}
.pm-input:focus{border-color:rgba(248,0,32,.55)}
.field{margin-bottom:10px}
.label{font-weight:900;margin:0 0 6px;font-size:13px;color:var(--muted)}
.btn{border:none;border-radius:999px;padding:10px 16px;font-weight:900;cursor:pointer}
.btn-primary{background:var(--primary);color:#fff}
.btn-ghost{background:var(--card);border:1px solid var(--line);color:var(--text)}
.btn-icon{
  width:36px;height:36px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);cursor:pointer;display:grid;place-items:center;
}
.note{margin-top:8px;color:var(--muted);font-size:12px}
.link-strong{color:var(--primary);font-weight:900}

/* ================= TOAST (BIAR HIDUP) ================= */
.toast{
  position:fixed;
  left:50%;
  bottom:96px;
  transform:translateX(-50%) translateY(14px);
  background:rgba(17,24,39,.92);
  color:#fff;
  padding:10px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
  z-index:99999;
  opacity:0;
  pointer-events:none;
  transition:.18s;
  box-shadow:0 16px 30px rgba(0,0,0,.18);
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
html[data-theme="dark"] .toast{background:rgba(255,255,255,.12)}

/* ===== Penyesuaian dark-mode untuk komponen Bootstrap lama yang belum dirombak ===== */
html[data-theme="dark"] .card{
  background: var(--card);
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-muted{
  color: var(--muted) !important;
}
html[data-theme="dark"] .notification{
  background-color: var(--card);
  color: var(--text);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
html[data-theme="dark"] select,
html[data-theme="dark"] select.js-select2{
  background-color: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
}
html[data-theme="dark"] select option{
  background-color: var(--card);
  color: var(--text);
}

/* Tombol lama (.btn-default) tidak punya background, jadi teks putihnya
   tidak kelihatan. Beri background supaya selalu kebaca di mana pun dipakai. */
.btn-default{
  background: linear-gradient(135deg, #ff2d55, #ff6a00) !important;
  border: none !important;
  box-shadow: 0 10px 22px rgba(255, 45, 85, .28);
}
.btn-default:hover,
.btn-default:focus{
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(255, 45, 85, .34);
}

/* ================= MOBILE BOTTOM NAV ================= */
/* Batas dinaikkan ke 1366px supaya tetap tampil di iPad Pro (portrait 1024px / landscape 1366px) */
@media (max-width:1366px){
  body{padding-bottom:88px;}
}
.mnav{
  position:fixed; left:0; right:0; bottom:0;
  height:72px; background:var(--navBg);
  border-top:1px solid var(--line);
  backdrop-filter: blur(12px);
  z-index:9999;
  display:none;
}
@media (max-width:1366px){ .mnav{display:block;} }
.mnav-inner{
  height:72px;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  align-items:center;
  justify-items:center;
  max-width:520px;
  margin:0 auto;
  padding:0 10px;
  position:relative;
}
.mnav-btn,
.mnav-btn:link,
.mnav-btn:visited{
  width:54px; height:54px;
  display:grid; place-items:center;
  border-radius:16px;
  color:var(--navIcon);
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:.12s;
}
.mnav-btn:hover{
  border-color:rgba(0,0,0,.08);
  background:rgba(0,0,0,.02);
}
html[data-theme="dark"] .mnav-btn:hover{
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.mnav-btn.active,
.mnav-btn.active:link,
.mnav-btn.active:visited{color:var(--navIconActive)}
.mnav-center{
  position:relative;
  width:76px; height:76px;
  border-radius:999px;
  background:var(--navBlue);
  display:grid; place-items:center;
  box-shadow:0 18px 30px rgba(0,0,0,.18);
  transform: translateY(-18px);
  border:6px solid rgba(255,255,255,.85);
  transition:.12s;
}
.mnav-center:active{transform: translateY(-18px) scale(.98)}
html[data-theme="dark"] .mnav-center{
  border-color:rgba(20,25,37,.92);
}
.mnav-center svg{fill:#fff}
.mnav-badge{
  position:absolute;
  bottom:-10px;
  left:50%;
  transform:translateX(-50%);
  min-width:26px;
  height:26px;
  padding:0 8px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-weight:900;
  font-size:13px;
  display:grid;
  place-items:center;
  transition:.12s;
}
.mnav-badge.bump{transform:translateX(-50%) scale(1.08)}
.mnav svg{width:26px;height:26px;fill:currentColor}

/* ================= MICRO-ANIM & TAP FEEDBACK ================= */
.svc, .product, .pill, .btn-mini{will-change:transform;}
.svc:active, .product:active, .btn-mini:active, .pill:active{transform:scale(.98);}

/* ====== DARK MODE FIX: TEKS BIAR TERBACA ====== */
html[data-theme="dark"] .promo-strip{
  /* bikin strip promo sedikit lebih terang biar teks kebaca */
  background:linear-gradient(90deg, rgba(248,0,32,.18), rgba(96,165,250,.16));
  border-color:rgba(255,255,255,.10);
}

html[data-theme="dark"] .promo-strip,
html[data-theme="dark"] .promo-strip *{
  color:rgba(243,244,246,.92) !important; /* teks putih lembut */
}

html[data-theme="dark"] .promo-chip{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:rgba(243,244,246,.88) !important;
}

/* quick buttons */
html[data-theme="dark"] .qbtn{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.14) !important;
  color:rgba(243,244,246,.90) !important;
}
html[data-theme="dark"] .qbtn:hover{
  background:rgba(255,255,255,.09) !important;
}

/* teks muted biar tidak terlalu redup */
html[data-theme="dark"] .muted{
  color:rgba(209,213,219,.82) !important;
}

/* card layanan & produk: label kecil kadang terlalu redup */
html[data-theme="dark"] .svc small,
html[data-theme="dark"] .pmeta,
html[data-theme="dark"] .note{
  color:rgba(209,213,219,.78) !important;
}

/* input placeholder dark */
html[data-theme="dark"] input::placeholder{
  color:rgba(209,213,219,.55);
}

/* tombol mini: pastikan teks tetap kontras */
html[data-theme="dark"] .btn-mini{
  background:rgba(255,255,255,.06) !important;
  color:rgba(243,244,246,.92) !important;
}

/* ====== DARK MODE FIX: TOMBOL TOPBAR (KERANJANG/LOGIN/TOGGLE) ====== */
html[data-theme="dark"] .pill,
html[data-theme="dark"] .toggle{
  background: rgba(255,255,255,.06) !important;   /* lebih terang */
  border-color: rgba(255,255,255,.14) !important; /* garis terlihat */
  color: rgba(243,244,246,.92) !important;        /* teks putih */
}

html[data-theme="dark"] .pill:hover,
html[data-theme="dark"] .toggle:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.20) !important;
}

html[data-theme="dark"] .pill:active,
html[data-theme="dark"] .toggle:active{
  transform: scale(.98);
}

/* icon emoji kadang ikut redup di beberapa browser — paksa tetap terang */
html[data-theme="dark"] .pill,
html[data-theme="dark"] .toggle{
  filter: none !important;
}

/* badge keranjang biar kontras */
html[data-theme="dark"] .pill .badge{
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
}

/* search container topbar biar nyatu dan jelas */
html[data-theme="dark"] .search{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.12) !important;
}
html[data-theme="dark"] .search input{
  color: rgba(243,244,246,.92) !important;
}
html[data-theme="dark"] .search input::placeholder{
  color: rgba(209,213,219,.55) !important;
}

/* ===== Produk media (gambar + info) ===== */
.pmedia{
  display:flex;
  gap:12px;
  align-items:center;
}
.pimg{
  width:74px;
  height:74px;
  border-radius:14px;
  overflow:hidden;
  flex:0 0 auto;
  border:1px solid var(--line);
  background:rgba(248,0,32,.06);
  display:block;
}
.pimg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.pinfo{min-width:0}
.pname{
  margin:0 0 4px;
  font-weight:900;
  font-size:15px;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.pmeta{
  margin:0;
  font-size:13px;
  color:var(--muted);
}

/* Dark mode: biar tetap nyatu & tidak kusam */
html[data-theme="dark"] .pimg{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
}
html[data-theme="dark"] .pimg img{
  filter:saturate(1.05) contrast(1.02);
}

/* ===== Produk tanpa tombol ===== */
.pfooter{
  margin-top:12px;
}

.price-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
}

/* Harga utama */
.price{
  font-size:18px;
  font-weight:900;
  color:#111; /* hitam tegas */
  letter-spacing:.2px;
}

/* Harga coret */
.old-price{
  font-size:12px;
  color:#9ca3af;
  text-decoration:line-through;
  margin-bottom:2px;
}

/* Label kecil kanan */
.tag{
  font-size:12px;
  font-weight:600;
  color:#6b7280;
}

/* DARK MODE */
html[data-theme="dark"] .price{
  color:#f9fafb;
}
html[data-theme="dark"] .old-price{
  color:#9ca3af;
}
html[data-theme="dark"] .tag{
  color:#9ca3af;
}

/* #btnLogout sengaja disembunyikan (cuma proxy klik untuk menu dropdown akun),
   harus menang dari aturan .btn-login di bawah ini */
#btnLogout{ display:none !important; }

/* FORCE OVERRIDE - tempel paling bawah CSS kamu */
button.btn-login, a.btn-login{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;

  height:42px !important;
  padding:0 18px !important;

  border-radius:9999px !important;  /* bikin oval */
  border:1.5px solid rgba(255,255,255,.25) !important;

  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(245,245,245,.90)) !important;
  color:#111 !important;

  font-weight:800 !important;
  font-size:14px !important;
  line-height:1 !important;
  white-space:nowrap !important;

  box-shadow:0 6px 18px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.8) !important;

  cursor:pointer !important;
  text-decoration:none !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}

button.btn-login .ic, a.btn-login .ic{
  width:22px !important;
  height:22px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:999px !important;
  background:rgba(248,0,32,.12) !important;
  font-size:13px !important;
}

button.btn-login:hover, a.btn-login:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(248,0,32,.55) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* DARK MODE */
html[data-theme="dark"] button.btn-login,
html[data-theme="dark"] a.btn-login{
  background:linear-gradient(180deg, rgba(32,36,48,.95), rgba(24,28,40,.95)) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.15) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] button.btn-login .ic,
html[data-theme="dark"] a.btn-login .ic{
  background:rgba(248,0,32,.18) !important;
}


/* ======= FOOTER MEGA (Shopee-like) ======= */
.footer-mega{
  margin-top:34px;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
}
html[data-theme="dark"] .footer-mega{
  background:rgba(20,25,37,.65);
}

.footer-mega .inner{
  max-width:1200px;
  margin:auto;
  padding:26px 16px;
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap:22px;
  align-items:start;
}

.f-title{
  font-weight:900;
  letter-spacing:.2px;
  margin:0 0 12px;
  font-size:14px;
  color:var(--text);
}

.f-links{
  display:grid;
  gap:8px;
}

.f-links a{
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}
.f-links a:hover{
  color:var(--text);
  text-decoration:underline;
}

.f-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.badge-chip{
  border:1px solid var(--line);
  background:var(--card);
  color:var(--muted);
  padding:8px 10px;
  border-radius:12px;
  font-size:12px;
}

.f-app{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.qr{
  width:92px;
  height:92px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--card);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.qr img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.store-btns{
  display:grid;
  gap:10px;
}
.store-btn{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  font-weight:800;
  font-size:13px;
}
.store-btn small{
  display:block;
  font-weight:600;
  color:var(--muted);
  margin-top:2px;
}
.store-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.08);
}

.footer-bottom{
  border-top:1px solid var(--line);
  padding:12px 16px;
  max-width:1200px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:12px;
}

/* Responsive */
@media (max-width: 980px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction:column; }
}

/* ===== Footer link clean (no blue, no underline) ===== */
.footer-mega a,
.footer-mega a:visited,
.footer-mega a:hover,
.footer-mega a:active,
.footer-mega a:focus {
  color: var(--muted);
  text-decoration: none;
  outline: none;
}

/* Hover effect tetap ada tapi halus */
.footer-mega a:hover {
  color: var(--text);
}

/* ===== Banner slider theme-aware (pakai CSS variable yang sudah kamu pakai) ===== */
  .banner-wrap{
    max-width: 1200px;
    margin: 16px auto 6px;
    padding: 0 18px;
  }
  .banner-track{
  display:flex;
  gap: 14px;
  overflow-x: auto;   /* penting */
  overflow-y: hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
}
.banner-track::-webkit-scrollbar{ display:none; } /* optional */

  .banner{
    flex: 0 0 100%;
    display:flex;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 18px;
    border-radius: 18px;
    text-decoration:none;
    scroll-snap-align: start;

    /* nyatu dengan theme */
    background: linear-gradient(90deg,
      rgba(255, 80, 120, .14),
      rgba(120, 160, 255, .12)
    );
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 18px 40px rgba(0,0,0,.08);
    backdrop-filter: blur(10px);
  }

  /* dark theme support (kalau kamu pakai [data-theme="dark"]) */
  [data-theme="dark"] .banner{
    background: linear-gradient(90deg,
      rgba(255, 80, 120, .12),
      rgba(120, 160, 255, .10)
    );
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
  }

  .b-left{min-width:0}
  .b-badge{
    display:inline-flex; align-items:center; gap:8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    color: #111;
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(0,0,0,.06);
    margin-bottom: 10px;
  }
  [data-theme="dark"] .b-badge{ color:#e9eef7; background: rgba(20,24,32,.7); border-color: rgba(255,255,255,.08); }

  .b-badge2{ background: rgba(255,255,255,.75); }
  .b-badge3{ background: rgba(255,255,255,.75); }

  .b-title{
    font-size: 18px;
    font-weight: 900;
    color: var(--text, #101828);
    letter-spacing: .2px;
    margin: 0 0 6px;
    line-height: 1.15;
  }
  .b-sub{
    margin: 0 0 10px;
    color: var(--muted, #667085);
    font-size: 13px;
    line-height: 1.35;
  }
  .b-cta{
    display:inline-flex;
    font-weight: 800;
    font-size: 13px;
    color: var(--text, #101828);
    opacity: .9;
  }
  [data-theme="dark"] .b-title,
  [data-theme="dark"] .b-cta{ color: var(--text, #e9eef7); }

  .b-right{
    display:flex;
    align-items:flex-end;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 240px;
  }
  .b-chip{
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text, #101828);
    background: rgba(255,255,255,.6);
    border: 1px solid rgba(0,0,0,.06);
  }
  [data-theme="dark"] .b-chip{
    background: rgba(20,24,32,.55);
    border-color: rgba(255,255,255,.08);
    color: var(--text, #e9eef7);
  }

  .banner-dots{
    display:flex;
    gap: 8px;
    justify-content:center;
    margin-top: 10px;
  }
  .banner-dots button{
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 0;
    background: rgba(0,0,0,.2);
    cursor:pointer;
  }
  [data-theme="dark"] .banner-dots button{ background: rgba(255,255,255,.22); }
  .banner-dots button.active{
  background: rgba(255,0,80,.55);
}

  /* responsive */
  @media (max-width: 720px){
    .banner{ padding: 14px 14px; }
    .b-right{ display:none; } /* biar rapi di HP */
    .b-title{ font-size: 16px; }
  }
  
  .banner { animation: fadeUp .4s ease both; }
@keyframes fadeUp{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:none}
}

.banner-dots button.is-active{
  width:16px;
  border-radius:999px;
}

/* Banner versi gambar (dari DB promo) */
.banner.banner-img{
  padding:0;
  overflow:hidden;
}

.banner .b-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:inherit;
  filter:saturate(1.05);
}

/* supaya teks link tidak jadi biru/underline */
.banner, .banner:visited{
  color:inherit;
  text-decoration:none;
}
.banner:hover{
  text-decoration:none;
}

/* dark mode: tetap enak dilihat */
html[data-theme="dark"] .banner .b-img{
  filter:saturate(1.05) brightness(.95);
}

.banner-wrap{ position:relative; overflow:hidden; }
.banner-track{
  display:flex;
  gap:16px;                /* boleh, tapi lebih aman pakai margin di slide */
  transition:transform .5s ease;
  will-change:transform;
}
.banner-track > .banner{
  flex:0 0 100%;           /* 1 slide = 100% lebar */
}

/* ================= LOGIN BUTTON FIX ================= */
.btn-login-oval{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 18px;
  border-radius: 999px !important; /* kunci oval */
  border: 1.5px solid rgba(0,0,0,.85);

  background: #fff;
  color: #000;
  font-weight: 800;
  font-size: 14px;

  cursor: pointer;
  transition: all .25s ease;
}

/* hover */
.btn-login-oval:hover{
  background: #000;
  color: #fff;
}

/* dark mode */
[data-theme="dark"] .btn-login-oval{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.7);
  color: #fff;
}

[data-theme="dark"] .btn-login-oval:hover{
  background: #fff;
  color: #000;
}


</style>

<style>
  /* Paksa ukuran badge Play Store konsisten di semua halaman */
  img[alt*="Google Play"], 
  img[src*="google"], 
  img[src*="play"]{
    max-width: 320px !important;
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* Kalau badge ada di dalam card/box, pastikan box tidak memaksa full */
  .download-app img,
  .footer img[alt*="Google Play"]{
    max-width: 320px !important;
    width: 100% !important;
    height: auto !important;
  }
</style>


<style>
  .hp-card{
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 18px;
    padding: 22px 22px;
    box-shadow: 0 14px 40px rgba(15,23,42,.08);
    backdrop-filter: blur(10px);
    margin: 18px 0 22px 0;
  }
  .hp-card h3{
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
  }
  .hp-help{
    margin: 0 0 14px 0;
    color: rgba(15,23,42,.6);
    font-size: 13px;
  }

  .hp-input-wrap{
    display: flex;
    gap: 12px;
    align-items: stretch;
    flex-wrap: wrap;
  }

  .hp-input{
    flex: 1 1 340px;
    position: relative;
  }

  .hp-input input{
    width: 100%;
    height: 54px;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(255,255,255,.75);
    padding: 0 14px 0 44px; /* space icon */
    outline: none;
    font-size: 15px;
  }
  .hp-input input:focus{
    border-color: rgba(244,63,94,.45);
    box-shadow: 0 0 0 4px rgba(244,63,94,.12);
    background: #fff;
  }

  .hp-input .hp-ico{
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .65;
    font-size: 18px;
  }

  .hp-btn{
    flex: 0 0 auto;
    height: 54px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.18);
    background: #fff;
    font-weight: 700;
    cursor: pointer;
  }
  .hp-btn:hover{ filter: brightness(.98); }

  @media (max-width: 520px){
    .hp-btn{ width: 100%; }
    .hp-input{ flex-basis: 100%; }
  }
</style>

<style>
  .pm-form-wrap{margin-top:18px;}
  .pm-phone-row{display:flex; gap:14px; align-items:stretch;}
  .pm-phone-field{position:relative; flex:1;}
  .pm-phone-input{
    width:100%;
    height:66px;
    padding:0 18px 0 92px; /* ruang kiri untuk badge operator */
    border-radius:18px;
    border:2px solid rgba(255, 64, 129, .25);
    outline:none;
    background:rgba(255,255,255,.7);
    box-shadow:0 10px 24px rgba(17,24,39,.06);
    font-size:18px;
    letter-spacing:.2px;
    transition:.2s ease;
  }
  .pm-phone-input:focus{
    border-color: rgba(255, 64, 129, .45);
    box-shadow:0 14px 30px rgba(255, 64, 129, .12);
    background:#fff;
  }
  .pm-operator-pill{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    height:36px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid rgba(255,64,129,.25);
    background:rgba(255, 64, 129, .08);
    color:#a4004c;
    font-weight:700;
    font-size:13px;
    user-select:none;
    min-width:64px;
    justify-content:center;
    white-space:nowrap;
  }
  .pm-operator-dot{
    width:8px; height:8px;
    border-radius:999px;
    background:rgba(255,64,129,.85);
    box-shadow:0 0 0 5px rgba(255,64,129,.12);
  }
  .pm-operator-pill.pm-unknown{
    background:rgba(148,163,184,.15);
    border-color:rgba(148,163,184,.35);
    color:#475569;
  }
  .pm-operator-pill.pm-unknown .pm-operator-dot{
    background:#94a3b8;
    box-shadow:0 0 0 5px rgba(148,163,184,.15);
  }

  .pm-action-btn{
    height:66px;
    padding:0 22px;
    border:none;
    border-radius:18px;
    cursor:pointer;
    color:#fff;
    font-weight:800;
    font-size:16px;
    letter-spacing:.2px;
    background:linear-gradient(135deg,#ff2d55,#ff6a00);
    box-shadow:0 14px 30px rgba(255, 45, 85, .22);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-width:200px;
  }
  .pm-action-btn:active{transform:translateY(1px);}
  .pm-subline{
    margin-top:10px;
    display:flex;
    gap:12px;
    align-items:center;
    color:#667085;
    font-size:13.5px;
  }
  .pm-subline strong{color:#111827;}
</style>

<style>
/* wrapper */
.pm-phone-field.pm-inline{
  position:relative;
  flex:1;
}

/* input utama */
.pm-phone-input.pm-has-operator{
  width:100%;
  height:66px;
  padding:0 140px 0 22px; /* ruang kanan untuk operator */
  border-radius:18px;
  border:2px solid rgba(255, 64, 129, .25);
  outline:none;
  background:#fff;
  box-shadow:0 10px 24px rgba(17,24,39,.06);
  font-size:18px;
  transition:.2s ease;
}

/* operator di kanan */
.pm-operator-pill.right{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  height:38px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  border:1px solid rgba(255,64,129,.35);
  background:linear-gradient(
    135deg,
    rgba(255,45,85,.12),
    rgba(255,106,0,.12)
  );
  color:#b0004f;
  font-weight:700;
  font-size:13px;
  pointer-events:none;
}

/* dot operator */
.pm-operator-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ff2d55;
  box-shadow:0 0 0 5px rgba(255,45,85,.18);
}

/* jika belum terdeteksi */
.pm-operator-pill.pm-unknown{
  background:rgba(148,163,184,.15);
  border-color:rgba(148,163,184,.35);
  color:#64748b;
}
.pm-operator-pill.pm-unknown .pm-operator-dot{
  background:#94a3b8;
  box-shadow:0 0 0 5px rgba(148,163,184,.15);
}

.pulsa-card{
  background:#fff;
  border-radius:20px;
  padding:28px;
  box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.pulsa-title{font-size:22px;margin-bottom:4px}
.pulsa-desc{color:#6b7280;margin-bottom:18px}

.pulsa-input-wrap{
  display:flex;
  gap:12px;
  align-items:center;
}

.pulsa-input{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border:2px solid #ffd0dc;
  border-radius:14px;
}

.pulsa-input input{
  flex:1;
  border:0;
  outline:0;
  font-size:16px;
}

.hp-badge{
  background:#ffe5ec;
  color:#ff2e63;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
}

.operator-chip{
  display:flex;
  align-items:center;
  gap:6px;
  background:#ffe5ec;
  color:#d81b60;
  padding:6px 10px;
  border-radius:999px;
  font-size:13px;
}

.operator-chip .dot{
  width:8px;height:8px;
  background:#ff2e63;
  border-radius:50%;
}

.btn-cek{
  padding:14px 22px;
  border-radius:14px;
  border:0;
  background:linear-gradient(135deg,#ff416c,#ff4b2b);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}

.pulsa-info{
  margin-top:10px;
  font-size:14px;
  color:#6b7280;
}

.pulsa-result{
  margin-top:14px;
}

.pulsa-result .empty{
  padding:16px;
  border:1px dashed #e5e7eb;
  border-radius:12px;
  color:#9ca3af;
}

</style>

<style>
    /* ================= TOPBAR SEARCH (SAFE: only .topbar-search*) ================= */
.topbar-search{
  order: 3;
  flex: 1 1 100%;
  min-width: 0;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 0 12px;
  border-radius: 999px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);

  box-shadow:
    0 10px 30px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.06);

  backdrop-filter: blur(10px);
}

.topbar-search:focus-within{
  border-color: rgba(255,34,100,.55);
  box-shadow:
    0 12px 34px rgba(0,0,0,.30),
    0 0 0 3px rgba(255,34,100,.12),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.topbar-search__icon{
  opacity: .75;
  font-size: 15px;
  line-height: 1;
  transform: translateY(-.5px);
}

.topbar-search__input{
  flex: 1;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;

  color: rgba(255,255,255,.92);
  font-size: 14px;
}

.topbar-search__input::placeholder{
  color: rgba(255,255,255,.55);
}

.topbar-search__btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);

  cursor: pointer;
  display: grid;
  place-items: center;

  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.topbar-search__btn:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}

.topbar-search__btn:active{
  transform: translateY(0px);
}

.topbar-search__btnIcon{
  font-size: 14px;
  opacity: .85;
}

/* Responsive: biar tidak pecah di layar kecil */
@media (max-width: 720px){
  .topbar-search{
    height: 42px;
    min-width: 0;
  }
}


/* WRAP icon bar + panah */
.pm-iconbar-wrap{
  position: relative;
  margin: 14px auto 0;
  max-width: 1200px;
  padding: 0 44px;
}

/* container yang bisa digeser */
.pm-iconbar{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 10px 6px 14px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pm-iconbar::-webkit-scrollbar{ display:none; }

/* item svc Anda jadi “card” */
.pm-iconbar .svc{
  flex: 0 0 auto;
  min-width: 140px;
  scroll-snap-align: start;

  border-radius: 18px;
  padding: 18px 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* rapikan isi */
.pm-iconbar .svc-link{ text-decoration:none; }
.pm-iconbar .svc-ic{ margin-bottom: 10px; }
.pm-iconbar .svc-txt{ font-weight:600; opacity:.95; }

/* tombol panah kiri/kanan */
.pm-ic-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 40px;
  width: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: #fff;
  cursor: pointer;
  z-index: 2;
}
.pm-ic-nav.left{ left: 6px; }
.pm-ic-nav.right{ right: 6px; }
.pm-ic-nav:hover{
  background: rgba(248,0,32,.14);
  border-color: rgba(248,0,32,.45);
}

/* ===== FIX: LOGIN BUTTON TANPA BORDER PUTIH ===== */
.btn-login-oval{
  border: none !important;          /* HAPUS border */
  outline: none !important;         /* HAPUS outline */
  background: rgba(255,255,255,.06) !important; /* tetap elegan */
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

/* saat hover */
.btn-login-oval:hover{
  background: rgba(248,0,32,.14) !important;
}

/* saat focus (klik / tab) */
.btn-login-oval:focus,
.btn-login-oval:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(248,0,32,.25), 0 10px 28px rgba(0,0,0,.22);
}

/* kalau tombol login juga dipakai class .btn-login */
.btn-login{
  border: none !important;
  outline: none !important;
}

/* ===== FIX: WARNA TEKS LOGIN SAAT HOVER (DARK MODE) ===== */
html[data-theme="dark"] .btn-login-oval,
html[data-theme="dark"] .btn-login-oval span{
  color: #ffffff !important;     /* warna normal */
}

html[data-theme="dark"] .btn-login-oval:hover,
html[data-theme="dark"] .btn-login-oval:hover span{
  color: #ffffff !important;     /* kunci tetap putih saat hover */
}

/* --------------- SHOP THEME ----------------------------- */
.shop-page .shop-wrap{max-width:1180px;margin:26px auto 70px;padding:0 16px}
.shop-page .shop-title{font-size:22px;font-weight:900}
.shop-page .shop-sub{opacity:.78;margin-top:4px;font-size:13px}

.shop-page .shop-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media (max-width:1200px){.shop-page .shop-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:980px){.shop-page .shop-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.shop-page .shop-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.shop-page .shop-grid{grid-template-columns:1fr}}

.shop-page .p-card{display:block;text-decoration:none;color:inherit;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);box-shadow:0 14px 40px rgba(0,0,0,.25);transition:.12s}
.shop-page .p-card:hover{transform:translateY(-2px);border-color:rgba(248,0,32,.45);background:rgba(248,0,32,.06)}
.shop-page .p-media{position:relative;aspect-ratio:16/11;background:rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center}
.shop-page .p-media img{width:100%;height:100%;object-fit:cover;display:block}
.shop-page .p-badge{position:absolute;top:10px;left:10px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.35);backdrop-filter:blur(8px)}
.shop-page .p-badge-sale{border-color:rgba(248,0,32,.45);background:rgba(248,0,32,.16)}
.shop-page .p-badge-flash{left:auto;right:10px;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.10)}
.shop-page .p-body{padding:12px 12px 14px}
.shop-page .p-name{font-weight:900;font-size:13.5px;line-height:1.25;min-height:36px;margin-bottom:8px;opacity:.95}
.shop-page .p-meta{display:flex;align-items:center;gap:8px;margin-bottom:10px;opacity:.9}
.shop-page .p-rate{font-size:12px;opacity:.75}
.shop-page .p-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.shop-page .p-price{font-weight:900;letter-spacing:.2px}
.shop-page .p-cta{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06)}
.shop-page .p-old{margin-top:8px;font-size:12px;opacity:.65}
.shop-page .shop-empty{margin-top:14px;padding:18px;border-radius:18px;text-align:center;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);opacity:.85}
.shop-page .shop-paging{display:flex;justify-content:center;margin-top:18px}

/* stars */
.shop-page .p-stars{display:inline-flex;gap:3px;line-height:1}
.shop-page .p-stars .s{font-size:14px;opacity:.45}
.shop-page .p-stars .full{opacity:.95}
.shop-page .p-stars .half{opacity:.75}

/* light */
html[data-theme="light"] .shop-page .p-card{border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.92);box-shadow:0 10px 28px rgba(0,0,0,.12)}
html[data-theme="light"] .shop-page .p-media{background:rgba(0,0,0,.04)}
html[data-theme="light"] .shop-page .p-cta{border-color:rgba(0,0,0,.10);background:rgba(0,0,0,.04)}
html[data-theme="light"] .shop-page .shop-empty{border-color:rgba(0,0,0,.08);background:rgba(255,255,255,.85)}


/* =========================
   PRODUCT DETAIL (tema baru)
   ========================= */

.pm-section { padding: 22px 0; }

.pm-breadcrumb{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin: 6px 0 16px;
  font-size: 13px;
  opacity: .9;
}
.pm-breadcrumb a{ text-decoration:none; }
.pm-bc-sep{ opacity:.6; }
.pm-bc-current{ opacity:.85; }

.pm-glass{
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
}

html[data-theme="light"] .pm-glass{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 40px rgba(0,0,0,.10);
}

.pm-product{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap: 18px;
  align-items:start;
}
@media (max-width: 980px){
  .pm-product{ grid-template-columns: 1fr; }
}

.pm-product-media{ padding: 14px; position:relative; }
.pm-product-badges{
  position:absolute; top:14px; left:14px;
  display:flex; gap:8px; flex-wrap:wrap;
  z-index:2;
}

.pm-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);
}
html[data-theme="light"] .pm-badge{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.08);
}
.pm-badge-danger{
  background: rgba(255, 0, 70, .18);
  border-color: rgba(255, 0, 70, .35);
}
.pm-badge-soft{
  background: rgba(255,255,255,.08);
}
.pm-badge-muted{ opacity:.75; }

.pm-product-imgwrap{
  border-radius: 14px;
  overflow:hidden;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
}
html[data-theme="light"] .pm-product-imgwrap{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.08);
}
.pm-product-img{
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display:block;
}

.pm-product-thumbrow{
  display:flex; gap:10px; margin-top: 12px;
}
.pm-thumb{
  width: 64px; height: 64px;
  border-radius: 12px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  padding:0;
  cursor:pointer;
}
.pm-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pm-thumb.is-active{ outline: 2px solid rgba(255, 34, 100, .55); }

.pm-product-card{ padding: 18px; }
.pm-product-title h1{
  margin:0;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: .2px;
}
.pm-product-meta{
  margin-top: 6px;
  display:flex; gap:8px; align-items:center;
  font-size: 13px;
  opacity: .85;
}
.pm-dot{
  width:6px; height:6px; border-radius:50%;
  background: rgba(255,34,100,.9);
}

.pm-product-price{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}
html[data-theme="light"] .pm-product-price{
  border-top: 1px solid rgba(0,0,0,.08);
}
.pm-price-old{
  opacity:.75;
  text-decoration: line-through;
  font-size: 13px;
  margin-bottom: 6px;
}
.pm-price-new{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .2px;
}
.pm-product-stock{ margin-top: 8px; font-size: 13px; }
.pm-stock-ok{ color: rgba(140,255,180,.95); }
.pm-stock-no{ color: rgba(255,120,120,.95); }

html[data-theme="light"] .pm-stock-ok{ color: #0a7a3f; }
html[data-theme="light"] .pm-stock-no{ color: #b00020; }

.pm-product-desc{
  margin-top: 14px;
  opacity: .92;
  font-size: 14px;
  line-height: 1.7;
}

.pm-muted{ opacity:.75; }

.pm-product-actions{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

.pm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: inherit;
  cursor:pointer;
}
html[data-theme="light"] .pm-btn{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
}

.pm-btn-primary{
  border-color: rgba(255,34,100,.35);
  background: rgba(255,34,100,.16);
}
.pm-btn-primary:hover{
  background: rgba(255,34,100,.22);
}
.pm-btn-ghost{
  opacity:.9;
}

.pm-qty{
  display:flex; align-items:center; gap:8px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}
html[data-theme="light"] .pm-qty{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
}

.pm-qty-btn{
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: inherit;
  cursor:pointer;
}
html[data-theme="light"] .pm-qty-btn{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
}

.pm-qty-input{
  width: 58px;
  height: 34px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  color: inherit;
}
html[data-theme="light"] .pm-qty-input{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
}

.pm-product-hint{
  margin-top: 12px;
  font-size: 12px;
  opacity: .75;
}

.pm-product-info{ margin-top: 14px; padding: 14px; }
.pm-info-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 520px){
  .pm-info-grid{ grid-template-columns: 1fr; }
}
.pm-info-k{ font-size: 12px; opacity:.75; margin-bottom: 4px; }
.pm-info-v{ font-size: 14px; }

.pm-empty{ padding: 22px; text-align:center; }
.pm-empty-title{ font-size: 18px; font-weight: 700; }
.pm-empty-sub{ margin-top: 6px; opacity:.8; }
.pm-empty-actions{ margin-top: 14px; display:flex; justify-content:center; gap:10px; }

/* ===== Product Detail (tema baru) ===== */
.pd-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:16px;
  align-items:start;
}
@media (max-width: 980px){
  .pd-grid{ grid-template-columns: 1fr; }
}

.pd-media, .pd-info{ padding:14px; }
.pd-imgbox{
  border-radius:16px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  padding:12px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:260px;
}
body.light .pd-imgbox{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.08);
}
.pd-imgbox img{
  max-width:100%;
  height:auto;
  border-radius:12px;
  display:block;
}

.pd-top{ display:flex; flex-direction:column; gap:8px; }
.pd-name{ font-weight:800; font-size:22px; letter-spacing:.2px; }
.pd-meta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.pd-badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
body.light .pd-badge{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.10);
}
.pd-muted{ font-size:12px; opacity:.75; }

.pd-price{ margin-top:10px; }
.pd-price-main{ font-size:26px; font-weight:900; }
.pd-price-sub{ margin-top:4px; font-size:13px; opacity:.75; }
.pd-strike{ text-decoration:line-through; opacity:.75; }

.pd-actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.p-btn{ text-decoration:none; cursor:pointer; }
.p-btn-primary{ }
.p-btn-ghost{
  background: transparent;
  border:1px solid rgba(255,255,255,.14);
}
body.light .p-btn-ghost{
  border-color: rgba(0,0,0,.16);
}

.pd-desc{ margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); }
body.light .pd-desc{ border-top-color: rgba(0,0,0,.08); }
.pd-h{ font-weight:800; margin-bottom:6px; }
.pd-p{ opacity:.88; line-height:1.6; font-size:14px; }

.pd-spec{ margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); }
body.light .pd-spec{ border-top-color: rgba(0,0,0,.08); }
.pd-specgrid{ display:grid; gap:8px; margin-top:8px; }
.pd-specrow{ display:flex; justify-content:space-between; gap:12px; font-size:13px; opacity:.9; }
.pd-k{ opacity:.7; }
.pd-v{ font-weight:700; }

</style>

<style>
/* =========================
   PPOB PAGE (kartu nomor/ID + daftar nominal)
   dipakai bersama oleh semua halaman PPOB (pulsa, token, e-money,
   games, voucher, data, pascabayar, dll) supaya tampilannya seragam.
========================== */
.ppob-page{
  max-width: 1100px;
  margin: 26px auto 40px;
  padding: 0 18px;
}

.ppob-card{
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .08);
  border: 1px solid rgba(15, 23, 42, .06);
  padding: 18px 18px 16px;
  margin-bottom: 16px;
}

.ppob-card-soft{
  background: rgba(255,255,255,.9);
}

.ppob-head{
  padding: 6px 6px 10px;
}

.ppob-title{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #0f172a;
  margin-bottom: 2px;
}

.ppob-subtitle{
  font-size: 13.5px;
  color: rgba(15, 23, 42, .65);
}

.ppob-title-sm{
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin: 4px 6px 12px;
}

.phone-field{
  display: grid;
  grid-template-columns: 46px 1fr 150px;
  gap: 12px;
  align-items: center;
  padding: 14px 12px;
  border-radius: 18px;
  background: rgba(241, 245, 249, .55);
  border: 1px solid rgba(15, 23, 42, .06);
}

.phone-icon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255, 0, 72, .08);
  color: rgba(255, 0, 72, .95);
  display: grid;
  place-items: center;
}

.phone-input-wrap{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.phone-label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15, 23, 42, .75);
  margin: 0;
}

.phone-input{
  width: 100%;
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .10);
  padding: 0 14px;
  outline: none;
  font-size: 15px;
  color: #0f172a;
  background: #fff;
  color-scheme: light;
  cursor: text;
  position: relative;
  z-index: 1;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.phone-input:focus{
  border-color: rgba(255, 0, 72, .35);
  box-shadow: 0 0 0 5px rgba(255, 0, 72, .10);
}

.phone-help{
  font-size: 12.5px;
  color: rgba(15, 23, 42, .55);
  line-height: 1.35;
}

.btn-cek{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #ff2d55, #ff6a00);
  color: #fff;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .3px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(255, 45, 85, .28);
  transition: transform .12s ease, box-shadow .12s ease;
  padding: 0 14px;
  white-space: nowrap;
}

.btn-cek:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(255, 45, 85, .34);
}
.btn-cek:active{ transform: translateY(0); }

.provider-line{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px 0;
  flex-wrap: wrap;
}

.provider-pill{
  background: rgba(255, 0, 72, .08);
  color: rgba(15, 23, 42, .85);
  border: 1px solid rgba(255, 0, 72, .14);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
}

.provider-note{
  font-size: 12.5px;
  color: rgba(15, 23, 42, .55);
}

.nominal-wrap{
  padding: 8px 6px 12px;
  min-height: 88px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.nominal-empty, .ppob-empty{
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(241, 245, 249, .6);
  border: 1px dashed rgba(15, 23, 42, .18);
  border-radius: 16px;
  padding: 28px 16px;
  color: rgba(15, 23, 42, .65);
  font-size: 13.5px;
  margin: 0 6px;
}

.ppob-alert{
  border-radius: 16px;
  padding: 12px 14px;
  margin: 0 6px 12px;
  font-size: 13.5px;
  border: 1px solid transparent;
}
.ppob-alert-warn{
  background: rgba(255, 193, 7, .12);
  border-color: rgba(255, 193, 7, .22);
  color: rgba(120, 83, 0, .95);
}

.nominal-item{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  background: rgba(248, 250, 252, .55);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.nominal-item:hover{
  border-color: rgba(255, 0, 72, .22);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
  transform: translateY(-1px);
}

.nominal-info{ min-width: 0; }
.nominal-k{
  margin: 2px 0;
  font-size: 13.5px;
  color: rgba(15, 23, 42, .62);
}
.nominal-harga{
  margin: 4px 0;
  font-size: 14.5px;
  font-weight: 800;
  color: #16a34a;
}

.status-pill{
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .3px;
  vertical-align: middle;
}
.status-on{ background: rgba(22, 163, 74, .12); color: #16a34a; }
.status-off{ background: rgba(220, 38, 38, .10); color: #dc2626; }

.nominal-action{ flex: 0 0 auto; margin-top: auto; }
.nominal-action form{ margin: 0; }
.nominal-action .btn-pilih{ width: 100%; }
.btn-pilih{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 11px 24px;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .4px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(22, 163, 74, .28);
  transition: transform .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}
.btn-pilih:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(22, 163, 74, .34);
}
.btn-pilih:active{ transform: translateY(0); }
.btn-pilih[disabled], .btn-pilih.is-disabled{
  background: rgba(15,23,42,.10);
  color: rgba(15,23,42,.4);
  box-shadow: none;
  cursor: not-allowed;
}

@media (max-width: 820px){
  .phone-field{
    grid-template-columns: 46px 1fr;
  }
  .btn-cek{
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 600px){
  .nominal-wrap{ grid-template-columns: 1fr; }
  .nominal-panel.active{ grid-template-columns: 1fr; }
}

/* =========================
   PPOB GRID (pilihan provider/game/voucher)
========================== */
.ppob-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 6px;
}
.ppob-grid-card{
  flex: 0 0 auto;
  width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 14px 10px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .06);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ppob-grid-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .12);
  border-color: rgba(255, 0, 72, .18);
}
.ppob-grid-icon{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 0, 72, .06);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ppob-grid-icon img{
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}
.ppob-grid-name{
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 480px){
  .ppob-grid-card{ width: 88px; padding: 12px 8px; }
  .ppob-grid-icon{ width: 48px; height: 48px; }
  .ppob-grid-icon img{ width: 36px; height: 36px; }
}

/* =========================
   PPOB PAGE - DARK MODE
========================== */
html[data-theme="dark"] .ppob-card{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
html[data-theme="dark"] .ppob-card-soft{
  background: rgba(255,255,255,.03);
}
html[data-theme="dark"] .ppob-title,
html[data-theme="dark"] .ppob-title-sm{
  color: rgba(243,244,246,.95);
}
html[data-theme="dark"] .ppob-subtitle,
html[data-theme="dark"] .phone-help,
html[data-theme="dark"] .provider-note{
  color: rgba(209,213,219,.65);
}
html[data-theme="dark"] .phone-field{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] .phone-icon{
  background: rgba(248,0,32,.16);
  color: #ff6691;
}
html[data-theme="dark"] .phone-label{
  color: rgba(229,231,235,.85);
}
html[data-theme="dark"] .phone-input{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.10);
  color: rgba(243,244,246,.95);
  color-scheme: dark;
}
html[data-theme="dark"] .phone-input::placeholder{
  color: rgba(209,213,219,.45);
}
html[data-theme="dark"] .phone-input:focus{
  border-color: rgba(248,0,32,.45);
  box-shadow: 0 0 0 5px rgba(248,0,32,.16);
}
html[data-theme="dark"] .btn-cek:hover{
  box-shadow: 0 14px 28px rgba(248,0,32,.4);
}
html[data-theme="dark"] .provider-pill{
  background: rgba(248,0,32,.14);
  border-color: rgba(248,0,32,.22);
  color: rgba(243,244,246,.90);
}
html[data-theme="dark"] .nominal-empty,
html[data-theme="dark"] .ppob-empty{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.14);
  color: rgba(209,213,219,.70);
}
html[data-theme="dark"] .ppob-alert-warn{
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.22);
  color: rgba(252,211,77,.95);
}
html[data-theme="dark"] .nominal-item{
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
html[data-theme="dark"] .nominal-item:hover{
  border-color: rgba(255,102,145,.3);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
html[data-theme="dark"] .nominal-k{
  color: rgba(209,213,219,.75);
}
html[data-theme="dark"] .nominal-harga{
  color: #34d399;
}
html[data-theme="dark"] .status-on{
  background: rgba(52,211,153,.16);
  color: #34d399;
}
html[data-theme="dark"] .status-off{
  background: rgba(248,113,113,.14);
  color: #f87171;
}
html[data-theme="dark"] .btn-pilih[disabled],
html[data-theme="dark"] .btn-pilih.is-disabled{
  background: rgba(255,255,255,.06);
  color: rgba(209,213,219,.35);
}
html[data-theme="dark"] .ppob-grid-card{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.30);
}
html[data-theme="dark"] .ppob-grid-card:hover{
  border-color: rgba(248,0,32,.32);
  box-shadow: 0 14px 30px rgba(0,0,0,.40);
}
html[data-theme="dark"] .ppob-grid-icon{
  background: rgba(248,0,32,.14);
}
html[data-theme="dark"] .ppob-grid-name{
  color: rgba(243,244,246,.92);
}
</style>

<style>
/* =========================
   CART ITEM (keranjang)
========================== */
.cart-item{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 10px;
  border-bottom: 1px dashed rgba(15, 23, 42, .10);
}
.cart-item:last-child{ border-bottom: none; }

.cart-remove{
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(220, 38, 38, .25);
  background: rgba(220, 38, 38, .08);
  color: #dc2626;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.cart-remove:hover{ background: rgba(220, 38, 38, .14); }

.cart-thumb{
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(15, 23, 42, .04);
  border: 1px solid rgba(15, 23, 42, .06);
}
.cart-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.cart-info{ flex: 1 1 auto; min-width: 0; }
.cart-name{
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 2px;
  display: block;
  text-decoration: none;
}
.cart-meta{
  font-size: 12.5px;
  color: rgba(15, 23, 42, .55);
  margin: 0 0 2px;
}
.cart-note{
  font-size: 12px;
  color: #ff0048;
  margin: 0 0 2px;
}
.cart-total{
  font-size: 14.5px;
  font-weight: 800;
  color: #16a34a;
  margin: 4px 0 0;
}
.cart-warn{
  font-size: 12px;
  font-weight: 800;
  color: #dc2626;
}

.cart-qty{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 999px;
  padding: 4px;
  background: rgba(241, 245, 249, .55);
}
.cart-qty button{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .12);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: #0f172a;
}
.cart-qty input{
  width: 36px;
  text-align: center;
  border: none;
  background: transparent;
  font-weight: 800;
  font-size: 13.5px;
  color: #0f172a;
}

.cart-summary{
  text-align: center;
  padding: 18px 10px;
}
.cart-summary .label{ font-size: 13px; color: rgba(15,23,42,.6); margin-bottom: 4px; }
.cart-summary .total{ font-size: 26px; font-weight: 900; color: #0f172a; }
.cart-summary .actions{ margin-top: 14px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 560px){
  .cart-item{ flex-wrap: wrap; }
}

html[data-theme="dark"] .cart-thumb{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}
html[data-theme="dark"] .cart-name{ color: rgba(243,244,246,.95); }
html[data-theme="dark"] .cart-meta{ color: rgba(209,213,219,.60); }
html[data-theme="dark"] .cart-item{ border-bottom-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .cart-qty{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}
html[data-theme="dark"] .cart-qty button{
  background: rgba(255,255,255,.08);
  color: rgba(243,244,246,.92);
  box-shadow: none;
}
html[data-theme="dark"] .cart-qty input{ color: rgba(243,244,246,.92); }
html[data-theme="dark"] .cart-summary .label{ color: rgba(209,213,219,.65); }
html[data-theme="dark"] .cart-summary .total{ color: rgba(243,244,246,.95); }
</style>

<style>
/* =========================
   MANAGE (akun saya / pesanan)
========================== */
.manage-nav{
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 5px;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}
.manage-nav a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: transparent;
  border: none;
  color: rgba(15, 23, 42, .68);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.manage-nav a:hover{
  color: #ff0048;
}
.manage-nav a.active{
  background: linear-gradient(135deg, #ff2d55, #ff6a00);
  color: #fff;
  box-shadow: 0 10px 24px rgba(255, 45, 85, .28);
}

.status-tabs{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 6px 14px;
}
.status-tabs a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(241, 245, 249, .65);
  border: 1px solid rgba(15, 23, 42, .08);
  color: rgba(15, 23, 42, .7);
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none !important;
  cursor: pointer;
  transition: all .15s ease;
}
.status-tabs a:hover{
  border-color: rgba(255, 0, 72, .25);
}
.status-tabs a.active{
  background: linear-gradient(135deg, #ff2d55, #ff6a00);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px rgba(255, 45, 85, .25);
}

.manage-empty{
  background: rgba(241, 245, 249, .6);
  border: 1px dashed rgba(15, 23, 42, .18);
  border-radius: 16px;
  padding: 22px;
  color: rgba(15, 23, 42, .6);
  font-size: 13.5px;
  text-align: center;
}

.order-item{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 10px;
  border-bottom: 1px dashed rgba(15, 23, 42, .10);
}
.order-item:last-child{ border-bottom: none; }
.order-info{ flex: 1 1 auto; min-width: 0; }
.order-info .nama{ font-size: 14px; font-weight: 800; color: #0f172a; margin: 0 0 4px; }
.order-info .meta{ font-size: 12.5px; color: rgba(15,23,42,.6); margin: 0 0 2px; }
.order-info .harga{ font-size: 14px; font-weight: 800; color: #16a34a; margin: 6px 0 0; }
.order-actions{ flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }

html[data-theme="dark"] .manage-nav{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] .manage-nav a{
  color: rgba(209,213,219,.75);
}
html[data-theme="dark"] .status-tabs a{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  color: rgba(209,213,219,.75);
}
html[data-theme="dark"] .manage-empty{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.14);
  color: rgba(209,213,219,.65);
}
html[data-theme="dark"] .order-item{ border-bottom-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .order-info .nama{ color: rgba(243,244,246,.95); }
html[data-theme="dark"] .order-info .meta{ color: rgba(209,213,219,.60); }
html[data-theme="dark"] .order-info .harga{ color: #34d399; }

/* =========================
   NOMINAL CATEGORY HEADER (pengelompokan per produk)
========================== */
.nominal-category{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 10px 8px;
  margin-top: 4px;
}
.nominal-category:first-child{ margin-top: 0; padding-top: 6px; }
.nominal-category .label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #ff0048;
  white-space: nowrap;
}
.nominal-category .rule{
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 0, 72, .18);
}
html[data-theme="dark"] .nominal-category .label{ color: #ff6691; }
html[data-theme="dark"] .nominal-category .rule{ background: rgba(255,102,145,.22); }

/* =========================
   NOMINAL TABS (kategori berbentuk tab)
========================== */
.nominal-tabs-wrap{
  grid-column: 1 / -1;
}
.nominal-tabs{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px 14px;
}
.nominal-tab{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(241, 245, 249, .65);
  border: 1px solid rgba(15, 23, 42, .08);
  color: rgba(15, 23, 42, .7);
  font-size: 12.5px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s ease;
}
.nominal-tab:hover{ border-color: rgba(255, 0, 72, .25); }
.nominal-tab.active{
  background: linear-gradient(135deg, #ff2d55, #ff6a00);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px rgba(255, 45, 85, .25);
}
.nominal-panel{ display: none; }
.nominal-panel.active{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  align-items: stretch;
}

html[data-theme="dark"] .nominal-tab{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  color: rgba(209,213,219,.75);
}
</style>

<style>
/* =========================
   FOKUS TOMBOL (hilangkan outline hitam/putih bawaan browser)
========================== */
button,
a,
.btn,
.btn-pilih,
.btn-cek,
.nominal-tab,
.status-tabs a,
.manage-nav a,
.ppob-grid-card,
.cart-qty button,
.cart-remove,
.pm-user-btn,
.toggle,
.pill,
input,
select,
textarea{
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
button:focus,
a:focus,
.btn:focus,
.btn-pilih:focus,
.btn-cek:focus,
.nominal-tab:focus,
.status-tabs a:focus,
.manage-nav a:focus,
.ppob-grid-card:focus{
  outline: none;
}
/* Tetap sediakan penanda fokus yang rapi untuk navigasi keyboard */
button:focus-visible,
a:focus-visible,
.btn:focus-visible,
.btn-pilih:focus-visible,
.btn-cek:focus-visible,
.nominal-tab:focus-visible,
.status-tabs a:focus-visible,
.manage-nav a:focus-visible,
.ppob-grid-card:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 0, 72, .28);
}
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] .btn:focus-visible,
html[data-theme="dark"] .btn-pilih:focus-visible,
html[data-theme="dark"] .btn-cek:focus-visible,
html[data-theme="dark"] .nominal-tab:focus-visible,
html[data-theme="dark"] .status-tabs a:focus-visible,
html[data-theme="dark"] .manage-nav a:focus-visible,
html[data-theme="dark"] .ppob-grid-card:focus-visible{
  box-shadow: 0 0 0 3px rgba(255, 102, 145, .35);
}

/* =========================
   PIN GATE (popup konfirmasi PIN transaksi sebelum bayar)
========================== */
.pin-gate{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.pin-gate.show{
  display: flex;
}
.pin-gate-box{
  background: var(--card, #fff);
  color: var(--text, #111827);
  width: 100%;
  max-width: 360px;
  border-radius: 20px;
  padding: 26px 22px;
  text-align: center;
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
  position: relative;
  animation: pinGateIn .18s ease;
}
@keyframes pinGateIn{
  from{ transform: translateY(8px) scale(.98); opacity: 0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}
.pin-gate-close{
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--muted, #6b7280);
  cursor: pointer;
}
.pin-gate-icon{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 0, 72, .10);
  color: #ff0048;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 24px;
}
.pin-gate-title{
  font-weight: 800;
  font-size: 16px;
  color: var(--text, #111827);
  margin-bottom: 6px;
}
.pin-gate-sub{
  font-size: 12.5px;
  color: var(--muted, #6b7280);
  margin-bottom: 18px;
}
.pin-gate-boxes{
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}
.pin-box{
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .18);
  background: #fff;
  color: var(--text, #111827);
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.pin-box:focus{
  border-color: rgba(255, 0, 72, .35);
  box-shadow: 0 0 0 5px rgba(255, 0, 72, .10);
}
.pin-box.is-error{
  border-color: #dc2626;
  box-shadow: 0 0 0 5px rgba(220, 38, 38, .12);
}
.pin-gate-note{
  font-size: 12.5px;
  color: var(--muted, #6b7280);
  min-height: 18px;
}
.pin-gate-note.is-error{
  color: #dc2626;
  font-weight: 700;
}
.pin-gate-note.is-blocked{
  color: #dc2626;
  font-weight: 800;
}
html[data-theme="dark"] .pin-box{
  background: var(--card);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="dark"] .pin-box:focus{
  border-color: rgba(248,0,32,.45);
  box-shadow: 0 0 0 5px rgba(248,0,32,.16);
}
html[data-theme="dark"] .pin-box.is-error{
  border-color: #f87171;
  box-shadow: 0 0 0 5px rgba(248, 113, 113, .16);
}

/* =========================
   RECEIPT CARD (ringkasan & pembayaran ala struk)
========================== */
.receipt-card{ padding: 18px; }
.receipt-title{
  font-weight: 800;
  font-size: 15px;
  color: var(--text, #111827);
  margin-bottom: 14px;
}
.receipt-item{
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(15, 23, 42, .14);
}
.receipt-item:last-of-type{ border-bottom: none; }
.receipt-remove{
  background: none;
  border: none;
  color: #dc2626;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}
.receipt-item-body{ flex: 1 1 auto; min-width: 0; }
.receipt-item-name{
  font-weight: 800;
  font-size: 14.5px;
  color: var(--text, #111827);
  margin-bottom: 6px;
}
.receipt-item-row{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--muted, #6b7280);
  padding: 2px 0;
}
.receipt-item-row span:last-child{
  color: var(--text, #111827);
  text-align: right;
}
.receipt-item-total{
  font-weight: 800;
  font-size: 15px;
  margin-top: 4px;
}
.receipt-item-total span:last-child{ color: #16a34a; }
.receipt-dash{
  height: 1px;
  border-top: 1px dashed rgba(15, 23, 42, .14);
  margin: 10px 0;
}
.receipt-method-label{
  font-weight: 800;
  font-size: 13.5px;
  color: var(--text, #111827);
  margin: 4px 0 10px;
}
.receipt-select{
  width: 100%;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .14);
  background: #fff;
  color: var(--text, #111827);
  padding: 0 12px;
  font-size: 13.5px;
  margin-bottom: 12px;
}
html[data-theme="dark"] .receipt-item{ border-bottom-color: rgba(255,255,255,.10); }
html[data-theme="dark"] .receipt-dash{ border-top-color: rgba(255,255,255,.10); }
html[data-theme="dark"] .receipt-select{
  background: var(--card);
  border-color: var(--line);
  color: var(--text);
}

.receipt-actions{
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.receipt-actions > *{
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 50px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .3px;
  text-decoration: none;
  cursor: pointer;
}
.btn-batal{
  background: rgba(15, 23, 42, .06);
  color: var(--text, #111827);
  border: 1px solid rgba(15, 23, 42, .14);
}
.btn-batal:hover{ background: rgba(15, 23, 42, .10); }
html[data-theme="dark"] .btn-batal{
  background: rgba(255,255,255,.06);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="dark"] .btn-batal:hover{ background: rgba(255,255,255,.10); }

/* Tabel Bootstrap lama (.table) belum mendukung dark mode */
html[data-theme="dark"] .table{
  color: var(--text);
  background-color: transparent;
}
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td{
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] .table thead th{
  background-color: rgba(255,255,255,.05);
  border-color: var(--line);
}
html[data-theme="dark"] .table-bordered{
  border-color: var(--line);
}
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd){
  background-color: rgba(255,255,255,.03);
}
html[data-theme="dark"] .table-hover tbody tr:hover{
  background-color: rgba(255,255,255,.06);
  color: var(--text);
}

/* =========================
   PROCESSING STATE (sedang memproses pesanan)
========================== */
.processing-state{
  text-align: center;
  padding: 56px 20px;
}
.processing-spinner{
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
  border: 4px solid rgba(255, 0, 72, .15);
  border-top-color: #ff0048;
  border-radius: 50%;
  animation: processingSpin .8s linear infinite;
}
@keyframes processingSpin{
  to{ transform: rotate(360deg); }
}
.processing-title{
  font-weight: 800;
  font-size: 17px;
  color: var(--text, #111827);
  margin-bottom: 8px;
}
.processing-sub{
  font-size: 13px;
  color: var(--muted, #6b7280);
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.5;
}
.processing-dots span{
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 2px;
  border-radius: 50%;
  background: #ff0048;
  animation: processingBounce 1.2s ease-in-out infinite;
}
.processing-dots span:nth-child(2){ animation-delay: .15s; }
.processing-dots span:nth-child(3){ animation-delay: .3s; }
@keyframes processingBounce{
  0%, 80%, 100%{ transform: scale(.6); opacity: .5; }
  40%{ transform: scale(1); opacity: 1; }
}

/* =========================
   HISTORI DIGITAL (filter pencarian & tanggal)
========================== */
.historidigital-filter{ margin-top: 10px; }
.historidigital-fieldgroup{ margin-bottom: 12px; }
.historidigital-fieldlabel{
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted, #6b7280);
  margin-bottom: 5px;
}
.historidigital-input{
  width: 100%;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .12);
  padding: 0 12px;
  font-size: 13.5px;
  background: #fff;
  color: #0f172a;
  color-scheme: light;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.historidigital-input:focus{
  border-color: rgba(255, 0, 72, .35);
  box-shadow: 0 0 0 4px rgba(255, 0, 72, .10);
}
html[data-theme="dark"] .historidigital-input{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.10);
  color: rgba(243,244,246,.95);
  color-scheme: dark;
}
html[data-theme="dark"] .historidigital-input:focus{
  border-color: rgba(248,0,32,.45);
  box-shadow: 0 0 0 4px rgba(248,0,32,.16);
}
.historidigital-actions{
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.historidigital-actions .btn-pilih,
.historidigital-actions .btn-batal{
  flex: 0 0 auto;
  height: 42px;
  padding: 0 20px;
}

/* daftar transaksi sebagai list sederhana (bukan grid kartu) */
.historidigital-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 6px;
}
.historidigital-row{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px;
  border-radius: 14px;
  background: rgba(15, 23, 42, .03);
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.historidigital-row:hover{
  background: rgba(15, 23, 42, .06);
  transform: translateY(-1px);
}
.historidigital-field{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.historidigital-label{
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted, #6b7280);
  flex: 0 0 auto;
}
.historidigital-value{
  font-size: 13.5px;
  color: var(--text, #111827);
  text-align: right;
}
.historidigital-value-strong{
  font-weight: 800;
  font-size: 15px;
}
.historidigital-value-price{
  font-weight: 800;
  color: #16a34a;
}
html[data-theme="dark"] .historidigital-row{ background: rgba(255,255,255,.05); }
html[data-theme="dark"] .historidigital-row:hover{ background: rgba(255,255,255,.09); }
html[data-theme="dark"] .historidigital-value-price{ color: #34d399; }

/* =========================
   STRUK DIGITAL (struk transaksi yang bisa diprint)
========================== */
.struk-wrap{
  max-width: 420px;
  margin: 30px auto 50px;
  padding: 0 16px;
}
.struk-toolbar{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.struk-toolbar .btn-pilih,
.struk-toolbar .btn-batal{
  flex: 0 0 auto;
  height: 42px;
  padding: 0 18px;
}
.struk-paper{
  background: #fff;
  color: #0f172a;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .12);
  border: 1px solid rgba(15, 23, 42, .06);
  padding: 26px 22px;
  font-family: 'Courier New', Courier, monospace;
}
.struk-toko{ text-align: center; margin-bottom: 4px; }
.struk-toko-nama{ font-weight: 900; font-size: 18px; letter-spacing: .4px; }
.struk-toko-sub{ font-size: 12px; opacity: .7; margin-top: 2px; }
.struk-dash{
  border-top: 1px dashed rgba(15, 23, 42, .3);
  margin: 14px 0;
}
.struk-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  padding: 3px 0;
}
.struk-item-nama{
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 6px;
}
.struk-total{
  font-weight: 900;
  font-size: 16px;
}
.struk-footer{
  text-align: center;
  font-size: 11.5px;
  opacity: .75;
  margin-top: 4px;
  line-height: 1.6;
}

@media print{
  .topbar, .mnav, .footer-mega, .struk-toolbar{ display: none !important; }
  body{ background: #fff !important; }
  .struk-wrap{ margin: 0; padding: 0; max-width: 100%; }
  .struk-paper{ box-shadow: none; border: none; }
}

/* =========================
   STATUS PESANAN (kartu pesanan per status -- fisik/jasa)
========================== */
.order-card{
  border-radius: 14px;
  background: rgba(15, 23, 42, .03);
  padding: 14px;
  margin-bottom: 14px;
}
.order-item{
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(15, 23, 42, .14);
}
.order-item:last-of-type{ border-bottom: none; }
.order-item-img{
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  flex: 0 0 auto;
  background: #fff;
}
.order-item-body{ flex: 1 1 auto; min-width: 0; }
.order-item-name{ font-weight: 800; font-size: 13.5px; color: var(--text, #111827); }
.order-item-price{ font-size: 13px; color: var(--muted, #6b7280); }
.order-item-price span{ font-size: 11px; }
.order-total-row{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #111827);
  margin-top: 10px;
}
.order-note{ font-size: 12px; color: var(--muted, #6b7280); margin-top: 6px; }
.order-status-pill{
  display: inline-block;
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.order-status-pending{ background: rgba(245, 158, 11, .14); color: #b45309; }
.order-status-success{ background: rgba(22, 163, 74, .14); color: #15803d; }
.order-status-danger{ background: rgba(220, 38, 38, .14); color: #b91c1c; }
.order-actions{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.btn-aksi{
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12.5px;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.btn-aksi-success{ background: #16a34a; color: #fff; }
.btn-aksi-success:hover{ background: #15803d; color: #fff; }
.btn-aksi-secondary{ background: rgba(15, 23, 42, .08); color: var(--text, #111827); }
.btn-aksi-secondary:hover{ background: rgba(15, 23, 42, .14); }
.btn-aksi-danger{ background: rgba(220, 38, 38, .10); color: #dc2626; }
.btn-aksi-danger:hover{ background: rgba(220, 38, 38, .16); }
html[data-theme="dark"] .order-card{ background: rgba(255,255,255,.05); }
html[data-theme="dark"] .order-item{ border-bottom-color: rgba(255,255,255,.10); }
html[data-theme="dark"] .order-item-name,
html[data-theme="dark"] .order-total-row{ color: var(--text); }
html[data-theme="dark"] .btn-aksi-secondary{ background: rgba(255,255,255,.08); color: var(--text); }
html[data-theme="dark"] .btn-aksi-secondary:hover{ background: rgba(255,255,255,.14); }
</style>