/* ============================================================
   GLOBAL DARK THEME & GLASSMORPHISM DESIGN SYSTEM OVERRIDE
   ============================================================ */

/* 1. Global background dimming overlay (works with admin custom bg overrides) */
body::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(6, 6, 14, 0.78) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.bg-custom {
    position: relative !important;
}

.bg-custom::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(6, 6, 14, 0.78) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.bg-custom > * {
    position: relative !important;
    z-index: 1 !important;
}

#wrapper {
    position: relative !important;
    z-index: 2 !important;
}

/* 2. Glassmorphism & Dark Contrast for All Main Containers */
.bg-container,
.group-container,
.type-container,
.mobileprovider,
.mobileprov,
.desktopprov,
.card-body,
.section.bg-white,
.game-item,
.gamenormalimg,
.dashboard,
.form-box,
fieldset.group-container {
    background: rgba(15, 15, 25, 0.88) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important;
}

/* Fix bg-white elements that were hardcoded white background */
.bg-white, .section.bg-white {
    background-color: rgba(15, 15, 25, 0.90) !important;
    color: #ffffff !important;
}

/* 3. Text contrast overrides for dark glass containers */
.bg-container, .group-container, .type-container, .card-body, .section, .game-item, .text-dark {
    color: #e2e8f0 !important;
}

.bg-container p, .group-container p, .type-container p, .card-body p,
.bg-container td, .group-container td, .type-container td, .card-body td,
.bg-container span, .group-container span, .type-container span, .card-body span,
.bg-container div, .group-container div, .type-container div {
    color: #dedede !important;
}

.bg-container h1, .group-container h1, .type-container h1, .card-body h1,
.bg-container h2, .group-container h2, .type-container h2, .card-body h2,
.bg-container h3, .group-container h3, .type-container h3, .card-body h3,
.bg-container h4, .group-container h4, .type-container h4, .card-body h4 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* 4. Provider item title & image styling */
.menuprovider small,
.menuprovider a small,
.mobileprovider small,
.mobileprov small,
.desktopprov small {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-shadow: 0 1px 3px #000000, 0 0 6px rgba(0,0,0,0.9) !important;
    display: block !important;
    margin-top: 4px !important;
}

/* 5. Game Item text & cards (Rainbow Frame Removal) */
.game-item::before,
.game-item::after,
.gamenormalimg::before,
.gamenormalimg::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    animation: none !important;
}

.game-item {
    padding: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.game-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3) !important;
    border-color: rgba(255, 215, 0, 0.6) !important;
}

.gamenormalimg {
    border-radius: 8px !important;
    box-shadow: none !important;
}

.game-item p, .game-item small {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 3px #000000 !important;
}

/* 6. White Filled Search Bar */
#keyword,
input[name="keyword"],
.mcp-search input {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #FFD700 !important;
    border-radius: 25px 0 0 25px !important;
    font-weight: 600 !important;
    padding-left: 15px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
}

#keyword::placeholder,
input[name="keyword"]::placeholder {
    color: #555555 !important;
    opacity: 1 !important;
}