/* ==========================================================
   SORNARRIN PEDIA — PULSA & PPOB (Frontend Prototype)
   ==========================================================
   Folder    : sornarrin-premium-demo
   Tipe file : css/style.css
   Status    : UI ONLY — seluruh isi file ini adalah styling.
               TIDAK ada business logic di dalam CSS.

   CSS SECTION MAP:
   1.  DESIGN TOKENS        -> warna, radius, spacing, font
   2.  GLOBAL / BASE        -> reset, body, icon-slot, shell
   3.  HEADER               -> sticky bar + saldo
   4.  HERO                 -> banner promosi dekoratif
   5.  CATEGORY SWITCHER    -> tab layanan
   6.  ORDER AREA           -> form primitives, alert, operator
                               status, nominal grid, kategori data,
                               paket terpilih, wallet grid, skeleton
   7.  SUMMARY              -> ringkasan + CTA "Buat Pesanan"
   8.  BENEFITS / HISTORY / ASIDE
   9.  BOTTOM SHEET         -> panel slide-up + daftar produk
                               + invoice / processing / error
   10. PRICE EDITOR POPUP   -> "Atur Harga Jual"
   11. PAYMENT SHEET        -> konfirmasi metode bayar
   12. TOAST & MISC         -> toast, desc popup, animasi
   13. HISTORY              -> riwayat transaksi + search + empty
   14. ACCESSIBILITY        -> prefers-reduced-motion

   CSS SCOPE (IMPORTANT — baca sebelum integrasi):
   Saat ini style ditulis GLOBAL (tidak dibungkus namespace root
   seperti #sornarrin-premium-demo). Ini berarti selector class
   bisa "bocor" dan menimpa / tertimpa style website utama saat
   frontend dipasang ke halaman produksi.

   Rekomendasi saat integrasi:
   1. Bungkus seluruh markup halaman ini dengan satu root,
      misal <div id="sornarrin-premium-demo">...</div>.
   2. Prefixed semua selector penting dengan root tersebut, contoh:
        #sornarrin-premium-demo .hero-banner { ... }
        #sornarrin-premium-demo .order-card  { ... }
   3. Atau import file ini sebagai <style> scoped di halaman utama
      dan beri namespace prefix.

   DO NOT (saat demo):
   Jangan mengubah design token di :root tanpa koordinasi — warna,
   radius, dan font dipakai seluruh komponen.
   ========================================================== */

/* ==========================================================
   1. DESIGN TOKENS
   Fungsi:
   Sumber kebenaran tampilan: warna, gradient, radius, easing,
   typography, dan safe-area.

   Status: UI ONLY.
   Integration:
   Tokens ini hanya untuk presentasi. Bila halaman utama punya
   design system sendiri, nilainya boleh disesuaikan asalkan
   konsisten di seluruh komponen.
   ========================================================== */
#sornarrin-premium-demo{
  --bg0:#030712; --bg1:#050a18;
  --surface:#0a1022; --surface2:#0d1428; --surface3:#111a32;
  --purple:#8b5cf6; --purple2:#7c3aed; --purple3:#a855f7;
  --blue:#2563eb; --blue2:#3b82f6;
  --cyan:#06b6d4; --cyan2:#22d3ee;
  --text:#f8fafc; --muted:#94a3b8; --muted2:#64748b;
  --border:rgba(255,255,255,.08);
  --border2:rgba(255,255,255,.14);
  --grad:linear-gradient(135deg,#2563eb,#7c3aed);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.25,.9,.3,1);
  --r-lg:24px; --r-md:18px; --r-sm:14px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
/* ==========================================================
   2. GLOBAL / BASE
   Fungsi:
   Reset, body background, font, element dasar, dan utility
   .icon-slot (penampung inline SVG) + container .shell.

   Status: UI ONLY.
   ========================================================== */
#sornarrin-premium-demo, #sornarrin-premium-demo *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
#sornarrin-premium-demo{scroll-behavior:smooth}
#sornarrin-premium-demo{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  background:var(--bg0);
  background-image:
    radial-gradient(60% 42% at 85% -10%, rgba(124,58,237,.14), transparent 70%),
    radial-gradient(50% 36% at 10% -5%, rgba(37,99,235,.10), transparent 70%);
  color:var(--text);
  min-height:100dvh;
  padding-bottom:calc(24px + var(--safe-b));
  overflow-x:hidden;
}
#sornarrin-premium-demo button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
#sornarrin-premium-demo input{font-family:inherit}
#sornarrin-premium-demo ::selection{background:rgba(139,92,246,.4)}
#sornarrin-premium-demo :focus-visible{outline:2px solid var(--cyan2);outline-offset:2px;border-radius:6px}
#sornarrin-premium-demo .icon-slot{display:inline-flex;font-size:20px;line-height:1;flex:none}
#sornarrin-premium-demo .icon-slot svg{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

#sornarrin-premium-demo .shell{max-width:1120px;margin:0 auto;padding:0 16px}

/* ==========================================================
   3. HEADER
   Fungsi:
   Sticky header: branding, balance card, tombol menu/notif.

   Status: UI ONLY.
   JS dependency: #balance-value (diisi app.js), #btn-* (event).
   ========================================================== */
#sornarrin-premium-demo .app-header{
  position:sticky;top:0;z-index:40;
  background:rgba(3,7,18,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  padding-top:env(safe-area-inset-top,0px);
}
#sornarrin-premium-demo .header-in{display:flex;align-items:center;gap:10px;padding:12px 16px;max-width:1120px;margin:0 auto}
#sornarrin-premium-demo .icon-btn{
  width:44px;height:44px;flex:none;border-radius:14px;
  display:grid;place-items:center;font-size:20px;
  background:var(--surface2);border:1px solid var(--border);color:var(--text);
  transition:border-color .22s var(--ease), background .22s var(--ease);
  position:relative;
}
#sornarrin-premium-demo .icon-btn:hover{border-color:var(--border2);background:var(--surface3)}
#sornarrin-premium-demo .notif-dot{position:absolute;top:10px;right:11px;width:7px;height:7px;border-radius:50%;
  background:#f43f5e;box-shadow:0 0 8px rgba(244,63,94,.8)}
#sornarrin-premium-demo .brand{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
#sornarrin-premium-demo .brand-logo{width:30px;height:30px;flex:none;border-radius:10px;background:var(--grad);
  display:grid;place-items:center;font-weight:800;font-size:15px;color:#fff;
  box-shadow:0 0 18px rgba(124,58,237,.45)}
