/*
Theme Name: Rouwen en Vieren Tilburg
Description: Based on Divi by Elegant Themes
Template: Divi
Version: 1.0
Author: Eric Steur | stom!
Author URI: https://www.stom.nu

*/

@import url("https://rouwenenvierentilburg.nl/wp-content/themes/Divi/style.css");

/* 1. Standaard transparant en over de content heen */
.transparante-header {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent !important;
    z-index: 9999;
}

/* 2. Zodra je scrolt: maak de achtergrond wit en pas de tekst aan */
.et_pb_sticky .transparante-header,
.transparante-header.et_pb_sticky {
    background-color: #ffffff !important; /* Je scroll-kleur (nu wit) */
    position: fixed !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 3. Menutekst kleur bij scrollen */
.transparante-header.et_pb_sticky .et_pb_menu__links a {
    color: #333333 !important; /* Kleur van de tekst bij scrollen (donkergrijs) */
}



/* ==========================================
   ROUWEN & VIEREN TILBURG
   Donatieformulier - Doneren met Mollie
   ========================================== */

/* ALGEMEEN */

.rouwen-donatie {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 10px;
    background: transparent;
    border-radius: 0;
    color: #292929;
    font-size: 16px;
    line-height: 1.5;
    box-sizing: border-box;
}

.rouwen-donatie,
.rouwen-donatie * {
    box-sizing: border-box;
}

/* FORMULIER EN WITRUIMTE */

.rouwen-donatie #dmm_form {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Overbodige regeleindes */
.rouwen-donatie #dmm_form > br {
    display: none !important;
}

/* Veldgroepen */
.rouwen-donatie #dmm_form > p {
    margin: 0 0 12px !important;
    padding: 0 !important;
}

/* Lege paragrafen */
.rouwen-donatie #dmm_form > p:empty {
    display: none;
}

/* LABELS */

.rouwen-donatie label {
    display: inline-block;
    margin-bottom: 4px;
    font-weight: 500;
    line-height: 1.4;
}

/* INVOERVELDEN */

.rouwen-donatie .rouwen-donatie-veld {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    background: #ffffff;
    border: 1px solid #d6d2cb;
    border-radius: 6px;
    color: #292929;
    font: inherit;
    box-sizing: border-box;
    transition: border-color .2s ease;
}

/* Focus */
.rouwen-donatie .rouwen-donatie-veld:focus {
    border-color: #777168;
    outline: 2px solid #d6d2cb;
    outline-offset: 1px;
}

/* Selectvelden */
.rouwen-donatie select.rouwen-donatie-veld {
    cursor: pointer;
}

/* BETAALMETHODEN */

.rouwen-donatie #dmm_form label.dmm_dmd_nomc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 !important;
    font-weight: 400;
}

/* Radio buttons */
.rouwen-donatie input[type="radio"] {
    accent-color: #292929;
    margin: 0 5px 0 0;
}

/* PRIVACYVERKLARING */

.rouwen-donatie #dmm_form #dmm_permission {
    margin-top: 5px;
}

.rouwen-donatie input[type="checkbox"] {
    accent-color: #292929;
    margin-right: 6px;
}

.rouwen-donatie a {
    color: #655b50;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rouwen-donatie a:hover {
    color: #292929;
}

/* DONEERKNOP */

.rouwen-donatie .rouwen-donatie-knop {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 12px;
    padding: 12px 24px;
    background: #292929;
    color: #ffffff;
    border: 0;
    border-radius: 6px;
    font: inherit;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background .2s ease;
}

.rouwen-donatie .rouwen-donatie-knop:hover {
    background: #55504b;
}

.rouwen-donatie .rouwen-donatie-knop:focus-visible {
    outline: 2px solid #777168;
    outline-offset: 3px;
}

/* SUCCESMELDING */

.rouwen-donatie .rouwen-donatie-succes {
    padding: 15px;
    margin: 12px 0;
    background: #edf4ed;
    color: #285b32;
    border-radius: 6px;
}

/* FOUTMELDING */

.rouwen-donatie .rouwen-donatie-error {
    padding: 15px;
    margin: 12px 0;
    background: #fff0ed;
    color: #a33225;
    border-radius: 6px;
}

/* MOBIELE WEERGAVE */

@media (max-width: 600px) {

    .rouwen-donatie {
        padding: 0;
        font-size: 15px;
    }

    .rouwen-donatie .rouwen-donatie-veld {
        min-height: 44px;
    }

    .rouwen-donatie .rouwen-donatie-knop {
        width: 100%;
        min-height: 48px;
    }
}