/**
 * VA Studio Core — Formularios de contacto.
 *
 * Estilos base neutros. El theme los adapta pisando las variables:
 *
 *   .va-form, .va-form-popup { --va-form-accent: #e63946; --va-form-radius: 0; }
 *
 * (el popup se inserta en <body>, por eso hay que incluir .va-form-popup)
 */

.va-form,
.va-form-popup {
	--va-form-accent: #1f2937;
	--va-form-accent-contrast: #fff;
	--va-form-text: inherit;
	--va-form-muted: #6b7280;
	--va-form-border: #d1d5db;
	--va-form-bg: #fff;
	--va-form-error: #b91c1c;
	--va-form-success: #15803d;
	--va-form-radius: 6px;
	--va-form-gap: 1rem;
}

/* ---- Formulario ------------------------------------------------------- */

.va-form__title {
	margin: 0 0 .5rem;
}

.va-form__text {
	margin: 0 0 1.5rem;
	color: var(--va-form-muted);
}

.va-form__form {
	display: grid;
	gap: var(--va-form-gap);
}

.va-form__group {
	display: flex;
	flex-direction: column;
	gap: .375rem;
}

.va-form__label {
	font-weight: 600;
	color: var(--va-form-text);
}

.va-form__required {
	color: var(--va-form-error);
	margin-left: .125rem;
}

.va-form__input,
.va-form__textarea,
.va-form__select,
.va-form__file {
	width: 100%;
	box-sizing: border-box;
	padding: .75rem .875rem;
	font: inherit;
	color: inherit;
	background: var(--va-form-bg);
	border: 1px solid var(--va-form-border);
	border-radius: var(--va-form-radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.va-form__textarea {
	min-height: 8rem;
	resize: vertical;
}

.va-form__input:focus-visible,
.va-form__textarea:focus-visible,
.va-form__select:focus-visible,
.va-form__file:focus-visible {
	outline: none;
	border-color: var(--va-form-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--va-form-accent) 20%, transparent);
}

.va-form__hint {
	color: var(--va-form-muted);
	font-size: .8125rem;
}

/* Estados (los pone Pristine) */
.va-form__group--error .va-form__input,
.va-form__group--error .va-form__textarea,
.va-form__group--error .va-form__select,
.va-form__group--error .va-form__file {
	border-color: var(--va-form-error);
}

.va-form__error {
	margin: 0;
	color: var(--va-form-error);
	font-size: .8125rem;
}

/* Honeypot: fuera de pantalla (no display:none, algunos bots lo detectan) */
.va-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.va-form__submit {
	justify-self: start;
	padding: .8125rem 1.75rem;
	font: inherit;
	font-weight: 600;
	color: var(--va-form-accent-contrast);
	background: var(--va-form-accent);
	border: 0;
	border-radius: var(--va-form-radius);
	cursor: pointer;
	transition: opacity .15s ease;
}

.va-form__submit:hover {
	opacity: .9;
}

.va-form__submit:disabled {
	opacity: .6;
	cursor: progress;
}

.va-form__notice {
	padding: .75rem 1rem;
	border: 1px dashed var(--va-form-border, #d1d5db);
}

/* ---- Popup ------------------------------------------------------------ */

.va-form-popup {
	width: min(92vw, 420px);
	margin: auto; /* centrado: algunos themes resetean el margin de todos los elementos */
	padding: 0;
	border: 0;
	border-radius: calc(var(--va-form-radius) * 2);
	background: var(--va-form-bg);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}

.va-form-popup::backdrop {
	background: rgba(0, 0, 0, .55);
}

.va-form-popup[open] {
	animation: va-form-popup-in .2s ease-out;
}

.va-form-popup__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	padding: 2rem 1.5rem 1.5rem;
	text-align: center;
}

.va-form-popup__icon {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

.va-form-popup--success .va-form-popup__icon {
	background: var(--va-form-success);
}

.va-form-popup--success .va-form-popup__icon::before {
	content: "\2713"; /* ✓ */
}

.va-form-popup--error .va-form-popup__icon {
	background: var(--va-form-error);
}

.va-form-popup--error .va-form-popup__icon::before {
	content: "!";
}

.va-form-popup__title {
	margin: 0;
	font-size: 1.25rem;
}

.va-form-popup__text {
	margin: 0;
	color: var(--va-form-muted);
	white-space: pre-line; /* respeta los saltos de línea del textarea de ACF */
}

.va-form-popup__close {
	margin-top: .5rem;
	padding: .625rem 1.5rem;
	font: inherit;
	font-weight: 600;
	color: var(--va-form-accent-contrast);
	background: var(--va-form-accent);
	border: 0;
	border-radius: var(--va-form-radius);
	cursor: pointer;
}

@keyframes va-form-popup-in {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.va-form-popup[open] { animation: none; }
}