#sornarrin-premium-demo .brand-name{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sornarrin-premium-demo .brand-name em{font-style:normal;font-weight:500;color:var(--muted)}
#sornarrin-premium-demo .balance-card{
  flex:none;display:flex;align-items:center;gap:10px;
  background:var(--surface2);border:1px solid var(--border);border-radius:16px;
  padding:7px 8px 7px 12px;
}
#sornarrin-premium-demo .balance-meta{display:flex;flex-direction:column;line-height:1.15}
#sornarrin-premium-demo .balance-label{font-size:10px;color:var(--muted);letter-spacing:.04em}
#sornarrin-premium-demo .balance-value{font-size:13px;font-weight:700}
#sornarrin-premium-demo .balance-plus{
  width:28px;height:28px;border-radius:10px;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-size:15px;
  box-shadow:0 0 14px rgba(124,58,237,.55);
  transition:transform .18s var(--ease);
}
#sornarrin-premium-demo .balance-plus:active{transform:scale(.92)}
@media (max-width:379px){ #sornarrin-premium-demo .brand-name em{display:none} #sornarrin-premium-demo .balance-label{display:none} }

/* ==========================================================
   4. HERO
   Fungsi:
   Banner promosi dekoratif + elemen animasi (ring, coin orbit).

   Status: UI ONLY. Tanpa dependency backend.
   ========================================================== */
#sornarrin-premium-demo .hero-banner{
  position:relative;overflow:hidden;margin-top:20px;padding:14px 16px;
  border-radius:20px;
  aspect-ratio:16/9;
  background:linear-gradient(135deg,rgba(124,58,237,.16),rgba(37,99,235,.10) 55%,rgba(6,182,212,.06)),var(--surface);
  border:1px solid rgba(139,92,246,.28);
  box-shadow:0 20px 44px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
}
#sornarrin-premium-demo .hb-glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(30px)}
#sornarrin-premium-demo .hb-glow-1{top:-60px;right:-40px;width:220px;height:220px;background:rgba(124,58,237,.22)}
#sornarrin-premium-demo .hb-glow-2{bottom:-80px;left:-40px;width:200px;height:200px;background:rgba(34,211,238,.10)}
#sornarrin-premium-demo .hb-grid-bg{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(70% 90% at 70% 0%,#000,transparent);
          mask-image:radial-gradient(70% 90% at 70% 0%,#000,transparent);
}
#sornarrin-premium-demo .crumbs{position:relative;z-index:1;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin-bottom:6px}
#sornarrin-premium-demo .crumbs a{color:var(--cyan2);text-decoration:none}
#sornarrin-premium-demo .crumbs .sep{font-size:11px;color:var(--muted2)}
#sornarrin-premium-demo .crumbs .cur{color:var(--purple3)}
#sornarrin-premium-demo .hb-body{position:relative;z-index:1;display:flex;align-items:center;gap:12px}
#sornarrin-premium-demo .hb-copy{flex:1;min-width:0}
#sornarrin-premium-demo .hb-title{font-size:clamp(20px,5.5vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.05;color:var(--text)}
#sornarrin-premium-demo .hb-accent{
  background:linear-gradient(95deg,var(--purple3),var(--blue2) 55%,var(--cyan2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
#sornarrin-premium-demo .hb-rule{
  display:block;width:44px;height:3px;margin-top:7px;border-radius:99px;
  background:linear-gradient(90deg,var(--purple2),rgba(124,58,237,0));
  box-shadow:0 0 16px rgba(124,58,237,.5);
}
#sornarrin-premium-demo .hb-sub{margin-top:7px;font-size:11.5px;color:var(--muted);line-height:1.55;max-width:40ch}
#sornarrin-premium-demo .hb-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#sornarrin-premium-demo .hb-tag{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:600;color:#e2e8f0;
  padding:4px 9px;border-radius:99px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);
}
#sornarrin-premium-demo .hb-tag .icon-slot{font-size:11px;color:var(--cyan2)}
#sornarrin-premium-demo .hb-tag:nth-child(2) .icon-slot{color:#a78bfa}

/* decorative right side */
#sornarrin-premium-demo .hb-art{position:relative;flex:none;width:118px;height:118px}
#sornarrin-premium-demo .hb-ring{position:absolute;border-radius:50%;border:1px solid rgba(139,92,246,.2);pointer-events:none}
#sornarrin-premium-demo .hb-ring-1{inset:0;animation:ringPulse 6s ease-in-out infinite}
#sornarrin-premium-demo .hb-ring-2{inset:20px;border-color:rgba(34,211,238,.18);animation:ringPulse 6s ease-in-out infinite reverse}
@keyframes ringPulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.06);opacity:1}}
#sornarrin-premium-demo .hb-coin{
  position:absolute;left:50%;top:50%;z-index:1;
  width:36px;height:36px;border-radius:12px;
  display:grid;place-items:center;font-size:16px;color:#e9edf6;
  background:linear-gradient(160deg,rgba(124,58,237,.32),rgba(37,99,235,.14));
  border:1px solid rgba(139,92,246,.42);
  box-shadow:0 12px 26px rgba(3,7,18,.55), 0 0 18px rgba(124,58,237,.28);
  animation:orbit 14s linear infinite;
  --orbit-r:38px;
}
@keyframes orbit{
  from{ transform:translate(-50%,-50%) rotate(0deg) translateX(var(--orbit-r)) rotate(0deg) }
  to{   transform:translate(-50%,-50%) rotate(360deg) translateX(var(--orbit-r)) rotate(-360deg) }
}
#sornarrin-premium-demo .hb-coin-1{animation-delay:0s}
#sornarrin-premium-demo .hb-coin-2{animation-delay:-3.5s}
#sornarrin-premium-demo .hb-coin-3{animation-delay:-7s}
#sornarrin-premium-demo .hb-coin-4{animation-delay:-10.5s}
#sornarrin-premium-demo .hb-coin-1 .icon-slot{color:#34d399}
#sornarrin-premium-demo .hb-coin-3 .icon-slot{color:#fbbf24}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

@media (min-width:720px){
  #sornarrin-premium-demo .hero-banner{margin-top:28px;padding:20px 26px}
  #sornarrin-premium-demo .hb-sub{max-width:50ch;font-size:12px}
  #sornarrin-premium-demo .hb-title{font-size:clamp(24px,3.2vw,34px)}
  #sornarrin-premium-demo .hb-art{width:150px;height:150px}
  #sornarrin-premium-demo .hb-ring-2{inset:26px}
  #sornarrin-premium-demo .hb-coin{width:46px;height:46px;border-radius:15px;font-size:20px;--orbit-r:50px}
}

/* ==========================================================
   5. CATEGORY SWITCHER
   Fungsi:
   Tab layanan Pulsa / Paket Data / Token PLN / E-Money.

   Status: UI ONLY.
   JS dependency: .cat-item[data-service], .active class,
   event klik di #cat-switcher (app.js).
   ========================================================== */
#sornarrin-premium-demo .cat-card{
  margin-top:20px;padding:14px 10px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008)),var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);
}
#sornarrin-premium-demo .cat-scroll{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
#sornarrin-premium-demo .cat-scroll::-webkit-scrollbar{display:none}
#sornarrin-premium-demo .cat-item{
  flex:1;min-width:74px;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:8px 6px 10px;border-radius:18px;position:relative;
  transition:transform .22s var(--ease);
}
#sornarrin-premium-demo .cat-item:active{transform:scale(.96)}
#sornarrin-premium-demo .cat-ico{
  width:54px;height:54px;border-radius:18px;font-size:22px;color:var(--muted);
  display:grid;place-items:center;
  background:var(--surface2);border:1px solid var(--border);
  transition:all .25s var(--ease);position:relative;
}
#sornarrin-premium-demo .cat-label{font-size:12px;font-weight:600;color:var(--muted);transition:color .25s var(--ease);white-space:nowrap}
#sornarrin-premium-demo .cat-item.active .cat-ico{
  color:#fff;border-color:rgba(139,92,246,.55);
  background:linear-gradient(160deg,rgba(124,58,237,.35),rgba(37,99,235,.22));
  box-shadow:0 0 22px rgba(124,58,237,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
#sornarrin-premium-demo .cat-item.active .cat-label{color:var(--text)}
#sornarrin-premium-demo .cat-item.active::after{
  content:"";position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  width:22px;height:3px;border-radius:3px;background:var(--grad);
  box-shadow:0 0 10px rgba(124,58,237,.8);
}
#sornarrin-premium-demo .cat-item.disabled{opacity:.45;cursor:not-allowed}
#sornarrin-premium-demo .soon-badge{position:absolute;top:4px;right:8px;font-size:8.5px;font-weight:700;letter-spacing:.06em;
  color:var(--cyan2);background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.3);
  padding:2px 6px;border-radius:20px}

#sornarrin-premium-demo .ghost-btn{
  margin-top:14px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--purple3);padding:9px 14px;border-radius:12px;
  border:1px solid rgba(139,92,246,.35);background:rgba(139,92,246,.08);
  transition:background .22s var(--ease), transform .15s var(--ease);
}
#sornarrin-premium-demo .ghost-btn:hover{background:rgba(139,92,246,.16)}
#sornarrin-premium-demo .ghost-btn:active{transform:scale(.96)}

