/**
 * Reviews - Additional Styling
 *
 * Doel: Styling voor labels, filters, pagination en Google G logo badge
 * Cruciaal omdat: Nieuwe features binnen eigen design system
 *
 * @package Voices Studio
 * @since 1.0.0
 */

/* ========================================
	REVIEWS - GOOGLE G LOGO BADGE
	======================================== */

.voices-review-item {
	position: relative;
}

.voices-review-google-badge {
	position: absolute;
	top: var(--space-4, 16px);
	right: var(--space-4, 16px);
	width: 20px;
	height: 20px;
	z-index: 10;
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.voices-review-google-badge:hover {
	opacity: 1;
}

.voices-review-google-badge svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ========================================
	REVIEWS - LABEL BADGES
	======================================== */

.voices-review-labels {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2, 8px);
	margin-top: auto;
	padding-top: var(--space-2, 8px);
	border-top: none;
}

.voices-review-item:not(:has(.voices-review-labels)) .voices-review-content {
	margin-bottom: 0;
}

.voices-review-label-badge {
	display: inline-flex;
	align-items: center;
	padding: 1px 4px;
	background: var(--gray-100, #f3f4f6);
	color: var(--gray-600, #4b5563);
	border-radius: var(--radius-full, 9999px);
	font-size: 9px !important;
	font-weight: var(--font-weight-normal, 400);
	line-height: 1.1;
	min-height: 0 !important;
	height: auto;
	transition: all 0.2s ease;
	text-transform: capitalize;
	white-space: nowrap;
	border: 1px solid var(--gray-200, #e5e7eb);
	cursor: pointer;
}

.voices-review-label-badge:hover {
	background: var(--gray-200, #e5e7eb);
	color: var(--gray-700, #374151);
	border-color: var(--gray-300, #d1d5db);
	transform: none;
	box-shadow: none;
}

.voices-review-label-filter {
	cursor: pointer;
}

/* ========================================
	REVIEWS - FILTER BAR
	======================================== */

.voices-reviews-filters {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin-bottom: var(--space-5, 20px);
}

.voices-reviews-filters-header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: var(--space-3, 12px);
	gap: var(--space-4, 16px);
	flex-wrap: wrap;
}

.voices-reviews-sort-wrapper {
	display: inline-block;
	vertical-align: middle;
	width: 220px; /* Fixed width for sort dropdown - matches voice-sort */
}

.voices-reviews-sort-wrapper .select-with-icon {
	position: relative;
	width: 100%;
	overflow: visible;
}

.voices-reviews-sort-wrapper .select-with-icon select {
	width: 100% !important;
	padding: 12px 40px 12px 40px; /* Generous padding: 12px vertical, 40px horizontal for icons */
	border: 1px solid #ddd; /* Light grey border like dropdown */
	border-radius: 6px; /* Subtle border radius like dropdown */
	background: #fff; /* White background */
	font-size: 14px; /* Same font size */
	color: #333; /* Dark text color */
	line-height: 1.4; /* Same line height */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	position: relative;
	z-index: 1;
	transition: all 0.2s ease;
	height: auto; /* Auto height */
	box-sizing: border-box;
}

.voices-reviews-sort-wrapper .select-with-icon select:focus {
	outline: none;
	border-color: #eb3683; /* Same as other dropdowns */
	box-shadow: 0 0 0 2px rgba(235, 54, 131, 0.1); /* Same as other dropdowns */
}

/* Sort icon with gradient - positioned left, before text */
.voices-reviews-sort-wrapper .select-icon {
	position: absolute;
	left: 12px; /* Left aligned, before text content */
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	background: -webkit-linear-gradient(
		135deg,
		rgba(193, 52, 249, 1) 0%,
		rgba(255, 0, 132, 1) 56%,
		rgba(255, 0, 132, 1) 100%
	);
	background: linear-gradient(
		135deg,
		rgba(193, 52, 249, 1) 0%,
		rgba(255, 0, 132, 1) 56%,
		rgba(255, 0, 132, 1) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.voices-reviews-sort-wrapper .select-icon i {
	font-size: 16px;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Chevron down icon for sort dropdown (matches other dropdowns) */
.voices-reviews-sort-wrapper .select-with-icon::after {
	content: "";
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid #999;
	z-index: 1;
}

.voices-reviews-filters-title {
	font-size: var(--font-size-base, 16px);
	font-weight: var(--font-weight-semibold, 600);
	color: var(--gray-900, #111827);
	margin: 0;
}

.voices-reviews-filters-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2, 8px);
	justify-content: center !important;
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding-bottom: var(--space-2, 8px);
}

.voices-reviews-filters-list::-webkit-scrollbar {
	height: 6px;
}

.voices-reviews-filters-list::-webkit-scrollbar-track {
	background: var(--gray-100, #f3f4f6);
	border-radius: 3px;
}

.voices-reviews-filters-list::-webkit-scrollbar-thumb {
	background: var(--gray-400, #9ca3af);
	border-radius: 3px;
}

.voices-reviews-filters-list::-webkit-scrollbar-thumb:hover {
	background: var(--gray-500, #6b7280);
}

.voices-reviews-filter-item {
	display: flex;
	align-items: center;
}

.voices-reviews-filter-radio {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

.voices-reviews-filter-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2, 8px);
	padding: var(--space-2, 8px) var(--space-4, 16px);
	border: 1px solid var(--gray-300, #d1d5db);
	border-radius: var(--radius-full, 9999px);
	background: var(--white, #ffffff);
	color: var(--gray-700, #374151);
	font-size: var(--font-size-sm, 14px);
	font-weight: var(--font-weight-medium, 500);
	cursor: pointer;
	transition: all 0.2s ease;
	user-select: none;
	white-space: nowrap;
}

.voices-reviews-filter-label:hover {
	border-color: var(--primary-blue, #0073aa);
	background: var(--gray-50, #f9fafb);
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
}

.voices-reviews-filter-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--space-1, 4px);
	background: transparent;
	color: inherit;
	font-size: var(--font-size-xs, 11px);
	font-weight: var(--font-weight-semibold, 600);
	line-height: 1;
}


.voices-reviews-filter-radio:checked + .voices-reviews-filter-label,
.voices-reviews-filter-label.active {
	background: var(--primary-blue, #0073aa);
	border-color: var(--primary-blue, #0073aa);
	color: var(--white, #ffffff);
	font-weight: var(--font-weight-semibold, 600);
	box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
}

.voices-reviews-filter-radio:checked + .voices-reviews-filter-label .voices-reviews-filter-count,
.voices-reviews-filter-label.active .voices-reviews-filter-count {
	background: transparent;
	color: inherit;
}

.voices-reviews-filter-radio:focus + .voices-reviews-filter-label {
	outline: 2px solid var(--primary-blue, #0073aa);
	outline-offset: 2px;
}

/* ========================================
	REVIEWS - PAGINATION
	======================================== */

.voices-reviews-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1, 4px);
	margin-top: var(--space-6, 24px);
	padding-top: var(--space-6, 24px);
	border-top: 1px solid var(--gray-200, #e5e7eb);
}

.voices-reviews-pagination-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: var(--space-2, 8px) var(--space-3, 12px);
	background: var(--white, #ffffff);
	border: 1px solid var(--gray-300, #d1d5db);
	border-radius: var(--radius-sm, 4px);
	color: var(--gray-700, #374151);
	font-size: var(--font-size-sm, 14px);
	font-weight: var(--font-weight-medium, 500);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
}

.voices-reviews-pagination-button:hover:not(:disabled) {
	background: var(--gray-50, #f9fafb);
	border-color: var(--primary-blue, #0073aa);
	color: var(--primary-blue, #0073aa);
}

.voices-reviews-pagination-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.voices-reviews-pagination-button.active {
	background: var(--primary-blue, #0073aa);
	border-color: var(--primary-blue, #0073aa);
	color: var(--white, #ffffff);
	font-weight: var(--font-weight-semibold, 600);
}

.voices-reviews-pagination-button.active:hover {
	background: var(--primary-blue-dark, #005a87);
	border-color: var(--primary-blue-dark, #005a87);
}

.voices-reviews-pagination-ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	color: var(--gray-500, #6b7280);
	font-size: var(--font-size-sm, 14px);
}

/* ========================================
	REVIEWS - LOADING STATES
	======================================== */

.voices-reviews-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-6, 24px);
	color: var(--gray-600, #4b5563);
	font-size: var(--font-size-sm, 14px);
}

.voices-reviews-loading::before {
	content: '';
	width: 20px;
	height: 20px;
	border: 2px solid var(--gray-300, #d1d5db);
	border-top-color: var(--primary-blue, #0073aa);
	border-radius: 50%;
	animation: voices-reviews-spin 0.6s linear infinite;
	margin-right: var(--space-2, 8px);
}

@keyframes voices-reviews-spin {
	to {
		transform: rotate(360deg);
	}
}

.voices-reviews-grid.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* ========================================
	REVIEWS - RESPONSIVE
	======================================== */

@media (max-width: 768px) {
	.voices-reviews-filters {
		padding: var(--space-3, 12px);
	}

	.voices-reviews-filters-header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2, 8px);
	}

	.voices-reviews-filters-list {
		width: 100%;
	}

	.voices-reviews-filter-label {
		flex: 1;
		justify-content: center;
		min-width: 0;
	}

	.voices-reviews-pagination {
		flex-wrap: wrap;
		gap: var(--space-1, 4px);
	}

	.voices-reviews-pagination-button {
		min-width: 36px;
		height: 36px;
		padding: var(--space-1, 4px) var(--space-2, 8px);
		font-size: var(--font-size-xs, 12px);
	}

	.voices-review-google-badge {
		width: 18px;
		height: 18px;
		top: var(--space-3, 12px);
		right: var(--space-3, 12px);
	}
}