/**
 * Product Review Carousel for Elementor
 * Frontend Styles
 *
 * @package ProductReviewCarousel
 * @version 1.0.0
 */

/* =============================================================================
   Wrapper
   ============================================================================= */

.prc-carousel-wrapper {
	position: relative;
	width: 100%;
}

/* =============================================================================
   Card
   ============================================================================= */

.prc-review-card {
	background-color: #f6f6f6;
	border-radius: 8px;
	padding: 28px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
}

.swiper-slide {
	height: auto; /* allow equal-height cards */
}

/* =============================================================================
   Stars
   ============================================================================= */

.prc-stars {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 2px;
	line-height: 1;
	margin-bottom: 12px;
}

.prc-star {
	display: inline-block;
	font-style: normal;
}

.prc-star--filled {
	color: #efdc97;
}

.prc-star--empty {
	color: #d8d8d8;
}

/* =============================================================================
   Review text
   ============================================================================= */

.prc-review-text {
	margin: 0;
	color: #3b4f4d;
	font-size: 15px;
	line-height: 1.6;
	flex: 1 1 auto;
}

/* =============================================================================
   Reviewer row
   ============================================================================= */

.prc-reviewer-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid rgba(0,0,0,0.06);
}

.prc-reviewer-name {
	font-weight: 600;
	font-size: 14px;
	color: #011f28;
}

.prc-review-date {
	font-size: 12px;
	color: #888;
	margin-left: auto;
}

.prc-verified {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 11px;
	color: #3b4f4d;
	font-weight: 500;
}

.prc-verified svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

/* =============================================================================
   Navigation
   ============================================================================= */

.prc-navigation {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 20px;
}

.prc-nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid #e0e0e0;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease, color 0.2s ease;
	color: #3b4f4d;
}

.prc-nav-btn:hover {
	background-color: #3b4f4d;
	color: #ffffff;
}

.prc-nav-btn svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
}

.prc-nav-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.prc-nav-btn.swiper-button-disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* =============================================================================
   Pagination
   ============================================================================= */

.prc-pagination {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	margin-top: 24px;
	position: static !important; /* override Swiper absolute */
	transform: none !important;
}

/* Bullets */
.prc-pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: #c0c0c0;
	opacity: 1;
	border-radius: 50%;
	transition: background 0.2s ease, transform 0.2s ease;
	display: inline-block;
	margin: 0 !important;
}

.prc-pagination .swiper-pagination-bullet-active {
	background: #3b4f4d;
	transform: scale(1.3);
}

/* Progress bar */
.prc-pagination.swiper-pagination-progressbar {
	height: 3px;
	width: 100%;
	margin-top: 16px;
}

/* Fraction */
.prc-pagination.swiper-pagination-fraction {
	font-size: 14px;
	color: #3b4f4d;
}

/* =============================================================================
   No-reviews message
   ============================================================================= */

.prc-no-reviews {
	color: #888;
	font-size: 14px;
	text-align: center;
	padding: 24px 0;
}

/* =============================================================================
   Reduced motion
   ============================================================================= */

@media ( prefers-reduced-motion: reduce ) {
	.prc-nav-btn,
	.swiper-wrapper {
		transition: none !important;
	}
}