/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.2
Text Domain:  Avada
*/
.horizontalchecklist {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.horizontalchecklist .fusion-li-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.horizontalchecklist .icon-wrapper {
    margin-right: 4px;
}

.horizontalchecklist .fusion-li-item-content {
    margin-left: 0 !important;
}
/* Fullwidth sectie binnen Avada container */
.fullwidth-section {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
}

/* Optioneel: content zelf weer centreren max 1200px o.i.d. */
.fullwidth-section > .fullwidth-inner {
    max-width: 1200px;   /* pas aan aan jouw site width */
    margin: 0 auto;
    padding: 0 30px;     /* horizontale padding binnen de fullwidth */
}

/* Mobiel & kleinere tablets: tekst/content met marge, achtergrond blijft fullwidth */
@media (max-width: 1024px) {
    /* Alleen de binnenste content krijgt marge, achtergrond blijft 100vw */
    .fullwidth-section > .fullwidth-inner,
    .fullwidth-container {
        padding-left: 20px;    /* veilige marge links */
        padding-right: 20px;   /* veilige marge rechts */
        box-sizing: border-box;
    }

    .horizontalchecklist {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
 
    .horizontalchecklist .fusion-li-item {
        justify-content: flex-start;
    }
}

/* ========================================
   Ontruiming-sectie: stacking van blok en foto's
   ======================================== */

/* Parent column container - zorg voor juiste stacking context */
.fusion-builder-column-3 {
    position: relative;
    z-index: 1;
}

/* Hele eerste rij met het groene/blauwe vlak */
.fusion-builder-row-inner.fusion-flex-align-items-center {
    position: relative !important;
    z-index: 100 !important;
    isolation: isolate; /* creëert nieuwe stacking context */
}

/* Tweede rij met de twee foto's - MOET lager zijn */
.fusion-builder-row-inner.fusion-flex-align-items-flex-end {
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate; /* creëert nieuwe stacking context */
}

/* Kolom met het groene/blauwe headerblok - BOVENOP */
.ontruiming-header-box {
    position: relative !important;
    z-index: 200 !important;
    --awb-z-index: 200 !important;
    isolation: isolate !important;
}

.ontruiming-header-box .fusion-column-wrapper {
    position: relative !important;
    z-index: 200 !important;
    isolation: isolate !important;
}

.ontruiming-header-box * {
    position: relative !important;
    z-index: 200 !important;
}

/* Fotokolommen die erachter moeten vallen - ONDER */
.ontruiming-foto-achter {
    position: relative !important;
    z-index: 1 !important;
    --awb-z-index: 1 !important;
}

.ontruiming-foto-achter .fusion-column-wrapper {
    position: relative !important;
    z-index: 1 !important;
}

/* Zorg dat ALLE elementen binnen de foto kolommen onder het headerblok vallen */
.ontruiming-foto-achter .fusion-image-element,
.ontruiming-foto-achter .fusion-imageframe,
.ontruiming-foto-achter .fusion-imageframe img,
.ontruiming-foto-achter img {
    position: relative !important;
    z-index: 1 !important;
}

/* ========================================
   Voor/Na labels op foto's
   ======================================== */

/* Zorg dat de imageframe relatief is voor absolute positioning
   en dat content buiten de rand zichtbaar mag zijn (voor het label) */
.fusion-imageframe.tagvoor,
.fusion-imageframe.tagna {
    position: relative !important;
    overflow: visible !important;
}

/* Herstel afgeronde hoeken voor de foto's zelf */
.fusion-imageframe.tagvoor img,
.fusion-imageframe.tagna img {
    border-radius: 10px !important;
}

/* "Voor" label - half overlappend aan de onderkant */
.fusion-imageframe.tagvoor::after {
    content: "Voor";
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #5BC0BE;
    color: #0f172a;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0;
    z-index: 10;
    white-space: nowrap;
    pointer-events: none;
}

/* "Na" label - half overlappend aan de onderkant */
.fusion-imageframe.tagna::after {
    content: "Na";
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #5BC0BE;
    color: #0f172a;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0;
    z-index: 10;
    white-space: nowrap;
    pointer-events: none;
}

.reviewshadow {
    box-shadow: 0px 4px 34px 0px #00000033;
}