/**
 * Australcode Back In Stock — estilos del formulario de aviso.
 *
 * Compat defensiva (theme-builder-compatibility.md §1.3): «convivir, no dominar».
 * Todo está scopeado a `.acbis-form` (nada de selectores de elemento desnudos),
 * con tokens propios `--acbis-*` para que el dueño de la tienda lo tematice sin
 * pelear con el theme ni usar !important. Ejemplo para igualar tu marca:
 *
 *   .acbis-form,
 *   .acbis-grouped {
 *       --acbis-accent:  #3CB54A;
 *       --acbis-btn-bg:  #3CB54A;
 *       --acbis-btn-fg:  #ffffff;
 *       --acbis-btn-border: #3CB54A;
 *   }
 *
 * Incluir `.acbis-grouped` en el override tematiza también el chrome + ícono de
 * la sección de producto agrupado (comparte los mismos tokens que `.acbis-form`).
 *
 * Defaults sobrios y neutros: card propia + botón outline que hereda el color de
 * texto del theme (currentColor), así se ve intencional en cualquier tema.
 * Los neutros derivan de currentColor vía color-mix (con fallback rgba) para
 * sobrevivir themes oscuros: un border rgba(0,0,0,…) desaparece sobre negro.
 *
 * DE-FORK PARCIAL sobre el Australcode Frontend Kit (`assets/acfk/`), y el
 * «parcial» es deliberado. Este plugin es el ORIGEN de la técnica: resolvió la
 * supervivencia en theme oscuro antes de que el kit existiera, y de acá se
 * extrajo. Así que el criterio del de-fork fue quirúrgico — se elimina lo que
 * resultó ser DUPLICACIÓN EXACTA (los tres neutros derivados, que coinciden con
 * el kit hasta en los porcentajes 14/3/28, y los dos colores semánticos, que
 * coinciden hasta en el hex) y se CONSERVA lo que difiere en valores (radios de
 * 12/8px contra 10/6px del kit, padding del botón 10x22 contra 10x18).
 * Reemplazar eso también habría cambiado el aspecto de la superficie más pulida
 * de la familia a cambio de nada. Verificado con firma geométrica y de color
 * antes/después: sin diferencias. Canon: wp-plugin-design/references/frontend-kit.md
 *
 * Unidades en px (no rem): el form debe medir igual en cualquier theme, y muchos
 * themes redefinen el root font-size (técnica 62.5% → 1rem=10px) — con rem el
 * widget se descalibraba (L-044). Los pocos `em` son intencionales: escalan con
 * el font-size local del propio elemento (íconos, spinner).
 */