/* ==========================================================
   6. ORDER AREA
   Fungsi:
   Styling form & komponen di dalam ORDER SURFACE dinamis:
   - form primitives (label, input, hint)
   - inline alert / feedback (validasi, error, network)
   - detecting chip (loading operator/validasi)
   - operator status (terdeteksi)
   - step title + nominal grid (.nom-card)
   - kategori paket data (.data-cat-grid/.data-cat-btn)
   - paket terpilih (.pkg-card)
   - wallet e-money (.wallet-grid/.wallet-item)
   - skeleton loading (.sk)

   Status: UI ONLY. Class-class ini dipakai oleh HTML yang
   di-generate app.js — jangan rename tanpa sinkronisasi.

   Note:
   .nom-card dipakai oleh PULSA, TOKEN, dan E-MONEY (nominal).
   ========================================================== */
#sornarrin-premium-demo .order-card{
  margin-top:16px;padding:20px;border-radius:28px;position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.006)),var(--surface);
  border:1px solid var(--border);
  box-shadow:0 20px 50px rgba(0,0,0,.35), 0 0 40px rgba(124,58,237,.06);
}
#sornarrin-premium-demo #service-order-area{transition:opacity .22s var(--ease),transform .22s var(--ease)}
#sornarrin-premium-demo #service-order-area.is-leaving{opacity:0;transform:translateY(12px)}

/* --- form primitives --- */
#sornarrin-premium-demo .field-label{display:block;font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:8px}
#sornarrin-premium-demo .input-wrap{position:relative;display:flex;align-items:center}
#sornarrin-premium-demo .text-input{
  width:100%;height:54px;padding:0 52px 0 16px;font-size:15px;letter-spacing:.03em;color:var(--text);
  background:var(--surface2);border:1px solid var(--border);border-radius:16px;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
#sornarrin-premium-demo .text-input::placeholder{color:var(--muted2)}
#sornarrin-premium-demo .text-input:focus{outline:none;border-color:rgba(139,92,246,.6);box-shadow:0 0 0 3px rgba(124,58,237,.18)}
#sornarrin-premium-demo .input-ico{
  position:absolute;right:8px;width:38px;height:38px;border-radius:12px;font-size:18px;color:var(--purple3);
  display:grid;place-items:center;border:1px solid rgba(139,92,246,.3);background:rgba(139,92,246,.08);
}
#sornarrin-premium-demo .hint{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5}

/* --- inline alerts / feedback --- */
#sornarrin-premium-demo .inline-alert{
  margin-top:14px;padding:14px;border-radius:16px;display:flex;gap:12px;align-items:flex-start;
  border:1px solid;font-size:18px;
}
#sornarrin-premium-demo .inline-alert .ia-ico{margin-top:1px}
#sornarrin-premium-demo .ia-body{flex:1;min-width:0}
#sornarrin-premium-demo .ia-title{display:block;font-size:13px;font-weight:700}
#sornarrin-premium-demo .ia-desc{font-size:12px;line-height:1.55;margin-top:3px;color:var(--muted)}
#sornarrin-premium-demo .ia-action{
  flex:none;align-self:center;font-size:11.5px;font-weight:700;padding:9px 12px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid var(--border2);
  min-height:36px;
}
#sornarrin-premium-demo .tone-warn{border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.06);color:#fbbf24}
#sornarrin-premium-demo .tone-error{border-color:rgba(244,63,94,.3);background:rgba(244,63,94,.06);color:#fda4af}
#sornarrin-premium-demo .tone-error .ia-title{color:#fda4af}
#sornarrin-premium-demo .tone-muted{border-color:var(--border);background:rgba(148,163,184,.05);color:var(--muted)}
#sornarrin-premium-demo .tone-muted .ia-title{color:var(--text)}

/* --- detecting chip --- */
#sornarrin-premium-demo .detect-chip{
  margin-top:14px;display:inline-flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);
  padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:var(--surface2);
}
#sornarrin-premium-demo .spinner{width:14px;height:14px;border-radius:50%;flex:none;
  border:2px solid rgba(139,92,246,.25);border-top-color:var(--purple);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- operator detection: one-line inline status --- */
#sornarrin-premium-demo .op-status{
  margin-top:12px;display:flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;color:#67e8f9;
  text-shadow:0 0 12px rgba(34,211,238,.25);
  animation:opStatusIn .2s var(--ease);
}
#sornarrin-premium-demo .op-status .icon-slot{font-size:13px;color:#67e8f9}
#sornarrin-premium-demo .op-status.warn{color:var(--muted);text-shadow:none}
#sornarrin-premium-demo .op-status.warn .icon-slot{color:var(--muted2)}
#sornarrin-premium-demo .op-status-link{
  margin-left:auto;font-size:11.5px;font-weight:700;color:var(--cyan2);
  padding:6px 10px;border-radius:9px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
#sornarrin-premium-demo .op-status-link:hover{border-color:var(--border2)}
@keyframes opStatusIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes sheetIn{from{transform:translate(-50%,105%)}to{transform:translate(-50%,0)}}

/* --- step title / grids --- */
#sornarrin-premium-demo .step-title{font-size:13px;font-weight:700;margin:20px 0 12px;display:flex;align-items:center;gap:8px}
#sornarrin-premium-demo .step-title::after{content:"";flex:1;height:1px;background:var(--border)}
#sornarrin-premium-demo .nom-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:480px){ #sornarrin-premium-demo .nom-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:960px){ #sornarrin-premium-demo .nom-grid{grid-template-columns:repeat(4,1fr)} }
#sornarrin-premium-demo .nom-card{
  padding:14px 12px;border-radius:16px;text-align:center;
  background:var(--surface2);border:1px solid var(--border);
  transition:all .22s var(--ease);min-height:64px;
  display:flex;flex-direction:column;justify-content:center;gap:4px;
}
#sornarrin-premium-demo .nom-top{font-size:14.5px;font-weight:700}
#sornarrin-premium-demo .nom-price{font-size:11.5px;color:var(--muted)}
#sornarrin-premium-demo .nom-card:hover{border-color:var(--border2)}
#sornarrin-premium-demo .nom-card.selected{
  border-color:rgba(139,92,246,.65);
  background:linear-gradient(160deg,rgba(124,58,237,.3),rgba(37,99,235,.18));
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(124,58,237,.28), inset 0 1px 0 rgba(255,255,255,.1);
}
#sornarrin-premium-demo .nom-card.selected .nom-price{color:#c4b5fd}
#sornarrin-premium-demo .link-btn{
  margin-top:12px;width:100%;padding:12px;border-radius:14px;font-size:12.5px;font-weight:600;
  color:var(--muted);border:1px dashed var(--border2);
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .22s var(--ease);min-height:44px;
}
#sornarrin-premium-demo .link-btn:hover{color:var(--purple3);border-color:rgba(139,92,246,.5)}

/* --- data category selector (compact 3-column grid) --- */
#sornarrin-premium-demo .data-cat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  perspective:800px;
}
#sornarrin-premium-demo .data-cat-grid.long{font-size:11.5px}
#sornarrin-premium-demo .data-cat-btn{
  min-height:44px;padding:9px 10px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  font-size:13px;font-weight:600;color:var(--muted);
  background:var(--surface2);border:1px solid var(--border);
  transition:transform .15s var(--ease-spring), border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
  line-height:1.2;word-break:break-word;
  animation:riseIn .32s var(--ease) backwards;
  will-change:transform;
}
#sornarrin-premium-demo .data-cat-btn:nth-child(3n+1){animation-delay:.01s}
#sornarrin-premium-demo .data-cat-btn:nth-child(3n+2){animation-delay:.04s}
#sornarrin-premium-demo .data-cat-btn:nth-child(3n+3){animation-delay:.07s}
#sornarrin-premium-demo .data-cat-btn:hover{border-color:var(--border2);color:var(--text)}
#sornarrin-premium-demo .data-cat-btn:active{transform:scale(.97)}
#sornarrin-premium-demo .data-cat-btn.active{
  color:#fff;border-color:rgba(139,92,246,.65);
  background:linear-gradient(160deg,rgba(124,58,237,.35),rgba(37,99,235,.22));
  box-shadow:0 0 18px rgba(124,58,237,.35), inset 0 1px 0 rgba(255,255,255,.12);
}

