/* ================================================================
   MK Pokkisham — Royal Antique Theme
   Deep purple × molten gold × dark glass — old world meets opulence
   ================================================================ */

/* ── Google Fonts for this theme ── */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&family=Cinzel:wght@400;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Theme Variables ── */
:root {
  /* Palace Gold */
  --gold:         #e8a020;
  --gold-light:   #ffd700;
  --gold-dark:    #b88a00;
  --gold-glow:    0 0 24px rgba(232,160,32,.45);

  /* Royal Purple (deep dark) */
  --navy:         #1a0033;
  --navy-mid:     #2d0057;
  --navy-soft:    #420080;
  --purple-glow:  0 0 30px rgba(106,0,184,.45);

  /* Dark backgrounds */
  --cream:        #07000f;
  --cream-mid:    #110019;
  --parchment:    rgba(255,255,255,.08);

  /* Text */
  --text:         #f0e8ff;
  --text-mid:     rgba(240,232,255,.85);
  --text-soft:    rgba(240,232,255,.55);
  --white:        #ffffff;

  /* Status */
  --red:          #e74c3c;
  --green:        #00c878;

  /* Shadows */
  --shadow-sm:    0 2px 12px rgba(0,0,0,.5);
  --shadow-md:    0 6px 28px rgba(0,0,0,.6);
  --shadow-lg:    0 12px 56px rgba(0,0,0,.7);
  --shadow-gold:  var(--gold-glow);

  /* Fonts */
  --font:         'Cinzel', 'Cormorant Garamond', 'Georgia', serif;
  --font-ui:      'Inter', 'Segoe UI', sans-serif;

  /* Borders */
  --radius:       14px;
  --radius-sm:    10px;
  --radius-lg:    22px;
}

/* ════════════════════════════════════════════
   GLOBAL BASE
════════════════════════════════════════════ */
body {
  background: #07000f;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(74,0,128,.4), transparent),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(26,0,51,.6), transparent);
  background-attachment: fixed;
  color: var(--text);
}

/* Subtle particle pattern */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23e8a020' fill-opacity='0.025'%3E%3Ccircle cx='40' cy='40' r='28'/%3E%3Ccircle cx='40' cy='40' r='18'/%3E%3Ccircle cx='40' cy='40' r='6'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none; z-index: 0;
}
body > * { position: relative; z-index: 1; }

a { color: inherit; }

