/* WPBakery Image Carousel (vc_images_carousel) — full width.
   Wordt alleen geladen als de shortcode op de pagina staat (zie inc/enqueue.php).

   Let op: dit core-element zet z'n breedtes via JS in px. We overrulen met
   !important. De slideline = aantal slides × viewport; pas --tt-carousel-slides
   aan als een carousel een ander aantal afbeeldingen heeft. */

.wpb_images_carousel {
    --tt-carousel-slides: 4;
}

/* Ruimte boven de carousel als het niet het eerste element is. */
.wpb_images_carousel:not(:first-child) {
    margin-top: 56px;
}

/* Viewport full width i.p.v. de door JS gezette vaste px-breedte.
   Flex-kolom zodat de indicators (in de DOM vóór de afbeelding) via order
   ná de afbeelding in de normale flow komen en ruimte innemen. */
.wpb_images_carousel .vc_images_carousel {
    width: 100% !important;
    display: flex;
    flex-direction: column;
}

/* Track = aantal slides × viewport. De inline item-breedte (bv. 25%) en de
   left-offset (% van de slideline) blijven daardoor automatisch kloppen. */
.wpb_images_carousel .vc_carousel-slideline {
    width: calc(var(--tt-carousel-slides, 4) * 100%) !important;
}

.wpb_images_carousel .vc_carousel-inner {
    width: 100%;
    order: 1;
}

/* Item vult de viewport; hoogte op basis van de afbeelding. */
.wpb_images_carousel .vc_item {
    height: auto !important;
}

.wpb_images_carousel .vc_item .vc_inner,
.wpb_images_carousel .vc_item .vc_inner a {
    display: block;
}

.wpb_images_carousel .vc_item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 15px;
}

/* Navigatiepijltjes: vervang de icon-font door de eigen SVG (oranje chevron). */

/* Oude icon-font verbergen (staat op display:block via parent-thema → !important). */
.wpb_images_carousel .vc_carousel-control .icon-prev,
.wpb_images_carousel .vc_carousel-control .icon-next {
    display: none !important;
}

.wpb_images_carousel .vc_carousel-control {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 39px;
    /* VC zet standaard opacity 0.5 — volledig zichtbaar maken. */
    opacity: 1 !important;
    text-decoration: none;
    /* Verticaal centreren t.o.v. de carousel. */
    top: 50%;
    transform: translateY(-50%);
}

/* Pijltjes 24px buiten de afbeelding plaatsen (links en rechts).
   !important omdat VC core de left/right van de controls zet. */
.wpb_images_carousel .vc_left.vc_carousel-control {
    left: auto !important;
    right: 100% !important;
    margin-right: 24px !important;
    width: auto;
}

.wpb_images_carousel .vc_right.vc_carousel-control {
    left: 100% !important;
    right: auto !important;
    margin-left: 24px !important;
}

.wpb_images_carousel .vc_carousel-control::before {
    content: "";
    display: block;
    width: 22px;
    height: 39px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='39' viewBox='0 0 22 39' fill='none'%3E%3Cpath d='M2.0625 0.429688C2.49219 0 3.09375 0 3.52344 0.429688L21.5703 18.3906C21.9141 18.8203 21.9141 19.4219 21.5703 19.8516L3.52344 37.8125C3.09375 38.2422 2.49219 38.2422 2.0625 37.8125L0.34375 36.1797C0 35.75 0 35.0625 0.34375 34.7188L15.8984 19.0781L0.34375 3.52344C0 3.17969 0 2.49219 0.34375 2.0625L2.0625 0.429688Z' fill='%23F3950B'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Linker-pijl: dezelfde SVG gespiegeld zodat hij naar links wijst. */
.wpb_images_carousel .vc_left.vc_carousel-control::before {
    transform: scaleX(-1);
}

/* Indicator-bolletjes. VC centreert de <ol> via een berekende margin-left;
   we zetten 'm op flex-centrering zodat het blijft kloppen met andere maten. */
.wpb_images_carousel .vc_carousel-indicators {
    /* In de normale flow (neemt ruimte in → wrapper groeit mee), ná de
       afbeelding via order. 15px onder de (hoogste) foto. */
    position: static !important;
    order: 2;
    width: auto !important;
    margin: 15px 0 0 !important;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
}

.wpb_images_carousel .vc_carousel-indicators li {
    width: 8px !important;
    height: 8px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--orange, #F3950B) !important;
    text-indent: -9999px;
    transition: width 0.25s ease, border-radius 0.25s ease;
}

/* Actief: bredere pill. */
.wpb_images_carousel .vc_carousel-indicators li.vc_active {
    width: 20px !important;
    border-radius: 30px !important;
}