/* --- selected package card --- */
#sornarrin-premium-demo .pkg-card{
  margin-top:14px;padding:14px;border-radius:18px;display:flex;align-items:center;gap:12px;
  background:var(--surface2);border:1px solid rgba(34,211,238,.35);animation:popIn .3s var(--ease);
}
#sornarrin-premium-demo .pkg-ico{width:44px;height:44px;border-radius:14px;flex:none;font-size:19px;color:var(--cyan2);
  display:grid;place-items:center;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.3)}
#sornarrin-premium-demo .pkg-main{flex:1;min-width:0}
#sornarrin-premium-demo .pkg-name{font-size:14px;font-weight:700}
#sornarrin-premium-demo .pkg-desc{font-size:11.5px;color:var(--cyan2);margin-top:2px}
#sornarrin-premium-demo .pkg-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
#sornarrin-premium-demo .pkg-price{font-size:13px;font-weight:800;color:var(--cyan2)}

/* --- wallet selector (compact 3-column grid, like data-cat) --- */
#sornarrin-premium-demo .wallet-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
#sornarrin-premium-demo .wallet-item{
  min-height:52px;padding:9px 8px;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  font-size:12px;font-weight:600;color:var(--muted);
  background:var(--surface2);border:1px solid var(--border);
  transition:transform .15s var(--ease-spring), border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
  animation:riseIn .32s var(--ease) backwards;
  will-change:transform;
}
#sornarrin-premium-demo .wallet-item:nth-child(3n+1){animation-delay:.01s}
#sornarrin-premium-demo .wallet-item:nth-child(3n+2){animation-delay:.04s}
#sornarrin-premium-demo .wallet-item:nth-child(3n+3){animation-delay:.07s}
#sornarrin-premium-demo .wallet-item:hover{border-color:var(--border2);color:var(--text)}
#sornarrin-premium-demo .wallet-item:active{transform:scale(.97)}
#sornarrin-premium-demo .wallet-item.active{
  color:#fff;border-color:rgba(139,92,246,.65);
  background:linear-gradient(160deg,rgba(124,58,237,.35),rgba(37,99,235,.22));
  box-shadow:0 0 18px rgba(124,58,237,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
#sornarrin-premium-demo .wallet-item-badge{
  width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  font-weight:800;font-size:12px;color:#fff;
  background:linear-gradient(160deg,var(--wc,#3b82f6),rgba(3,7,18,.45));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 10px rgba(59,130,246,.25);
}
#sornarrin-premium-demo .wallet-item-name{font-size:12px;font-weight:700;line-height:1.15;word-break:break-word}

/* --- skeleton --- */
#sornarrin-premium-demo .sk{position:relative;overflow:hidden;background:var(--surface2)!important;border-color:var(--border)!important;pointer-events:none;color:transparent!important}
#sornarrin-premium-demo .sk *{visibility:hidden}
#sornarrin-premium-demo .sk::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);
  animation:shimmer 1.1s linear infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ==========================================================
   7. SUMMARY
   Fungsi:
   Card ringkasan pesanan + total + tombol "Buat Pesanan".

   Status: UI ONLY.
   JS dependency: #summary-rows, #total-value, #cta-order
   (renderSummary() di app.js). Status .is-loading / .is-success
   dikontrol processOrder().
   ========================================================== */
#sornarrin-premium-demo .summary-card{
  margin-top:16px;padding:18px 20px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005)),var(--surface);
  border:1px solid var(--border);
}
#sornarrin-premium-demo .sum-head{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;margin-bottom:16px}
#sornarrin-premium-demo .sum-head .icon-slot{color:var(--purple3);font-size:18px}
#sornarrin-premium-demo .sum-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding-bottom:16px;border-bottom:1px solid var(--border)}
@media (min-width:640px){ #sornarrin-premium-demo .sum-grid{grid-template-columns:repeat(3,1fr)} }
#sornarrin-premium-demo .sum-label{font-size:10.5px;color:var(--muted);letter-spacing:.03em;margin-bottom:5px}
#sornarrin-premium-demo .sum-value{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sornarrin-premium-demo .sum-value.empty{color:var(--muted2)}
#sornarrin-premium-demo .sum-cell{animation:riseIn .35s var(--ease) backwards;min-width:0}
#sornarrin-premium-demo .sum-foot{display:flex;align-items:center;gap:14px;padding-top:16px}
#sornarrin-premium-demo .sum-total{flex:1;min-width:0}
#sornarrin-premium-demo .total-label{font-size:11px;color:var(--muted)}
#sornarrin-premium-demo .total-value{font-size:21px;font-weight:800;letter-spacing:-.01em;margin-top:3px;transition:color .25s var(--ease), transform .15s var(--ease)}
#sornarrin-premium-demo .total-value.live{color:var(--cyan2)}
#sornarrin-premium-demo .total-value.pop{transform:scale(1.03)}
#sornarrin-premium-demo .cta-btn{
  flex:none;display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 26px;
  border-radius:16px;font-size:14px;font-weight:700;color:#fff;background:var(--grad);
  box-shadow:0 10px 26px rgba(93,63,211,.35);
  transition:transform .15s var(--ease-spring), filter .2s var(--ease), box-shadow .2s var(--ease);
  position:relative;
}
#sornarrin-premium-demo .cta-btn:hover:not(:disabled){filter:brightness(1.1)}
#sornarrin-premium-demo .cta-btn:active:not(:disabled){transform:scale(.97)}
#sornarrin-premium-demo .cta-btn:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}
#sornarrin-premium-demo .cta-btn .spin{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
#sornarrin-premium-demo .cta-btn.is-loading .spin{display:inline-block}
#sornarrin-premium-demo .cta-btn.is-loading .cta-chev{display:none}
#sornarrin-premium-demo .cta-btn.is-success{background:linear-gradient(135deg,#059669,#10b981)}
@media (max-width:420px){ #sornarrin-premium-demo .sum-foot{flex-direction:column;align-items:stretch} #sornarrin-premium-demo .cta-btn{justify-content:center} }

/* ==========================================================
   8. BENEFITS / HISTORY / ASIDE
   Fungsi:
   Card keunggulan (mobile), aside info (desktop), dan layout
   dua kolom di desktop.

   Status: UI ONLY.
   ========================================================== */
#sornarrin-premium-demo .benefits{
  margin-top:16px;padding:16px;border-radius:var(--r-lg);
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
  background:var(--surface);border:1px solid var(--border);
}
#sornarrin-premium-demo .benefit-item{display:flex;gap:11px;align-items:flex-start}
#sornarrin-premium-demo .ben-ico{width:36px;height:36px;border-radius:12px;flex:none;font-size:16px;color:var(--purple3);
  display:grid;place-items:center;background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.28)}
