/* seripet-recensioni — le storie dei clienti.
 *
 * Palette brand: navy #142b6f · giallo #ffd601 · crema #f9f6ea.
 * ⚠️ Il giallo su crema è illeggibile (lezione della mail di conferma ordine):
 * qui il giallo fa SOLO da fondo al pulsante e da colore delle stelle su navy,
 * mai da testo su chiaro.
 * ⚠️ Font ereditato dal tema (Baskerville): non si dichiara una famiglia, o le
 * storie sembrerebbero di un altro sito.
 */

.srec-pagina {
	--srec-navy: #142b6f;
	--srec-giallo: #ffd601;
	--srec-crema: #f9f6ea;
	--srec-grigio: #6b7490;
	--srec-bordo: #d3d8e6;

	background: var(--srec-crema);
	color: var(--srec-navy);
	padding: 48px 16px 72px;
	font-family: inherit;
}

.srec-box {
	max-width: 1080px;
	margin: 0 auto;
}

.srec-box h1 {
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	line-height: 1.15;
	margin: 0 0 12px;
	color: var(--srec-navy);
}

.srec-intro {
	font-size: 1.08rem;
	line-height: 1.6;
	color: #3a4460;
	max-width: 62ch;
	margin: 0 0 32px;
}

.srec-bottone {
	display: inline-block;
	background: var(--srec-giallo);
	color: var(--srec-navy);
	font-weight: 700;
	text-decoration: none;
	padding: 14px 26px;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	font-size: 1rem;
	transition: transform .12s ease, box-shadow .12s ease;
}
.srec-bottone:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(20, 43, 111, .18); }

/* ─────────────────────────  archivio  ───────────────────────── */

.srec-griglia {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 26px;
}

.srec-carta {
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 6px 24px rgba(20, 43, 111, .09);
	transition: transform .15s ease, box-shadow .15s ease;
}
.srec-carta:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(20, 43, 111, .16); }
.srec-carta-link { text-decoration: none; color: inherit; display: block; }

.srec-carta-foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--srec-crema); }
.srec-carta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.srec-carta-testo { padding: 18px 20px 22px; }
.srec-carta-testo h2 { font-size: 1.4rem; margin: 4px 0 2px; color: var(--srec-navy); }

.srec-voto { color: #e0a800; letter-spacing: 2px; margin: 0; font-size: 1rem; }
.srec-pet-dati { color: var(--srec-grigio); font-size: .92rem; margin: 0 0 10px; }
.srec-estratto { font-size: 1rem; line-height: 1.55; color: #3a4460; margin: 0 0 12px; }
.srec-firma { font-size: .95rem; color: var(--srec-grigio); margin: 0; }

.srec-vuoto { font-size: 1.05rem; color: var(--srec-grigio); }

.srec-trust {
	margin: 46px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--srec-bordo);
	color: var(--srec-grigio);
	font-size: .98rem;
}
.srec-trust a { color: var(--srec-navy); }

/* ─────────────────────────  singola storia  ───────────────────────── */

.srec-storia { max-width: 760px; }
.srec-storia-foto { border-radius: 20px; overflow: hidden; margin-bottom: 26px; }
.srec-storia-foto img { width: 100%; height: auto; display: block; }
.srec-testo { font-size: 1.14rem; line-height: 1.75; color: #26304d; }
.srec-testo p { margin: 0 0 1.1em; }

.srec-verificato {
	display: inline-block;
	margin-left: 10px;
	background: var(--srec-navy);
	color: #fff;
	font-size: .74rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	vertical-align: middle;
}

.srec-prodotto {
	margin: 38px 0 0;
	padding: 24px;
	background: #fff;
	border-radius: 18px;
	text-align: center;
}
.srec-prodotto p { margin: 0 0 14px; color: var(--srec-grigio); }

.srec-torna { margin-top: 34px; }
.srec-torna a { color: var(--srec-grigio); text-decoration: none; }
.srec-torna a:hover { color: var(--srec-navy); }

/* ─────────────────────────  il modulo  ───────────────────────── */

.srec-modulo, .srec-grazie, .srec-chiuso { max-width: 640px; }

.srec-form {
	background: #fff;
	border-radius: 20px;
	padding: 28px 26px 30px;
	box-shadow: 0 6px 24px rgba(20, 43, 111, .09);
}

.srec-campo { display: block; margin: 0 0 20px; border: 0; padding: 0; }
.srec-campo > span:first-child,
.srec-campo legend {
	display: block;
	font-weight: 700;
	margin-bottom: 7px;
	color: var(--srec-navy);
}
.srec-campo em { font-weight: 400; color: var(--srec-grigio); font-style: normal; }

.srec-campo input[type="text"],
.srec-campo select,
.srec-campo textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--srec-bordo);
	border-radius: 12px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--srec-navy);
	background: #fff;
	box-sizing: border-box;
}
.srec-campo textarea { resize: vertical; line-height: 1.6; }
.srec-campo input:focus, .srec-campo select:focus, .srec-campo textarea:focus {
	outline: 0;
	border-color: var(--srec-navy);
	box-shadow: 0 0 0 3px rgba(20, 43, 111, .1);
}

.srec-riga { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .srec-riga { grid-template-columns: 1fr; gap: 0; } }

.srec-aiuto { display: block; font-size: .88rem; color: var(--srec-grigio); margin-top: 6px; }

/* stelle: si scrivono al contrario nel markup, così il CSS può illuminare
   quella scelta e tutte quelle prima con il selettore dei fratelli. */
.srec-stelle { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.srec-stelle input { position: absolute; opacity: 0; width: 0; height: 0; }
.srec-stelle label {
	font-size: 2.1rem;
	line-height: 1;
	color: var(--srec-bordo);
	cursor: pointer;
	transition: color .12s ease, transform .12s ease;
}
.srec-stelle label:hover, .srec-stelle label:hover ~ label,
.srec-stelle input:checked ~ label { color: #e0a800; }
.srec-stelle label:hover { transform: scale(1.12); }
.srec-stelle input:focus-visible + label { outline: 2px solid var(--srec-navy); outline-offset: 3px; }

.srec-foto input[type="file"] {
	width: 100%;
	padding: 14px;
	border: 1.5px dashed var(--srec-bordo);
	border-radius: 12px;
	background: var(--srec-crema);
	font-family: inherit;
	box-sizing: border-box;
}

.srec-invia { width: 100%; margin-top: 6px; font-size: 1.05rem; padding: 16px; }

.srec-nota { font-size: .86rem; color: var(--srec-grigio); margin: 16px 0 0; line-height: 1.5; }

.srec-errore {
	background: #fff4f4;
	border: 1.5px solid #d64545;
	color: #7a2222;
	padding: 12px 14px;
	border-radius: 12px;
	margin: 0 0 20px;
}

.srec-grazie h1, .srec-chiuso h1 { margin-bottom: 16px; }
.srec-grazie p, .srec-chiuso p { font-size: 1.06rem; line-height: 1.6; color: #3a4460; max-width: 56ch; }