/* DAPPER Reviews — frontend CSS
 * All visuals driven by CSS variables set per-instance via inline style.
 * Scoped under .dapper-rating so it cannot leak into Elementor/theme styles.
 */

.dapper-rating {
	--dapr-color: #FFB400;
	--dapr-empty: #E0E0E0;
	--dapr-size: 18px;
	--dapr-gap: 2px;

	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	line-height: 1;
	font-family: inherit;
}

.dapper-rating.dapper-align-center { justify-content: center; }
.dapper-rating.dapper-align-right  { justify-content: flex-end; }

/* ── Stars (display, fill-overlay technique) ─────────────────────────── */
.dapper-stars {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.dapper-stars-empty,
.dapper-stars-fill {
	display: inline-flex;
	gap: var(--dapr-gap);
}

.dapper-stars-fill {
	position: absolute;
	inset: 0;
	overflow: hidden;
	width: 0;
	pointer-events: none;
	transition: width .6s cubic-bezier(.4,0,.2,1);
}

.dapper-stars .dapper-star,
.dapper-stars-interactive .dapper-star {
	width: var(--dapr-size);
	height: var(--dapr-size);
	flex-shrink: 0;
	display: block;
}

.dapper-stars-empty .dapper-star { fill: var(--dapr-empty); }
.dapper-stars-fill  .dapper-star { fill: var(--dapr-color); }

/* Animation — only run when init class is applied */
.dapper-rating.dapper-anim-init .dapper-stars-fill { width: 0 !important; }
.dapper-rating.dapper-anim-init.dapper-anim-go .dapper-stars-fill {
	width: var(--dapr-target-fill, 0%) !important;
}

/* ── Count & numeric value ───────────────────────────────────────────── */
.dapper-count,
.dapper-value {
	font-size: 13px;
	color: #666;
	white-space: nowrap;
	/* Match SVG block geometry so flex align-items lines text up flush with stars */
	line-height: 1;
	display: inline-flex;
	align-items: center;
}

/* ── Interactive variant ─────────────────────────────────────────────── */
.dapper-stars-interactive {
	display: inline-flex;
	gap: var(--dapr-gap);
}

.dapper-star-btn {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	line-height: 0;
	transition: transform .15s ease;
	-webkit-tap-highlight-color: transparent;
}

.dapper-star-btn .dapper-star {
	width: var(--dapr-size);
	height: var(--dapr-size);
	fill: var(--dapr-empty);
	transition: fill .15s ease;
}

.dapper-star-btn:hover { transform: scale(1.1); }
.dapper-star-btn:focus-visible { outline: 2px solid var(--dapr-color); outline-offset: 2px; border-radius: 2px; }

/* Active fill driven by JS via .dapper-star-btn[data-active] */
.dapper-star-btn.dapper-active .dapper-star,
.dapper-star-btn.dapper-hover  .dapper-star {
	fill: var(--dapr-color);
}

/* Locked state after rating */
.dapper-rating.dapper-locked .dapper-star-btn { cursor: default; pointer-events: none; }
.dapper-rating.dapper-locked .dapper-star-btn:hover { transform: none; }

/* ── Thanks message ─────────────────────────────────────────────────── */
.dapper-thanks {
	flex-basis: 100%;
	margin-top: 6px;
	font-size: 14px;
	color: #0a8a3f;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: opacity .3s ease, max-height .3s ease, margin-top .3s ease;
}

.dapper-thanks.dapper-thanks-visible {
	opacity: 1;
	max-height: 100px;
	margin-top: 6px;
}

.dapper-thanks.dapper-thanks-error { color: #c53030; }

/* ── Interactive widget container ───────────────────────────────────── */
.dapper-interactive-wrap .dapper-heading {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 8px;
	color: #222;
}

.dapper-interactive-wrap .dapper-aggregate {
	margin-bottom: 10px;
}

/* ── Editor empty state ─────────────────────────────────────────────── */
.dapper-editor-empty {
	padding: 14px;
	background: #fdf6e3;
	border: 1px dashed #d9b85a;
	color: #6a5012;
	font-size: 13px;
	border-radius: 4px;
}

/* ── Responsive overrides via CSS vars ──────────────────────────────── */
@media (max-width: 1024px) {
	.dapper-rating { --dapr-size: var(--dapr-size-tablet, var(--dapr-size)); --dapr-gap: var(--dapr-gap-tablet, var(--dapr-gap)); }
}
@media (max-width: 767px) {
	.dapper-rating { --dapr-size: var(--dapr-size-mobile, var(--dapr-size)); --dapr-gap: var(--dapr-gap-mobile, var(--dapr-gap)); }
}

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
	.dapper-stars-fill,
	.dapper-thanks,
	.dapper-star-btn,
	.dapper-star-btn .dapper-star { transition: none; }
}