#sornarrin-premium-demo .benefit-item:nth-child(even) .ben-ico{color:var(--cyan2);background:rgba(34,211,238,.07);border-color:rgba(34,211,238,.25)}
#sornarrin-premium-demo .ben-title{font-size:12.5px;font-weight:700}
#sornarrin-premium-demo .ben-sub{font-size:11px;color:var(--muted);margin-top:2px}
@media (min-width:960px){ #sornarrin-premium-demo .benefits{display:none} }

#sornarrin-premium-demo .order-aside{display:none}
@media (min-width:960px){
  #sornarrin-premium-demo .order-aside{display:flex;flex-direction:column;gap:12px}
  #sornarrin-premium-demo .aside-card{padding:18px;border-radius:20px;background:var(--surface);border:1px solid var(--border)}
  #sornarrin-premium-demo .aside-card h4{font-size:13px;font-weight:700;margin-bottom:14px}
  #sornarrin-premium-demo .aside-card .benefit-item{margin-bottom:12px}
  #sornarrin-premium-demo .order-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
}

/* ==========================================================
   9. BOTTOM SHEET
   Fungsi:
   Panel slide-up generik: backdrop, head (back/close), body.
   Termasuk daftar produk (.product-list/.sheet-row), success
   sheet, invoice (sukses/gagal/proses), dan SN/kode token.

   Status: UI ONLY.
   JS dependency: class .open / .full dan #sheet-* dikontrol
   objek Sheet di app.js.
   ========================================================== */
#sornarrin-premium-demo .sheet-backdrop{
  position:fixed;inset:0;z-index:55;background:rgba(3,7,18,.62);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
#sornarrin-premium-demo .sheet-backdrop.show{opacity:1;pointer-events:auto}
#sornarrin-premium-demo .sheet{
  position:fixed;left:50%;bottom:0;z-index:60;width:100%;max-width:560px;
  max-height:82dvh;display:flex;flex-direction:column;overflow:hidden;
  background:rgba(11,18,38,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border2);border-bottom:none;border-radius:28px 28px 0 0;
  transform:translate(-50%,105%);transition:transform .36s var(--ease);
  padding-bottom:calc(12px + var(--safe-b));
}
#sornarrin-premium-demo .sheet.open{transform:translate(-50%,0)}
#sornarrin-premium-demo .sheet.full{
  max-width:100%;max-height:100dvh;height:100dvh;border-radius:0;
  border:1px solid var(--border);border-bottom:none;
  padding-bottom:calc(8px + var(--safe-b));
}
#sornarrin-premium-demo .sheet.full .sheet-handle{display:none}
#sornarrin-premium-demo .sheet-handle{width:44px;height:4px;border-radius:4px;background:rgba(255,255,255,.16);margin:12px auto 4px;flex:none}
#sornarrin-premium-demo .sheet-head{display:flex;align-items:center;gap:10px;padding:10px 16px 14px;border-bottom:1px solid var(--border);flex:none}
#sornarrin-premium-demo .sheet-back, #sornarrin-premium-demo .sheet-close{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:17px;
  background:var(--surface2);border:1px solid var(--border);color:var(--muted);flex:none}
#sornarrin-premium-demo .sheet-titles{flex:1;min-width:0}
#sornarrin-premium-demo .sheet-title{font-size:15px;font-weight:700}
#sornarrin-premium-demo .sheet-sub{font-size:11px;color:var(--muted);margin-top:2px}
#sornarrin-premium-demo .sheet-body{overflow-y:auto;padding:14px 16px;overscroll-behavior:contain;flex:1;min-height:0}
#sornarrin-premium-demo .product-list{display:flex;flex-direction:column;gap:10px}
#sornarrin-premium-demo .sheet-row{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  padding:15px 14px;border-radius:16px;background:var(--surface2);border:1px solid var(--border);
  transition:transform .15s var(--ease-spring), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  min-height:44px;
  animation:riseIn .3s var(--ease) backwards;
  will-change:transform;
}
#sornarrin-premium-demo .sheet-row:nth-child(1){animation-delay:.01s}
#sornarrin-premium-demo .sheet-row:nth-child(2){animation-delay:.03s}
#sornarrin-premium-demo .sheet-row:nth-child(3){animation-delay:.05s}
#sornarrin-premium-demo .sheet-row:nth-child(4){animation-delay:.07s}
#sornarrin-premium-demo .sheet-row:nth-child(n+5){animation-delay:.09s}
#sornarrin-premium-demo .sheet-row + .sheet-row{margin-top:10px}
#sornarrin-premium-demo .product-list .sheet-row + .sheet-row{margin-top:0}
#sornarrin-premium-demo .sheet-row:hover{border-color:var(--border2)}
#sornarrin-premium-demo .sheet-row:active{transform:scale(.98)}
#sornarrin-premium-demo .row-main{flex:1;min-width:0}
#sornarrin-premium-demo .row-name{font-size:13.5px;font-weight:700}
#sornarrin-premium-demo .row-desc{font-size:11px;color:var(--cyan2);margin-top:2px}
#sornarrin-premium-demo .row-sub{font-size:11px;color:var(--muted);margin-top:3px}
#sornarrin-premium-demo .row-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;align-self:stretch;justify-content:flex-start}
#sornarrin-premium-demo .row-price{font-size:13px;font-weight:800;color:var(--cyan2);margin-top:auto}
#sornarrin-premium-demo .row-info{
  min-width:38px;height:20px;padding:0 7px;border-radius:99px;display:grid;place-items:center;flex:none;
  font-size:9.5px;font-weight:800;letter-spacing:.6px;color:var(--purple3);line-height:1;cursor:pointer;
  background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.35);
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease-spring);
}
#sornarrin-premium-demo .row-info:hover{background:rgba(139,92,246,.28);border-color:rgba(139,92,246,.6)}
#sornarrin-premium-demo .row-info:active{transform:scale(.92)}
#sornarrin-premium-demo .row-info .icon-slot{font-size:14px;display:flex}
#sornarrin-premium-demo .row-check{font-size:16px;color:var(--muted2);flex:none}
#sornarrin-premium-demo .sheet-row.selected{border-color:rgba(139,92,246,.6);background:rgba(124,58,237,.12)}
#sornarrin-premium-demo .sheet-row.selected .row-check{color:var(--cyan2)}

/* success sheet */
#sornarrin-premium-demo .success-box{text-align:center;padding:14px 6px 8px}
#sornarrin-premium-demo .success-ring{
  width:74px;height:74px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  font-size:30px;color:#34d399;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.4);
  box-shadow:0 0 34px rgba(52,211,153,.3);animation:popIn .32s var(--ease);
}
#sornarrin-premium-demo .success-title{font-size:17px;font-weight:800}
#sornarrin-premium-demo .success-sub{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.6}
#sornarrin-premium-demo .success-detail{
  margin:18px 0;padding:14px 16px;border-radius:16px;text-align:left;
  background:var(--surface2);border:1px solid var(--border);
}
#sornarrin-premium-demo .sd-row{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:5px 0}
#sornarrin-premium-demo .sd-row .l{color:var(--muted)}
#sornarrin-premium-demo .sd-row .v{font-weight:700;text-align:right}
#sornarrin-premium-demo .sheet-cta{width:100%;margin-top:6px}

/* --- invoice (mobile-app style receipt) --- */
#sornarrin-premium-demo .invoice{animation:riseIn .35s var(--ease)}
#sornarrin-premium-demo .inv-hero{
  text-align:center;padding:6px 6px 4px;position:relative;
}
#sornarrin-premium-demo .inv-hero .success-ring{margin-bottom:14px}
#sornarrin-premium-demo .inv-status{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;color:#34d399;
  padding:5px 12px;border-radius:20px;
  background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.35);
}
#sornarrin-premium-demo .inv-status-dot{width:6px;height:6px;border-radius:50%;background:#34d399;
  box-shadow:0 0 8px rgba(52,211,153,.9);animation:pulseDot 1.6s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}}
