:root {
    --primary-black: #000000;
    --secondary-black: #1a1a1a;
    --primary-silver: #ffffff;
    --secondary-silver: #d9d9d9;
    --light-silver: #f5f5f5;

}

/* Set Bootstrap color variables for dark theme so components inherit correctly */
body {
    background-color: var(--primary-black);
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-top: 76px; /* Account for fixed navbar */

    /* Bootstrap 5 variable overrides (this fixes labels/helper text opacity issues) */
    --bs-body-bg: var(--primary-black);
    --bs-body-color: #ffffff;
    --bs-heading-color: #ffffff;
    --bs-secondary-color: rgba(255,255,255,0.7);
    --bs-tertiary-color: rgba(255,255,255,0.55);
    --bs-border-color: #333;
    --bs-card-bg: var(--secondary-black);
    --bs-card-color: #ffffff;
    --bs-card-border-color: #333;
    --bs-table-color: #eaeaea;
    --bs-table-bg: var(--secondary-black);
    --bs-table-border-color: #333;
}

.silver-text {
    color: var(--primary-silver);
    font-weight: bold;
}

.bg-silver {
    background-color: var(--primary-silver) !important;
    color: var(--primary-black);
}

.btn-silver {
    background-color: var(--primary-silver);
    color: var(--primary-black);
    border: none;
    font-weight: bold;
}
.btn-silver:hover {
    background-color: var(--secondary-silver);
    color: var(--primary-black);
}

.btn-outline-silver {
    border: 1px solid var(--primary-silver);
    color: var(--primary-silver);
}
.btn-outline-silver:hover {
    background-color: var(--primary-silver);
    color: var(--primary-black);
}

/* Cards: make sure all text inside is readable */
.card {
    background-color: var(--secondary-black);
    border: 1px solid #333;
    transition: transform 0.3s, box-shadow 0.3s;
    color: #fff; /* default text color in cards */
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.1);
}
.card-header,
.card-body,
.card-footer {
    color: #fff;
}
.card-title {
    color: var(--primary-silver);
}
.card-text,
.card p,
.card li,
.card .list-group-item {
    color: #e6e6e6;
}

/* List group items used inside dark cards/modals */
.list-group-item {
    background-color: var(--secondary-black);
    color: #e6e6e6;
    border-color: #333;
}

/* Prices & discounts */
.price {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary-silver);
}
.discount {
    text-decoration: line-through;
    color: #b0b0b0;
    font-size: 0.9rem;
}

