/**
 * GRS Forms - stile dei form nel front-end.
 *
 * Tutto si regola con le variabili --grs-f-* impostate dal builder (scheda Aspetto)
 * e si sovrascrive con il CSS personalizzato del form. Il font è quello del tema.
 */

.grs-form-wrap {
	--grs-f-primary: #15181d;
	--grs-f-text: inherit;
	--grs-f-label: inherit;
	--grs-f-field-bg: #fff;
	--grs-f-field-text: inherit;
	--grs-f-border: #c9ced6;
	--grs-f-error: #b42318;
	--grs-f-button-bg: var(--grs-f-primary);
	--grs-f-button-text: #fff;
	--grs-f-radius: 8px;
	--grs-f-stroke: 1px;
	--grs-f-font-size: 16px;
	--grs-f-label-size: 15px;
	--grs-f-padding: 12px;
	--grs-f-gap: 18px;
	--grs-f-button-radius: 8px;
	position: relative;
	color: var(--grs-f-text);
	font-size: var(--grs-f-font-size);
	line-height: 1.5;
}

.grs-form-wrap *,
.grs-form-wrap *::before,
.grs-form-wrap *::after {
	box-sizing: border-box;
}

.grs-form {
	margin: 0;
}

.grs-form__fields {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--grs-f-gap);
}

.grs-form__field {
	grid-column: span 6;
	min-width: 0;
	margin: 0;
}
.grs-form__field--w66 { grid-column: span 4; }
.grs-form__field--w50 { grid-column: span 3; }
.grs-form__field--w33 { grid-column: span 2; }

.grs-form__label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	color: var(--grs-f-label);
	font-size: var(--grs-f-label-size);
	font-weight: 600;
	line-height: 1.35;
}

.grs-form__req {
	color: var(--grs-f-error);
	font-weight: 600;
}

.grs-form-wrap input[type="text"],
.grs-form-wrap input[type="email"],
.grs-form-wrap input[type="tel"],
.grs-form-wrap input[type="number"],
.grs-form-wrap input[type="date"],
.grs-form-wrap select,
.grs-form-wrap textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: var(--grs-f-padding);
	border: var(--grs-f-stroke) solid var(--grs-f-border);
	border-radius: var(--grs-f-radius);
	background-color: var(--grs-f-field-bg);
	color: var(--grs-f-field-text);
	font: inherit;
	font-size: var(--grs-f-font-size);
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.grs-form-wrap select {
	padding-right: calc(var(--grs-f-padding) + 22px);
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.grs-form-wrap textarea {
	min-height: 90px;
	resize: vertical;
}

.grs-form-wrap input::placeholder,
.grs-form-wrap textarea::placeholder {
	color: currentColor;
	opacity: 0.5;
}

.grs-form-wrap input:focus,
.grs-form-wrap select:focus,
.grs-form-wrap textarea:focus {
	outline: none;
	border-color: var(--grs-f-primary);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--grs-f-primary) 22%, transparent);
}

.grs-form__group {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.grs-form__group legend {
	float: left;
	width: 100%;
}

.grs-form__group legend + * {
	clear: both;
}

.grs-form__choice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 8px;
	font-weight: 400;
	cursor: pointer;
	line-height: 1.45;
}

.grs-form__choice input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--grs-f-primary);
	cursor: pointer;
}

.grs-form__consent {
	font-size: 0.9em;
}

.grs-form__consent a {
	color: inherit;
	text-decoration: underline;
}

.grs-form__help {
	margin: 6px 0 0;
	font-size: 0.85em;
	opacity: 0.75;
}

.grs-form__heading {
	margin: 8px 0 0;
	font-size: 1.25em;
	line-height: 1.3;
}

.grs-form__field--divider hr {
	margin: 4px 0;
	border: 0;
	border-top: 1px solid var(--grs-f-border);
}

.grs-form__error {
	margin: 6px 0 0;
	color: var(--grs-f-error);
	font-size: 0.85em;
	font-weight: 600;
}

.grs-form__field--invalid input,
.grs-form__field--invalid select,
.grs-form__field--invalid textarea {
	border-color: var(--grs-f-error);
}

.grs-form__footer {
	display: flex;
	margin-top: var(--grs-f-gap);
}

.grs-form--button-center .grs-form__footer { justify-content: center; }
.grs-form--button-right .grs-form__footer { justify-content: flex-end; }

.grs-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	margin: 0;
	padding: 12px 26px;
	border: 0;
	border-radius: var(--grs-f-button-radius);
	background: var(--grs-f-button-bg);
	color: var(--grs-f-button-text);
	font: inherit;
	font-size: var(--grs-f-font-size);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.05s ease;
}

.grs-form__submit:hover {
	filter: brightness(1.1);
}

.grs-form__submit:active {
	transform: translateY(1px);
}

.grs-form__submit:focus-visible {
	outline: 2px solid var(--grs-f-primary);
	outline-offset: 3px;
}

.grs-form__submit[disabled] {
	opacity: 0.7;
	cursor: progress;
}

.grs-form--button-full .grs-form__submit {
	width: 100%;
}

.grs-form__message {
	margin: var(--grs-f-gap) 0 0;
	padding: 14px 16px;
	border-radius: var(--grs-f-radius);
	border-left: 4px solid currentColor;
	background: rgba(0, 0, 0, 0.04);
}

.grs-form__message:focus {
	outline: none;
}

.grs-form__message p {
	margin: 0;
}

.grs-form__message p + p {
	margin-top: 8px;
}

.grs-form__message--success {
	color: #0a7a45;
	background: #e7f6ee;
}

.grs-form__message--success * {
	color: #14532d;
}

.grs-form__message--error {
	color: var(--grs-f-error);
	background: #fdecea;
}

.grs-form-wrap > .grs-form__message--success:first-child {
	margin-top: 0;
}

/* Etichette nascoste: restano per gli screen reader. */
.grs-form--labels-hidden .grs-form__field > .grs-form__label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.grs-form-notice {
	padding: 10px 14px;
	border: 1px dashed #b42318;
	color: #b42318;
}

@media (max-width: 600px) {
	.grs-form__field--w66,
	.grs-form__field--w50,
	.grs-form__field--w33 {
		grid-column: span 6;
	}
}

@media (prefers-reduced-motion: reduce) {
	.grs-form-wrap * {
		transition: none !important;
	}
}

/* Anteprima nell'editor a blocchi: form non interattivo. */
.editor-styles-wrapper .grs-form-wrap,
.block-editor-block-list__block .grs-form-wrap {
	pointer-events: none;
}