#sornarrin-premium-demo .inv-amount{
  font-size:30px;font-weight:800;letter-spacing:-.01em;margin-top:10px;
  background:linear-gradient(120deg,#22d3ee,#a78bfa 55%,#f0abfc);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
#sornarrin-premium-demo .inv-meta{font-size:11px;color:var(--muted);margin-top:7px}
#sornarrin-premium-demo .inv-meta strong{color:var(--text);font-weight:700}
#sornarrin-premium-demo .inv-body{
  margin:16px 0 12px;padding:16px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008)),var(--surface2);
  border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
}
#sornarrin-premium-demo .inv-merchant{display:flex;align-items:center;gap:12px}
#sornarrin-premium-demo .inv-m-ico{
  width:44px;height:44px;border-radius:14px;flex:none;font-size:19px;color:var(--cyan2);
  display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(34,211,238,.14),rgba(34,211,238,.04));
  border:1px solid rgba(34,211,238,.35);
}
#sornarrin-premium-demo .inv-m-main{flex:1;min-width:0}
#sornarrin-premium-demo .inv-m-name{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sornarrin-premium-demo .inv-m-sub{font-size:10.5px;color:var(--muted);margin-top:3px}
#sornarrin-premium-demo .inv-divider{
  margin:14px 0;height:1px;position:relative;
  background:repeating-linear-gradient(90deg,var(--border2) 0 6px,transparent 6px 12px);
}
#sornarrin-premium-demo .inv-rows{display:flex;flex-direction:column;gap:11px}
#sornarrin-premium-demo .inv-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px}
#sornarrin-premium-demo .inv-row span{color:var(--muted)}
#sornarrin-premium-demo .inv-row strong{font-weight:600;text-align:right}
#sornarrin-premium-demo .inv-total{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 15px;border-radius:16px;
  background:linear-gradient(120deg,rgba(124,58,237,.14),rgba(37,99,235,.08));
  border:1px solid rgba(139,92,246,.35);
}
#sornarrin-premium-demo .inv-total.no-div{margin-top:20px}
#sornarrin-premium-demo .inv-total-label{font-size:11px;font-weight:700}
#sornarrin-premium-demo .inv-total-sub{font-size:10px;color:var(--muted);margin-top:2px}
#sornarrin-premium-demo .inv-total-value{
  font-size:17px;font-weight:800;color:var(--cyan2);
  text-shadow:0 0 18px rgba(34,211,238,.35);
}
#sornarrin-premium-demo .inv-price-btn{
  width:100%;display:flex;align-items:center;gap:9px;margin-top:12px;
  padding:11px 13px;border-radius:14px;font-size:12.5px;font-weight:700;color:var(--cyan2);
  background:rgba(34,211,238,.06);border:1px dashed rgba(34,211,238,.45);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
#sornarrin-premium-demo .inv-price-btn:hover{border-color:rgba(34,211,238,.7);background:rgba(34,211,238,.1)}
#sornarrin-premium-demo .inv-price-btn:active{transform:scale(.98)}
#sornarrin-premium-demo .inv-price-btn .icon-slot{font-size:16px}
#sornarrin-premium-demo .inv-price-btn .inv-price-chev{margin-left:auto;font-size:14px;opacity:.7}

/* --- status proses (processing) --- */
#sornarrin-premium-demo .proc{text-align:center;padding:14px 4px 4px;animation:riseIn .35s var(--ease)}
#sornarrin-premium-demo .proc-spinner{
  width:74px;height:74px;margin:0 auto 18px;border-radius:50%;position:relative;
  background:conic-gradient(from 0deg,transparent 0 40%,#22d3ee 85%,transparent 95%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
  animation:spinProc 1s linear infinite;
}
#sornarrin-premium-demo .proc-spinner span{display:none}
@keyframes spinProc{to{transform:rotate(360deg)}}
#sornarrin-premium-demo .proc-title{font-size:14px;font-weight:800;letter-spacing:.08em;color:var(--cyan2)}
#sornarrin-premium-demo .proc-sub{font-size:12px;color:var(--muted);margin-top:7px;min-height:16px}
#sornarrin-premium-demo .proc-card{margin-top:20px;padding:16px;border-radius:20px;text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008)),var(--surface2);
  border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.25)}

/* --- error state (gagal) --- */
#sornarrin-premium-demo .invoice.err .err-ring{
  width:64px;height:64px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  color:#f87171;font-size:28px;background:rgba(248,113,113,.1);border:1.5px solid rgba(248,113,113,.55);
}
#sornarrin-premium-demo .inv-status.err-st{color:#f87171;background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.4)}
#sornarrin-premium-demo .inv-status-dot.err-dot{background:#f87171;box-shadow:0 0 8px rgba(248,113,113,.9)}
#sornarrin-premium-demo .err-amount{font-size:30px;font-weight:800;letter-spacing:-.01em;margin-top:10px;color:#f87171}
#sornarrin-premium-demo .err-msg{
  display:flex;align-items:flex-start;gap:9px;padding:12px 13px;border-radius:12px;
  font-size:12px;line-height:1.5;color:#fca5a5;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.3);
}
#sornarrin-premium-demo .err-msg .icon-slot{font-size:15px;flex:none;margin-top:1px}

/* --- SN / kode token --- */
#sornarrin-premium-demo .sn-inline{font-family:'DM Mono','Courier New',monospace;letter-spacing:.02em}
#sornarrin-premium-demo .sn-row{display:none}
#sornarrin-premium-demo .sn-token-wrap{
  display:flex;align-items:center;gap:10px;margin:2px 0 4px;
  padding:14px 16px;border-radius:16px;
  background:rgba(139,92,246,.1);border:1px dashed rgba(139,92,246,.5);
}
#sornarrin-premium-demo .sn-token{
  flex:1;min-width:0;font-family:'DM Mono','Courier New',monospace;
  font-size:19px;font-weight:800;letter-spacing:.06em;color:var(--purple3);word-break:break-all;
}
#sornarrin-premium-demo .sn-copy{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  padding:9px 13px;border-radius:11px;font-size:11.5px;font-weight:800;color:#fff;
  background:var(--purple3);border:none;
  transition:transform .15s var(--ease-spring), filter .2s var(--ease);
}
#sornarrin-premium-demo .sn-copy:hover{filter:brightness(1.1)}
#sornarrin-premium-demo .sn-copy:active{transform:scale(.94)}
#sornarrin-premium-demo .sn-copy .icon-slot{font-size:14px}
#sornarrin-premium-demo .pay-badge.badge-err{color:#f87171;background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.4)}

/* ==========================================================
   10. PRICE EDITOR POPUP
   Fungsi:
   Styling popup "Atur Harga Jual" (input Rp, chip cepat,
   info modal & keuntungan).

   Status: UI ONLY + state sementara (harga tampilan invoice).

   IMPORTANT:
   Harga ini hanya mengubah yang DITAMPILKAN (invoice/struk).
   Tidak ada kalkulasi backend.
   ========================================================== */
#sornarrin-premium-demo .pe-wrap{animation:riseIn .35s var(--ease)}
#sornarrin-premium-demo .pe-ref{
  display:flex;align-items:flex-start;gap:9px;margin-bottom:16px;
  padding:11px 13px;border-radius:12px;font-size:11.5px;line-height:1.5;color:var(--muted);
  background:rgba(34,211,238,.06);border:1px solid rgba(34,211,238,.3);
}
#sornarrin-premium-demo .pe-ref .icon-slot{font-size:15px;color:var(--cyan2);flex:none;margin-top:1px}
#sornarrin-premium-demo .pe-label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.05em;margin-bottom:8px}
#sornarrin-premium-demo .pe-input-row{
  display:flex;align-items:center;gap:10px;padding:0 16px;height:56px;border-radius:16px;
  background:var(--surface2);border:1px solid var(--border);
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
#sornarrin-premium-demo .pe-input-row:focus-within{border-color:rgba(139,92,246,.6);box-shadow:0 0 0 3px rgba(124,58,237,.18)}
#sornarrin-premium-demo .pe-cur{font-size:16px;font-weight:800;color:var(--purple3)}
#sornarrin-premium-demo .pe-input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);
  font-size:26px;font-weight:800;letter-spacing:-.01em}
