/*
 * Formularios de demo (Contact Form 7). Medidas: design/forms.md.
 * Solo se carga en páginas con formulario (inc/forms/forms.php).
 *
 * El marcado sale de inc/forms/definitions.php: .sy-form--dark (Home) y
 * .sy-form--light (página Book a Demo). Los estados que el Figma no muestra
 * (foco, error, marcado, enviando, enviado) siguen el plan, "Lo que el Figma
 * no define".
 */

/* =============================================================================
   Tarjeta (container de Elementor alrededor del formulario)
   ========================================================================== */

.sy-form-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 39px;
	border-radius: 30px;
}

.sy-form-card--dark {
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: var(--sy-gradient-glass);
	box-shadow: var(--sy-shadow-glass);
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
}

.sy-form-card--light {
	gap: 24px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	background: var(--sy-white);
	box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.75);
	--sy-focus: var(--sy-ultramarine);
}

/* Línea en degradé sobre el borde superior. */
.sy-form-card--light::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 32px;
	right: 32px;
	height: 4px;
	border-radius: 0 0 4px 4px;
	background: linear-gradient(90deg, var(--sy-ultramarine) 0%, var(--sy-green) 50%, var(--sy-lime) 100%);
}

.sy-form-card__head {
	--sy-dir: row;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
}

.sy-form-card__title {
	color: var(--sy-white);
	font-size: 24px;
	font-weight: 700;
	line-height: normal;
}

.sy-form-card--light .sy-form-card__title {
	color: var(--sy-ultramarine);
	font-size: 28px;
	letter-spacing: -0.56px;
}

.sy-form-card--dark .sy-tile {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	font-size: 22px;
}

.sy-form-card--light .sy-tile {
	font-size: 24px;
}

@media (max-width: 767px) {
	.sy-form-card {
		padding: 23px 19px;
		border-radius: var(--sy-r-card);
	}

	.sy-form-card__title { font-size: 19px; }

	/* El claro va de borde a borde en el Figma de 390. */
	.sy-form-card--light {
		gap: 20px;
		margin-inline: calc(-1 * var(--sy-gutter));
		padding: 25px 19px;
	}

	.sy-form-card--light::before {
		left: 20px;
		right: 20px;
	}

	.sy-form-card--light .sy-form-card__title {
		font-size: 22px;
		letter-spacing: -0.44px;
	}

	.sy-form-card--light .sy-tile {
		width: 46px;
		height: 46px;
	}
}

/* =============================================================================
   Formulario
   ========================================================================== */

/* Variables por variante. Van en el <form> (con :has) porque la caja de
   respuesta de CF7 es hermana de .sy-form y no su hija. */
.wpcf7-form:has(.sy-form--dark) {
	--f-label: var(--sy-on-dark);
	--f-bg: rgba(4, 8, 51, 0.45);
	--f-border: rgba(255, 255, 255, 0.18);
	--f-text: var(--sy-white);
	--f-note: var(--sy-periwinkle);
	--f-error: var(--sy-danger-on-dark);
	--f-gap: 22px;
	--sy-focus: var(--sy-lime);
}

.wpcf7-form:has(.sy-form--light) {
	--f-label: #3A4266;
	--f-bg: #F7F9FD;
	--f-border: #D5DBEC;
	--f-text: var(--sy-ink);
	--f-note: var(--sy-muted);
	--f-error: var(--sy-danger);
	--f-gap: 24px;
	--sy-focus: var(--sy-ultramarine);
}

/* La caja de respuesta (errores o éxito) va arriba: es lo primero que se lee. */
.wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--f-gap);
}

.wpcf7-form .hidden-fields-container {
	display: none;
}

.sy-form {
	display: flex;
	flex-direction: column;
	gap: var(--f-gap);
}

.sy-form__grid {
	display: grid;
	gap: 16px;
}

@media (min-width: 768px) {
	.sy-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}
}

.sy-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.sy-field__label {
	padding: 0;
	color: var(--f-label);
	font-size: 13px;
	font-weight: 600;
	line-height: normal;
}

fieldset.sy-field {
	display: block;
}

fieldset.sy-field > .sy-field__label {
	margin-bottom: 12px;
}

.sy-form .wpcf7-form-control-wrap {
	display: block;
}

/* --- Controles ---------------------------------------------------------------- */

.sy-form :is(input[type="text"], input[type="email"], select, textarea) {
	display: block;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid var(--f-border);
	border-radius: 14px;
	background-color: var(--f-bg);
	color: var(--f-text);
	font-size: 15px;
	line-height: normal;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--sy-fast) var(--sy-ease), box-shadow var(--sy-fast) var(--sy-ease);
}

/* .wpcf7-form-control para igualar la especificidad del :is() de arriba,
   que toma la de su argumento más fuerte (input[type="text"]). */
.sy-form textarea.wpcf7-form-control {
	min-height: 96px;
	padding: 14px 20px;
	resize: vertical;
}

/* Chevron: el Figma deja el lugar (padding de 32) pero la importación lo perdió. */
.sy-form select.wpcf7-form-control {
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9D0F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px;
	cursor: pointer;
}

