/**
 * BHI WhatsApp Form
 *
 * Vive dentro de la sección .contacto del tema (rcd-bhi-2), que ya define
 * layout base (flex, ancho, inputs blancos redondeados). Estas reglas son
 * un refinamiento encima de esa base, no un reemplazo — así no se repite
 * el problema de la prueba de rediseño anterior (grillas rotas).
 */

.bhi-whatsapp-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* La cascada NO resuelve esto sola: `[hidden] { display: none }` es una
   regla del user-agent stylesheet, y una regla de autor con el mismo peso
   de especificidad (una sola clase, `.bhi-whatsapp-form`) que fija
   `display: flex` arriba GANA porque las hojas de autor tienen prioridad
   sobre las del user-agent en el cascade origin, independiente del orden
   de aparición. Resultado sin esto: `form.hidden = true` (o el atributo
   `hidden` en el HTML) no ocultaba el formulario — seguía viéndose como
   flex. Al calificar con el propio atributo `[hidden]` subimos la
   especificidad de la regla de autor por encima de la de `display: flex`
   de arriba (mismo selector de clase + atributo > selector de clase solo),
   así que esta sí gana y el form se oculta como corresponde. */
.bhi-whatsapp-form[hidden] {
	display: none;
}

.bhi-whatsapp-form__field {
	display: flex;
	flex-direction: column;
}

.bhi-whatsapp-form__field label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin-bottom: 8px;
	color: #000202;
}

.bhi-whatsapp-form input:not([type="checkbox"]),
.bhi-whatsapp-form textarea {
	margin-bottom: 0;
	border: 1px solid rgba(0, 2, 2, 0.12);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bhi-whatsapp-form input:focus,
.bhi-whatsapp-form textarea:focus {
	outline: none;
	border-color: #128C7E;
	box-shadow: 0 0 0 3px rgba(18, 140, 126, 0.12);
}

.bhi-whatsapp-form textarea {
	resize: none;
}

/* align-items: flex-start (no "center") a propósito: medido con Playwright
   (harness 127.0.0.1:8765) que con "center" el checkbox queda perfecto
   cuando el texto entra en una línea (line-height del span = alto del
   checkbox = 18px, así que ambos ítems del flex miden lo mismo y "center"
   y "flex-start" dan el mismo resultado), pero en móvil, cuando "Acepto
   términos y condiciones" envuelve a 2 líneas, "center" centraba el
   checkbox contra el bloque completo de 2 líneas (36px) y lo dejaba
   flotando a mitad de camino entre ambas líneas, ni alineado con la
   primera ni con la segunda — eso es el "descentrado" reportado. Con
   flex-start el checkbox se alinea con el techo del bloque de texto, que
   coincide con la primera línea; como el line-height del span (18px) ya
   iguala el alto del checkbox, a 1 línea el resultado es idéntico al de
   "center" (no hace falta margin-top adicional). */
.bhi-whatsapp-form__field--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

/* line-height igual al alto del checkbox: sin esto, el line-box del texto
   queda más alto que el checkbox y el align-items:center del label lo
   centra a SU PROPIA altura, no a la del checkbox — se ve "más abajo". */
.bhi-whatsapp-form__field--checkbox label span {
	line-height: 18px;
}

/* Especificidad extra ([type="checkbox"]) a propósito: la regla del tema
   `.contacto input:not([type=submit])` pesa (0,2,1) y le pone width:100% a
   TODO input que no sea submit, incluido el checkbox — sin esto, el
   checkbox se estira y descuadra el label (texto lejos del cuadrito). */
.bhi-whatsapp-form__field--checkbox input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px !important;
	height: 18px;
	margin: 0;
	padding: 0;
	accent-color: #128C7E;
}

.bhi-whatsapp-form__error {
	margin: 0;
	font-size: 13px;
	color: #C0392B;
}

.bhi-whatsapp-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: fit-content;
	padding: 14px 28px;
	background-color: #128C7E;
	border-color: #128C7E;
	color: #FFF;
	font-family: "Barlow", sans-serif;
	font-weight: 600;
}

.bhi-whatsapp-form__submit:hover {
	background-color: #0e6f64;
	border-color: #0e6f64;
}

.bhi-whatsapp-form__icon {
	flex-shrink: 0;
}

.bhi-whatsapp-form__success:not([hidden]) {
	display: flex;
	align-items: center;
	min-height: 200px;
	padding: 24px;
	border-radius: 12px;
	background: rgba(18, 140, 126, 0.08);
	color: #000202;
	font-size: 16px;
}

.bhi-whatsapp-form__success p {
	margin: 0;
}