/* ============================================================
   DIVI ENGINE FORMULIER STYLING (Contactformulier)
   ============================================================ */

/* 1. Reset module spacing voor strakke uitlijning onder elkaar */
.fb_form .de_fb_form_field {
    margin-bottom: 20px !important; /* Ruimte tussen de velden */
    padding: 0 !important;
}

/* 2. Veld Styling (Inputs, Selects, Textarea) */
.fb_form .divi-form-builder-field {
    background-color: #ffffff !important;
    border: 2px solid #1711D7 !important;
    border-radius: 0 !important; /* Strakke hoeken */
    color: #1711D7 !important;
    font-family: 'RundText', sans-serif !important;
    font-size: 16px !important;
    padding: 15px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Subtiele blauwe gloed als je in het veld klikt (focus) */
.fb_form .divi-form-builder-field:focus {
    box-shadow: 0 0 0 3px rgba(23, 17, 215, 0.2) !important;
}

/* Verwijder de standaard Divi marge op de paragraaf-tag van elk veld */
.fb_form p.et_pb_contact_field {
    margin-bottom: 0 !important;
}

/* 3. Placeholder tekst (Zelfde blauw als in je design) */
.fb_form .divi-form-builder-field::placeholder {
    color: #1711D7 !important;
    opacity: 1 !important;
}
.fb_form .divi-form-builder-field:-ms-input-placeholder { color: #1711D7 !important; }
.fb_form .divi-form-builder-field::-ms-input-placeholder { color: #1711D7 !important; }

/* 4. Specifieke Select (Dropdown) Styling */
.fb_form select.divi-form-builder-field {
    appearance: none !important;
    -webkit-appearance: none !important;
    /* Hetzelfde blauwe dropdown pijltje als in je filter shortcode */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231711D7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 20px !important;
    padding-right: 50px !important; /* Ruimte voor het pijltje voorkomen tekst overlap */
    cursor: pointer;
}

/* 5. De Verzendknop Wrapper (Forceert uitlijning naar rechts) */
.fb_form .submit-container,
.fb_form .de_fb_submit_container {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

/* 6. De Verzendknop zelf (Matcht exact de 'btn-zoek' stijl) */
.fb_form button.divi-form-submit {
    background-color: #1711D7 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 15px 40px !important;
    font-family: 'RundText', sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    margin: 0 !important; /* Voorkom ongewenste Divi marges */
}

/* Knop Hover effect */
.fb_form button.divi-form-submit:hover {
    background-color: #0F0A9E !important;
}

/* ============================================================
   MEERLAAGSE BREADCRUMB (Trail)
   ============================================================ */
.tweekoppig-breadcrumb-wrapper {
    margin-bottom: 30px; 
    display: flex;
    flex-wrap: wrap; /* Zorgt dat een lang pad niet van je telefoonscherm af valt */
    align-items: center;
    gap: 15px; /* Ruimte tussen de losse broodkruimels */
}

/* Algemene styling voor alle items */
.tk-crumb a.tk-terug-link,
.tk-crumb span.tk-current-page {
    display: inline-flex;
    align-items: center;
    gap: 12px; /* Ruimte tussen pijltje en tekst */
    font-family: 'RundText', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

/* Kleur van de KLIKBARE voorouders */
.tk-crumb a.tk-terug-link {
    color: #000000 !important;
}

.tk-crumb a.tk-terug-link svg {
    transition: transform 0.3s ease;
}

/* Hover Effect: Kleurt blauw en pijltje wijst aan */
.tk-crumb a.tk-terug-link:hover {
    color: #1711D7 !important; 
}

.tk-crumb a.tk-terug-link:hover svg {
    transform: translateX(-4px); /* Pijltje schiet iets naar links */
}

/* Kleur van de ONKLIKBARE huidige pagina (Het eindpunt) */
.tk-crumb span.tk-current-page {
    color: #1711D7 !important; /* Huisstijl blauw voor focus */
}
	
/* ============================================================
   CUSTOM CHEVRON LIJST (Roodbruine pijltjes)
   ============================================================ */

/* Reset de standaard bolletjes van de lijst */
ul.tk-chevron-lijst {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Styling voor de lijst items (regels) */
ul.tk-chevron-lijst li {
    position: relative;
    padding-left: 30px !important; /* Maakt ruimte aan de linkerkant voor de pijl */
    margin-bottom: 20px !important; /* Ruimte tussen de regels, net als je post-its */
    display: block; /* Zorgt dat tekst die afbreekt netjes recht onder elkaar valt */
}

/* Het pijltje zelf (Gemaakt met pure CSS grenzen!) */
ul.tk-chevron-lijst li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px; /* Laat het pijltje iets zakken zodat hij perfect uitlijnt met je tekst */
    width: 10px;
    height: 10px;
    
    /* We tekenen de rechter en bovenste randlijn in jouw huisstijlkleur */
    border-right: 3px solid #a73928; 
    border-top: 3px solid #a73928; 
    
    /* We draaien het vierkantje 45 graden, waardoor het een '>' wordt! */
    transform: rotate(45deg); 
    
    /* Subtiel afgeronde hoekjes zodat het perfect matcht met je design */
    border-radius: 1px; 
}

/* ============================================================
   KNALBANG LIJST (Oranje stervorm/explosie)
   ============================================================ */

/* Reset de standaard bolletjes van de lijst */
ul.tk-knalbang-lijst {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Styling voor de lijst items (regels) */
ul.tk-knalbang-lijst li {
    position: relative;
    padding-left: 40px !important; /* Ruimte voor de knalbang-ster */
    margin-bottom: 30px !important; /* Wat meer ademruimte tussen de items */
    display: block; 
    
    /* De nieuwe tekst-styling: Cursief, Bruin en Vet */
    font-style: italic !important;
    color: #a73928 !important; /* De roodbruine huisstijlkleur */
    font-weight: 700 !important; /* Zorgt voor die stevige look uit het design */
    font-size: 20px !important; /* Pas dit getal aan als je ze groter of kleiner wilt */
    line-height: 1.4em !important;
}

/* De knalbang zelf (Als inline SVG background) */
ul.tk-knalbang-lijst li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px; /* Lijn hem netjes uit met de eerste regel tekst */
    width: 30px; /* Grootte van het icoon */
    height: 30px;
    
    /* De oranje handgetekende SVG-ster direct in de code (fill='%23FF5722' is de kleur) */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF5722'%3E%3Cpath d='M12 1L14.5 8L22 6L17.5 12L23 16.5L16.5 17L18.5 23L12.5 19L7 23.5L8.5 17L2 16L7.5 12L2.5 6L9.5 8.5Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ============================================================
   2. Dropdown Menu Fix (Jouw code + Flex Breaker)
   ============================================================ */

/* De container van het submenu */
.flex-alles-rij .et_pb_menu .nav li ul.sub-menu {
    display: block !important;     /* CRUCIAAL: Breekt de flex, dwingt blokvorm */
    position: absolute !important; /* Zorgt dat het over de content valt */
    
    /* Jouw specifieke wensen: */
    width: auto !important;
    min-width: 180px !important;
    padding-right: 0px !important;
    border-top: 2px solid ; /* Optioneel: vaak mooi bij Divi dropdowns */
}

/* De lijst-items (li) in het submenu */
.flex-alles-rij .et_pb_menu .nav li ul.sub-menu li {
    display: block !important; /* CRUCIAAL: Zorgt dat items ONDER elkaar komen */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* De linkjes (a) in het submenu */
.flex-alles-rij .et_pb_menu .nav li ul.sub-menu li a {
    display: block !important;
    
    /* Jouw specifieke wensen: */
    white-space: nowrap !important; /* Voorkom afbreken woorden */
    width: 100% !important;
    padding: 8px 15px !important;   /* TIP: Ik heb dit iets ruimer gezet (was 5px 5px). 
                                       5px rondom oogt vaak erg krap. Pas aan naar wens. */
}

/* 1. Voorkom dat de Logo-kolom wordt platgedrukt */
.flex-alles-rij .et_pb_column_1_4 {
    flex-shrink: 0 !important; /* "Krimp niet!" */
    width: 25% !important; /* Dwing de 1/4 breedte af */
    min-width: 200px; /* Zorg dat hij nooit te smal wordt */
}

/* 2. Zorg dat de Afbeelding Module de ruimte pakt */
.flex-alles-rij .et_pb_image_0_tb_header {
    width: 100% !important; /* Module vult de kolom */
    display: flex;
    justify-content: flex-start; /* Logo links uitlijnen */
}

/* 3. Geef het SVG logo de gewenste breedte */
.flex-alles-rij .et_pb_image_0_tb_header img {
    width: 60% !important; /* Jouw wens */
    max-width: 250px; /* Veiligheidsgrens zodat hij niet te groot wordt */
    height: auto !important; /* Behoud verhouding */
}