/* Hero / sections */
/* Hero section — fully transparent */
.hero-section {
    background: transparent !important;
    padding: 120px 0;
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-section .container {
    background: transparent !important;
}

.featured-products { padding: 80px 0; }
.product-card { margin-bottom: 30px; }
.product-image { height: 250px; object-fit: cover; }

.welcome-text { color: var(--primary-silver) !important; }

.navbar-brand { font-size: 1.8rem; font-weight: bold; }
.nav-link { transition: color 0.3s; }
.nav-link:hover { color: var(--primary-silver) !important; }

/* Forms: inputs + labels + helper text must be readable */
.form-control,
.form-select,
.form-check-label {
    background-color: #2a2a2a;
    border: 1px solid #444;
    color: #fff;
}
.form-control:focus,
.form-select:focus {
    background-color: #2a2a2a;
    border-color: var(--primary-silver);
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
}

/* Critical overrides for labels & helper text everywhere */
label,
.form-label,
legend,
.card label,
.card .form-label {
    color: #ffffff !important;
}
.form-text,
.text-muted,
.text-secondary,
.text-body-secondary,
.card .form-text,
.card .text-muted,
.card .text-secondary,
.card .text-body-secondary {
    color: #cfcfcf !important;
}

/* Placeholders on dark */
input::placeholder,
textarea::placeholder {
    color: #bdbdbd !important;
    opacity: 1 !important;
}

/* Tables (admin pages) */
.table { color: #eaeaea; }
.table-dark { background-color: var(--secondary-black); }
.table thead th {
    color: #ffffff;
    border-color: #333;
}
.table td, .table th {
    color: #eaeaea;
    border-color: #333;
}

/* Admin layout */
.admin-panel { min-height: 100vh; }
.sidebar {
    background-color: var(--secondary-black);
    min-height: 100vh;
    padding-top: 20px;
}
.sidebar .nav-link {
    color: #fff;
    padding: 10px 15px;
    margin: 5px 0;
    border-radius: 5px;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background-color: var(--primary-silver);
    color: var(--primary-black);
}

/* Charts & misc blocks */
.chart-container {
    background-color: var(--secondary-black);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

/* Cart items */
.cart-item { border-bottom: 1px solid #444; padding: 15px 0; }
.cart-total { font-size: 1.5rem; font-weight: bold; color: var(--primary-silver); }

/* Alerts on dark: ensure readable body text */
.alert { color: #0f0f0f; } /* default Bootstrap alerts are light backgrounds */
.alert.alert-dark,
.alert.bg-dark {
    background-color: #1f1f1f;
    color: #fff;
    border-color: #333;
}

/* Modals & dropdowns on dark */
.modal-content,
.dropdown-menu {
    background-color: var(--secondary-black);
    color: #fff;
    border-color: #333;
}

/* Product filter bar polish (keeps your functionality, nicer look) */
.products-filter {
    background: linear-gradient(180deg, #1c1c1c, #161616);
    border: 1px solid #2b2b2b;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.03);
}
.products-filter .form-control,
.products-filter .form-select {
    background-color: #222;
    border-color: #3a3a3a;
}
.products-filter .form-control:focus,
.products-filter .form-select:focus {
    background-color: #222;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-section { padding: 60px 0; }
    .featured-products { padding: 40px 0; }
}
:root {
    --primary-black: #000000;
    --secondary-black: #1a1a1a;
    --primary-silver: #ffffff;
    --secondary-silver: #d9d9d9;
    --light-silver: #f5f5f5;
}

/* Set Bootstrap color variables for dark theme so components inherit correctly */
body {
    background-color: var(--primary-black);
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-top: 76px; /* Account for fixed navbar */

    /* Bootstrap 5 variable overrides (this fixes labels/helper text opacity issues) */
    --bs-body-bg: var(--primary-black);
    --bs-body-color: #ffffff;
    --bs-heading-color: #ffffff;
    --bs-secondary-color: rgba(255,255,255,0.7);
    --bs-tertiary-color: rgba(255,255,255,0.55);
    --bs-border-color: #333;
    --bs-card-bg: var(--secondary-black);
    --bs-card-color: #ffffff;
    --bs-card-border-color: #333;
    --bs-table-color: #eaeaea;
    --bs-table-bg: var(--secondary-black);
    --bs-table-border-color: #333;
}

.silver-text {
    color: var(--primary-silver);
    font-weight: bold;
}

.bg-silver {
    background-color: var(--primary-silver) !important;
    color: var(--primary-black);
}

.btn-silver {
    background-color: var(--primary-silver);
    color: var(--primary-black);
    border: none;
    font-weight: bold;
}
.btn-silver:hover {
    background-color: var(--secondary-silver);
    color: var(--primary-black);
}

.btn-outline-silver {
    border: 1px solid var(--primary-silver);
    color: var(--primary-silver);
}
.btn-outline-silver:hover {
    background-color: var(--primary-silver);
    color: var(--primary-black);
}

/* Cards: make sure all text inside is readable */
.card {
    background-color: var(--secondary-black);
    border: 1px solid #333;
    transition: transform 0.3s, box-shadow 0.3s;
    color: #fff; /* default text color in cards */
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.1);
}
.card-header,
.card-body,
.card-footer {
    color: #fff;
}
.card-title {
    color: var(--primary-silver);
}
.card-text,
.card p,
.card li,
.card .list-group-item {
    color: #e6e6e6;
}

/* List group items used inside dark cards/modals */
.list-group-item {
    background-color: var(--secondary-black);
    color: #e6e6e6;
    border-color: #333;
}

/* Prices & discounts */
.price {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary-silver);
}
.discount {
    text-decoration: line-through;
    color: #b0b0b0;
    font-size: 0.9rem;
}

/* Hero section — fully transparent */
.hero-section {
    background: transparent !important;
    padding: 120px 0;
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-section .container {
    background: transparent !important;
}


.featured-products { padding: 80px 0; }
.product-card { margin-bottom: 30px; }
.product-image { height: 250px; object-fit: cover; }

.welcome-text { color: var(--primary-silver) !important; }

.navbar-brand { font-size: 1.8rem; font-weight: bold; }
.nav-link { transition: color 0.3s; }
.nav-link:hover { color: var(--primary-silver) !important; }

/* Forms: inputs + labels + helper text must be readable */
.form-control,
.form-select,
.form-check-label {
    background-color: #2a2a2a;
    border: 1px solid #444;
    color: #fff;
}
.form-control:focus,
.form-select:focus {
    background-color: #2a2a2a;
    border-color: var(--primary-silver);
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
}

/* Critical overrides for labels & helper text everywhere */
label,
.form-label,
legend,
.card label,
.card .form-label {
    color: #ffffff !important;
}
.form-text,
.text-muted,
.text-secondary,
.text-body-secondary,
.card .form-text,
.card .text-muted,
.card .text-secondary,
.card .text-body-secondary {
    color: #cfcfcf !important;
}

/* Placeholders on dark */
input::placeholder,
textarea::placeholder {
    color: #bdbdbd !important;
    opacity: 1 !important;
}

/* Tables (admin pages) */
.table { color: #eaeaea; }
.table-dark { background-color: var(--secondary-black); }
.table thead th {
    color: #ffffff;
    border-color: #333;
}
.table td, .table th {
    color: #eaeaea;
    border-color: #333;
}

/* Admin layout */
.admin-panel { min-height: 100vh; }
.sidebar {
    background-color: var(--secondary-black);
    min-height: 100vh;
    padding-top: 20px;
}
.sidebar .nav-link {
    color: #fff;
    padding: 10px 15px;
    margin: 5px 0;
    border-radius: 5px;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background-color: var(--primary-silver);
    color: var(--primary-black);
}

/* Charts & misc blocks */
.chart-container {
    background-color: var(--secondary-black);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

/* Cart items */
.cart-item { border-bottom: 1px solid #444; padding: 15px 0; }
.cart-total { font-size: 1.5rem; font-weight: bold; color: var(--primary-silver); }

/* Alerts on dark: ensure readable body text */
.alert { color: #0f0f0f; } /* default Bootstrap alerts are light backgrounds */
.alert.alert-dark,
.alert.bg-dark {
    background-color: #1f1f1f;
    color: #fff;
    border-color: #333;
}

/* Modals & dropdowns on dark */
.modal-content,
.dropdown-menu {
    background-color: var(--secondary-black);
    color: #fff;
    border-color: #333;
}

/* Product filter bar polish (keeps your functionality, nicer look) */
.products-filter {
    background: linear-gradient(180deg, #1c1c1c, #161616);
    border: 1px solid #2b2b2b;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.03);
}
.products-filter .form-control,
.products-filter .form-select {
    background-color: #222;
    border-color: #3a3a3a;
}
.products-filter .form-control:focus,
.products-filter .form-select:focus {
    background-color: #222;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-section { padding: 60px 0; }
    .featured-products { padding: 40px 0; }
}

/* Token badge in header */
.token-badge {
    background-color: var(--primary-silver) !important;
    color: var(--primary-black) !important;
    font-weight: 700;
    margin-left: 6px;
}/* === Dynamic site background (from PHP variable) === */
body {
    background-image: var(--site-background-image) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-color: #000 !important;
}
/* === Global Background Overlay === */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: -1;
    pointer-events: none;
}
.glass-card {
  background: rgba(30, 30, 30, 0.55);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
}
.gold-text { color: #999999 !important; }
.btn-silver { background:#868686; color:#000; border:none; }
/* === CLOVEX RARITY SYSTEM === */
.rarity-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 6px;
  letter-spacing: 0.5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

/* Colors for each rarity type */
.rarity-common {
  background: #555;
  color: #eee;
}
.rarity-uncommon {
  background: #1e90ff;
  color: #fff;
}
.rarity-rare {
  background: #8e44ad;
  color: #fff;
}
.rarity-legendary {
  background: linear-gradient(45deg, #d9b310, #f8e76b);
  color: #000;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 10px #d9b31080;
}