#sornarrin-premium-demo .pe-input::placeholder{color:var(--muted2)}
#sornarrin-premium-demo .pe-quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
#sornarrin-premium-demo .pe-chip{
  padding:8px 14px;border-radius:11px;font-size:12px;font-weight:700;color:var(--cyan2);
  background:rgba(34,211,238,.07);border:1px solid rgba(34,211,238,.35);
  transition:transform .15s var(--ease-spring), background .2s var(--ease), border-color .2s var(--ease);
}
#sornarrin-premium-demo .pe-chip:hover{background:rgba(34,211,238,.14);border-color:rgba(34,211,238,.6)}
#sornarrin-premium-demo .pe-chip:active{transform:scale(.95)}
#sornarrin-premium-demo .pe-chip.ghost{color:var(--muted);background:var(--surface2);border-color:var(--border)}
#sornarrin-premium-demo .pe-chip.ghost:hover{color:var(--text)}
#sornarrin-premium-demo .pe-info{margin:16px 0 14px;font-size:11.5px;color:var(--muted)}
#sornarrin-premium-demo .pe-info strong{color:var(--text);font-weight:700}
#sornarrin-premium-demo .inv-note{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:10.5px;color:var(--muted);margin:4px 0 14px;
}
#sornarrin-premium-demo .inv-note .icon-slot{font-size:13px;color:var(--purple3)}
#sornarrin-premium-demo .invoice .sheet-cta{margin-top:0}

/* menu sheet rows */
#sornarrin-premium-demo .menu-row{width:100%;display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;text-align:left;
  background:var(--surface2);border:1px solid var(--border);min-height:44px}
#sornarrin-premium-demo .menu-row + .menu-row{margin-top:10px}
#sornarrin-premium-demo .menu-row .icon-slot{font-size:19px;color:var(--purple3)}
#sornarrin-premium-demo .menu-name{flex:1;font-size:13px;font-weight:600}
#sornarrin-premium-demo .menu-tag{font-size:9.5px;font-weight:700;padding:3px 8px;border-radius:20px;letter-spacing:.05em}
#sornarrin-premium-demo .menu-tag.on{color:var(--cyan2);background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.3)}
#sornarrin-premium-demo .menu-tag.off{color:var(--muted2);background:rgba(148,163,184,.06);border:1px solid var(--border)}

/* ==========================================================
   11. PAYMENT SHEET
   Fungsi:
   Konfirmasi pembayaran: total, pilihan metode (Saldo / QRIS),
   tombol konfirmasi.

   Status: UI ONLY + state sementara (metode terpilih).
   JS dependency: .pay-method[data-pay], #btn-pay-confirm,
   class .selected (showPaymentSheet di app.js).

   IMPORTANT:
   Metode "Saldo" memakai MockData.balance di demo. Pada produksi,
   cek saldo & proses pembayaran adalah tanggung jawab BACKEND.
   ========================================================== */
#sornarrin-premium-demo .pay-amount{
  text-align:center;padding:10px 6px 18px;position:relative;
}
#sornarrin-premium-demo .pay-amount::after{
  content:"";position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:70%;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.45),rgba(34,211,238,.45),transparent);
}
#sornarrin-premium-demo .pay-amount-label{font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
#sornarrin-premium-demo .pay-amount-value{
  font-size:28px;font-weight:800;margin-top:8px;letter-spacing:-.01em;
  background:linear-gradient(120deg,#22d3ee,#a78bfa 55%,#f0abfc);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:riseIn .35s var(--ease-spring);
}
#sornarrin-premium-demo .pay-badge{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  font-size:10px;font-weight:700;color:var(--cyan2);letter-spacing:.05em;
  background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.28);
  padding:4px 10px;border-radius:20px;
}
#sornarrin-premium-demo .pay-badge .icon-slot{font-size:11px}
#sornarrin-premium-demo .pay-method{
  position:relative;overflow:hidden;
  width:100%;display:flex;align-items:center;gap:13px;text-align:left;
  padding:16px 14px;border-radius:18px;background:var(--surface2);border:1px solid var(--border);
  transition:transform .16s var(--ease-spring), border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  animation:riseIn .34s var(--ease) backwards;min-height:68px;
}
#sornarrin-premium-demo .pay-method::before{
  content:"";position:absolute;inset:0;border-radius:18px;opacity:0;transition:opacity .25s var(--ease);
  background:radial-gradient(120% 120% at 0% 0%, rgba(139,92,246,.14), transparent 55%);
}
#sornarrin-premium-demo .pay-method:nth-child(2){animation-delay:.04s}
#sornarrin-premium-demo .pay-method:nth-child(3){animation-delay:.09s}
#sornarrin-premium-demo .pay-method + .pay-method{margin-top:10px}
#sornarrin-premium-demo .pay-method:hover{border-color:var(--border2)}
#sornarrin-premium-demo .pay-method:hover::before{opacity:1}
#sornarrin-premium-demo .pay-method:active{transform:scale(.98)}
#sornarrin-premium-demo .pay-method:disabled{opacity:.45;cursor:not-allowed}
#sornarrin-premium-demo .pay-ico{
  position:relative;z-index:1;
  width:48px;height:48px;border-radius:16px;flex:none;font-size:21px;
  display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(34,211,238,.14),rgba(34,211,238,.04));
  border:1px solid rgba(34,211,238,.35);
  box-shadow:0 0 20px rgba(34,211,238,.12), inset 0 1px 0 rgba(255,255,255,.08);
}
#sornarrin-premium-demo .pay-method[data-pay="saldo"] .pay-ico{
  color:#fbbf24;background:linear-gradient(160deg,rgba(251,191,36,.16),rgba(251,191,36,.05));
  border-color:rgba(251,191,36,.35);box-shadow:0 0 20px rgba(251,191,36,.14), inset 0 1px 0 rgba(255,255,255,.08);
}
#sornarrin-premium-demo .pay-method[data-pay="qris"] .pay-ico{
  color:#a78bfa;background:linear-gradient(160deg,rgba(139,92,246,.18),rgba(139,92,246,.05));
  border-color:rgba(139,92,246,.4);box-shadow:0 0 20px rgba(139,92,246,.16), inset 0 1px 0 rgba(255,255,255,.08);
}
#sornarrin-premium-demo .pay-main{position:relative;z-index:1;flex:1;min-width:0}
#sornarrin-premium-demo .pay-name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
#sornarrin-premium-demo .pay-tag{
  font-size:8.5px;font-weight:800;letter-spacing:.06em;padding:2px 7px;border-radius:20px;flex:none;
}
#sornarrin-premium-demo .pay-tag.best{color:#fbbf24;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.35)}
#sornarrin-premium-demo .pay-tag.qr{color:#a78bfa;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.4)}
#sornarrin-premium-demo .pay-sub{font-size:11.5px;color:var(--muted);margin-top:3px}
#sornarrin-premium-demo .pay-method .row-check{
  position:relative;z-index:1;font-size:17px;color:var(--muted2);
  transition:transform .18s var(--ease-spring), color .25s var(--ease);
}
#sornarrin-premium-demo .pay-method:hover .row-check{color:var(--cyan2);transform:translateX(3px)}
#sornarrin-premium-demo .pay-method.selected{
  border-color:rgba(139,92,246,.65);
  background:linear-gradient(160deg,rgba(124,58,237,.16),rgba(37,99,235,.08));
  box-shadow:0 0 22px rgba(124,58,237,.2), inset 0 1px 0 rgba(255,255,255,.08);
  transform:scale(1.015);
}
#sornarrin-premium-demo .pay-method.selected .row-check{
  color:var(--cyan2);transform:none;
  display:grid;place-items:center;
  width:24px;height:24px;border-radius:50%;
  background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.4);
}
#sornarrin-premium-demo .pay-method.selected::before{opacity:1}
#sornarrin-premium-demo #btn-pay-confirm{margin-top:16px}
#sornarrin-premium-demo #btn-pay-confirm .cta-chev{transition:transform .2s var(--ease)}
#sornarrin-premium-demo #btn-pay-confirm:hover:not(:disabled) .cta-chev{transform:translateX(3px)}

