/*
Theme Name: Gratis Koopjehier
Description: Volledig herstelde & geïsoleerde CSS voor gratis.koopjehier.nl
Version: 1.2
*/

/* ==========================================
   1. ACHTERGROND SITE (100% FRIS LICHT)
   ========================================== */
html body, 
html #page, 
html #content, 
html .site-content, 
html .site-footer,
html .main-content, 
html main {
    background-color: #f8fafc !important;
    background: #f8fafc !important;
    color: #0f172a !important;
}

/* ==========================================
   2. HERSTEL TEKSTEN IN HERO (ALTIJD WIT)
   ========================================== */
.text-white, 
.text-white *,
.gratis-hero-section .fw-bold,
.gratis-hero-section h4,
.gratis-hero-section .text-white {
    color: #ffffff !important;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* ==========================================
   3. TITELS BUITEN HERO (POPULAIRE GRATIS DEALS)
   ========================================== */
body .container h3,
body .container h3 *,
h3.mb-4 {
    color: #0f172a !important; /* Diep donkerblauw/zwart op lichte achtergrond */
    font-weight: 800 !important;
}

/* ==========================================
   4. HERO BANNER (DONKER CONTRAST BLOK)
   ========================================== */
.gratis-hero-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    border-radius: 24px !important;
    padding: 50px 40px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.gratis-hero-section h1 {
    color: #ffffff !important;
    font-weight: 900 !important;
}

.gratis-hero-section h1 span {
    color: #00ff9d !important;
}

.gratis-hero-section p {
    color: #cbd5e1 !important;
}

/* ==========================================
   5. NAVBAR FIXES
   ========================================== */
#gratis-nav-bar {
    background-color: #ffffff !important;
    border-bottom: 3px solid #00ff9d !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    min-height: 80px !important;
}

.gratis-brand-text {
    color: #000000 !important;
    font-weight: 900 !important;
    font-size: 1.4rem !important;
}

#gratis-nav-bar .nav-link,
#gratis-nav-bar i.bi {
    color: #000000 !important;
    font-weight: 700 !important;
}

.gratis-badge-navbar {
    background: linear-gradient(135deg, #00ff9d, #00e5ff) !important;
    color: #000000 !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
}

/* ==========================================
   6. PRODUCT KAARTEN
   ========================================== */
.gratis-product-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03) !important;
}

.gratis-product-card:hover {
    transform: translateY(-6px) !important;
    border-color: #00ff9d !important;
    box-shadow: 0 15px 35px rgba(0, 255, 157, 0.2) !important;
}

.gratis-product-card h5,
.gratis-product-card h6 {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.gratis-btn {
    background: linear-gradient(135deg, #00ff9d, #00e5ff) !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 12px !important;
}