/*
Theme Name: Gratis Koopjehier
Description: Volledig herstelde, frisse & licht-thema CSS voor gratis.koopjehier.nl
Version: 2.0
*/

/* ==========================================
   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)
   ========================================== */
.gratis-hero-section .text-white, 
.gratis-hero-section .text-white *,
.gratis-hero-section .fw-bold,
.gratis-hero-section h4 {
    color: #ffffff !important;
}

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

/* ==========================================
   3. ALGEMENE TITELS & PAGINA HEADINGS
   ========================================== */
body .container h1,
body .container h2,
body .container h3,
body h1, body h2, body h3,
.h1, .h2, .h3 {
  
    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 STYLING
   ========================================== */
#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 HOMEPAGE
   ========================================== */
.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;
}

/* =========================================================
   7. WINKELWAGEN & PURUS CONTAINER OVERRIDES (HERSTELD NAAR LICHT)
   ========================================================= */

/* Hoofdcontainer Winkelmand */
.purus-content-wrapper,
.woocommerce-cart .cart-wrapper {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    color: #0f172a !important;
    padding: 30px !important;
}

/* Harde Bootstrap Utility Overrides binnen de winkelmand */
.purus-content-wrapper .bg-black,
.purus-content-wrapper .bg-dark {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

.purus-content-wrapper .border-secondary {
    border-color: #e2e8f0 !important;
}

.purus-content-wrapper .text-white,
.purus-content-wrapper .text-white-50 {
    color: #0f172a !important;
}

/* Productrijen Binnen Winkelmand */
.purus-content-wrapper .purus-item-row {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
}

/* Producttitels in Winkelmand */
.purus-content-wrapper .purus-item-row h3 a,
.woocommerce-cart td.product-name a {
    color: #0f172a !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.purus-content-wrapper .purus-item-row h3 a:hover,
.woocommerce-cart td.product-name a:hover {
    color: #00b36b !important;
}

/* Prijzen en Success Teksten */
.purus-content-wrapper .text-success,
.woocommerce-cart .amount {
    color: #059669 !important;
    font-weight: 800 !important;
}

/* Verwijderknop [ X UI_REMOVE ] Badge Fix */
.purus-content-wrapper a.text-danger,
.woocommerce-cart a.remove {
    color: #dc2626 !important;
    background: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.purus-content-wrapper a.text-danger:hover,
.woocommerce-cart a.remove:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
}

/* Aantal (Quantity) Input Veld */
.purus-content-wrapper input.qty,
.woocommerce-cart .quantity .qty {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    text-align: center !important;
    font-weight: 800 !important;
}

/* Coupon Area */
.purus-content-wrapper .purus-coupon-area {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
}

.purus-content-wrapper input[name="coupon_code"] {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
}

.purus-content-wrapper button[name="apply_coupon"] {
    background: linear-gradient(135deg, #00ff9d, #00e5ff) !important;
    color: #000000 !important;
    border: none !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
}

/* Overzicht / Terminal Blok Rechts */
.purus-content-wrapper .purus-terminal,
.woocommerce-cart .cart_totals {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    color: #0f172a !important;
}

/* Afrekenen Knop */
.purus-content-wrapper .checkout-button,
.woocommerce-cart .checkout-button {
    background: linear-gradient(135deg, #00ff9d, #00e5ff) !important;
    color: #000000 !important;
    font-weight: 900 !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    box-shadow: 0 8px 20px rgba(0, 255, 157, 0.25) !important;
    border: none !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

.purus-content-wrapper .checkout-button:hover,
.woocommerce-cart .checkout-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 25px rgba(0, 255, 157, 0.35) !important;
}
/* Alleen de prijs-tekst (€ 186,89) in het overzicht zwart maken */
.cart_totals table td,
.cart_totals table td.text-end,
.cart_totals table td.fw-bold {
    color: #0f172a !important;
}
.product-gallery-container.p-2.border.border-secondary.bg-black.sticky-top.text-center
{
 background-color: #FFFFFF!important;   
}
/* =========================================================
   8. PRODUCT DETAIL KAART (OVERRIDE ZWART NAAR LICHT THEMA)
   ========================================================= */

/* Overrule de hardcoded .bg-black en .border-secondary op de product kaart */
.product-details-card.bg-black {
    background-color: #ffffff !important; /* Witte achtergrond in plaats van zwart */
    border: 1px solid #e2e8f0 !important; /* Lichte grijze border passend bij de cart */
    border-radius: 20px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03) !important;
}

/* Forceer de H1 titel naar donker in plaats van text-white */
.product-details-card h1,
.product-details-card h1.text-white {
    color: #0f172a !important; /* Donkerblauw/zwart uit jouw thema */
    font-weight: 800 !important;
}

/* Korte beschrijving en gewone teksten */
.product-details-card .text-secondary,
.product-details-card .short-description {
    color: #475569 !important; /* Beter leesbaar donkergrijs */
}

/* Prijs en voorraad status (groen houden zoals in de cart) */
.product-details-card .text-success,
.product-details-card .price-box .amount,
.product-details-card .stock.in-stock {
    color: #059669 !important; 
    font-weight: 800 !important;
}

/* Specificatie labels (Artikelnummer, Categorie, etc.) */
.product-details-card .spec-label {
    color: #64748b !important; /* Subtiel grijs voor de labels */
    font-weight: 700 !important;
}

/* Specificatie waarden en linkjes (zoals categorieën) */
.product-details-card .spec-value,
.product-details-card .spec-value a {
    color: #0f172a !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.product-details-card .spec-value a:hover {
    color: #00b36b !important;
}

/* Badges (zoals 'veelkleurig', 'strips') styling updaten naar licht thema */
.product-details-card .purus-attr-badge {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

/* Hoeveelheid input veld (zelfde als in winkelmand) */
.product-details-card input.qty {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
}

/* In Winkelmand knop (Zelfde verloop als andere knoppen in je thema) */
.product-details-card button[name="add-to-cart"] {
    background: linear-gradient(135deg, #00ff9d, #00e5ff) !important;
    color: #000000 !important;
    font-weight: 900 !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(0, 255, 157, 0.25) !important;
}

.product-details-card button[name="add-to-cart"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 25px rgba(0, 255, 157, 0.35) !important;
}

div.bundled_product_summary, .woocommerce div.product.bundled_product_summary
{
    background: #fff!important;
    border-bottom: 1px solid !important;
}

/* =========================================================
   9. TAXONOMIE / CATEGORIE GRID (OVERRIDE ZWART NAAR LICHT)
   ========================================================= */

/* Overschrijf de .bg-dark en hoekige kaarten naar jouw lichte stijl */
.row .card.bg-dark.border-secondary {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important; /* Maakt de .rounded-0 weer mooi rond */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s ease !important;
}

/* Voeg het zweef (hover) effect toe, precies zoals op je homepage */
.row .card.bg-dark.border-secondary:hover {
    transform: translateY(-6px) !important;
    border-color: #00ff9d !important;
    box-shadow: 0 15px 35px rgba(0, 255, 157, 0.2) !important;
}

/* Zorg dat de afbeelding bovenin meebuigt met de nieuwe ronde hoeken */
.row .card.bg-dark.border-secondary img.card-img-top {
    border-top-left-radius: 19px !important;
    border-top-right-radius: 19px !important;
    background-color: transparent !important;
}

/* Zet de producttitel (was text-white) om naar jouw donkerblauwe tekstkleur */
.row .card.bg-dark.border-secondary .card-title.text-white {
    color: #0f172a !important;
    font-weight: 800 !important;
    text-transform: none !important; /* Maakt het vaak iets rustiger om te lezen */
    font-size: 1.1rem !important;
}

/* Prijs weergave in de juiste kleur groen */
.row .card.bg-dark.border-secondary .card-text.text-success {
    color: #059669 !important;
    font-weight: 800 !important;
}

/* Overschrijf de standaard 'btn-success' naar jouw gave gradient knop (.gratis-btn) */
.row .card.bg-dark.border-secondary .btn-success {
    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;
    box-shadow: 0 8px 20px rgba(0, 255, 157, 0.25) !important;
}

/* Hover effect voor de knop */
.row .card.bg-dark.border-secondary .btn-success:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 25px rgba(0, 255, 157, 0.35) !important;
}

/* Oude doorstreepte prijs (del) iets subtieler maken */
.row .card.bg-dark.border-secondary .card-text del {
    color: #94a3b8 !important;
    font-weight: normal !important;
    font-size: 0.9em !important;
    margin-right: 5px !important;
}

/* =========================================================
   10. WOOCOMMERCE TABS (OVERRIDE ZWART NAAR LICHT THEMA)
   ========================================================= */

/* Verwijder de scherpe, decoratieve groene hoekjes (passen niet bij rond thema) */
.woocommerce-tabs .tab-content > div[style*="border-top: 3px solid"] {
    display: none !important;
}

/* De tab-knoppen zelf (Beschrijving, Beoordelingen, etc.) */
.woocommerce-tabs .wc-tabs .nav-link {
    background-color: #f1f5f9 !important; /* Zacht lichtgrijs voor inactieve tabs */
    color: #64748b !important; /* Grijze tekst */
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px 12px 0 0 !important; /* Ronde hoeken boven, recht onder aan de tab */
    font-weight: 800 !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}

/* Actieve tab en hover-status */
.woocommerce-tabs .wc-tabs .nav-link:hover,
.woocommerce-tabs .wc-tabs .nav-item.active .nav-link {
    background-color: #ffffff !important;
    color: #0f172a !important; /* Donkerblauwe/zwarte tekst */
    border-bottom-color: #ffffff !important; /* Zorgt dat het mooi overloopt in het witte vlak eronder */
}

/* Het grote content-vlak (waar de beschrijving/reviews in staan) */
.woocommerce-tabs .tab-content {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0 12px 12px 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03) !important;
}

/* Tekstkleuren binnen de content (overschrijf text-white en text-secondary) */
.woocommerce-tabs .tab-content,
.woocommerce-tabs .tab-content .text-secondary,
.woocommerce-tabs .tab-content .text-white-50,
.woocommerce-tabs .tab-content p {
    color: #475569 !important; /* Donkergrijs voor goede leesbaarheid */
}

/* Koppen in de content */
.woocommerce-tabs .tab-content h2,
.woocommerce-tabs .tab-content h3,
.woocommerce-tabs .tab-content h4 {
    color: #0f172a !important; /* Jouw thema donkerblauw/zwart */
    font-weight: 800 !important;
}

/* Linkjes in de tekst (bijv. naar andere producten) */
.woocommerce-tabs .tab-content a {
    color: #059669 !important; /* Succes groen */
    text-decoration: none !important;
    font-weight: 700 !important;
}

.woocommerce-tabs .tab-content a:hover {
    text-decoration: underline !important;
}

/* Lijntjes (hr en borders) in de beschrijving aanpassen naar licht */
.woocommerce-tabs .tab-content hr,
.woocommerce-tabs .tab-content .border-dark.border-opacity-25 {
    border-color: #e2e8f0 !important;
    border-bottom-color: #e2e8f0 !important;
    opacity: 1 !important;
}

/* =========================================================
   11. REVIEW FORMULIER & KNOPPEN
   ========================================================= */

/* Invoervelden (naam, email, tekstvak) */
#review_form_wrapper input[type="text"],
#review_form_wrapper input[type="email"],
#review_form_wrapper textarea {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    border-radius: 8px !important;
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Focus state als je typt */
#review_form_wrapper input:focus,
#review_form_wrapper textarea:focus {
    border-color: #00ff9d !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.2) !important;
}

/* De "Verzenden" knop in jouw specifieke gradient stijl */
#review_form_wrapper .submit {
    background: linear-gradient(135deg, #00ff9d, #00e5ff) !important;
    color: #000000 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    border-radius: 12px !important;
    border: none !important;
    padding: 12px 30px !important;
    box-shadow: 0 8px 20px rgba(0, 255, 157, 0.25) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    margin-top: 10px !important;
}

/* Hover effect voor de Verzenden knop */
#review_form_wrapper .submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 25px rgba(0, 255, 157, 0.35) !important;
}

/* Fix voor de sterren beoordeling styling (zorgt dat ze netjes staan) */
.comment-form-rating .stars a {
    color: #cbd5e1 !important;
}
.comment-form-rating .stars a:hover,
.comment-form-rating .stars a.active {
    color: #fbbf24 !important; /* Geel voor actieve sterren */
}

.woocommerce-tabs .woocommerce-Tabs-panel
{
    
  background: #f8fafc !important; 
}

.wc-tabs li.active,.wc-tabs li
{
  background-color: #fff!important;
    border: none!important;
}

.display-6.fw-bold.text-uppercase.mb-4.text-white,.fw-black.mb-4.d-flex.align-items-center.gap-2,.item_title
{
 color:#000000!important;   
}

.woocommerce-message {
    background-color: #fff5f5 !important;
    color: #333333 !important;
    border: 2px solid #ff6b6b !important;
    position: relative;
    padding: 15px 45px 15px 20px !important;
    border-radius: 4px;
}

.woocommerce-message .close-info {
    color: #333333 !important;
}

.woocommerce-message a.button {
    color: #ffffff !important;
    background-color: #ff6b6b !important;
    border-radius: 3px;
    padding: 5px 10px;
}
.woocommerce-message a.button:hover,
.woocommerce-message .button.wc-forward:hover {
    color: #000000 !important;
}

.purus-item-row.ms-md-5 span[style*="background:#00e8a4"] {
    display: none !important;
}

.purus-content-wrapper h2, header h1
{
 color:#333!important;   
}

.woocommerce-Price-amount.amount bdi 
{
     color: #00ff9d !important;   
}
del .woocommerce-Price-amount.amount bdi
{
     color: #dc3545!important;   
}