/* ============================================================
   WarNet Shop — Working Design v4 "Gilded Portal" reskin.
   Loads AFTER shop.css + shop-premium.css and overrides only the
   public-facing .shop-* classes (never .shop-admin*, so
   admin/shop-orders.php and admin/shop-payments.php keep their
   existing blue theme untouched).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Marcellus+SC&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --sv4-ink:        #08090b;
  --sv4-ink-2:      #0e1013;
  --sv4-panel:      #14161a;
  --sv4-panel-2:    #191c21;
  --sv4-line:       rgba(212,175,90,.16);
  --sv4-line-2:     rgba(212,175,90,.32);
  --sv4-gold:       #d4af5a;
  --sv4-gold-hi:    #f2d189;
  --sv4-gold-dim:   #a9853f;
  --sv4-oxblood:    #8a2a2f;
  --sv4-oxblood-hi: #b3474d;
  --sv4-parchment:  #ece7dc;
  --sv4-ash:        #8f93a0;
  --sv4-ash-dim:    #5b5e68;
  --sv4-display: 'Cinzel', 'Iowan Old Style', Georgia, serif;
  --sv4-sc:      'Marcellus SC', 'Cinzel', Georgia, serif;
  --sv4-sans:    'Manrope', 'Segoe UI', system-ui, sans-serif;
  --sv4-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

.wn-shop{ background:radial-gradient(ellipse 900px 500px at 50% -10%, rgba(212,175,90,.10), transparent 60%), var(--sv4-ink); color:var(--sv4-parchment); font-family:var(--sv4-sans); }

.shop-hero{ border-bottom:1px solid var(--sv4-line); background:linear-gradient(180deg, var(--sv4-ink-2), var(--sv4-ink)); box-shadow:none; }
.shop-overline{ color:var(--sv4-gold) !important; font:12px/1 var(--sv4-sc) !important; letter-spacing:.28em; text-transform:uppercase; }
.shop-hero h1{ font:700 clamp(30px,4vw,44px)/1.1 var(--sv4-display); letter-spacing:.02em; color:var(--sv4-parchment); text-shadow:none; }
.shop-hero h1 + p{ color:var(--sv4-ash); font:14.5px/1.65 var(--sv4-sans); }

.shop-balance-card{ border:1px solid var(--sv4-line-2); background:var(--sv4-panel); box-shadow:none; }
.shop-balance-card > span{ color:var(--sv4-ash); font:10.5px var(--sv4-sc); letter-spacing:.1em; text-transform:uppercase; }
.shop-balance-card strong{ color:var(--sv4-gold-hi); font:32px var(--sv4-display); }
.shop-balance-card strong small{ color:var(--sv4-ash); font:13px var(--sv4-mono); }
.shop-balance-card a{ color:var(--sv4-gold); font:11px var(--sv4-sc); letter-spacing:.06em; text-transform:uppercase; }
.shop-balance-card a:hover{ color:var(--sv4-gold-hi); }

.shop-alert{ font-family:var(--sv4-sans); border-radius:0; }
.shop-alert.success{ color:#7fd48c; border-color:rgba(127,212,140,.4); background:rgba(127,212,140,.08); }
.shop-alert.error{ color:var(--sv4-oxblood-hi); border-color:var(--sv4-oxblood); background:rgba(138,42,47,.1); }

.shop-topup-panel{ border:1px solid var(--sv4-line-2); background:var(--sv4-panel); }
.shop-topup-grid{ background:var(--sv4-line); }
.shop-topup-card{ background:var(--sv4-ink); }
.shop-topup-card > span{ color:var(--sv4-ash-dim); font:9.5px var(--sv4-mono); letter-spacing:.1em; text-transform:uppercase; }
.shop-topup-card > strong{ color:var(--sv4-gold-hi); font:28px var(--sv4-display); }
.shop-topup-card > strong small{ color:var(--sv4-ash); font:11px var(--sv4-mono); }
.shop-topup-card > p{ color:var(--sv4-ash); font:13.5px var(--sv4-sans); }
.shop-topup-card button, .shop-topup-card a{
  border:1px solid var(--sv4-gold); background:linear-gradient(180deg,var(--sv4-gold-hi),var(--sv4-gold));
  color:var(--sv4-ink); font:700 11px var(--sv4-sc); letter-spacing:.08em;
}
.shop-topup-card button:hover, .shop-topup-card a:hover{ background:var(--sv4-gold-hi); }
.shop-topup-note{ border-top:1px solid var(--sv4-line); color:var(--sv4-ash-dim); font:11px var(--sv4-sans); }

.shop-toolbar{ border-bottom:1px solid var(--sv4-line); }
.shop-tabs button{ color:var(--sv4-ash); font:11px var(--sv4-sc); letter-spacing:.08em; }
.shop-tabs button:hover, .shop-tabs button.active{ border-color:var(--sv4-gold); background:rgba(212,175,90,.08); color:var(--sv4-gold-hi); }
.shop-search svg{ stroke:var(--sv4-ash); }
.shop-search input{ border:1px solid var(--sv4-line-2); background:var(--sv4-panel); color:var(--sv4-parchment); font:13.5px var(--sv4-sans); }
.shop-search input:focus{ border-color:var(--sv4-gold); box-shadow:0 0 0 2px rgba(212,175,90,.12); }

.shop-product{ border:1px solid var(--sv4-line); background:var(--sv4-panel); box-shadow:none; }
.shop-product:hover{ border-color:var(--sv4-line-2); box-shadow:none; }
.shop-product-icon{ border:1px solid var(--sv4-line-2); background:var(--sv4-panel-2); color:var(--sv4-gold-hi); }
.shop-product-body > span{ color:var(--sv4-gold); font:9.5px var(--sv4-mono); letter-spacing:.1em; text-transform:uppercase; }
.shop-product h2{ color:var(--sv4-parchment); font:700 16px var(--sv4-display); }
.shop-product p{ color:var(--sv4-ash); font:12.5px/1.6 var(--sv4-sans); }
.shop-product-footer{ border-top:1px solid var(--sv4-line); }
.shop-product-footer strong{ color:var(--sv4-parchment); font:22px var(--sv4-mono); }
.shop-product-footer strong small{ color:var(--sv4-ash); font:11px var(--sv4-sans); }

.shop-buy, .shop-confirm, .shop-login-cta{
  border:1px solid var(--sv4-gold); background:linear-gradient(180deg,var(--sv4-gold-hi),var(--sv4-gold));
  box-shadow:none; color:var(--sv4-ink); font:700 11px var(--sv4-sc); letter-spacing:.08em;
}
.shop-buy:hover, .shop-confirm:hover, .shop-login-cta:hover{ background:var(--sv4-gold-hi); box-shadow:none; }
.shop-empty{ border:1px solid var(--sv4-line); color:var(--sv4-ash); font:13.5px var(--sv4-sans); }

.shop-fairplay{ border:1px solid var(--sv4-oxblood); background:rgba(138,42,47,.08); }
.shop-fairplay-mark{ border:1px solid var(--sv4-oxblood); color:var(--sv4-oxblood-hi); }
.shop-fairplay h2{ font:700 16px var(--sv4-display); color:var(--sv4-parchment); }
.shop-fairplay p{ color:var(--sv4-ash); font:12.5px/1.6 var(--sv4-sans); }
.shop-fairplay > a{ border:1px solid var(--sv4-gold-dim); color:var(--sv4-gold-hi); font:11px var(--sv4-sc); letter-spacing:.08em; }

.shop-history{ border:1px solid var(--sv4-line); background:var(--sv4-panel); }
.shop-section-head{ border-bottom:1px solid var(--sv4-line); }
.shop-section-head span{ color:var(--sv4-gold); font:9.5px var(--sv4-mono); letter-spacing:.1em; text-transform:uppercase; }
.shop-section-head h2{ font:700 18px var(--sv4-display); color:var(--sv4-parchment); }
.shop-section-head small{ color:var(--sv4-ash); font:11px var(--sv4-sans); }
.shop-history th, .shop-history td{ border-bottom:1px solid var(--sv4-line); font:12.5px var(--sv4-sans); }
.shop-history th{ color:var(--sv4-ash-dim); font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-family:var(--sv4-sc); }
.shop-history td{ color:var(--sv4-parchment); }
.shop-status{ border:1px solid; color:var(--sv4-gold-hi); border-color:var(--sv4-line-2); background:none; font-family:var(--sv4-mono); }
.shop-status.completed{ color:#7fd48c; border-color:rgba(127,212,140,.4); }
.shop-status.cancelled, .shop-status.refunded{ color:var(--sv4-oxblood-hi); border-color:var(--sv4-oxblood); }
.shop-history-empty{ color:var(--sv4-ash); font:12.5px var(--sv4-sans); }

.shop-modal-backdrop{ background:rgba(8,9,11,.82); }
.shop-modal-dialog{ border:1px solid var(--sv4-line-2); background:var(--sv4-panel); box-shadow:0 30px 100px rgba(0,0,0,.5); color:var(--sv4-parchment); }
.shop-modal-close{ color:var(--sv4-ash); }
.shop-modal-dialog > span{ color:var(--sv4-gold); font:9.5px var(--sv4-mono); letter-spacing:.12em; text-transform:uppercase; }
.shop-modal-dialog h2{ font:700 22px var(--sv4-display); color:var(--sv4-parchment); }
.shop-modal-dialog > p{ color:var(--sv4-ash); font:12.5px/1.55 var(--sv4-sans); }
.shop-field > span{ color:var(--sv4-ash); font:10.5px var(--sv4-sc); letter-spacing:.08em; text-transform:uppercase; }
.shop-field select, .shop-field input{ border:1px solid var(--sv4-line-2); background:var(--sv4-ink); color:var(--sv4-parchment); font:13.5px var(--sv4-sans); }
.shop-field select:focus, .shop-field input:focus{ border-color:var(--sv4-gold); }
.shop-modal-total{ border-top:1px solid var(--sv4-line); border-bottom:1px solid var(--sv4-line); }
.shop-modal-total span{ color:var(--sv4-ash); font:11px var(--sv4-sans); }
.shop-modal-total strong{ font:20px var(--sv4-mono); color:var(--sv4-gold-hi); }