/* ============================================================
   KUBIGA STORE — store-midnight.css  (MIDNIGHT GOLD — Ultra Luxury)
   Unisex Premium: Pure Black #060608 + Gold #d4a017 + Platinum (DARK)
   Override: loaded after store.css
   ============================================================ */
:root {
  --bg:        #060608;
  --surface:   #0e0e12;
  --surface-2: #151518;
  --border:    #242428;
  --text:      #f0ece0;
  --text-2:    #d4ceb8;
  --text-muted:#8a8470;
  --text-faint:#524e40;

  --primary:      #d4a017;
  --primary-2:    #b8860b;
  --primary-grad: linear-gradient(135deg, #b8860b 0%, #d4a017 100%);
  --hero-grad:    linear-gradient(160deg, #0e0c06 0%, #060608 50%, #0a0806 130%);
  --primary-soft: rgba(212,160,23,0.12);
  --primary-soft-2: rgba(184,134,11,0.10);

  --success:      #22c55e;
  --success-soft: rgba(34,197,94,0.12);
  --warn:         #d4a017;
  --warn-soft:    rgba(212,160,23,0.12);
  --danger:       #e54040;
  --danger-soft:  rgba(229,64,64,0.14);

  --shadow:      0 2px 16px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.5);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.8), 0 1px 6px rgba(0,0,0,0.5);
  --shadow-hover:0 12px 40px rgba(0,0,0,0.85), 0 2px 10px rgba(212,160,23,0.18);

  --step-head-color: #d4a017;
  --step-num-rgb: 212,160,23;
}
.navbar {
  background:
    repeating-linear-gradient(135deg, transparent 0 28px, rgba(212,160,23,0.03) 28px 30px),
    rgba(6,6,8,0.97) !important;
  border-image: linear-gradient(90deg, #d4a017 0% 33%, #f0d080 33% 66%, #b8860b 66% 100%) 1 !important;
}
.hero {
  background:
    linear-gradient(160deg, rgba(212,160,23,0.06) 0%, rgba(184,134,11,0.03) 60%, #060608 100%),
    repeating-linear-gradient(135deg, transparent 0 34px, rgba(212,160,23,0.025) 34px 36px),
    repeating-linear-gradient(45deg,  transparent 0 68px, rgba(212,160,23,0.015) 68px 70px) !important;
  border-image: linear-gradient(90deg, #d4a017 0% 33%, #f0d080 33% 66%, #b8860b 66% 100%) 1 !important;
}
body {
  background-image:
    repeating-linear-gradient(135deg, transparent 0 60px, rgba(212,160,23,0.018) 60px 62px),
    repeating-linear-gradient(45deg,  transparent 0 80px, rgba(184,134,11,0.012) 80px 82px) !important;
}
.cat-home-card { border-color: rgba(212,160,23,0.12) !important; }
.cat-home-card:hover { border-color: #d4a017 !important; background: rgba(212,160,23,0.06) !important; }
.prod-card:hover { border-color: #d4a017 !important; box-shadow: 0 0 0 1.5px #d4a017, 0 8px 28px rgba(212,160,23,0.15) !important; }
.prod-card::after { border-color: transparent #d4a017 transparent transparent !important; }
.ftk-bar { background: linear-gradient(90deg, #0a0a06 0%, #060608 40%, #0a0808 100%) !important; border-bottom-color: rgba(212,160,23,0.4) !important; }
.ftk-prefix { background: #0a0a06 !important; color: #d4a017 !important; border-right-color: rgba(212,160,23,0.3) !important; }
.ftk-scroll::before { background: linear-gradient(90deg, #0a0a06, transparent) !important; }
.ftk-scroll::after  { background: linear-gradient(-90deg, #0a0808, transparent) !important; }
.ftk-name  { color: rgba(240,236,224,0.9) !important; }
.ftk-price { color: #d4a017 !important; }
.ftk-orig  { color: rgba(240,236,224,0.28) !important; }
.ftk-sep   { color: rgba(212,160,23,0.28) !important; }
.ftk-disc  { background: #b8860b !important; }
.ftk-chip  { border-right-color: rgba(212,160,23,0.08) !important; }
.ftk-chip:hover { background: rgba(212,160,23,0.08) !important; }
.flash-section {
  background: linear-gradient(135deg, #0e0c04 0%, #060608 55%, #0c0a04 100%) !important;
  border-top-color: rgba(212,160,23,0.35) !important;
  border-bottom-color: rgba(212,160,23,0.35) !important;
}
.flash-section::before { background: repeating-linear-gradient(-45deg, transparent 0 16px, rgba(212,160,23,0.04) 16px 18px) !important; }
.flash-section::after  { background: linear-gradient(90deg, #b8860b 0%, #f0d080 50%, #b8860b 100%) !important; }
.flash-label { color: #d4a017 !important; }
.flash-card  { background: rgba(255,255,255,0.04) !important; border-color: rgba(212,160,23,0.2) !important; }
.flash-card:hover { background: rgba(255,255,255,0.07) !important; border-color: #d4a017 !important; box-shadow: 0 8px 28px rgba(0,0,0,0.6), 0 0 16px rgba(212,160,23,0.18) !important; }
.flash-card::before { background: linear-gradient(90deg, #b8860b 0%, #d4a017 100%) !important; }
.flash-card-cat  { color: rgba(212,160,23,0.8) !important; }
.flash-card-name { color: rgba(240,236,224,0.92) !important; }
.flash-card-orig { color: rgba(240,236,224,0.28) !important; }
.flash-card-now  { color: #d4a017 !important; }
.flash-card-thumb { background: rgba(212,160,23,0.06) !important; }
.flash-discount-badge { background: #b8860b !important; }
.flash-zap { color: #d4a017 !important; }
.flash-live-badge { background: #e54040 !important; }
.flash-nav-btn:hover { background: rgba(212,160,23,0.12) !important; border-color: #d4a017 !important; }
.prod-skeleton { background: linear-gradient(90deg, #0e0e12 25%, #242428 50%, #0e0e12 75%) !important; }
#viewCat .section, #viewProd .section, #viewPay .section { min-height: calc(100vh - var(--nav-h) - 48px); }
#viewCat .view-page-header { border-bottom: 2px solid #d4a017 !important; background: linear-gradient(90deg, rgba(212,160,23,0.07) 0%, #0e0e12 70%) !important; }
#viewCat .section { background: repeating-linear-gradient(135deg, transparent 0 40px, rgba(212,160,23,0.022) 40px 42px), #060608 !important; }
#viewCat .up-step-card { border-top: 3px solid #d4a017 !important; }
#viewProd .view-page-header { border-bottom: 2px solid #f0d080 !important; background: linear-gradient(90deg, rgba(240,208,128,0.07) 0%, #0e0e12 70%) !important; }
#viewProd .section { background: repeating-linear-gradient(0deg, transparent 0 36px, rgba(212,160,23,0.022) 36px 38px), #060608 !important; }
#viewProd .up-step-card { border-top: 3px solid #f0d080 !important; }
#viewProd .checkout-prodbar { border-color: rgba(212,160,23,0.2) !important; background: rgba(212,160,23,0.04) !important; }
#viewPay .view-page-header { border-bottom: 2px solid #b8860b !important; background: linear-gradient(90deg, rgba(184,134,11,0.07) 0%, #0e0e12 70%) !important; }
#viewPay .section { background: repeating-linear-gradient(45deg, transparent 0 28px, rgba(212,160,23,0.022) 28px 30px), #060608 !important; }
#viewPay .pay-card { border-top: 3px solid #d4a017 !important; }
.up-step-num { box-shadow: 0 0 10px rgba(212,160,23,0.28) !important; }
.btn-pay { box-shadow: 0 4px 20px rgba(212,160,23,0.28) !important; }
.section-title::before { background: linear-gradient(180deg, #d4a017 0%, #b8860b 50%, #f0d080 100%) !important; }

/* ── Dark mode text fix: override store.css white-mode hardcodes ── */
.prod-name, .pop-name, .cat-home-name { color: var(--text) !important; }
.up-side-box { background: var(--surface) !important; border-color: var(--border) !important; box-shadow: var(--shadow) !important; }
.up-side-title { color: var(--text) !important; }
.up-side-desc { color: var(--text-2) !important; }
.prod-cat, .pop-cat { color: var(--primary) !important; }
.prod-card { box-shadow: var(--shadow) !important; background: var(--surface) !important; border-color: var(--border) !important; }
.up-step-card { background: var(--surface) !important; border-color: var(--border) !important; }
.pay-card { background: var(--surface) !important; border-color: var(--border) !important; }
.popular-card { background: var(--surface) !important; border-color: var(--border) !important; }
.cat-home-card { background: var(--surface-2) !important; }
.view-page-header { background: var(--surface) !important; border-bottom-color: var(--border) !important; }
.search-box { background: var(--surface-2) !important; border-color: var(--border) !important; }
.search-box input { color: var(--text) !important; }
.modal-box { background: var(--surface) !important; }
.modal-head { background: var(--surface) !important; border-bottom-color: var(--border) !important; }
.cart-drawer { background: var(--surface) !important; }
.form-input { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; }
.order-summary { background: var(--surface-2) !important; }
.pay-note { background: var(--surface-2) !important; color: var(--text-2) !important; }
.pay-detail-row { border-bottom-color: var(--border) !important; }
.pay-step-dot { background: var(--surface-2) !important; border-color: var(--border) !important; }
.sort-bar label { color: var(--text-muted) !important; }
#sortSelect { background-color: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }
.page-btn { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }
.footer { background: var(--surface) !important; border-top-color: var(--border) !important; }
.pay-detail-label { color: var(--text-muted) !important; }
.pay-detail-val { color: var(--text) !important; }
.hero-title { color: var(--text) !important; }
.hero-sub { color: var(--text-muted) !important; }
.hero-badge { color: var(--primary) !important; background: var(--primary-soft) !important; }
.section-title { color: var(--text) !important; }
.checkout-prodbar { background: var(--surface) !important; border-color: var(--border) !important; }
.co-bar-name { color: var(--text) !important; }
.qty-ctrl { border-color: var(--border) !important; }
.qty-ctrl button { background: var(--surface-2) !important; color: var(--text) !important; }
.qty-ctrl span { color: var(--text) !important; }
.os-row.total { color: var(--text) !important; }
.up-step-head { color: var(--step-head-color, var(--primary)) !important; }