/* Reviews module — public site styling.
   Loaded by the shared _ReviewForm partial (so it travels with the form wherever it is used:
   the /reviews page and the homepage "Schrijf een review" modal). Brand-aware via var(--brand-*),
   so it looks right in every template without per-template CSS. */

/* ── Star rating picker (form) ─────────────────────────────────────────────
   Radio inputs laid out row-reverse so hovering/selecting a star also fills the
   ones before it (which come after it in the DOM). Pure CSS, no JS needed. */
.wf-star-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.wf-star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.wf-star-input label {
  font-size: 1.7rem; line-height: 1; color: #d5d5d5; cursor: pointer;
  transition: color .12s ease, transform .12s ease;
}
.wf-star-input label:hover { transform: scale(1.12); }
.wf-star-input input:checked ~ label,
.wf-star-input label:hover,
.wf-star-input label:hover ~ label { color: #f5a623; }
.wf-star-input input:focus-visible ~ label { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* ── Homepage review block helpers ─────────────────────────────────────────
   Gold stars (same tone as the /reviews cards, instead of a per-template gradient)
   and an optional thin border around each testimonial slide, so the homepage block
   matches the overview page. */
.wf-stars-gold { color: #f5a623 !important; -webkit-text-fill-color: #f5a623; background: none !important; }
/* Homepage teaser: clamp a review to ~4 lines so one long review can't blow up the height of the
   coverflow slider (all slides size to the tallest one). The full text stays on the /reviews page. */
.wf-review-clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
}

/* Homepage review slider (business1 coverflow, testimonials-style-04): give every slide one fixed
   height and vertically center its content. Without this each card is as tall as its own text, so a
   long review towers over the short ones as it rotates to the back. With a uniform height the receding
   side cards line up at the same height — and the coverflow's 3D depth keeps them lower than the
   enlarged active card in the middle. 330px comfortably fits a 4-line review + name + role. */
/* Selector matches Crafto's own `.testimonials-style-04.swiper-horizontal-3d .swiper-slide` (which sets
   height:100%) at equal specificity; reviews.css loads after style.css, so our fixed height wins. */
.testimonials-style-04.swiper-horizontal-3d .swiper-slide { height: 360px; display: flex; align-items: center; }
.testimonials-style-04 .swiper-slide > div { width: 100%; }

/*  Lucht links en rechts, zodat de twee kaarten NAAST de actieve helemaal in beeld passen.
    De ronding stond er wel degelijk op (in de browser nagemeten: 22px op .wf-review-skin), maar
    die twee kaarten staken een paar pixels buiten het venster van de slider uit en `.swiper`
    klipt met overflow:hidden — precies over hun buitenste hoeken heen. Je zag dus een kaart met
    rechte hoeken terwijl de middelste netjes rond was. Swiper rekent de kaartbreedte vanaf de
    binnenkant van deze opvulling, maar klipt pas op de buitenrand: die ~30px is de speling
    waarbinnen de hoeken vallen. (Jenny 29-08-2026.) */
.testimonials-style-04 { padding-left: 30px; padding-right: 30px; }

/*  Mobiel: één kaart in beeld (Crafto zet de buurkaarten daar op opacity 0), dus de pijlen sturen
    niets zichtbaars aan. Ze landden bovendien pal op de onderste hoeken van de kaart. Weg ermee —
    vegen werkt gewoon. Hier staat óók Crafto's eigen mobiele opvulling (0 15px) weer terug: die
    zou anders verliezen van de regel hierboven, want reviews.css laadt ná style.css. */
@media (max-width: 767px) {
    .testimonials-style-04 { padding-left: 15px; padding-right: 15px; }
    .testimonials-style-04 .swiper-button-previous-nav,
    .testimonials-style-04 .swiper-button-next-nav { display: none; }
}

/* Homepage review slider (beauty1, review-style-10): three bordered cards side by side. The card
   markup already carries `h-100`, but Swiper puts `height: 100%` on the slide around it — a percentage
   measured against a wrapper that has no height of its own yet, so it resolves to auto. The card then
   had nothing to stretch to and every card ended up as tall as its own review text. `height: auto`
   hands the sizing back to the flex row: the wrapper takes the height of the tallest card and `h-100`
   pulls the others up to match. Higher specificity than Swiper's own `.swiper-slide`, so load order
   does not matter. */
.bty-reviews .swiper-slide { height: auto; }
/* The two buttons under the block ("Schrijf een review" / "Bekijk alle reviews") broke across two
   lines because nothing stopped their label from wrapping — Crafto's `.btn` sets no white-space. Same
   treatment the beauty1 navigation buttons already get. The row around them keeps `flex-wrap`, so on a
   narrow screen the buttons stack below each other instead of breaking mid-label. */
.bty-reviews .btn { white-space: nowrap; }
/*  Het staande naampaneel (Crafto review-style-10) zet de naam in `writing-mode: vertical-lr`. De
    hoogte van dat paneel is daarmee de LÉNGTE van de naam — en dus, via `h-100` op de kaart, de
    hoogte van álle kaarten in de rij. Bij Floreer Meer staan de review-koppen in het naamveld
    (zo uit de Perfectmanage-import gekomen); één naam van 114 tekens werd 861px lang en rekte de
    hele carrousel uit tot kaarten van bijna 900px met een enorm leeg vlak eronder.
    Afkappen dus: 220px is ruim meer dan een gewone naam nodig heeft en blijft onder de hoogte die
    de reviewtekst zelf oplevert (4 geklemde regels + sterren + vulling ≈ 280px), zodat vanaf nu de
    tekst de kaarthoogte bepaalt en nooit meer de naam. In staande schrijfrichting loopt de
    tekstregel van boven naar beneden, dus `white-space: nowrap` + `text-overflow` geven een echt
    beletselteken onderaan. */
.bty-rev-card .vertical-title-center .title {
  max-height: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Border hugs only the message: inset left/right past the swiper arrows (which sit at the slider
   edges), so the arrows always stay OUTSIDE the border regardless of slider width. */
.wf-home-review { border: 1px solid #ececec; border-radius: 10px; padding: 28px; margin-inline: 56px; }
@media (max-width: 575.98px) { .wf-home-review { margin-inline: 6px; padding: 20px; } }
/* On a dark/photo block (wf-on-dark) the section text goes white, so make the outline "Bekijk alle
   reviews" button readable too: white outline + text, inverting to a solid white fill on hover. */
.wf-on-dark .wf-review-morebtn { border-color: rgba(255, 255, 255, .6) !important; color: #fff !important; background: transparent !important; }
.wf-on-dark .wf-review-morebtn:hover { background: #fff !important; color: #1f2937 !important; border-color: #fff !important; }

/* Small, muted "via Google" source line for homepage review blocks that have no Bootstrap-icons loaded
   (e.g. business2). Pairs with the coloured .wf-google-g wordmark. */
.wf-google-inline { font-size: .8rem; color: #8a8a8a; margin-top: 6px; }

/* ── Review cards (grid on the /reviews page) ──────────────────────────────────
   Uniform grid: every card has the SAME fixed height so the page reads as a tidy 3-column matrix
   (no more masonry). The review text is clamped to 4 lines and the meta (name/role/source) is pinned
   to the bottom; a longer review opens in full via the click-to-modal. The columns come from Bootstrap
   `row row-cols-1 row-cols-md-2 row-cols-lg-3`. */
.wf-reviews-grid .wf-review-card { height: 300px; cursor: pointer; overflow: hidden; }

.wf-review-card {
  background: #fff; border: 1px solid #ececec; border-radius: 10px;
  padding: 28px; height: 100%; display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.wf-review-card:hover { box-shadow: 0 12px 30px rgba(0,0,0,.08); transform: translateY(-3px); }

/* ── Coverflow-carrousel op de voorpagina (business1) ─────────────────────────
   Daar is .wf-review-card tegelijk de swiper-slide, en die krijgt van de coverflow een
   3D-draai mee. .wf-review-skin draagt het witte vlak, de rand en de ronding; de slide
   zelf is leeg. De maten (28px, rand) zijn dezelfde als hierboven, zodat de kaart even
   groot blijft.

   LET OP — de reden die hier op 28-08-2026 bij stond klopte niet. Er stond dat Chrome de
   ronde hoeken van een 3D-gedraaid element niet tekent. Dat doet hij wél: op 29-08 in de
   browser nagemeten dat de kaarten naast de actieve gewoon hun 22px meekregen, maar dat ze
   een paar pixels buiten het venster van de slider staken en door de overflow:hidden van
   .swiper recht werden afgesneden. Die echte oorzaak is opgelost met de opvulling bij
   .testimonials-style-04 hierboven. De skin is blijven staan omdat hij inmiddels ook de
   hoogte en de vulling draagt — hij is niet nodig vóór de ronding. */
.testimonials-style-04 .wf-review-card {
  background: transparent !important; border-color: transparent !important;
  padding: 1px; box-shadow: none !important;
}
.testimonials-style-04 .wf-review-card:hover { transform: none; }
.testimonials-style-04 .wf-review-skin {
  height: 100%; padding: 28px;
  background: #fff; border: 1px solid #ececec;
  border-radius: var(--wf-radius-card, 10px);
}
/* Alleen de actieve kaart draagt de slagschaduw — precies zoals Crafto dat op de slide deed. */
.testimonials-style-04 .swiper-slide-active .wf-review-skin { box-shadow: 0 0 60px rgba(0, 0, 0, .17); }
.wf-review-card:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.wf-review-stars { color: #f5a623; font-size: 1rem; letter-spacing: 1px; margin-bottom: 12px; }
/* Clamp the card text to 4 lines; the meta sits below via flex, pinned to the card bottom. */
.wf-review-text {
  color: #4a4a4a; line-height: 1.7; flex: 0 1 auto; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
}
/* margin-top:auto pins the meta to the card bottom; the clamped text never grows into it. */
.wf-review-meta { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.wf-review-avatar {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: var(--brand-primary); color: var(--brand-on-primary);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.wf-review-name { font-weight: 700; color: var(--brand-ink); line-height: 1.2; }
.wf-review-role { font-size: max(12px, .85rem); color: #8a8a8a; margin-top: -3px; }
/* Source shown as a coloured pill: Google multicolour wordmark / Trustpilot green star. On the card it sits
   bottom-right of the meta row; the very same pill is cloned into the detail modal. */
.wf-source-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: max(12px, .78rem); font-weight: 700; line-height: 1; white-space: nowrap;
  border: 1px solid #e6e6e6; background: #fff;
}
.wf-source-pill--tp { background: #f0faf6; border-color: #bfe9d7; color: #0b6b4f; }
.wf-source-pill--tp .bi-star-fill,
.wf-source-pill--tp .wf-tp-star { color: #00b67a; }
/* Reviewkaarten die nog achter "Meer reviews tonen" staan. Los van d-none, dat is van het bronfilter. */
.wf-reviews-grid .wf-rv-later { display: none !important; }

/* Tripadvisor: hun eigen groen, zoals Trustpilot hierboven. */
.wf-source-pill--ta { background: #eefaf4; border-color: #b8e6cf; color: #00764a; }
.wf-source-pill--ta .bi { color: #00aa6c; }
.wf-review-meta .wf-source-pill { margin-left: auto; align-self: flex-end; }
.wf-google-g { font-weight: 700; }
.wf-google-g b:nth-child(1){color:#4285F4} .wf-google-g b:nth-child(2){color:#EA4335}
.wf-google-g b:nth-child(3){color:#FBBC05} .wf-google-g b:nth-child(4){color:#4285F4}
.wf-google-g b:nth-child(5){color:#34A853} .wf-google-g b:nth-child(6){color:#EA4335}

/* Source filter tabs above the grid (Bootstrap nav-pills; brand colour on the active tab). */
.wf-review-tabs .nav-link { color: #4a4a4a; border: 1px solid #e2e2e2; padding: .35rem 1.1rem; border-radius: 999px; cursor: pointer; }
.wf-review-tabs .nav-link.active { background: var(--brand-primary); color: var(--brand-on-primary); border-color: var(--brand-primary); }

/* Detail modal: same shell as the site's other modals (border-0, rounded-3, centered). Generous 70px
   top/bottom and 40px left/right breathing room; the review is shown in real paragraphs. */
.wf-review-modal .modal-content { position: relative; }
/* Breder dan de standaard modal-lg (800px) op desktop, zodat een lange review lekker leest. */
@media (min-width: 992px)  { .wf-review-modal .modal-dialog { max-width: 940px; } }
@media (min-width: 1200px) { .wf-review-modal .modal-dialog { max-width: 1080px; } }
.wf-review-modal-body { padding: 70px 40px; }
.wf-review-modal-x { position: absolute; top: 22px; right: 22px; z-index: 2; }
.wf-review-modal .wf-review-stars { font-size: 1.15rem; }
.wf-review-modal-text p { color: #4a4a4a; line-height: 1.8; font-size: 1.05rem; margin-bottom: 1rem; }
.wf-review-modal-text p:last-child { margin-bottom: 0; }
.wf-review-modal-foot { margin-top: 28px; padding-top: 20px; border-top: 1px solid #ececec; display: flex; align-items: center; gap: 14px; }
@media (max-width: 575.98px) { .wf-review-modal-body { padding: 40px 22px; } }

/* ── Donkere template (data-bs-theme="dark") ─────────────────────────────────────────
   De review-kaarten, filter-tabs en detailmodal zijn voor een LICHTE sectie ontworpen
   (wit + donkere tekst). Op de donkere template volgen ze het gedeelde donkere kaart-
   oppervlak met lichte tekst, zodat ze niet als harde witte vlakken op de donkere
   achtergrond staan. Gedeeld bestand: --wf-dark-card/--site-dark-bg komen van de actieve
   template; de fallbacks houden het ook goed als een template die variabelen niet zet. */
[data-bs-theme="dark"] .wf-review-card,
[data-bs-theme="dark"] .testimonials-style-04 .wf-review-skin,
[data-bs-theme="dark"] .wf-home-review {
  background: var(--wf-dark-card, color-mix(in srgb, var(--brand-secondary, #8a8a8a) 14%, var(--site-dark-bg, #16201b))) !important;
  border-color: rgba(255, 255, 255, .08) !important;
}
[data-bs-theme="dark"] .wf-review-card:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
[data-bs-theme="dark"] .wf-review-text { color: #cfd2d8 !important; }
[data-bs-theme="dark"] .wf-review-name { color: #f1efec !important; }
[data-bs-theme="dark"] .wf-review-role { color: #9aa0a8 !important; }
/* Filter-tabs: leesbaar op de donkere sectie (actieve tab houdt de merkkleur). */
/* Geplakte reviewwidget (bv. Elfsight) direct onder onze eigen reviewkaarten, zoals in de voorpaginablokken:
   zonder deze marge plakt de widget tegen de laatste kaart. :has() zodat het in elke template werkt zonder
   de templatemarkup aan te passen; op /reviews staat de widget boven de lijst en geldt dit niet. */
.row:has(.wf-review-card) + .wf-extern-reviews { margin-top: 60px; }
@media (max-width: 767.98px) { .row:has(.wf-review-card) + .wf-extern-reviews { margin-top: 40px; } }

[data-bs-theme="dark"] .wf-review-tabs .nav-link { color: #cfd2d8; border-color: rgba(255, 255, 255, .22); }
/* Actieve tab op donker: niet op de merkkleur leunen. Frenque heeft lichtgrijs als primaire kleur en
   --brand-on-primary wit; dan viel de tekst weg. Wit met donkere tekst is op elke donkere template leesbaar. */
[data-bs-theme="dark"] .wf-review-tabs .nav-link.active { background: #fff; border-color: #fff; color: #16181d; }
[data-bs-theme="dark"] .wf-review-tabs .nav-link:not(.active):hover { color: #fff; border-color: rgba(255, 255, 255, .5); }
/* Detailmodal: tekst licht op de donkere modal. */
[data-bs-theme="dark"] .wf-review-modal-text p { color: #cfd2d8; }
[data-bs-theme="dark"] .wf-review-modal-foot { border-top-color: rgba(255, 255, 255, .12); }

/* ── Reviews op de voorpagina ZONDER carrousel (minder dan vijf) ─────────────
   De coverflow-slider heeft minstens vijf kaarten nodig om zijn kring te vullen; daaronder valt er
   periodiek een gat rechts van de actieve kaart (nagemeten 29-08-2026: bij vier om en om, bij drie
   of minder altijd). Onder die grens toont _Reviews_Home.cshtml de kaarten daarom gewoon naast
   elkaar. Dat trof twee derde van alle sites met reviews — de meeste klanten hebben er één of twee.

   Deze kaarten erven de opmaak van de reviews-overzichtspagina, en die zet een vaste ronding van
   10px. Op de voorpagina moet de kaart de ronding van de KLANT volgen, net als elk ander blok daar.
   Bewust gescoped op .wf-reviews-rij, zodat het overzicht op /reviews onaangeroerd blijft. */
.wf-reviews-rij .wf-review-card { border-radius: var(--wf-radius-card, 10px); }

/* Even hoog naast elkaar, ook als de ene review twee regels is en de andere zes. De tekst zelf
   wordt al afgekapt door .wf-review-clamp. */
.wf-reviews-rij .wf-review-skin { height: 100%; }

/* ── Scoreblok per bron (/reviews, _ReviewSourceScores) ─────────────────────────
   Eén kaartje per bron (Google, eigen reviews) met cijfer, sterren, aantal en een knop om een review
   te geven. Zelfde kaartvlak als de reviewkaarten eronder (wit, 1px rand, 10px ronding), zodat het
   blok erbij hoort; gecentreerd en op mobiel onder elkaar over de volle breedte. */
/*  Scorekaarten (Tom 16-09-2026): de rij bovenaan is een Bootstrap-rij (col-6 bij twee bronnen, col-4
    bij drie); bij een bron staat de kaart als eerste kaart in het reviewraster. De kaart vult zijn kolom. */
.wf-review-score {
  height: 100%; background: #fff; border: 1px solid #ececec; border-radius: 10px;
  padding: 22px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.wf-review-score-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
.wf-review-score-actie { display: flex; flex-direction: column; align-items: flex-start; }
.wf-review-scorecol .wf-review-score { justify-content: center; }
.wf-review-score-hint { margin: 8px 0 0; font-size: max(12px, .8rem); line-height: 1.4; color: #8a8a8a; }
.wf-review-score-hint a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.wf-review-score-hint a:hover { color: var(--brand-primary); }
/*  Twee bronnen: brede, langwerpige kaarten. Cijfer links, knop rechts onderaan. */
@media (min-width: 768px) {
  .wf-review-scores.-breed .wf-review-score { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 26px 30px; }
  .wf-review-scores.-breed .wf-review-score-bron { width: auto; }
  .wf-review-scores.-breed .wf-review-score-info { width: auto; flex: 1 1 auto; }
  .wf-review-scores.-breed .wf-review-score-actie { align-items: flex-end; text-align: right; flex: 0 0 auto; }
}
.wf-review-score-bron { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 1rem; }
.wf-review-score-naam { font-weight: 700; color: var(--brand-ink); }
.wf-review-score-ext { margin-left: auto; color: #8a8a8a; font-size: .9rem; transition: color .15s ease; }
.wf-review-score-ext:hover { color: var(--brand-primary); }
.wf-review-score-cijfer { display: flex; align-items: baseline; gap: 2px; margin-top: 6px; line-height: 1; }
.wf-review-score-cijfer b { font-size: 2rem; font-weight: 700; color: var(--brand-ink); }
.wf-review-score-cijfer span { font-size: 1rem; color: #8a8a8a; }
.wf-review-score .wf-review-stars { margin-bottom: 0; }
.wf-review-score-aantal { font-size: max(12px, .85rem); color: #8a8a8a; }
.wf-review-score-btn {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--brand-primary);
  color: var(--brand-primary); font-size: max(12px, .85rem); font-weight: 600; line-height: 1.2; text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.wf-review-score-btn:hover { background: var(--brand-primary); color: var(--brand-on-primary); }
/*  Minstens 12px letters en een knop van 44px hoog tot en met iPad liggend (Tom, 13-09-2026). Sommige
    templates rekenen met een kleinere basismaat, waardoor .85rem daar op 10px uitkwam. */
@media (max-width: 1024.98px) { .wf-review-score-btn { min-height: 44px; } }

/* Donkere template: zelfde donkere kaartvlak en lichte tekst als de reviewkaarten hierboven. */
[data-bs-theme="dark"] .wf-review-score {
  background: var(--wf-dark-card, color-mix(in srgb, var(--brand-secondary, #8a8a8a) 14%, var(--site-dark-bg, #16201b)));
  border-color: rgba(255, 255, 255, .08);
}
[data-bs-theme="dark"] .wf-review-score-naam,
[data-bs-theme="dark"] .wf-review-score-cijfer b { color: #f1efec; }
[data-bs-theme="dark"] .wf-review-score-cijfer span,
[data-bs-theme="dark"] .wf-review-score-aantal,
[data-bs-theme="dark"] .wf-review-score-ext,
[data-bs-theme="dark"] .wf-review-score-hint { color: #9aa0a8; }