/**
 * Manta Google Reviews — Slider Styles
 * RTL-ready with logical properties.
 */

/* ─── Slider Container ─── */
.grw-slider {
	position: relative;
	margin-inline: 48px;
	touch-action: pan-y; /* allow vertical scroll, JS handles horizontal swipe */
	/* No overflow:hidden here — arrows live outside the viewport. */
}

/* ─── Viewport: clips the track, arrows stay visible outside ─── */
.grw-slider__viewport {
	overflow: hidden;
	border-radius: var(--grw-card-radius, 12px);
}

/* ─── Track ─── */
.grw-slider__track {
	display: flex;
	gap: var(--grw-slide-gap, 16px);
	transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.grw-slider__track .grw-slide {
	flex: 0 0 calc((100% - (var(--grw-slides-per-view, 1) - 1) * var(--grw-slide-gap, 16px)) / var(--grw-slides-per-view, 1));
	min-width: 0;
	box-sizing: border-box;
	padding: 4px 2px;
	/* Override the scroll-animation defaults from grw-styles.css —
	   slider visibility is managed by the slider engine, not IntersectionObserver. */
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* ─── Responsive: override --grw-slides-per-view at breakpoints ───
 *  Uses data-grw-per-view attribute (set in PHP template) for reliable matching.
 *  These are no-JS fallbacks; when JS loads, it updates the CSS variable directly.
 *  Breakpoints must stay in sync with getResponsivePerView() in grw-slider.js.
 */
@media (max-width: 640px) {
	.grw-slider {
		--grw-slides-per-view: 1 !important;
		margin-inline: 40px;
	}
}

@media (min-width: 641px) and (max-width: 900px) {
	.grw-slider[data-grw-per-view="3"],
	.grw-slider[data-grw-per-view="4"] {
		--grw-slides-per-view: 2 !important;
	}
}

@media (min-width: 901px) and (max-width: 1100px) {
	.grw-slider[data-grw-per-view="4"] {
		--grw-slides-per-view: 3 !important;
	}
}

/* ─── Arrows ─── */
.grw-slider__arrow {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 50%;
	cursor: pointer;
	color: #0f172a;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: all 200ms ease;
	z-index: 2;
	padding: 0;
}

.grw-slider__arrow:hover {
	background: #ffffff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transform: translateY(-50%) scale(1.05);
}

.grw-slider__arrow:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.grw-slider__arrow--prev {
	inset-inline-start: -44px;
}

.grw-slider__arrow--next {
	inset-inline-end: -44px;
}

/* Mobile: smaller arrows, tighter position */
@media (max-width: 640px) {
	.grw-slider__arrow {
		width: 34px;
		height: 34px;
	}

	.grw-slider__arrow svg {
		width: 16px;
		height: 16px;
	}

	.grw-slider__arrow--prev {
		inset-inline-start: -38px;
	}

	.grw-slider__arrow--next {
		inset-inline-end: -38px;
	}
}

/* RTL: flip arrow SVGs */
[dir="rtl"] .grw-slider__arrow svg {
	transform: scaleX(-1);
}

/* ─── Dots ─── */
.grw-slider__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 16px 0 8px;
}

.grw-slider__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: #cbd5e1;
	cursor: pointer;
	padding: 0;
	transition: all 200ms ease;
}

.grw-slider__dot:hover {
	background: #94a3b8;
	transform: scale(1.2);
}

.grw-slider__dot--active {
	background: var(--grw-star-color, #FBBC04);
	transform: scale(1.2);
}

.grw-slider__dot:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* ─── Pause/Play Button ─── */
.grw-slider__pause {
	position: absolute;
	inset-block-end: 12px;
	inset-inline-end: 12px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 50%;
	cursor: pointer;
	color: #64748b;
	padding: 0;
	transition: all 200ms ease;
	z-index: 2;
}

.grw-slider__pause:hover {
	color: #0f172a;
	background: #ffffff;
}

.grw-slider__pause:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
	.grw-slider__track {
		transition: none !important;
	}

	.grw-slider__arrow:hover,
	.grw-slider__dot:hover {
		transform: translateY(-50%);
	}
}