/* La lista desplegable la pinta el sistema: texto oscuro para que se lea. */
.sy-form select option {
	color: var(--sy-ink);
}

.sy-form :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--sy-focus);
	outline-offset: 2px;
	border-color: var(--sy-focus);
}

/* --- Radios en chips (formulario claro) --------------------------------------- */

.sy-form .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sy-form .wpcf7-list-item {
	margin: 0;
}

.sy-form .wpcf7-radio label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 0 15px;
	border: 1px solid var(--f-border);
	border-radius: var(--sy-r-pill);
	background: var(--sy-white);
	color: var(--f-label);
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	cursor: pointer;
	transition: border-color var(--sy-fast) var(--sy-ease), background-color var(--sy-fast) var(--sy-ease);
}

.sy-form input[type="radio"] {
	flex: none;
	width: 14px;
	height: 14px;
	margin: 0;
	border: 2px solid var(--sy-line-strong);
	border-radius: 50%;
	background: var(--sy-white);
	-webkit-appearance: none;
	appearance: none;
	transition: border-width var(--sy-fast) var(--sy-ease), border-color var(--sy-fast) var(--sy-ease);
}

/* Marcado: no está en el Figma. Anillo y borde ultramar, fondo apenas tintado. */
.sy-form .wpcf7-radio label:has(input:checked) {
	border-color: var(--sy-ultramarine);
	background: rgba(10, 23, 145, 0.05);
	color: var(--sy-ultramarine);
}

.sy-form input[type="radio"]:checked {
	border: 4px solid var(--sy-ultramarine);
}

.sy-form .wpcf7-radio label:hover {
	border-color: var(--sy-ultramarine);
}

.sy-form .wpcf7-radio label:has(input:focus-visible) {
	outline: 2px solid var(--sy-focus);
	outline-offset: 2px;
}

.sy-form input[type="radio"]:focus-visible {
	outline: none;
}

@media (max-width: 767px) {
	.sy-form .wpcf7-radio label {
		padding: 0 13px;
		font-size: 13px;
	}
}

/* --- Botón y nota --------------------------------------------------------------- */

.sy-form__submit {
	width: 100%;
}

.sy-form--dark .sy-form__submit {
	margin-top: 4px;
}

/* La flecha del set de iconos, por máscara (el template de CF7 no lleva SVG). */
.sy-form__submit::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
	mask: url("../icons/arrow-right.svg") center / contain no-repeat;
}

@media (max-width: 767px) {
	.sy-form__submit {
		--btn-h: 52px;
		--btn-px: 24px;
	}
}

/* Enviando: el botón dice "Sending…" y no se puede volver a tocar. */
.wpcf7-form.submitting .sy-form__submit {
	position: relative;
	color: transparent;
	pointer-events: none;
}

.wpcf7-form.submitting .sy-form__submit::after {
	opacity: 0;
}

.wpcf7-form.submitting .sy-form__submit::before {
	content: "Sending…";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--btn-fg);
}

.sy-form__note {
	margin: 0;
	color: var(--f-note);
	font-size: 14px;
	line-height: normal;
	text-align: center;
}

.sy-form__note--secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	line-height: 19.5px;
}

.sy-form__note--secure::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: url("../icons/shield.svg") center / contain no-repeat;
	mask: url("../icons/shield.svg") center / contain no-repeat;
}

/* =============================================================================
   Validación y respuesta
   ========================================================================== */

.sy-form .wpcf7-not-valid {
	border-color: var(--f-error);
}

.sy-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: var(--f-error);
	font-size: 13px;
	font-weight: 500;
	line-height: normal;
}

/* Error en el grupo de radios: el borde va en los chips. */
.sy-form .wpcf7-radio.wpcf7-not-valid label {
	border-color: var(--f-error);
}

/* Resumen: arriba del formulario (order) y con el color de la variante. */
.wpcf7-form .wpcf7-response-output {
	order: -1;
	margin: 0;
	padding: 14px 18px;
	border: 1px solid var(--f-error);
	border-radius: 14px;
	color: var(--f-error);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
}

.wpcf7-form.init .wpcf7-response-output,
.wpcf7-form.resetting .wpcf7-response-output,
.wpcf7-form.submitting .wpcf7-response-output {
	display: none;
}

/* Enviado: el formulario se reemplaza por el mensaje de éxito. */
.wpcf7-form.sent .sy-form {
	display: none;
}

.wpcf7-form.sent .wpcf7-response-output {
	padding: 22px 24px;
	border-color: var(--sy-lime);
	background: rgba(146, 239, 44, 0.08);
	color: var(--f-text);
	font-size: 16px;
	font-weight: 600;
}

.wpcf7-form.sent .wpcf7-response-output::before {
	content: "";
	display: block;
	width: 28px;
	height: 28px;
	margin-bottom: 12px;
	background: var(--sy-lime);
	-webkit-mask: url("../icons/check.svg") center / contain no-repeat;
	mask: url("../icons/check.svg") center / contain no-repeat;
}

.wpcf7-form:has(.sy-form--light).sent .wpcf7-response-output::before {
	background: var(--sy-green);
}