/* Rijschool Lelly - Reviews (JS-driven marquee)
   No keyframes, no width:max-content. reviews.js measures, clones and
   animates via requestAnimationFrame on the .rl-reviews-marquee__track. */

.rl-reviews,.rl-reviews *{box-sizing:border-box}

.rl-reviews{
	position:relative;
	padding:80px 0 100px;
	background:#FF5A00 !important;
	overflow:hidden;
	font-family:'Montserrat',sans-serif;
	color:#fff !important;
	width:100vw;max-width:100vw;
	margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)
}

/* ============================================================
 * BACKGROUND (white SVG waves + radial blobs)
 * ============================================================ */
.rl-reviews .rl-reviews-bg{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0.8}
.rl-reviews .rl-reviews-bg::before,
.rl-reviews .rl-reviews-bg::after{content:'';position:absolute;border-radius:50%;filter:blur(100px)}
.rl-reviews .rl-reviews-bg::before{width:600px;height:600px;top:-200px;right:-100px;background:radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%)}
.rl-reviews .rl-reviews-bg::after{width:500px;height:500px;bottom:-150px;left:-100px;background:radial-gradient(circle, rgba(255,103,0,0.4) 0%, transparent 70%)}
.rl-reviews .rl-reviews-bg-svg{position:absolute;inset:0;width:100%;height:100%;opacity:1}

/* ============================================================
 * HEADER
 * ============================================================ */
.rl-reviews .rl-reviews-header{position:relative;z-index:2;margin:0 0 48px;padding:0 40px}
.rl-reviews .rl-reviews-eyebrow{
	font-family:'Poppins',sans-serif !important;
	font-size:13px !important;font-weight:600 !important;
	letter-spacing:2px;text-transform:uppercase;
	color:rgba(255,255,255,0.7) !important;margin-bottom:12px
}
.rl-reviews .rl-reviews-heading{
	font-family:'Poppins',sans-serif !important;
	font-size:clamp(40px,6vw,72px) !important;
	font-weight:800 !important;
	line-height:1.05 !important;
	margin:0 0 20px 0 !important;
	color:#ffffff !important;
	letter-spacing:-1px;
	text-transform:none !important;
	text-shadow:none
}
.rl-reviews .rl-reviews-rating{display:flex;align-items:baseline;gap:12px;font-family:'Poppins',sans-serif}
.rl-reviews .rl-reviews-rating-score{
	font-family:'Poppins',sans-serif !important;
	font-size:56px !important;font-weight:700 !important;line-height:1 !important;
	color:#fff !important
}
.rl-reviews .rl-reviews-rating-text{font-size:14px;color:rgba(255,255,255,0.75) !important}

/* ============================================================
 * MARQUEE (each row is a direct sibling of .rl-reviews)
 * ============================================================ */
.rl-reviews .rl-reviews-marquee{
	position:relative;z-index:2;
	overflow:hidden;
	margin:0 0 24px;
	-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
	mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%)
}
.rl-reviews .rl-reviews-marquee:last-of-type{margin-bottom:0}

/* The track is sized by content (cards laid out in flex). Width naturally
   exceeds the parent — overflow on parent clips it. JS controls position
   via inline style "transform: translate3d(Xpx,0,0)". */
.rl-reviews .rl-reviews-marquee__track{
	display:flex;
	flex-wrap:nowrap;
	gap:24px;
	will-change:transform;
	transform:translate3d(0,0,0)
}

/* ============================================================
 * REVIEW CARD (Lelly glassmorphic)
 * ============================================================ */
.rl-reviews .rl-review-card{
	flex:0 0 380px;
	background:rgba(255,255,255,0.08) !important;
	backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
	border:1px solid rgba(255,255,255,0.15) !important;
	border-radius:10px !important;
	padding:24px 26px;
	display:flex;flex-direction:column;gap:18px;
	transition:background 0.35s ease,border-color 0.35s ease,transform 0.35s ease;
	position:relative;color:#fff
}
.rl-reviews .rl-review-card:hover{
	background:rgba(255,255,255,0.13) !important;
	border-color:rgba(255,255,255,0.3) !important;
	transform:translateY(-3px)
}

.rl-reviews .rl-review-top{display:flex;align-items:center;justify-content:space-between}
.rl-reviews .rl-review-stars{display:flex;gap:3px;line-height:0}
.rl-reviews .rl-review-stars svg{width:16px !important;height:16px !important;fill:#FFD700 !important;stroke:none !important;display:inline-block}
.rl-reviews .rl-review-stars svg polygon{fill:#FFD700 !important;stroke:none !important}

.rl-reviews .rl-review-tag{
	padding:5px 12px;border-radius:100px;
	background:rgba(255,255,255,0.15) !important;
	border:1px solid rgba(255,255,255,0.25) !important;
	font-family:'Poppins',sans-serif !important;
	font-size:10px !important;font-weight:600 !important;letter-spacing:1px;text-transform:uppercase;
	color:#fff !important
}
.rl-reviews .rl-review-text{
	font-family:'Montserrat',sans-serif !important;
	font-size:14px !important;line-height:1.6 !important;
	color:rgba(255,255,255,0.92) !important;flex:1;margin:0
}
.rl-reviews .rl-review-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid rgba(255,255,255,0.15)}
.rl-reviews .rl-review-person{display:flex;flex-direction:column;gap:2px}
.rl-reviews .rl-review-name{
	font-family:'Poppins',sans-serif !important;
	font-size:16px !important;font-weight:600 !important;
	color:#fff !important;line-height:1.2 !important
}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */
@media(max-width:768px){
	.rl-reviews{padding:60px 0 80px}
	.rl-reviews .rl-reviews-header{padding:0 20px}
	.rl-reviews .rl-reviews-marquee{margin-bottom:18px}
	.rl-reviews .rl-review-card{flex:0 0 280px;padding:20px;gap:14px}
	.rl-reviews .rl-review-text{font-size:13px !important;line-height:1.5 !important}
	.rl-reviews .rl-reviews-rating-score{font-size:42px !important}
}

/* ============================================================
 * REDUCED MOTION — JS already respects this, but pin to position 0
 * just in case JS fails to load.
 * ============================================================ */
@media(prefers-reduced-motion:reduce){
	.rl-reviews .rl-reviews-marquee__track{transform:none !important}
}