/* Alles gescoped onder .bwm-reviews — nooit iets van het thema aanraken. */
.bwm-reviews {
    --bwmr-accent: #0ea5e9;
    --bwmr-text: #334155;
    --bwmr-muted: #64748b;
    --bwmr-card-bg: #fff;
    --bwmr-border: #e2e8f0;
    --bwmr-radius: 12px;
    /* Geen --bwmr-font hier: staat die niet in de inline style, dan erft
       font-family van het thema. Dat is de bedoeling. */
    color: var(--bwmr-text);
    font-family: var(--bwmr-font, inherit);
}

.bwm-reviews__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.bwm-reviews__score { font-size: 1.5rem; font-weight: 600; }
.bwm-reviews__stars { color: var(--bwmr-accent); letter-spacing: .05em; }
.bwm-reviews__count { color: var(--bwmr-muted); font-size: .875rem; }

.bwm-reviews__grid { display: grid; gap: 1rem; }
.bwm-reviews--cols-2 .bwm-reviews__grid { grid-template-columns: repeat(2, 1fr); }
.bwm-reviews--cols-3 .bwm-reviews__grid { grid-template-columns: repeat(3, 1fr); }
.bwm-reviews--cols-4 .bwm-reviews__grid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 40em) {
    .bwm-reviews__grid { grid-template-columns: 1fr !important; }
}

.bwm-reviews__card {
    background: var(--bwmr-card-bg);
    border: 1px solid var(--bwmr-border);
    border-radius: var(--bwmr-radius);
    padding: 1rem;
}

.bwm-reviews__cardhead { display: flex; gap: .75rem; align-items: center; margin-bottom: .5rem; }
.bwm-reviews__meta { display: flex; flex-direction: column; min-width: 0; }
.bwm-reviews__author { font-weight: 600; }

/* Google-"G" in de rechterbovenhoek van de kaart. Het logo staat als data-URI
   in deze CSS in plaats van als inline SVG in elke kaart: zo staat het één keer
   in een gecachet bestand.

   margin-left:auto duwt het naar rechts en align-self:flex-start houdt het op
   de bovenrand, ook als de naam over twee regels loopt. Bewust géén absolute
   positionering: dan zou een lange naam eronderdoor schuiven. */
.bwm-reviews__gbadge {
    flex: 0 0 auto;
    margin-left: auto;
    align-self: flex-start;
    width: 1.25rem;
    height: 1.25rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.bwm-reviews__date { color: var(--bwmr-muted); font-size: .8125rem; }

.bwm-reviews__avatar {
    flex: 0 0 auto;
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bwmr-accent);
    color: #fff;
    font-weight: 600;
    font-size: .875rem;
}
/* Alleen de tint varieert; verzadiging en helderheid staan vast zodat de witte
   letter in élke kleur leesbaar blijft. */
.bwm-reviews__avatar--hued { background: hsl(var(--bwmr-avatar-hue, 200), 55%, 42%); }
.bwm-reviews__avatar--anon { background: var(--bwmr-muted); }

/* De echte profielfoto van de reviewer bij Google, als achtergrond op diezelfde
   cirkel. Laadt de foto niet (verlopen URL), dan blijft de gekleurde cirkel
   staan in plaats van een kapot-afbeelding-icoontje. cover snijdt een
   niet-vierkante foto bij in plaats van hem uit te rekken. */
.bwm-reviews__avatar--photo {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* De volledige review staat in de kaart en blijft leesbaar: past hij niet in
   vijf regels, dan scrolt het tekstvak. Bewust géén line-clamp meer — die
   verstopte het staartje van een lange review achter een "Lees meer"-knop.

   line-height staat hier VAST en erft niet van het thema: de max-height volgt
   er rechtstreeks uit, dus met een geërfde regelhoogte zou de onderrand midden
   in een regel vallen. Een site die meer of minder wil, overschrijft
   --bwmr-text-lines in eigen CSS. */
.bwm-reviews__text {
    max-height: calc(var(--bwmr-text-lines, 5) * 1.55em);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Ruimte voor de scrollbalk, zodat die niet op de tekst valt. */
    padding-right: .5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--bwmr-muted) transparent;
}
.bwm-reviews__text p { margin: 0; line-height: 1.55; }

/* Twee sets regels voor één balk, en dat is met opzet: scrollbar-width en
   -color hierboven zijn de standaard-eigenschappen (Chrome, Firefox, Safari
   18.2+), de webkit-pseudo's hieronder zijn de terugval voor oudere Safari.
   Zodra scrollbar-width gezet is negeert Chrome deze pseudo's — dat is geen
   fout, ze staan hier niet voor Chrome. */
.bwm-reviews__text::-webkit-scrollbar { width: 6px; }
.bwm-reviews__text::-webkit-scrollbar-track { background: transparent; }
.bwm-reviews__text::-webkit-scrollbar-thumb {
    background: var(--bwmr-muted);
    border-radius: 3px;
}

/* Een scrollend vak moet ook met het toetsenbord te bedienen zijn. De JS zet
   tabindex="0" zodra de tekst werkelijk overloopt; dit maakt die focus
   zichtbaar. */
.bwm-reviews__text:focus-visible {
    outline: 2px solid var(--bwmr-accent);
    outline-offset: 2px;
}

.bwm-reviews__reply {
    margin-top: .75rem;
    padding-left: .75rem;
    border-left: 3px solid var(--bwmr-border);
}
.bwm-reviews__replywho { font-size: .8125rem; color: var(--bwmr-muted); font-weight: 600; }
.bwm-reviews__reply p { margin: .25rem 0 0; font-size: .9375rem; }

.bwm-reviews__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-top: 1rem;
}
.bwm-reviews__attr { color: var(--bwmr-muted); font-size: .8125rem; }

.bwm-reviews__btn {
    display: inline-flex; align-items: center;
    min-height: 36px; padding: 0 1rem;
    background: var(--bwmr-accent); color: #fff;
    border-radius: 6px; text-decoration: none; font-weight: 500;
}
.bwm-reviews__btn:hover { opacity: .9; color: #fff; }

/* Slider: scroll-snap, geen JS-library. */
.bwm-reviews__viewport { overflow: hidden; }
.bwm-reviews__track {
    display: flex; gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: .25rem;
}
.bwm-reviews__track::-webkit-scrollbar { display: none; }
.bwm-reviews--slider .bwm-reviews__card {
    flex: 0 0 clamp(260px, 32%, 380px);
    scroll-snap-align: start;
}
@media (max-width: 40em) {
    .bwm-reviews--slider .bwm-reviews__card { flex-basis: 85%; }
}

.bwm-reviews__nav { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }
.bwm-reviews__arrow {
    width: 36px; height: 36px;
    border: 1px solid var(--bwmr-border);
    background: var(--bwmr-card-bg); color: var(--bwmr-text);
    border-radius: 6px; cursor: pointer; font-size: 1.25rem; line-height: 1;
}

/* Losse knop via [bwm_review_button]: inline-block zodat hij niet de volle
   breedte pakt en gewoon in een tekstkolom of footer past. */
.bwm-reviews--buttononly { display: inline-block; }

.bwm-reviews--badge { display: inline-block; }
.bwm-reviews--badge .bwm-reviews__head { margin-bottom: .25rem; }