/* ============================================================
   Divi Testimonial Slider – Divi 5 overrides + mobiele fix
   VirtuFlow patch v1.6.1-d5
   ============================================================ */

/* ── Kleuren: CSS variabelen zodat je maar 1 plek hoeft aan te passen ── */
.dts-shortcode-slider {
    --dts-text-color:        #333333;
    --dts-name-color:        #333333;
    --dts-company-color:     #888888;
    --dts-accent-color:      #cccccc;   /* quote-teken, sterren, pijlen */
    --dts-star-front:        #f4af27;
    --dts-star-back:         #dddddd;
    --dts-border-color:      transparent;
    --dts-border-radius:     8px;
    --dts-slide-padding:     30px;
}

/* ── Testimonial tekst ── */
.dts-shortcode-slider .et_pb_slide_content_testi,
.et-db .dts-shortcode-slider .et_pb_slide_content_testi,
#et-boc .dts-shortcode-slider .et_pb_slide_content_testi {
    color: var(--dts-text-color) !important;
    font-size: 16px !important;
    line-height: 1.7em !important;
}

/* ── Naam ── */
.dts-shortcode-slider .et_pb_slide_title_name_testi strong,
.et-db .dts-shortcode-slider .et_pb_slide_testi .et_pb_slide_title_name,
#et-boc .dts-shortcode-slider .et_pb_slide_testi .et_pb_slide_title_name {
    color: var(--dts-name-color) !important;
}

/* ── Bedrijfsnaam ── */
.dts-shortcode-slider .company_name,
.dts-shortcode-slider .company_name a,
.et_pb_testimonial_slider.dts-shortcode-slider .et_pb_slide_testi .company_name,
.et_pb_testimonial_slider.dts-shortcode-slider .et_pb_slide_testi .company_name a {
    color: var(--dts-company-color) !important;
}

/* ── Quote-teken ── */
.dts-shortcode-slider .et_pb_slide_testi:before {
    color: var(--dts-accent-color) !important;
}

/* ── Sterren ── */
.dts-shortcode-slider .b3-front-stars,
.dts-shortcode-slider .b3star_style1 .b3-front-stars,
.dts-shortcode-slider .b3star_style2 .b3-front-stars {
    color: var(--dts-star-front) !important;
}
.dts-shortcode-slider .b3-back-stars,
.dts-shortcode-slider .b3star_style1 .b3-back-stars,
.dts-shortcode-slider .b3star_style2 .b3-back-stars {
    color: var(--dts-star-back) !important;
}

/* ── Pijlen ── */
.dts-shortcode-slider .swiper-button-next-prev,
.dts-shortcode-slider .swiper-button-next:before,
.dts-shortcode-slider .swiper-button-prev:before {
    color: var(--dts-accent-color) !important;
}

/* ── Slide wrapper ── */
.dts-shortcode-slider .et_pb_container_testi {
    border: 1px solid var(--dts-border-color);
    border-radius: var(--dts-border-radius);
    padding: var(--dts-slide-padding);
    box-sizing: border-box;
}

/* ============================================================
   MOBIELE FIX – 1 testimonial per keer, leesbare layout
   ============================================================ */

/* Swiper slides: nooit breder dan de container */
.dts-shortcode-slider .swiper-container {
    overflow: hidden;
    width: 100%;
}
.dts-shortcode-slider .swiper-wrapper {
    display: flex;
    align-items: stretch;
}
.dts-shortcode-slider .swiper-slide {
    width: 100% !important;   /* altijd 1 slide breed */
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Afbeelding naast/onder tekst netjes houden */
.dts-shortcode-slider .et_pb_container_testi {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.dts-shortcode-slider .et_pb_slide_description_testi {
    flex: 1;
    min-width: 0;   /* voorkomt overflow */
}
.dts-shortcode-slider .et_pb_slide_image_testi_responsive {
    flex-shrink: 0;
}

@media only screen and (max-width: 768px) {
    /* Op mobiel: alles onder elkaar, tekst gecentreerd */
    .dts-shortcode-slider .et_pb_container_testi {
        flex-direction: column;
        text-align: center;
        padding: 20px 15px;
        gap: 12px;
    }
    .dts-shortcode-slider .et_pb_slide_image_testi_responsive img {
        width: 80px !important;
        height: 80px !important;
    }
    .dts-shortcode-slider .et_pb_slide_content_testi {
        font-size: 15px !important;
    }
    /* Pijlen op mobiel zichtbaar houden */
    .dts-shortcode-slider .swiper-button-next-prev {
        display: block !important;
        opacity: 1 !important;
    }
    /* Quote-teken kleiner op mobiel */
    .dts-shortcode-slider .et_pb_slide_testi:before {
        font-size: 120px !important;
    }
}

@media only screen and (max-width: 480px) {
    .dts-shortcode-slider .et_pb_container_testi {
        padding: 15px 10px;
    }
    .dts-shortcode-slider .et_pb_slide_content_testi {
        font-size: 14px !important;
        line-height: 1.6em !important;
    }
}

/* ============================================================
   Multi-column + kleur via inline CSS vars
   ============================================================ */

/* Achtergrondkleur per slide */
.dts-shortcode-slider .et_pb_container_testi {
    background-color: var(--dts-bg-color, transparent);
}

/* Bij meerdere kolommen: slides niet centreren maar naast elkaar laten staan */
.dts-shortcode-slider .swiper-wrapper {
    align-items: stretch;
}
.dts-shortcode-slider .swiper-slide {
    height: auto;        /* gelijke hoogte bij meerdere kolommen */
    box-sizing: border-box;
}
.dts-shortcode-slider .et_pb_container_testi {
    height: 100%;        /* slide-inhoud vult volledige hoogte */
    box-sizing: border-box;
}

/* Tekst alignment bij meerdere kolommen: links ipv gecentreerd */
.dts-shortcode-slider.dts-cols-2 .et_pb_slide_testi,
.dts-shortcode-slider.dts-cols-3 .et_pb_slide_testi,
.et-db .dts-shortcode-slider.dts-cols-2 .et_pb_slide_testi,
.et-db .dts-shortcode-slider.dts-cols-3 .et_pb_slide_testi,
#et-boc .dts-shortcode-slider.dts-cols-2 .et_pb_slide_testi,
#et-boc .dts-shortcode-slider.dts-cols-3 .et_pb_slide_testi {
    text-align: left !important;
}