/*
 * Formularz opinii Symar — styl pól, fokusu i przycisku ze wspólnych tokenów
 * motywu (--symar-field-*, --symar-btn-radius): ostre narożniki jak w całym
 * sklepie, przyciski 4 px. Wartości po przecinku to zapas, gdyby motyw
 * nie był aktywny.
 */

.symar-review-form {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: 1px solid #e4e8f0;
	background: #fff;
}

.symar-review-form__title {
	margin: 0 0 .35rem;
	color: var(--symar-dark-navy, #1b2038);
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.25;
}

.symar-review-form__lead {
	margin: 0 0 1.25rem;
	color: #5b6576;
	font-size: .85rem;
	line-height: 1.5;
}

/* Etykiety pól — jak w formularzu kontaktowym. */
.symar-review-form__field {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	margin: 0 0 1rem;
}

.symar-review-form__field > label,
.symar-review-form__label,
.symar-review-form__stars legend {
	margin: 0;
	padding: 0;
	color: #2e3a4f;
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.4;
}

.symar-review-form input[type="text"],
.symar-review-form textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: .7rem .85rem;
	border: 1px solid var(--symar-field-border, rgba(15, 30, 61, .16));
	border-radius: 0;
	background: #fff;
	color: #151d2d;
	font-size: .92rem;
	font-weight: 400;
	transition: border-color .15s, box-shadow .15s;
}

.symar-review-form textarea {
	min-height: 140px;
	resize: vertical;
}

.symar-review-form input[type="text"]:hover:not(:focus),
.symar-review-form textarea:hover:not(:focus) {
	border-color: var(--symar-field-border-hover, rgba(15, 30, 61, .34));
}

.symar-review-form input[type="text"]:focus,
.symar-review-form textarea:focus {
	border-color: var(--symar-field-focus, #31529f);
	outline: 0;
	box-shadow: var(--symar-field-ring, 0 0 0 .12rem rgba(49, 82, 159, .14));
}

.symar-review-form__counter {
	align-self: flex-end;
	color: #8a93a4;
	font-size: .75rem;
}

/* Ocena — legend jak etykieta, same gwiazdki bez ramki. */
.symar-review-form__stars {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
	min-width: 0;
}

.symar-review-form__stars legend {
	float: none;
	width: auto;
	margin-bottom: .35rem;
}

.symar-stars-input {
	display: inline-flex;
	flex-direction: row-reverse;
	gap: .2rem;
	font-size: 1.6rem;
	line-height: 1;
}

.symar-stars-input input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.symar-stars-input label {
	cursor: pointer;
	color: #d5dce8;
	transition: color .12s ease, transform .12s ease;
}

.symar-stars-input label::before {
	content: "\2605"; /* ★ */
}

.symar-stars-input label:hover {
	transform: scale(1.12);
}

.symar-stars-input input:checked ~ label,
.symar-stars-input label:hover,
.symar-stars-input label:hover ~ label {
	color: var(--symar-accent-yellow, #f5a524);
}

.symar-stars-input input:focus-visible + label {
	outline: 2px solid var(--symar-field-focus, #31529f);
	outline-offset: 2px;
}

/* Zdjęcie — przycisk + nazwa pliku zamiast natywnego pola. */
.symar-review-form__file {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .5rem;
	border: 1px dashed var(--symar-field-border-hover, rgba(15, 30, 61, .34));
	background: #f7f9fc;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.symar-review-form__file:hover,
.symar-review-form__file:focus-within {
	border-color: var(--symar-field-focus, #31529f);
	background: #f1f5fb;
}

.symar-review-form__file input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.symar-review-form__file-btn {
	flex-shrink: 0;
	padding: .45rem .9rem;
	border-radius: var(--symar-btn-radius, .25rem);
	background: var(--symar-primary, #1a3673);
	color: #fff;
	font-size: .8rem;
	font-weight: 700;
}

.symar-review-form__file-name {
	overflow: hidden;
	color: #8a93a4;
	font-size: .8rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.symar-review-form__file-name.has-file {
	color: #151d2d;
	font-weight: 600;
}

/* Zgoda. */
.symar-review-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	color: #5b6576;
	font-size: .82rem;
	font-weight: 400;
	line-height: 1.45;
	cursor: pointer;
}

.symar-review-form__consent input {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: .15rem;
	accent-color: var(--symar-field-focus, #31529f);
}

/* Przycisk — wygląd (kolor, 4 px, hover) ze wspólnej reguły motywu
   dla przycisków „wyślij" formularzy; tu tylko układ w karcie. */
.symar-review-form__submit {
	width: 100%;
	margin-top: .25rem;
}

/* Komunikaty po wysłaniu. */
.symar-review-form__messages {
	margin: 0 0 1rem;
	padding: .7rem .9rem;
	font-size: .85rem;
	line-height: 1.45;
}

.symar-review-form__messages:empty {
	display: none;
}

.symar-review-form__messages.is-success {
	border: 1px solid #b7e1c3;
	background: #eef8f1;
	color: #17693a;
}

.symar-review-form__messages.is-error {
	border: 1px solid #f1c2c2;
	background: #fdf1f1;
	color: #b3261e;
}

.symar-review-form__messages.is-info {
	border: 1px solid #d5dce8;
	background: #f7f9fc;
	color: #2e3a4f;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.symar-stars-input label {
		transition: none;
	}

	.symar-stars-input label:hover {
		transform: none;
	}
}