.acbis-form {
	/* Tokens tematizables (override desde el theme/builder). */
	--acbis-radius: 12px;
	/* Los tres neutros y los dos semánticos vienen del kit — eran idénticos, no
	   parecidos: mismos porcentajes de currentColor y mismos hex. El fallback
	   literal es el mismo que tenía este archivo, así que sin el marcador `.acfk`
	   el widget degrada exactamente a lo de antes. */
	--acbis-border: var( --acfk-hairline, rgba( 0, 0, 0, 0.1 ) );
	--acbis-bg: var( --acfk-wash, rgba( 0, 0, 0, 0.02 ) );
	/* FD-403 — el default deja de ser el azul del panel de wp-admin: no significa
	   nada en la tienda del cliente y era el unico pixel cromatico que el widget
	   importaba desde otro producto. Ahora es el accent del propio Frontend Kit
	   (el mismo valor que `--acfk-_accent-premium`), o sea el verde que ya usan
	   las demas superficies de la familia.

	   Sigue siendo un HEX y no `var(--acfk-accent)` ni `currentColor`: el aro de
	   foco se pinta con este token y el guard de 3:1 de
	   `AppearanceCss::focusRingOn()` solo corre sobre un hex explicito. Ademas
	   `AppearanceCssTest::test_default_accent_constant_matches_the_stylesheet()`
	   lee esta linea con un regex de hex — un `var()` aca deja el guard anti-drift
	   sin nada que leer y el suite en rojo.
	   Medido: 5.29:1 sobre papel blanco (el default anterior daba 5.17:1). */
	--acbis-accent: #0e7a5f;
	--acbis-field-radius: 8px;
	--acbis-field-border: var( --acfk-field-line, rgba( 0, 0, 0, 0.18 ) );
	--acbis-btn-bg: transparent;
	--acbis-btn-fg: currentColor;
	--acbis-btn-border: currentColor;
	--acbis-btn-radius: 8px;
	--acbis-success: var( --acfk-success, #1a7f37 );
	--acbis-error: var( --acfk-error, #b32d2e );

	margin: 20px 0;
	padding: 20px 22px;
	border: 1px solid var( --acbis-border );
	border-radius: var( --acbis-radius );
	background: var( --acbis-bg );
}

/* El bloque `@supports` que derivaba estos tres neutros de `currentColor` vivía
   acá y ahora vive en el kit, con los mismos porcentajes (14/3/28) porque de acá
   salieron. Borrarlo es el de-fork: el mismo fix deja de estar en dos lugares. */

.acbis-form.is-hidden {
	display: none;
}

/* Aparición del form en productos variables (al elegir variación agotada). */
@media ( prefers-reduced-motion: no-preference ) {
	.acbis-form--variable:not( .is-hidden ) {
		animation: acbis-reveal 0.22s ease-out;
	}

	@keyframes acbis-reveal {
		from {
			opacity: 0;
			transform: translateY( 4px );
		}
		to {
			opacity: 1;
			transform: none;
		}
	}
}

.acbis-form__lead {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.35;
}

.acbis-form__lead-icon {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	/* Hereda el color del texto — cero color impuesto. */
	color: var( --acbis-accent );
}

.acbis-form__form {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.acbis-form__field {
	display: block;
}

.acbis-form__email {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var( --acbis-field-border );
	border-radius: var( --acbis-field-radius );
	background: transparent;
	color: inherit;
	font-size: 16px;
	line-height: 1.3;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.acbis-form__email::placeholder {
	color: currentColor;
	opacity: 0.5;
}

/* FD-111 — `:focus-visible` como el botón de más abajo, no `:focus`: eran dos reglas
   de foco distintas para el mismo formulario. En un campo de texto los dos matchean
   igual (el navegador siempre lo considera focus-visible porque acepta teclado), así
   que el pixel no cambia; lo que se cierra es la incoherencia del archivo. */
.acbis-form__email:focus-visible {
	outline: 2px solid var( --acbis-focus, var( --acbis-accent ) );
	outline-offset: 1px;
	border-color: var( --acbis-accent );
}

/*
 * Campo de teléfono (Multichannel: SMS/WhatsApp), inyectado por
 * `acbis_form_extra_fields`. Espeja el campo email para que el input opcional de
 * teléfono lea como parte del mismo form y no como un default crudo del navegador
 * — mismos tokens, mismo target de 44px, mismo font de 16px (evita el auto-zoom
 * de iOS). Gap Pro pre-existente (Multichannel 1.4.0); el grouped lo hace más
 * visible al renderlo por hijo. No afecta el build free (gateado por la feature).
 */
.acbis-form__phone {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var( --acbis-field-border );
	border-radius: var( --acbis-field-radius );
	background: transparent;
	color: inherit;
	font-size: 16px;
	line-height: 1.3;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.acbis-form__phone::placeholder {
	color: currentColor;
	opacity: 0.5;
}

.acbis-form__phone:focus-visible {
	outline: 2px solid var( --acbis-focus, var( --acbis-accent ) );
	outline-offset: 1px;
	border-color: var( --acbis-accent );
}

/* Honeypot: fuera de la vista pero accesible a bots. */
.acbis-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.acbis-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	line-height: 1.4;
	opacity: 0.85;
}

.acbis-form__consent-input {
	margin-top: 3px;
	flex: 0 0 auto;
	/* El control nativo sigue el accent themeable (L-030: sin esto, azul browser). */
	accent-color: var( --acbis-accent );
}

/*
 * Botón token-driven. Default: outline que hereda el color de texto del theme
 * (sobrio, intencional en cualquier tema, incluido block themes que no estilizan
 * `.button`). El dueño lo vuelve sólido/branded seteando --acbis-btn-bg/fg.
 * El hover es un velo de currentColor por background-image: funciona igual
 * sobre el outline transparente y sobre un fondo sólido del theme.
 */
.acbis-form__submit {
	align-self: flex-start;
	cursor: pointer;
	position: relative;
	min-height: 44px;
	padding: 10px 22px;
	border: 1px solid var( --acbis-btn-border );
	border-radius: var( --acbis-btn-radius );
	background: var( --acbis-btn-bg );
	color: var( --acbis-btn-fg );
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.acbis-form__submit:hover:not( :disabled ) {
	background-image: linear-gradient(
		color-mix( in srgb, currentColor 9%, transparent ),
		color-mix( in srgb, currentColor 9%, transparent )
	);
}

.acbis-form__submit:active:not( :disabled ) {
	transform: translateY( 1px );
}

.acbis-form__submit:focus-visible {
	outline: 2px solid var( --acbis-focus, var( --acbis-accent ) );
	outline-offset: 2px;
}

.acbis-form__submit:disabled {
	opacity: 0.65;
	cursor: progress;
}

/* Spinner de envío (el JS agrega .is-loading junto con disabled). */
.acbis-form__submit.is-loading {
	padding-right: 38px;
}

.acbis-form__submit.is-loading::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 0.95em;
	height: 0.95em;
	margin-top: -0.5em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: acbis-spin 0.7s linear infinite;
}

@media ( prefers-reduced-motion: reduce ) {
	.acbis-form__submit.is-loading::after {
		animation-duration: 1.6s;
	}
}

@keyframes acbis-spin {
	to {
		transform: rotate( 360deg );
	}
}

/*
 * Mensaje de estado como mini-alert: dot de estado (patrón de familia) +
 * tinte del fondo en el color semántico. Vacío no ocupa caja.
 */
.acbis-form__message {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
}

.acbis-form__message.is-success,
.acbis-form__message.is-error {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 9px 13px;
	border-radius: var( --acbis-field-radius );
	border: 1px solid;
	/* F-005: el TEXTO hereda el color legible del theme (AA en light y dark);
	   la semántica la cargan el dot + el borde + el tinte, no el texto. */
	color: inherit;
}

.acbis-form__message.is-success::before,
.acbis-form__message.is-error::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	transform: translateY( -1px );
}

.acbis-form__message.is-success {
	border-color: var( --acbis-success );
	background: rgba( 26, 127, 55, 0.07 );
}

.acbis-form__message.is-success::before {
	background: var( --acbis-success );
}

.acbis-form__message.is-error {
	border-color: var( --acbis-error );
	background: rgba( 179, 45, 46, 0.07 );
}

.acbis-form__message.is-error::before {
	background: var( --acbis-error );
}

@supports ( color: color-mix( in srgb, red 50%, blue ) ) {
	.acbis-form__message.is-success {
		border-color: color-mix( in srgb, var( --acbis-success ) 45%, transparent );
		background: color-mix( in srgb, var( --acbis-success ) 8%, transparent );
	}

	.acbis-form__message.is-error {
		border-color: color-mix( in srgb, var( --acbis-error ) 45%, transparent );
		background: color-mix( in srgb, var( --acbis-error ) 8%, transparent );
	}
}

/*
 * Estado de éxito (#4): tras inscribirse, el JS agrega .acbis-form--done para
 * colapsar el form a una confirmación limpia — oculta lead + campos + botón y
 * deja solo el mensaje de éxito. En modal, el evento `acbis:subscribed` permite
 * auto-cerrar.
 */
.acbis-form--done .acbis-form__lead,
.acbis-form--done .acbis-form__field,
.acbis-form--done .acbis-form__consent,
.acbis-form--done .acbis-form__submit {
	display: none;
}

.acbis-form--done .acbis-form__message {
	margin: 0;
}

/*
 * Producto agrupado (grouped): una sección con un formulario por cada hijo
 * agotado. La sección es la card (borde + fondo + lead una sola vez); cada hijo
 * es una fila compacta SIN card propia, separada por un hairline, con el nombre
 * del ítem sobre su campo. Los tokens se re-declaran acá porque `.acbis-grouped`
 * no es `.acbis-form` (los custom properties de aquel no llegan al padre).
 */
/* La sección grouped comparte los tokens de `.acbis-form`, así UN solo override
 * documentado (`.acbis-form, .acbis-grouped { --acbis-accent }`) tematiza el
 * widget entero — chrome de la sección + ícono campana + forms internos juntos.
 * Sin esto, `.acbis-grouped` era un scope aparte con acento hardcodeado y el
 * override del dueño dejaba la sección de dos tonos (P2-002). */
.acbis-form,
.acbis-grouped {
	--acbis-radius: 12px;
	/* Mismo de-fork que arriba: los dos neutros los da el kit. Era la SEGUNDA
	   copia del mismo `@supports` en este archivo — el fix de theme oscuro vivía
	   duplicado dentro del propio plugin que lo inventó. */
	--acbis-border: var( --acfk-hairline, rgba( 0, 0, 0, 0.1 ) );
	--acbis-bg: var( --acfk-wash, rgba( 0, 0, 0, 0.02 ) );
	/* FD-403 — misma tinta que arriba. Las DOS declaraciones se mueven juntas:
	   parchear solo una dejaba `.acbis-grouped` y el theme oscuro en el azul de
	   wp-admin mientras la superficie simple cambiaba. */
	--acbis-accent: #0e7a5f;
}

.acbis-grouped {
	margin: 20px 0;
	padding: 20px 22px;
	border: 1px solid var( --acbis-border );
	border-radius: var( --acbis-radius );
	background: var( --acbis-bg );
}

.acbis-grouped__lead {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 4px;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.35;
}

/* Cada hijo dentro de la sección pierde su chrome de card y queda como fila. */
.acbis-grouped .acbis-form--grouped-item {
	margin: 0;
	padding: 16px 0;
	border: 0;
	border-top: 1px solid var( --acbis-border );
	border-radius: 0;
	background: transparent;
}

.acbis-grouped .acbis-form--grouped-item:first-of-type {
	border-top: 0;
	padding-top: 10px;
}

.acbis-grouped .acbis-form--grouped-item:last-of-type {
	padding-bottom: 0;
}

/* Nombre del hijo = etiqueta de ítem: un escalón bajo el lead (16/600 + ícono),
 * no un par — 14px + leve de-énfasis para jerarquía clara de 3 niveles (P2-003). */
.acbis-form__item-name {
	margin: 0 0 10px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	opacity: 0.82;
}

/* ── Pantalla pública de confirmación / baja ──────────────────────────────────
 *
 * La renderiza `PublicEndpoint` en un endpoint VIRTUAL (`template_redirect`),
 * enmarcada por el chrome del sitio: el theme que la rodea puede ser cualquiera,
 * incluido uno oscuro. Es la única superficie del plugin que ocupa una página
 * entera, y a la que el cliente llega desde un correo.
 *
 * Estas medidas estaban INLINE en el PHP (`style="max-width:560px;…"`), donde
 * `frontend-css-lint.sh` no las ve — el gate mide archivos `.css`. Tercera
 * instancia de la misma clase (B-711); el `font-size:16px` se soltó a propósito:
 * la tipografía se hereda del theme.
 *
 * `box-sizing` explícito en el botón: el kit lo declara desde v1.0.9, pero esta
 * pantalla renderiza fuera del wrapper donde el theme aplica su reset y el
 * cinturón cuesta 2 líneas (B-710).
 * ──────────────────────────────────────────────────────────────────────────── */
.acbis-screen {
	max-width: 560px;
	margin: 0 auto;
	/* FD-501 — este `padding` es ANTERIOR a que la pantalla consumiera `.acfk-card`
	   y lo anulaba: las dos reglas pesan (0,1,0) y `frontend.css` carga despues del
	   kit (lo declara como dependencia), asi que ganaba el 0 vertical y el mensaje
	   quedaba apoyado sobre el trazo del borde — medido: brand a 1px del borde
	   superior, CTA a 1px del inferior, en free y en premium.
	   Se declara el padding COMPLETO en vez de borrar la linea: `.acfk-card` da
	   16px parejos y esta pantalla necesita mas aire lateral que una card de
	   dashboard, porque es una pagina entera. */
	padding: 24px 22px;
	text-align: center;
}

/* FD-401 — esta pantalla la abre un cliente final desde un correo y, en block
   themes, `render()` la emite SIN header ni footer del theme (decision correcta:
   `get_header()` dispara PHP Deprecated). El efecto colateral es que el mensaje
   quedaba pegado arriba en una pagina por lo demas vacia. Se le devuelve el eje
   vertical que el chrome ausente daba gratis.

   `svh` y no `vh`: en movil la barra de direcciones de iOS hace que `100vh`
   sobresalga del viewport visible y empuje el boton bajo el fold.
   `place-content` y no `justify-content`: `.acbis-screen` es `.acfk-stack`, o
   sea flex-column, y hay que centrar en los dos ejes. */
.acbis-screen-wrap {
	display: grid;
	place-content: center;
	/* FD-505 — `80svh` no centra: deja el centro de la card en el 40,0% de la
	   altura del viewport (identico en 1280x900, 1440x900 y 768x1024, que es la
	   firma de un aritmetico y no de un ajuste optico), o sea 90-102px sobre el
	   centro. `100svh` con `min-height` (no `height`) centra exacto y NO puede
	   desbordar: si el mensaje crece, crece el contenedor. */
	min-height: 100svh;
	box-sizing: border-box;
	/* El componente horizontal existe para que a 375px la card no muera contra el
	   borde del viewport: sin el quedaba full-bleed con `radius:10px`, o sea las
	   esquinas redondeadas invisibles. */
	padding: 32px 16px;
}

/* La identidad de la tienda: sin ella el cliente aterriza en una pagina blanca
   sin saber de quien es. Va en el flujo del kit (hereda tipografia del theme),
   no como logo — un logo exigiria un ajuste de tamano que el plugin no puede
   conocer. */
.acbis-screen__brand {
	margin: 0 0 24px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	opacity: 0.7;
}

/* FD-411 — el h1 del theme puede medir 48px (TT5). Para un mensaje de estado de
   una linea eso es un titular, no un titulo. Se acota SIN fijar un px: `clamp`
   respeta al theme que ya sea razonable y solo corta al que grita. */
.acbis-screen__title {
	margin: 0;
	font-size: clamp( 22px, 4vw, 32px );
	line-height: 1.2;
}

.acbis-screen__body {
	line-height: 1.6;
}

.acbis-screen__back {
	margin: 0;
}

.acbis-screen .acfk-btn {
	box-sizing: border-box;
	max-width: 100%;
}

@media ( max-width: 600px ) {
	/* En viewport corto el centrado gana poco y el aire cuesta fold: el cliente
	   llega desde un correo y lo primero que tiene que ver es si su aviso quedo
	   registrado. Se baja el minimo y se reduce el padding. */
	.acbis-screen-wrap {
		min-height: 0;
		padding: 24px 16px;
	}

	/* Menos aire interno en pantalla chica, pero nunca 0: el defecto que FD-501
	   corrige se ve PEOR en movil, donde la card ocupa casi todo el ancho. */
	.acbis-screen {
		padding: 20px 18px;
	}
}