/* dark-lite.css — final override loaded last.
   Tema hitam/gelap + ringan untuk semua halaman aktif. */
:root {
  --bg: #05060a;
  --bg2: #090d14;
  --card: rgba(10, 14, 23, 0.94);
  --border: rgba(255, 255, 255, 0.10);
  --text: #f4f7fb;
  --muted: #9aa6b8;
  --primary: #f59e0b;
  --primary2: #f97316;
}
html,
body,
.storefront-body,
.po-page,
.page-shell,
.orders-page,
.invoice-page,
.success-page,
.user-dashboard-page {
  background: #05060a !important;
  background-image: none !important;
  color: #f4f7fb !important;
}
body::before,
.storefront-body::before,
.sf-bg-live,
.sf-bg-live .orb,
.sf-bg-live .grid-glow,
.vfx-aurora,
.vfx-orb,
#vfx-canvas,
#vfx-cursor-dot,
#vfx-cursor-ring,
.auth-left::before,
.auth-left::after,
.al-left::before,
.al-left::after {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
.store-shell,
.container,
.admin-main,
.adm-main,
.user-dash-shell,
.auth-left,
.auth-right,
.al-left,
.al-right {
  position: relative !important;
  z-index: 1 !important;
}
.sf-header,
.sf-nav-pop,
.sf-bottom-nav,
.sidebar,
.adm-sidebar,
.user-topbar,
.user-bottom-nav,
.auth-left,
.auth-right,
.al-left,
.al-right,
.auth-panel,
.al-panel {
  background: rgba(7, 10, 18, .95) !important;
  background-image: none !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 42px rgba(0,0,0,.30) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.sf-hero,
.hero,
.user-hero-live,
.auth-hero,
.adm-top-card,
.adm-layout,
.admin-layout {
  background: #05060a !important;
  background-image: none !important;
}
.sf-hero,
.user-hero-live,
.hero-card,
.auth-left-body,
.al-body {
  background: linear-gradient(135deg, #080b12 0%, #0c111d 65%, #111827 100%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.34) !important;
}
.sf-hero::before,
.sf-hero::after,
.sf-hero-super::before,
.sf-hero-super::after,
.auth-hero::before,
.user-hero-live::before {
  opacity: .10 !important;
  animation: none !important;
}
.sf-lightning-art,
.sf-server-art,
.sf-neon-platform,
.sf-lightning-bolt,
.sf-spark,
.shield-art,
.server-stack span {
  filter: none !important;
  animation: none !important;
}
.sf-product-card,
.card,
.checkout-card,
.invoice-wrap,
.invoice-wrap-v2,
.success-card,
.form-card,
.table-wrap,
.user-card,
.dash-progress-card,
.user-orders-section,
.panel-order-card,
.upload-script-card,
.adm-card,
.adm-stat,
.auth-card,
.auth-form-card,
.al-form-card,
.po-card,
.po-box,
.ram-option,
.stat,
.product-card {
  background: rgba(10, 14, 23, .94) !important;
  background-image: none !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 16px 45px rgba(0,0,0,.25) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.sf-product-card::after,
.sf-cs-card::after,
.sf-logo::after,
.adm-stat-glow,
.vfx-reveal::before {
  animation: none !important;
}
.sf-product-card.purple,
.sf-product-card.blue,
.sf-product-card.orange {
  border-color: rgba(255,255,255,.12) !important;
}
.sf-product-card.purple::before,
.sf-product-card.blue::before,
.sf-product-card.orange::before {
  opacity: .08 !important;
  filter: none !important;
}
.sf-product-card:hover,
.sf-cs-card:hover,
.ram-option:hover,
.sf-why-grid div:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.32) !important;
}
.sf-logo,
.auth-logo,
.al-logo {
  background: linear-gradient(135deg, #f59e0b, #f97316) !important;
  box-shadow: none !important;
  clip-path: none !important;
  color: #090b10 !important;
}
.sf-pill,
.pill,
.sf-live-strip,
.sf-proof-row,
.sf-mini-features span,
.status-dot,
.badge,
.amount-box,
.alert.info,
.info-list div,
.detail-row,
.auth-benefit,
.al-benefit,
.auth-social,
.al-social,
.adm-nav a,
.sidebar a,
.sf-nav-pop a {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: none !important;
}
.sf-live-strip span:first-child {
  background: rgba(34,197,94,.10) !important;
}
.sf-order-btn,
.btn,
.user-primary-btn,
.adm-btn.primary,
.po-submit,
.auth-submit,
.al-submit,
.cs-send-btn {
  background: linear-gradient(135deg, #f59e0b, #f97316) !important;
  color: #090b10 !important;
  box-shadow: 0 10px 26px rgba(249,115,22,.18) !important;
}
.btn-ghost,
.adm-btn.ghost,
.mini-btn,
.mini-link,
.user-nav a {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.10) !important;
}
input,
textarea,
select,
.po-field,
.auth-input,
.al-input,
.cs-ai-input {
  background: rgba(4, 7, 13, .90) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}
input:focus,
textarea:focus,
select:focus,
.po-field:focus,
.auth-input:focus,
.al-input:focus,
.cs-ai-input:focus {
  border-color: rgba(245,158,11,.55) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.10) !important;
}
select option {
  background: #090d14 !important;
  color: #f8fafc !important;
}
table,
th,
td {
  background-color: transparent !important;
}
tbody tr:hover td {
  background: rgba(255,255,255,.035) !important;
}
.qris-box {
  background: #ffffff !important;
}
.sf-pulse-dot,
.cs-typing-dots span {
  animation: none !important;
}
.vfx-reveal,
.vfx-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}


/* ===== USER DASHBOARD MONEY LIVE FIX =====
   Balikin efek live pada kartu Total pembelian berhasil tanpa bikin berat. */
.user-dashboard-page .dash-money-card {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 86% 30%, rgba(249, 115, 22, .24), transparent 30%),
    radial-gradient(circle at 18% 110%, rgba(168, 85, 247, .18), transparent 34%),
    linear-gradient(135deg, rgba(9, 15, 27, .96), rgba(7, 12, 23, .96)) !important;
  border-color: rgba(251, 191, 36, .16) !important;
}
.user-dashboard-page .dash-money-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform: translateX(-120%);
  animation: moneyCardSweep 3.4s ease-in-out infinite !important;
}
.user-dashboard-page .dash-money-card.money-live-tick,
.user-dashboard-page .dash-money-card.money-live-update {
  box-shadow: 0 20px 56px rgba(249,115,22,.16), 0 0 0 1px rgba(251,191,36,.10) inset !important;
}
.user-dashboard-page .dash-money-card b {
  color: #ffffff !important;
  text-shadow: 0 0 18px rgba(251,191,36,.12) !important;
}
.user-dashboard-page .money-bars {
  position: relative !important;
  min-width: 72px !important;
  height: 52px !important;
  align-items: flex-end !important;
  padding: 4px 0 !important;
}
.user-dashboard-page .money-bars span {
  width: 9px !important;
  min-height: 16px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #facc15 0%, #f97316 52%, #ef4444 100%) !important;
  box-shadow: 0 0 18px rgba(249,115,22,.36) !important;
  transform-origin: bottom center !important;
  animation: moneyBarsLive 1.05s ease-in-out infinite !important;
  transition: height .38s ease, opacity .28s ease !important;
  filter: drop-shadow(0 0 7px rgba(249,115,22,.22)) !important;
}
.user-dashboard-page .money-bars span:nth-child(1) { animation-delay: 0s !important; }
.user-dashboard-page .money-bars span:nth-child(2) { animation-delay: .12s !important; }
.user-dashboard-page .money-bars span:nth-child(3) { animation-delay: .24s !important; }
.user-dashboard-page .money-bars span:nth-child(4) { animation-delay: .36s !important; }
@keyframes moneyBarsLive {
  0%, 100% { transform: scaleY(.72); opacity: .62; }
  45% { transform: scaleY(1.16); opacity: 1; }
  70% { transform: scaleY(.92); opacity: .82; }
}
@keyframes moneyCardSweep {
  0%, 55% { transform: translateX(-120%); opacity: 0; }
  65% { opacity: .8; }
  100% { transform: translateX(120%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .user-dashboard-page .money-bars span,
  .user-dashboard-page .dash-money-card::before {
    animation: none !important;
  }
}
/* ===== USER DASHBOARD MONEY LIVE FIX END ===== */

/* ===== USER BOTTOM NAV ORANGE EYE CANDY FIX =====
   Logout di menu bawah dihapus dari EJS. Navigasi bawah user dibuat 3 item:
   Home, Produk, Riwayat dengan tema orange premium. */
.user-bottom-nav-live:not(.sf-bottom-nav) {
  width: min(520px, calc(100% - 32px)) !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 10px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(251, 146, 60, .22), transparent 34%),
    radial-gradient(circle at 92% 80%, rgba(245, 158, 11, .16), transparent 38%),
    linear-gradient(135deg, rgba(10, 12, 18, .94), rgba(18, 12, 10, .92) 56%, rgba(8, 10, 18, .94)) !important;
  border: 1px solid rgba(251, 146, 60, .24) !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 38px rgba(249, 115, 22, .13) !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
  overflow: hidden !important;
}
.user-bottom-nav-live:not(.sf-bottom-nav)::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(251,146,60,.10), rgba(255,255,255,.035));
  opacity: .75;
}
.user-bottom-nav-live:not(.sf-bottom-nav) a {
  position: relative !important;
  min-height: 62px !important;
  border-radius: 22px !important;
  color: rgba(255, 247, 237, .72) !important;
  border: 1px solid transparent !important;
  background: rgba(255,255,255,.025) !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease !important;
}
.user-bottom-nav-live:not(.sf-bottom-nav) a span {
  font-size: 21px !important;
  color: rgba(255, 214, 165, .86) !important;
  text-shadow: 0 0 16px rgba(249,115,22,.25) !important;
}
.user-bottom-nav-live:not(.sf-bottom-nav) a small {
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
}
.user-bottom-nav-live:not(.sf-bottom-nav) a:hover {
  transform: translateY(-1px) !important;
  background: rgba(251, 146, 60, .09) !important;
  border-color: rgba(251, 146, 60, .18) !important;
}
.user-bottom-nav-live:not(.sf-bottom-nav) a.active {
  color: #1c1207 !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.36), transparent 28%),
    linear-gradient(135deg, #fde68a 0%, #fb923c 48%, #f97316 100%) !important;
  border: 1px solid rgba(255, 237, 213, .45) !important;
  box-shadow:
    0 14px 34px rgba(249, 115, 22, .34),
    0 0 0 1px rgba(255,255,255,.15) inset !important;
}
.user-bottom-nav-live:not(.sf-bottom-nav) a.active span,
.user-bottom-nav-live:not(.sf-bottom-nav) a.active small {
  color: #1c1207 !important;
  text-shadow: none !important;
}
@media (max-width: 480px) {
  .user-bottom-nav-live:not(.sf-bottom-nav) {
    width: min(520px, calc(100% - 28px)) !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 27px !important;
  }
  .user-bottom-nav-live:not(.sf-bottom-nav) a {
    min-height: 58px !important;
    border-radius: 20px !important;
  }
}


/* order-brand-fix order-icon-load-fix-v1 */
.po-page .po-header {
  position: relative !important;
}
.po-page .section-eyebrow.order-brand-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 42px !important;
  padding: 7px 13px 7px 8px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, .72) !important;
  border: 1px solid rgba(255, 167, 38, .20) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.92) !important;
  letter-spacing: .08em !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}
.order-brand-mark {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 12px !important;
  display: inline-grid !important;
  place-items: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.28) !important;
}
.order-brand-mark img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  max-width: 100% !important;
  max-height: 100% !important;
}
.order-brand-ptero { background: rgba(255,255,255,.95) !important; padding: 3px !important; }
.order-brand-do { background: rgba(255,255,255,.96) !important; padding: 5px !important; }
.po-page .po-header > img,
.po-page .po-content > img,
.po-page img.brand-mini-logo {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.95) !important;
  padding: 4px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
.po-page .po-header > img:not(.brand-mini-logo) {
  display: none !important;
}
.checkout-product-icon img,
.checkout-product-icon .brand-product-logo {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}
@media(max-width:640px) {
  .po-page .section-eyebrow.order-brand-eyebrow {
    min-height: 38px !important;
    padding: 6px 11px 6px 7px !important;
    font-size: 11px !important;
  }
  .order-brand-mark {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }
}
/* order-brand-fix end */