/**
 * Reviews-carrousel — huisstijl van Ootes Vastgoedonderhoud (logo-blauw
 * #0063BD/#002D55, logo-oranje #FF8F06), hardcoded zodat de weergave
 * correct oogt ongeacht welk thema er actief is.
 *
 * @package Ootes_Reviews
 */

.ootes-reviews {
	--ootes-reviews-accent: #FF8F06;
	--ootes-reviews-text: #1E2733;
	--ootes-reviews-text-light: #5C6B79;
	--ootes-reviews-white: #FFFFFF;
	--ootes-reviews-border: #E3E7EC;
	--ootes-reviews-radius: 12px;
	--ootes-reviews-container: 1200px;

	background: var(--ootes-reviews-bg, #002D55);
	color: rgba(255, 255, 255, .85);
	padding-block: clamp(3rem, 2.4rem + 2vw, 5.5rem);
	overflow: hidden;
	box-sizing: border-box;
}
.ootes-reviews *, .ootes-reviews *::before, .ootes-reviews *::after { box-sizing: inherit; }

.ootes-reviews__container { max-width: var(--ootes-reviews-container); margin-inline: auto; padding-inline: 1.25rem; }
.ootes-reviews__heading { max-width: 640px; margin: 0 0 2.5rem; }
.ootes-reviews__heading h2 { color: #fff; margin: 0 0 .5rem; font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); line-height: 1.2; }
.ootes-reviews__heading p { color: rgba(255, 255, 255, .6); margin: 0; font-size: 1.05rem; line-height: 1.6; }

.ootes-reviews-carousel { position: relative; padding-block: .5rem 3.5rem; }
.ootes-reviews-carousel__track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-inline: max(1.25rem, calc((100% - var(--ootes-reviews-container)) / 2 + 1.25rem));
	padding-bottom: .5rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.ootes-reviews-carousel__track::-webkit-scrollbar { display: none; }

.ootes-reviews-card {
	flex: 0 0 clamp(260px, 30vw, 360px);
	scroll-snap-align: start;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--ootes-reviews-radius);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-family: inherit;
}
.ootes-reviews-card__quote { color: var(--ootes-reviews-accent); width: 2rem; height: 2rem; display: inline-flex; }
.ootes-reviews-card__quote svg { width: 100%; height: 100%; }

.ootes-reviews-stars { display: flex; gap: .2rem; }
.ootes-reviews-star { width: 1.05rem; height: 1.05rem; color: rgba(255, 255, 255, .25); display: inline-flex; }
.ootes-reviews-star.is-filled { color: var(--ootes-reviews-accent); }
.ootes-reviews-star svg { width: 100%; height: 100%; }

.ootes-reviews-card__text { margin: 0; flex: 1; color: rgba(255, 255, 255, .85); line-height: 1.6; }

.ootes-reviews-card__author {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, .1);
}
.ootes-reviews-avatar {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: .9rem;
	border: 2px solid rgba(255, 255, 255, .2);
	flex-shrink: 0;
	overflow: hidden;
}
.ootes-reviews-avatar--photo img { width: 100%; height: 100%; object-fit: cover; }
.ootes-reviews-card__author-info { display: flex; flex-direction: column; gap: .1rem; font-size: .9rem; }
.ootes-reviews-card__author-info strong { color: #fff; }
.ootes-reviews-card__author-info span { color: rgba(255, 255, 255, .55); }

.ootes-reviews-carousel__nav {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .2s ease;
	z-index: 2;
	padding: 0;
}
.ootes-reviews-carousel__nav:hover { background: rgba(255, 255, 255, .2); }
.ootes-reviews-carousel__nav svg { width: 1.2rem; height: 1.2rem; }
.ootes-reviews-carousel__nav--prev { left: 1rem; }
.ootes-reviews-carousel__nav--next { right: 1rem; }
@media (max-width: 720px) {
	.ootes-reviews-carousel__nav { display: none; }
}

.ootes-reviews-empty { opacity: .7; font-style: italic; }

/* Lichte variant: schakelt automatisch in wanneer een lichte achtergrondkleur
   is ingesteld (zie Ootes_Reviews_Render::is_light_color()), zodat de
   standaard witte tekst/randen niet onleesbaar worden. */
.ootes-reviews--light { color: var(--ootes-reviews-text-light); }
.ootes-reviews--light .ootes-reviews__heading h2 { color: var(--ootes-reviews-text); }
.ootes-reviews--light .ootes-reviews__heading p { color: var(--ootes-reviews-text-light); }
.ootes-reviews--light .ootes-reviews-card {
	background: var(--ootes-reviews-white);
	border-color: var(--ootes-reviews-border);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}
.ootes-reviews--light .ootes-reviews-card__text { color: var(--ootes-reviews-text); }
.ootes-reviews--light .ootes-reviews-star { color: rgba(0, 0, 0, .18); }
.ootes-reviews--light .ootes-reviews-star.is-filled { color: var(--ootes-reviews-accent); }
.ootes-reviews--light .ootes-reviews-card__author { border-top-color: var(--ootes-reviews-border); }
.ootes-reviews--light .ootes-reviews-avatar { border-color: rgba(0, 0, 0, .12); }
.ootes-reviews--light .ootes-reviews-card__author-info strong { color: var(--ootes-reviews-text); }
.ootes-reviews--light .ootes-reviews-card__author-info span { color: var(--ootes-reviews-text-light); }
.ootes-reviews--light .ootes-reviews-carousel__nav {
	background: var(--ootes-reviews-white);
	border-color: var(--ootes-reviews-border);
	color: var(--ootes-reviews-text);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.ootes-reviews--light .ootes-reviews-carousel__nav:hover { background: #f5f6f8; }