/* ==========================================================
   12. TOAST & MISC
   Fungsi:
   Toast notifikasi, popup deskripsi produk (.desc-pop),
   utility animasi, dan section-gap.

   Status: UI ONLY.
   ========================================================== */
#sornarrin-premium-demo .toast{
  position:fixed;left:50%;bottom:calc(92px + var(--safe-b));z-index:70;
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:9px;
  max-width:calc(100vw - 40px);padding:12px 16px;border-radius:14px;font-size:12.5px;font-weight:600;
  background:rgba(13,20,40,.95);border:1px solid rgba(52,211,153,.4);color:#d1fae5;
  box-shadow:0 14px 34px rgba(0,0,0,.5);backdrop-filter:blur(12px);
  transition:transform .3s var(--ease), opacity .25s var(--ease);
}
#sornarrin-premium-demo .toast.show{transform:translate(-50%,0);opacity:1}
#sornarrin-premium-demo .toast .icon-slot{font-size:16px;color:#34d399}

/* --- product description popup --- */
#sornarrin-premium-demo .desc-pop{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(3,7,18,.68);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
#sornarrin-premium-demo .desc-pop.show{opacity:1;pointer-events:auto}
body.pop-lock{overflow:hidden}
#sornarrin-premium-demo .desc-pop-card{
  width:100%;max-width:340px;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008)),var(--surface2);
  border:1px solid rgba(139,92,246,.4);
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 30px rgba(124,58,237,.18);
  animation:popIn .3s var(--ease);
}
#sornarrin-premium-demo .desc-pop-head{display:flex;align-items:center;gap:12px;padding:16px 16px 12px}
#sornarrin-premium-demo .desc-pop-ico{
  width:42px;height:42px;border-radius:14px;flex:none;font-size:18px;color:var(--cyan2);
  display:grid;place-items:center;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.3);
}
#sornarrin-premium-demo .desc-pop-titles{flex:1;min-width:0}
#sornarrin-premium-demo .desc-pop-name{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sornarrin-premium-demo .desc-pop-sub{font-size:11px;color:var(--muted);margin-top:3px}
#sornarrin-premium-demo .desc-pop-close{
  width:34px;height:34px;border-radius:11px;flex:none;font-size:15px;color:var(--muted);
  display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid var(--border);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
#sornarrin-premium-demo .desc-pop-close:hover{color:var(--text);border-color:var(--border2)}
#sornarrin-premium-demo .desc-pop-ico.pe-ico{color:var(--purple3);background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.35)}
#sornarrin-premium-demo .desc-pop-body{
  padding:6px 16px 16px;display:flex;flex-direction:column;gap:10px;
  border-bottom:1px dashed var(--border2);
}
#sornarrin-premium-demo .desc-pop-row{display:flex;justify-content:space-between;gap:14px;font-size:12px}
#sornarrin-premium-demo .desc-pop-row span{color:var(--muted)}
#sornarrin-premium-demo .desc-pop-row strong{font-weight:600;text-align:right}
#sornarrin-premium-demo .desc-pop-desc{font-size:12.5px;color:#e2e8f0;line-height:1.6;padding:14px 16px 18px}

#sornarrin-premium-demo .anim-fade-up{animation:fadeUp .3s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#sornarrin-premium-demo .section-gap{height:8px}

/* ==========================================================
   13. HISTORY
   Fungsi:
   Card riwayat transaksi di halaman utama + daftar transaksi.

   Status: UI ONLY.
   Data: di-render app.js dari localStorage "sornarrin_history".
   Integration:
   Hanya styling — keputusan sumber data riwayat (localStorage
   vs API lama) dijelaskan di INTEGRATION-GUIDE.md.
   ========================================================== */
#sornarrin-premium-demo .hist-card{
  margin-top:16px;padding:18px 20px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005)),var(--surface);
  border:1px solid var(--border);
}
#sornarrin-premium-demo .hist-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
#sornarrin-premium-demo .hist-title{flex:1;display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700}
#sornarrin-premium-demo .hist-title .icon-slot{color:var(--purple3);font-size:18px}
#sornarrin-premium-demo .hist-link{font-size:12px;font-weight:700;color:var(--cyan2);padding:6px 10px;border-radius:9px;
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  transition:border-color .2s var(--ease)}
#sornarrin-premium-demo .hist-link:hover{border-color:var(--border2)}
#sornarrin-premium-demo .hist-row{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  padding:13px 14px;border-radius:16px;background:var(--surface2);border:1px solid var(--border);
  transition:transform .15s var(--ease-spring), border-color .2s var(--ease);min-height:44px;
  animation:riseIn .3s var(--ease) backwards;
}
#sornarrin-premium-demo .hist-row + .hist-row{margin-top:8px}
#sornarrin-premium-demo .hist-row:hover{border-color:var(--border2)}
#sornarrin-premium-demo .hist-row:active{transform:scale(.98)}
#sornarrin-premium-demo .hist-ico{
  width:42px;height:42px;border-radius:13px;flex:none;font-size:18px;color:var(--cyan2);
  display:grid;place-items:center;background:rgba(34,211,238,.07);border:1px solid rgba(34,211,238,.28);
}
#sornarrin-premium-demo .hist-main{flex:1;min-width:0}
#sornarrin-premium-demo .hist-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sornarrin-premium-demo .hist-sub{font-size:11px;color:var(--muted);margin-top:3px}
#sornarrin-premium-demo .hist-right{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
#sornarrin-premium-demo .hist-amount{font-size:13px;font-weight:800;color:var(--cyan2)}
#sornarrin-premium-demo .hist-status{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:#34d399}
#sornarrin-premium-demo .hist-dot{width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 8px rgba(52,211,153,.9)}
#sornarrin-premium-demo .hist-sheet-row .hist-ico{margin-right:2px}
#sornarrin-premium-demo .hist-sheet-row .row-main{flex:1}

/* --- sheet search --- */
#sornarrin-premium-demo .sheet-search{
  position:relative;display:flex;align-items:center;margin-bottom:12px;
}
#sornarrin-premium-demo .sheet-search .icon-slot{
  position:absolute;left:14px;font-size:17px;color:var(--muted2);pointer-events:none;
}
#sornarrin-premium-demo .sheet-search-inp{
  width:100%;height:46px;padding:0 16px 0 42px;font-size:13.5px;color:var(--text);
  background:var(--surface2);border:1px solid var(--border);border-radius:14px;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
#sornarrin-premium-demo .sheet-search-inp::placeholder{color:var(--muted2)}
#sornarrin-premium-demo .sheet-search-inp:focus{outline:none;border-color:rgba(139,92,246,.6);box-shadow:0 0 0 3px rgba(124,58,237,.18)}

/* --- empty state --- */
#sornarrin-premium-demo .empty-state{
  padding:34px 16px;text-align:center;color:var(--muted);font-size:12.5px;border-radius:16px;
  border:1px dashed var(--border2);background:var(--surface2);
  animation:riseIn .3s var(--ease);
}
#sornarrin-premium-demo .empty-state .icon-slot{font-size:26px;color:var(--muted2);margin-bottom:10px}

/* ==========================================================
   14. ACCESSIBILITY
   Fungsi:
   Menghormati prefers-reduced-motion user (mematikan animasi).

   Status: UI ONLY. Pertahankan saat integrasi.
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  #sornarrin-premium-demo, #sornarrin-premium-demo *, #sornarrin-premium-demo *::before, #sornarrin-premium-demo *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}