/* ════════════════════════════════════════════
   HEADER / NAV
════════════════════════════════════════════ */
.site-header {
  background: linear-gradient(180deg, rgba(26,0,51,.98) 0%, rgba(13,0,26,.98) 100%);
  border-bottom: 1px solid rgba(232,160,32,.25);
  box-shadow: 0 2px 40px rgba(0,0,0,.7), 0 0 0 0 rgba(232,160,32,0);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.logo {
  font-family: var(--font);
  color: var(--gold);
  letter-spacing: 2px;
}
.logo span {
  color: rgba(255,255,255,.4);
  font-family: var(--font-ui);
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: .75rem;
}

.header-search {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(232,160,32,.2);
}
.header-search:focus-within {
  background: rgba(255,255,255,.09);
  border-color: var(--gold);
  box-shadow: var(--gold-glow);
}
.header-search input { color: #fff; }
.header-search input::placeholder { color: rgba(255,255,255,.35); }
.header-search button { background: var(--gold); color: #000; }
.header-search button:hover { background: var(--gold-light); }

.hbtn { color: rgba(255,255,255,.75); }
.hbtn:hover { background: rgba(232,160,32,.12); color: var(--gold-light); }

.site-nav {
  background: linear-gradient(180deg, rgba(13,0,26,.95), rgba(26,0,51,.95));
  border-bottom: 1px solid rgba(232,160,32,.1);
  backdrop-filter: blur(16px);
}
.nav-link { color: rgba(255,255,255,.65); }
.nav-link:hover, .nav-link.active {
  color: var(--gold);
  background: rgba(232,160,32,.1);
}

/* ════════════════════════════════════════════
   HERO
════════════════════════════════════════════ */
.hero {
  background: linear-gradient(145deg, #000 0%, #1a0033 45%, #07000f 100%);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 30% 50%, rgba(74,0,128,.45), transparent),
    radial-gradient(ellipse 50% 80% at 80% 20%, rgba(232,160,32,.07), transparent);
  pointer-events: none;
  animation: heroMesh 10s ease-in-out infinite alternate;
}
@keyframes heroMesh {
  0%   { opacity: .8; transform: scale(1); }
  100% { opacity: 1;  transform: scale(1.04); }
}
.hero-badge {
  background: rgba(232,160,32,.12);
  border: 1px solid rgba(232,160,32,.35);
  color: var(--gold-light);
}
.hero h1 { color: #fff; }
.hero h1 em {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: normal;
}
.hero p { color: rgba(255,255,255,.65); }

/* ════════════════════════════════════════════
   STATS BANNER
════════════════════════════════════════════ */
.stats-banner {
  background: linear-gradient(135deg, #000 0%, #1a0033 50%, #000 100%);
  border-top: 1px solid rgba(232,160,32,.15);
  border-bottom: 1px solid rgba(232,160,32,.15);
  position: relative;
  overflow: hidden;
}
.stats-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(106,0,184,.2), transparent);
  pointer-events: none;
}
.stat-item h3 {
  font-family: var(--font);
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-item p { color: rgba(255,255,255,.5); }

/* ════════════════════════════════════════════
   SECTIONS
════════════════════════════════════════════ */
.section { background: transparent; }
.section-header h2 {
  font-family: var(--font);
  background: linear-gradient(90deg, #fff 20%, var(--gold-light) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 2px;
}
.section-header p { color: var(--text-soft); }
.section-header .gold-line {
  background: linear-gradient(90deg, var(--gold), transparent);
  box-shadow: var(--gold-glow);
}

/* ════════════════════════════════════════════
   CATEGORY CARDS
════════════════════════════════════════════ */
.cat-card {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(232,160,32,.12);
  color: var(--text);
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.cat-card:hover {
  border-color: var(--gold);
  background: rgba(232,160,32,.08);
  box-shadow: var(--gold-glow), 0 8px 32px rgba(0,0,0,.4);
  transform: translateY(-5px);
}
.cat-name { color: var(--text); font-family: var(--font); letter-spacing: .5px; }
.cat-count { color: var(--gold); opacity: .8; }

/* ════════════════════════════════════════════
   PRODUCT CARDS
════════════════════════════════════════════ */
.product-card {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(232,160,32,.1);
  color: var(--text);
  transition: all .35s cubic-bezier(.4,0,.2,1);
}
.product-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--navy-soft), var(--gold), var(--navy-soft));
  opacity: 0;
  transition: opacity .3s;
}
.product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg), var(--gold-glow); border-color: rgba(232,160,32,.4); }
.product-card:hover::before { opacity: 1; }

.product-img-wrap {
  background: rgba(0,0,0,.4);
  border-color: rgba(232,160,32,.12);
}
.product-actions-overlay {
  background: linear-gradient(to top, rgba(26,0,51,.95), transparent);
}
.product-category { color: var(--gold); }
.product-name { color: var(--text); font-family: var(--font); letter-spacing: .5px; }
.price-current { color: var(--gold-light); }
.price-original { color: rgba(255,255,255,.35); }
.product-meta { color: var(--text-soft); }

.product-badge { background: var(--gold); color: #000; }
.badge-sale { background: var(--red); color: #fff; }
.badge-rare { background: linear-gradient(135deg, #4a0080, #9b00ff); color: #fff; }
.badge-featured { background: linear-gradient(135deg, var(--gold-dark), var(--gold-light)); color: #000; }

/* Rarity badges dark-mode */
.rarity-common       { background: rgba(0,200,120,.12); color: #00c878; }
.rarity-scarce       { background: rgba(41,182,246,.12); color: #29b6f6; }
.rarity-rare         { background: rgba(171,71,188,.15); color: #ce93d8; }
.rarity-very_rare    { background: rgba(255,152,0,.12);  color: #ffb74d; }
.rarity-extremely_rare { background: rgba(231,76,60,.15); color: #ef9a9a; }

/* ════════════════════════════════════════════
   CARDS (ADMIN / DETAIL)
════════════════════════════════════════════ */
.card {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(232,160,32,.12);
  color: var(--text);
}
.card-header {
  background: rgba(232,160,32,.05);
  border-bottom: 1px solid rgba(232,160,32,.12);
}
.card-title { color: var(--gold-light); font-family: var(--font); letter-spacing: 1px; }

/* ════════════════════════════════════════════
   FORMS
════════════════════════════════════════════ */
.form-label { color: rgba(255,255,255,.65); }
.form-control {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
  color: #fff;
}
.form-control:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(232,160,32,.15);
  background: rgba(255,255,255,.09);
}
.form-control::placeholder { color: rgba(255,255,255,.3); }

/* ════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════ */
.btn-gold {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
  color: #000;
  font-weight: 700;
  box-shadow: var(--gold-glow);
  letter-spacing: .5px;
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(255,215,0,.5);
}
.btn-outline {
  background: transparent;
  color: var(--gold);
  border-color: rgba(232,160,32,.4);
}
.btn-outline:hover { border-color: var(--gold); background: rgba(232,160,32,.1); color: var(--gold-light); }
.btn-navy {
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-soft));
  color: #fff;
  border: 1px solid rgba(232,160,32,.2);
}
.btn-navy:hover { background: linear-gradient(135deg, var(--navy-soft), #6a00b8); box-shadow: var(--purple-glow); }

/* ════════════════════════════════════════════
   TRUST / FEATURES
════════════════════════════════════════════ */
.feature-item {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(232,160,32,.1);
}
.feature-item:hover {
  border-color: var(--gold);
  box-shadow: var(--gold-glow);
  background: rgba(232,160,32,.06);
}
.feature-item h4 { color: var(--gold-light); font-family: var(--font); }
.feature-item p { color: rgba(255,255,255,.55); }

/* ════════════════════════════════════════════
   FILTER BAR
════════════════════════════════════════════ */
.filter-bar {
  background: rgba(26,0,51,.7);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(232,160,32,.15);
}
.filter-select {
  background: rgba(255,255,255,.08);
  border-color: rgba(232,160,32,.2);
  color: var(--text);
}
.filter-select option {
  background: var(--navy);
  color: #fff;
}
.filter-select:focus { border-color: var(--gold); }

/* ════════════════════════════════════════════
   CART SIDEBAR
════════════════════════════════════════════ */
.cart-head {
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  border-bottom: 2px solid var(--gold);
}
.cart-head h3 { color: var(--gold-light); font-family: var(--font); }
.cart-body { background: var(--cream-mid); }
.cart-item { border-bottom-color: rgba(232,160,32,.1); }
.cart-item-price { color: var(--gold); }
.cart-foot { background: rgba(26,0,51,.9); border-top-color: rgba(232,160,32,.2); }

/* ════════════════════════════════════════════
   PRODUCT DETAIL
════════════════════════════════════════════ */
.product-specs {
  background: rgba(255,255,255,.04);
  border-color: rgba(232,160,32,.15);
}
.spec-row { border-bottom-color: rgba(232,160,32,.1); }
.spec-label { color: var(--gold); }
.spec-value { color: var(--text); }

.qty-selector { border-color: rgba(232,160,32,.2); }
.qty-btn { background: rgba(255,255,255,.06); color: var(--text); }
.qty-btn:hover { background: rgba(232,160,32,.12); }

.gallery-thumb { border-color: transparent; }
.gallery-thumb:hover, .gallery-thumb.active { border-color: var(--gold); box-shadow: var(--gold-glow); }

/* ════════════════════════════════════════════
   ALERTS & TOASTS
════════════════════════════════════════════ */
.alert-success { background: rgba(0,200,120,.08); border-color: #00c878; color: #a7f3d0; }
.alert-error   { background: rgba(231,76,60,.08);  border-color: var(--red); color: #fca5a5; }
.alert-info    { background: rgba(99,102,241,.08); border-color: #818cf8; color: #c7d2fe; }

.toast {
  background: linear-gradient(135deg, var(--navy-mid), var(--navy));
  border-left-color: var(--gold);
  box-shadow: var(--shadow-lg), var(--gold-glow);
}

/* ════════════════════════════════════════════
   PAGINATION
════════════════════════════════════════════ */
.page-btn {
  background: rgba(255,255,255,.05);
  border-color: rgba(232,160,32,.2);
  color: var(--text);
}
.page-btn:hover, .page-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #000;
  box-shadow: var(--gold-glow);
}

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
.site-footer {
  background: linear-gradient(180deg, var(--navy) 0%, #000 100%);
  border-top: 2px solid var(--gold);
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: var(--gold-glow);
}
.footer-brand p { color: rgba(255,255,255,.45); }
.footer-col h4 { color: var(--gold); font-family: var(--font); letter-spacing: 1px; }
.footer-links a { color: rgba(255,255,255,.5); }
.footer-links a:hover { color: var(--gold-light); }
.footer-bottom { color: rgba(255,255,255,.35); border-top-color: rgba(232,160,32,.1); }

/* ════════════════════════════════════════════
   BREADCRUMB
════════════════════════════════════════════ */
.breadcrumb { color: rgba(255,255,255,.4); }
.breadcrumb .sep { color: rgba(232,160,32,.3); }
.breadcrumb a:hover { color: var(--gold-light); }

/* ════════════════════════════════════════════
   TABLES
════════════════════════════════════════════ */
thead { background: rgba(232,160,32,.06); }
th { color: var(--gold); border-bottom-color: rgba(232,160,32,.2); }
td { border-bottom-color: rgba(255,255,255,.05); color: var(--text-mid); }
tr:hover td { background: rgba(232,160,32,.04); }

/* ════════════════════════════════════════════
   STARS
════════════════════════════════════════════ */
.stars { color: var(--gold); }
.star-empty { color: rgba(232,160,32,.2); }

/* ════════════════════════════════════════════
   CTA SECTION — override inline purple→gold
════════════════════════════════════════════ */
section[style*="background:linear-gradient(135deg,var(--gold"] {
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 100%) !important;
}

/* ════════════════════════════════════════════
   PRODUCT DETAIL SECTION
════════════════════════════════════════════ */
.product-info h1 { color: var(--text); font-family: var(--font); letter-spacing: 1px; }

/* ════════════════════════════════════════════
   SCROLLBAR
════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--navy-soft); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ════════════════════════════════════════════
   MOBILE TAB BAR — antique gold accents
════════════════════════════════════════════ */
.mobile-tab-bar {
  background: linear-gradient(180deg, rgba(26,0,51,.98), #000) !important;
  border-top-color: rgba(232,160,32,.3) !important;
  box-shadow: 0 -4px 30px rgba(106,0,184,.3) !important;
}
.mtb-item.active { color: var(--gold) !important; }
.mtb-fab {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold-light)) !important;
  box-shadow: 0 4px 20px rgba(232,160,32,.5), var(--gold-glow) !important;
}

/* Mobile search bar */
.mobile-search-bar {
  background: linear-gradient(180deg, var(--navy), var(--navy-mid)) !important;
}
.mobile-search-form {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(232,160,32,.25) !important;
}
.mobile-search-form input { color: #fff !important; }
.mobile-search-form button { background: var(--gold) !important; color: #000 !important; }

/* Sidebar nav mobile */
.site-nav {
  background: linear-gradient(180deg, var(--navy), #000) !important;
  border-right-color: rgba(232,160,32,.2) !important;
}

/* ════════════════════════════════════════════
   ANIMATIONS
════════════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.btn-gold:hover {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
  background-size: 200% auto;
  animation: shimmer .8s linear;
}

/* ════════════════════════════════════════════
   SHOP SIDEBAR FIXES (Fixes dark text on dark bg)
════════════════════════════════════════════ */
.shop-sidebar .text-navy { color: var(--gold-light) !important; }
.shop-sidebar .nav-link,
.shop-sidebar a[style*="color:var(--navy)"] { color: #f0e8ff !important; }
.shop-sidebar .nav-link:hover, 
.shop-sidebar .nav-link.active { 
  background: rgba(232,160,32,.15) !important; 
  color: var(--gold) !important; 
}
.shop-sidebar .filter-chip { background: rgba(232,160,32,.15) !important; border: 1px solid var(--gold) !important; color: var(--gold-light) !important; }
.shop-sidebar .filter-chip a { color: var(--gold-light) !important; }
/* ════════════════════════════════════════════
   MOBILE COMPLETE COLOR CORRECTION
   Overrides all hardcoded light colors from
   mobile-app.css with !important
════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Body & page background ── */
  body {
    background: #07000f !important;
    background-image:
      radial-gradient(ellipse 80% 50% at 20% 0%, rgba(74,0,128,.35), transparent),
      radial-gradient(ellipse 60% 60% at 80% 100%, rgba(26,0,51,.5), transparent) !important;
    background-attachment: fixed !important;
    color: var(--text) !important;
  }

  /* ── All section backgrounds ── */
  .section,
  section {
    background: transparent !important;
  }
  section[style*="background:var(--cream-mid)"],
  section[style*="background: var(--cream-mid)"],
  section[style*="background:var(--cream)"],
  section[style*="background: var(--cream)"] {
    background: rgba(255,255,255,.03) !important;
  }
  section[style*="background:var(--navy)"],
  section[style*="background: var(--navy)"] {
    background: linear-gradient(180deg, rgba(26,0,51,.9), rgba(0,0,0,.95)) !important;
  }

  /* ── Category cards ── */
  .cat-card {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(232,160,32,.18) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.5) !important;
    color: var(--text) !important;
  }
  .cat-card:active {
    background: rgba(232,160,32,.1) !important;
    border-color: var(--gold) !important;
  }
  .cat-name {
    color: #f0e8ff !important;
    font-family: var(--font) !important;
  }

  /* ── Product cards ── */
  .product-card {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(232,160,32,.12) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
    color: var(--text) !important;
  }
  .product-body {
    background: transparent !important;
  }
  .product-name  { color: #f0e8ff !important; }
  .price-current { color: var(--gold-light) !important; }
  .price-original{ color: rgba(255,255,255,.35) !important; }
  .product-category { color: var(--gold) !important; }
  .product-meta  { color: rgba(240,232,255,.5) !important; }
  .product-img-wrap {
    background: rgba(0,0,0,.35) !important;
  }

  /* ── Section headings ── */
  .section-header h2 {
    background: linear-gradient(90deg, #fff 20%, var(--gold-light) 80%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }
  .section-header p {
    color: rgba(240,232,255,.55) !important;
  }
  .gold-line {
    background: linear-gradient(90deg, var(--gold), transparent) !important;
  }

  /* ── Stats banner ── */
  .stats-banner {
    background: linear-gradient(135deg, #000, #1a0033, #000) !important;
  }
  .stat-item h3 {
    -webkit-text-fill-color: transparent !important;
    background: linear-gradient(135deg, var(--gold), var(--gold-light)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
  }
  .stat-item p { color: rgba(255,255,255,.5) !important; }

  /* ── Feature items ── */
  .feature-item {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(232,160,32,.12) !important;
    color: var(--text) !important;
  }
  .feature-item h4 { color: var(--gold-light) !important; }
  .feature-item p  { color: rgba(255,255,255,.55) !important; }

  /* ── Filter bar ── */
  .filter-bar {
    background: rgba(26,0,51,.85) !important;
    border-color: rgba(232,160,32,.15) !important;
    color: var(--text) !important;
  }
  .filter-select {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(232,160,32,.2) !important;
    color: #fff !important;
  }

  /* ── Ad banners section bg ── */
  .ads-container a[style] {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(232,160,32,.15) !important;
  }

  /* ── Videos section ── */
  section[style*="background:var(--cream)"] {
    background: rgba(255,255,255,.02) !important;
    border-color: rgba(232,160,32,.08) !important;
  }

  /* ── CTA section ── */
  .section-sm[style*="background:linear-gradient"] {
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 100%) !important;
  }

  /* ── Cards & forms ── */
  .card {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(232,160,32,.15) !important;
    color: var(--text) !important;
  }
  .card-header {
    background: rgba(232,160,32,.06) !important;
    border-bottom-color: rgba(232,160,32,.15) !important;
  }
  .card-title { color: var(--gold-light) !important; }
  .form-control {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.1) !important;
    color: #fff !important;
  }
  .form-label { color: rgba(255,255,255,.65) !important; }

  /* ── Rarity badges ── */
  .rarity-common       { background: rgba(0,200,120,.12) !important; color: #00c878 !important; }
  .rarity-scarce       { background: rgba(41,182,246,.12) !important; color: #29b6f6 !important; }
  .rarity-rare         { background: rgba(171,71,188,.15) !important; color: #ce93d8 !important; }
  .rarity-very_rare    { background: rgba(255,152,0,.12) !important;  color: #ffb74d !important; }
  .rarity-extremely_rare { background: rgba(231,76,60,.15) !important; color: #ef9a9a !important; }

  /* ── Wishlist button ── */
  .wishlist-btn { color: rgba(255,255,255,.45) !important; }
  .wishlist-btn.active { color: #ef4444 !important; }

  /* ── Shop sidebar ── */
  .shop-sidebar .card {
    background: rgba(26,0,51,.8) !important;
  }
  #toggle-filters-btn {
    background: rgba(26,0,51,.9) !important;
    color: var(--gold) !important;
    border-color: rgba(232,160,32,.3) !important;
  }
}