/*--------------------------------------------------------------
# Review Slider — self-contained Swiper coverflow component
# Variables can be overridden by any parent scope.
--------------------------------------------------------------*/

.review-slider-component {
	--rs-card-bg: #1a1918;
	--rs-accent: rgba(243, 152, 31, 1);
	--rs-radius: 16px;
	--rs-slide-width-mobile: 320px;
	--rs-slide-width-desktop: 700px;
	--rs-text-color: #e3e0e0;
	--rs-nav-bg: linear-gradient(90deg, #242424 0%, #201b1a 100%);

	.swiper-slide {
		width: var(--rs-slide-width-mobile) !important;

		@media (min-width: 992px) {
			width: var(--rs-slide-width-desktop) !important;
		}
	}

	.review-slider-controls {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 30px;
		margin-top: 20px;

		@media (min-width: 992px) {
			margin-top: 40px;
		}
	}

	.swiper-button-prev,
	.swiper-button-next {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		margin: 0;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: var(--rs-nav-bg);
		display: flex;
		align-items: center;
		justify-content: center;

		&::after {
			display: none;
		}

		svg {
			display: none;
		}

		img {
			flex-shrink: 0;
			width: 8px;
		}
	}

	.autoplay-progress {
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		line-height: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		svg {
			--progress: 0;
			display: block;
			width: 100%;
			height: 100%;
			stroke-width: 2px;
			stroke: var(--rs-accent);
			fill: none;
			stroke-dashoffset: calc(124.85px * (1 - var(--progress)));
			stroke-dasharray: 124.85;
			transform: rotate(-90deg);
		}
	}

	.swiper-slide:not(.swiper-slide-active) .rs-card {
		filter: blur(1.5px);
	}

	.rs-card {
		padding: 23px;
		background:
			linear-gradient(322.21deg, var(--rs-card-bg) 0%, var(--rs-card-bg) 100%)
				padding-box,
			linear-gradient(
					265.73deg,
					rgba(255, 255, 255, 0.2) 3.48%,
					rgba(116, 116, 116, 0.2) 51.41%,
					var(--rs-accent) 96.56%
				)
				border-box;
		border: 1px solid transparent;
		border-radius: var(--rs-radius);
		max-width: 710px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;

		@media (min-width: 992px) {
			display: grid;
			grid-template-columns: 314px 1fr;
			align-items: center;
			gap: 29px;
		}
	}

	.rs-card__image {
		display: block;
		width: 100%;
		border-radius: var(--rs-radius);
		object-fit: cover;
	}

	.rs-card__content {
		p {
			margin: 0 0 16px;
			font-weight: 500;
			font-size: 1.25rem;
			line-height: 1.4;
			color: var(--rs-text-color);
		}

		a {
			position: relative;
			text-decoration: none;
			padding: 8px 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			width: 100%;
			border-radius: 100px;
			font-weight: 500;
			font-size: 1.125rem;
			line-height: 1.22;
			color: #fff;
			border: 0.5px solid #747474;
			background: var(--rs-nav-bg);
			backdrop-filter: blur(1px);

			&:hover,
			&:focus-visible {
				text-decoration: none;
				color: #fff;
			}
		}
	}
}