/**
 * Boltsnap Customer Reviews - Frontend Styles
 * Angepasst an Boltsnap Theme
 *
 * @package Boltsnap_Customer_Reviews
 */

/* Container */
.bcr-review-page {
	max-width: 100%;
}

.bcr-review-container {
	background: var(--wp--preset--color--base, #fff);
	border-radius: 4px;
	padding: var(--wp--preset--spacing--40, 30px);
}

/* Header */
.bcr-review-header {
	text-align: center;
	margin-bottom: var(--wp--preset--spacing--40, 30px);
	padding-bottom: var(--wp--preset--spacing--30, 20px);
	border-bottom: 1px solid var(--wp--preset--color--accent-6, #92a2b7);
}

.bcr-review-header h1 {
	margin: 0 0 var(--wp--preset--spacing--20, 10px);
	font-size: var(--wp--preset--font-size--x-large, 1.75rem);
	font-weight: 700;
	color: var(--wp--preset--color--accent-3, #2d3748);
}

.bcr-order-info {
	color: var(--wp--preset--color--accent-4, #4a5568);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	margin: 0;
}

/* Sections */
.bcr-product-reviews,
.bcr-shop-review {
	margin-bottom: var(--wp--preset--spacing--40, 30px);
}

.bcr-product-reviews h2,
.bcr-shop-review h2 {
	font-size: var(--wp--preset--font-size--large, 1.38rem);
	font-weight: 700;
	color: var(--wp--preset--color--accent-3, #2d3748);
	margin: 0 0 var(--wp--preset--spacing--30, 20px);
	padding-bottom: var(--wp--preset--spacing--20, 10px);
	border-bottom: 2px solid var(--wp--preset--color--accent-1, #b20f14);
}

/* Product Review Card */
.bcr-product-review {
	background: var(--wp--preset--color--background, #f8f8f8);
	border-radius: 4px;
	padding: var(--wp--preset--spacing--30, 20px);
	margin-bottom: var(--wp--preset--spacing--30, 20px);
}

.bcr-product-review:last-child {
	margin-bottom: 0;
}

.bcr-product-info {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 10px);
	margin-bottom: var(--wp--preset--spacing--30, 20px);
}

.bcr-product-image {
	flex-shrink: 0;
}

.bcr-product-image img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 4px;
}

.bcr-product-details {
	flex-grow: 1;
}

.bcr-product-name {
	margin: 0 0 5px;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 700;
	color: var(--wp--preset--color--accent-3, #2d3748);
}

.bcr-product-qty {
	margin: 0;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--accent-4, #4a5568);
}

/* Star Rating */
.bcr-rating-wrapper {
	margin-bottom: var(--wp--preset--spacing--20, 10px);
}

.bcr-rating-label {
	display: block;
	font-weight: 700;
	margin-bottom: 8px;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--accent-3, #2d3748);
}

.bcr-rating-label .required {
	color: var(--wp--preset--color--accent-1, #b20f14);
}

.bcr-star-rating {
	display: flex;
	gap: 5px;
}

.bcr-star {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--wp--preset--color--accent-6, #92a2b7);
	transition: color 0.2s ease, transform 0.1s ease;
}

.bcr-star:hover,
.bcr-star:focus {
	transform: scale(1.1);
}

.bcr-star-rating[data-rating="1"] .bcr-star:nth-child(-n+1),
.bcr-star-rating[data-rating="2"] .bcr-star:nth-child(-n+2),
.bcr-star-rating[data-rating="3"] .bcr-star:nth-child(-n+3),
.bcr-star-rating[data-rating="4"] .bcr-star:nth-child(-n+4),
.bcr-star-rating[data-rating="5"] .bcr-star:nth-child(-n+5) {
	color: #dba617;
}

.bcr-star.active {
	color: #dba617;
}

/* Comment Textarea */
.bcr-comment-wrapper {
	margin-top: var(--wp--preset--spacing--20, 10px);
}

.bcr-comment-label {
	display: block;
	font-weight: 700;
	margin-bottom: 8px;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--accent-3, #2d3748);
}

.bcr-comment-textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--wp--preset--color--accent-6, #92a2b7);
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-family: var(--wp--preset--font-family--outfit, inherit);
	resize: vertical;
	min-height: 80px;
	transition: border-color 0.2s ease;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #1a202c);
	box-sizing: border-box;
}

.bcr-comment-textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent-1, #b20f14);
}

/* Shop Review */
.bcr-shop-review {
	background: var(--wp--preset--color--background-dark, #eaecee);
	border-radius: 4px;
	padding: var(--wp--preset--spacing--30, 20px);
}

.bcr-shop-review h2 {
	margin-top: 0;
}

.bcr-shop-review-intro {
	color: var(--wp--preset--color--accent-4, #4a5568);
	margin: 0 0 var(--wp--preset--spacing--30, 20px);
}

/* Shop Questions */
.bcr-shop-question {
	margin-bottom: var(--wp--preset--spacing--20, 15px);
}

.bcr-shop-question:last-child {
	margin-bottom: 0;
}

.bcr-shop-question-main {
	background: var(--wp--preset--color--base, #fff);
	padding: var(--wp--preset--spacing--30, 20px);
	border-radius: 4px;
	border: 2px solid var(--wp--preset--color--accent-1, #b20f14);
	position: relative;
}

.bcr-public-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--base, #fff);
	background: var(--wp--preset--color--accent-1, #b20f14);
	padding: 4px 10px;
	border-radius: 3px;
	margin-bottom: var(--wp--preset--spacing--20, 12px);
}

.bcr-shop-questions-additional {
	margin-top: var(--wp--preset--spacing--40, 30px);
	padding-top: var(--wp--preset--spacing--40, 30px);
	border-top: 1px dashed var(--wp--preset--color--accent-6, #92a2b7);
}

.bcr-shop-questions-additional::before {
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	background: var(--wp--preset--color--accent-6, #92a2b7);
	margin: 0 auto var(--wp--preset--spacing--30, 20px);
	border-radius: 2px;
	margin-top: calc(-1 * var(--wp--preset--spacing--40, 30px) - 2px);
}

.bcr-questions-note {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--accent-4, #4a5568);
	margin: 0 0 var(--wp--preset--spacing--20, 15px);
	padding: var(--wp--preset--spacing--20, 12px) var(--wp--preset--spacing--30, 15px);
	background: var(--wp--preset--color--base, #fff);
	border-left: 3px solid var(--wp--preset--color--accent-1, #b20f14);
	border-radius: 0 4px 4px 0;
}

/* Additional Question Cards */
.bcr-shop-questions-additional .bcr-shop-question {
	background: var(--wp--preset--color--base, #fff);
	padding: var(--wp--preset--spacing--30, 20px);
	border-radius: 4px;
}

/* Scale Rating */
.bcr-scale-label {
	display: block;
	font-weight: 600;
	margin-bottom: var(--wp--preset--spacing--20, 12px);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--accent-3, #2d3748);
	line-height: 1.4;
}

.bcr-scale-rating {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 12px);
}

.bcr-scale-label-left,
.bcr-scale-label-right {
	font-size: 0.75rem;
	color: var(--wp--preset--color--accent-4, #4a5568);
	line-height: 1.3;
}

.bcr-scale-label-left {
	text-align: right;
}

.bcr-scale-label-right {
	text-align: left;
}

.bcr-scale-buttons {
	display: flex;
	gap: 6px;
}

.bcr-scale-btn {
	width: 38px;
	height: 38px;
	border: 2px solid var(--wp--preset--color--accent-6, #92a2b7);
	border-radius: 50%;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--accent-4, #4a5568);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	font-family: var(--wp--preset--font-family--outfit, inherit);
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bcr-scale-btn:hover {
	border-color: var(--wp--preset--color--accent-1, #b20f14);
	color: var(--wp--preset--color--accent-1, #b20f14);
	transform: scale(1.05);
}

.bcr-scale-btn.active {
	background: var(--wp--preset--color--accent-1, #b20f14);
	border-color: var(--wp--preset--color--accent-1, #b20f14);
	color: var(--wp--preset--color--base, #fff);
	transform: scale(1.05);
}

/* Choice Buttons */
.bcr-choice-buttons {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.bcr-choice-btn {
	flex: 1;
	min-width: 80px;
	padding: 12px 16px;
	border: 2px solid var(--wp--preset--color--accent-6, #92a2b7);
	border-radius: 4px;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--accent-3, #2d3748);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 500;
	font-family: var(--wp--preset--font-family--outfit, inherit);
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
}

.bcr-choice-btn:hover {
	border-color: var(--wp--preset--color--accent-1, #b20f14);
	color: var(--wp--preset--color--accent-1, #b20f14);
	background: rgba(178, 15, 20, 0.05);
}

.bcr-choice-btn.active {
	background: var(--wp--preset--color--accent-1, #b20f14);
	border-color: var(--wp--preset--color--accent-1, #b20f14);
	color: var(--wp--preset--color--base, #fff);
}

/* Feedback Textarea in Additional Questions */
.bcr-shop-questions-additional .bcr-comment-textarea {
	background: var(--wp--preset--color--background, #f8f8f8);
}

/* Submit */
.bcr-submit-wrapper {
	text-align: center;
	padding-top: var(--wp--preset--spacing--40, 30px);
	border-top: 1px solid var(--wp--preset--color--accent-6, #92a2b7);
}

.bcr-submit-button {
	display: inline-block;
	padding: 10px 20px;
	background-color: var(--wp--preset--color--accent-1, #b20f14);
	color: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--accent-1, #b20f14);
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 500;
	font-family: var(--wp--preset--font-family--outfit, inherit);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.bcr-submit-button:hover {
	background-color: var(--wp--preset--color--accent-2, #a00e12);
}

.bcr-submit-button:disabled {
	background-color: var(--wp--preset--color--accent-6, #92a2b7);
	border-color: var(--wp--preset--color--accent-6, #92a2b7);
	cursor: not-allowed;
}

.bcr-privacy-note {
	margin: var(--wp--preset--spacing--20, 10px) 0 0;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--accent-4, #4a5568);
}

/* Messages */
.bcr-message {
	padding: var(--wp--preset--spacing--20, 10px) var(--wp--preset--spacing--30, 20px);
	border-radius: 4px;
	margin-top: var(--wp--preset--spacing--30, 20px);
	text-align: center;
}

.bcr-message-error {
	background-color: #fef0f0;
	color: var(--wp--preset--color--red, #ff0000);
	border: 1px solid #fdd;
}

.bcr-message-success {
	background-color: #f0fef0;
	color: var(--wp--preset--color--green, #08A100);
	border: 1px solid #dfd;
}

/* Error Page */
.bcr-error-page {
	max-width: 600px;
	margin: var(--wp--preset--spacing--60, 70px) auto;
	padding: 0 var(--wp--preset--spacing--30, 20px);
	text-align: center;
}

.bcr-error-content h1,
.bcr-error-content h2 {
	margin: 0 0 var(--wp--preset--spacing--20, 10px);
	color: var(--wp--preset--color--accent-3, #2d3748);
}

.bcr-error-content p {
	color: var(--wp--preset--color--accent-4, #4a5568);
	margin: 0 0 var(--wp--preset--spacing--30, 20px);
}

/* Validation */
.bcr-product-review.bcr-invalid .bcr-star-rating,
.bcr-shop-question-main.bcr-invalid .bcr-star-rating {
	animation: shake 0.4s ease;
}

.bcr-product-review.bcr-invalid .bcr-rating-label,
.bcr-shop-question-main.bcr-invalid .bcr-rating-label {
	color: var(--wp--preset--color--accent-1, #b20f14);
}

@keyframes shake {

	0%,
	100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-5px);
	}

	75% {
		transform: translateX(5px);
	}
}

/* Responsive */
@media (max-width: 782px) {
	.bcr-review-container {
		padding: var(--wp--preset--spacing--30, 20px);
	}

	.bcr-review-header h1 {
		font-size: var(--wp--preset--font-size--large, 1.38rem);
	}

	.bcr-product-info {
		flex-direction: column;
		text-align: center;
	}

	.bcr-star svg {
		width: 28px;
		height: 28px;
	}

	/* Scale rating mobile */
	.bcr-scale-rating {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.bcr-scale-label-left,
	.bcr-scale-label-right {
		display: none;
	}

	.bcr-scale-buttons {
		display: flex;
		justify-content: space-between;
		gap: 8px;
	}

	.bcr-scale-btn {
		flex: 1;
		width: auto;
		min-width: 0;
		height: 44px;
		border-radius: 4px;
	}

	/* Scale hints on mobile */
	.bcr-scale-rating::before {
		content: "1 = unzufrieden, 5 = sehr zufrieden";
		font-size: 0.7rem;
		color: var(--wp--preset--color--accent-4, #4a5568);
		text-align: center;
		order: -1;
	}

	/* Choice buttons mobile */
	.bcr-choice-buttons {
		gap: 8px;
	}

	.bcr-choice-btn {
		flex: 1;
		min-width: 0;
		padding: 12px 10px;
	}

	/* Additional questions spacing */
	.bcr-shop-questions-additional .bcr-shop-question {
		padding: var(--wp--preset--spacing--20, 15px);
	}
}