/**
 * Kracht Internet Marketing - Google Reviews
 * Stylesheet
 *
 * Deze stylesheet is zelfvoorzienend: de plugin ziet er goed uit
 * ook zonder dat het thema (of Bootstrap) extra CSS aanlevert.
 *
 * Alle regels zijn bewust binnen de plugin-wrappers
 * (.google-reviews-wrapper / .google-reviews-summary-bar) gehouden,
 * zodat ze niets op de rest van de site beïnvloeden én eenvoudig
 * te overschrijven zijn vanuit je eigen thema-stylesheet.
 */

/* ============================================================
   1. Swiper-navigatie
   ============================================================ */

/* De wrapper is het positie-anker voor de navigatieknoppen, zodat
   die buiten de (afkappende) slider over de rand geplaatst kunnen worden. */
.google-reviews-wrapper {
    position: relative;
}

/* Verberg de standaard Swiper-pijlen.
   Oudere Swiper-versies tonen die via ::after, nieuwere versies
   voegen automatisch een <svg class="swiper-navigation-icon"> toe.
   Beide verbergen we, zodat alleen het Font Awesome-icoon overblijft. */
.google-reviews-wrapper .swiper-button-prev::after,
.google-reviews-wrapper .swiper-button-next::after {
    display: none;
}

.google-reviews-wrapper .swiper-button-prev .swiper-navigation-icon,
.google-reviews-wrapper .swiper-button-next .swiper-navigation-icon {
    display: none;
}

/* Pijlen verbergen op mobiel */
@media (max-width: 767px) {
    .google-reviews-wrapper .swiper-button-prev,
    .google-reviews-wrapper .swiper-button-next {
        display: none !important;
    }
}

/* Pijlen in een cirkel */
.google-reviews-wrapper .swiper-button-prev,
.google-reviews-wrapper .swiper-button-next {
    position: absolute;
    top: 50%;
    z-index: 10;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    color: inherit;
}

/* Knoppen voor de helft over de rand van de kaarten:
   het midden van de knop ligt precies op de zijkant van de slider. */
.google-reviews-wrapper .swiper-button-prev {
    left: 0;
    right: auto;
    transform: translate(-50%, -50%);
}

.google-reviews-wrapper .swiper-button-next {
    left: auto;
    right: 0;
    transform: translate(50%, -50%);
}

.google-reviews-wrapper .swiper-button-prev:hover,
.google-reviews-wrapper .swiper-button-next:hover {
    background-color: #f5f5f5;
}

/* Gelijke hoogte slides */
.google-reviews-wrapper .swiper-wrapper {
    align-items: stretch;
}

.google-reviews-wrapper .swiper-slide {
    height: auto;
}

.google-reviews-wrapper .swiper-slide .item-recensie {
    height: 100%;
}

/* ============================================================
   2. Presentatie (voorheen via de thema-stylesheet aangeroepen)
   ------------------------------------------------------------
   Dit zijn de regels die voorheen ontbraken in de plugin.
   Pas hier (of in je eigen stylesheet) de waardes aan naar wens.
   ============================================================ */

/* Gele sterren — officieel Google-geel (#FBBC04) */
.google-reviews-wrapper .text-yellow,
.google-reviews-summary-bar .text-yellow {
    color: #fbbc04;
}

/* Review-kaart: padding zodat de tekst niet tegen de rand plakt,
   plus een lichtgrijze achtergrond. Gebruikt de --bg-light-grey
   variabele wanneer die in het thema bestaat, anders een algemene
   lichtgrijze kleur. */
.google-reviews-wrapper .item-recensie {
    padding: 2.5rem 1.5rem;
    background-color: var(--bg-light-grey, #f5f5f5);
}

/* Recensietekst iets kleiner weergeven en lange reviews afkappen
   na een vast aantal regels (met …). Wil je meer of minder tekst
   tonen, pas dan het getal bij -webkit-line-clamp én line-clamp aan. */
.google-reviews-wrapper .recensie-tekst {
    font-size: 0.8rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}

/* ============================================================
   3. Layout-fallbacks
   ------------------------------------------------------------
   Vangnet voor de hulpklassen (afkomstig uit Bootstrap) die in
   de HTML gebruikt worden. Staat Bootstrap geladen, dan zijn de
   waardes identiek en verandert er niets. Ontbreekt Bootstrap,
   dan blijft de layout toch correct.
   ============================================================ */

.google-reviews-wrapper .d-flex,
.google-reviews-summary-bar .d-flex {
    display: flex;
}

.google-reviews-wrapper .d-block,
.google-reviews-summary-bar .d-block {
    display: block;
}

.google-reviews-wrapper .align-items-center,
.google-reviews-summary-bar .align-items-center {
    align-items: center;
}

.google-reviews-wrapper .gap-1,
.google-reviews-summary-bar .gap-1 {
    gap: 0.25rem;
}

.google-reviews-wrapper .gap-2,
.google-reviews-summary-bar .gap-2 {
    gap: 0.5rem;
}

.google-reviews-wrapper .gap-3,
.google-reviews-summary-bar .gap-3 {
    gap: 1rem;
}

.google-reviews-wrapper .list-unstyled,
.google-reviews-summary-bar .list-unstyled {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.google-reviews-wrapper .list-inline-item,
.google-reviews-summary-bar .list-inline-item {
    display: inline-flex;
}

.google-reviews-wrapper .rounded {
    border-radius: 0.375rem;
}

.google-reviews-wrapper .h-100 {
    height: 100%;
}

.google-reviews-wrapper .fw-bold,
.google-reviews-summary-bar .fw-bold {
    font-weight: 700;
}

.google-reviews-wrapper .mb-2 {
    margin-bottom: 0.5rem;
}

.google-reviews-wrapper .mt-3 {
    margin-top: 1rem;
}