/* =============================================
   DARK THEME GLOBAL OVERRIDES
   Applied last to override any white/light backgrounds
   from legacy CSS files
   ============================================= */

/* Override white card backgrounds */
.service__card,
.service-card,
.game-card,
.random-card,
.wheel-card,
.detail-card,
.account-detail-card {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
}

/* Override white/light container backgrounds */
.service,
.wheel-section,
.random-section,
.game-account-section,
.detail-section {
    background: transparent !important;
}

/* Override hardcoded white panels */
.panel,
.card-body,
.list-group-item,
.tab-pane,
.info-panel {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-primary) !important;
}

/* Override white table rows */
table {
    border-collapse: collapse;
}

thead th,
.table thead th {
    background: rgba(139, 92, 246, 0.1) !important;
    color: var(--primary-light) !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
}

tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02) !important;
}

tbody tr:hover td,
.table-hover tbody tr:hover td {
    background: rgba(139, 92, 246, 0.05) !important;
}

/* Override white select inputs */
select option {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Override hardcoded text colors in sub-pages */
.section__title {
    background: linear-gradient(135deg, var(--primary-light), var(--neon-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section__subtitle {
    color: var(--text-secondary) !important;
}

/* Service cards dark theme */
.service__card {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-md) !important;
}

.service__card:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--shadow-lg), var(--shadow-glow-purple) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

.service__card-header {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(6, 182, 212, 0.15)) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
}

.service__card-title {
    color: var(--text-primary) !important;
}

.service__card-price {
    color: var(--neon-cyan) !important;
}

/* Button buy/submit */
.service__btn-buy,
.btn-buy,
.purchase-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--neon-cyan)) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--border-radius-pill) !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.35) !important;
}

.service__btn-buy:hover,
.btn-buy:hover,
.purchase-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5) !important;
    color: white !important;
}

/* Fix modal backgrounds */
.modal-content,
.service-modal__content {
    background: var(--bg-card) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
}

.modal-header,
.service-modal__header {
    background: rgba(139, 92, 246, 0.08) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}

.modal-footer,
.service-modal__footer {
    background: rgba(139, 92, 246, 0.04) !important;
    border-top: 1px solid var(--glass-border) !important;
}

/* Input fields dark theme */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
    font-family: "Fz Poppins", sans-serif !important;
}

/* Ensure info values stay visible */
.info-value {
    color: #67e8f9 !important;
}

.info-item__title {
    color: #94a3b8 !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important;
    background: rgba(139, 92, 246, 0.05) !important;
    outline: none !important;
}

/* QR code / detail images should keep white background */
.bank-qr-code img,
.qr-code img {
    background: white !important;
    padding: 8px !important;
    border-radius: 6px !important;
}

/* Fix payment icons (keep white bg) */
.payment__img {
    background: rgba(255, 255, 255, 0.9) !important;
}

/* Nav active state fix */
.nav {
    background: rgba(10, 10, 20, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* Announcement bar color fix */
.announcement {
    color: var(--text-secondary) !important;
}

/* Hero section on sub-pages */
.hero-header {
    background: linear-gradient(135deg, rgba(109, 40, 217, 0.5) 0%, rgba(6, 182, 212, 0.3) 100%) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2) !important;
}