/**
 * Zenth Toolkit — Newsletter segmentado (zenth-newsletter-tabs).
 *
 * Solo mecánica/estructura: layout, estados y transiciones. Colores de
 * marca, tipografías y espaciados de página viven en el tema
 * (zenth-toolkit/seeds/style-header.css, bloque "SE PARTE DONANTES").
 */

.zenth-ntabs [hidden] {
	display: none !important;
}

/* Cabeceras (eyebrow + título + párrafo) del segmento activo. */
.zenth-ntabs__heads {
	position: relative;
}

.zenth-ntabs__head {
	display: block;
}

/* Formulario. */
.zenth-ntabs__form {
	display: block;
}

/* Control segmentado (grupo de radios). */
.zenth-ntabs__segs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.zenth-ntabs__seg {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/*
 * Radio nativo: oculto visualmente pero enfocable con teclado (nunca
 * display:none / visibility:hidden, que lo sacan del árbol de foco).
 */
.zenth-ntabs__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.zenth-ntabs__seg-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	overflow: hidden;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

/* Anillo de foco visible cuando el radio recibe foco por teclado. */
.zenth-ntabs__radio:focus-visible + .zenth-ntabs__seg-label {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.zenth-ntabs__radio:focus:not( :focus-visible ) + .zenth-ntabs__seg-label {
	outline: none;
}

/* Fila input + botón de envío. */
.zenth-ntabs__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.zenth-ntabs__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	appearance: none;
	overflow: hidden;
	text-overflow: ellipsis;
}

.zenth-ntabs__input:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/*
 * Mismo problema que en zenth-sform (ver zenth-support-form.css): el reset
 * de Hello Elementor pone border/border-radius/padding directamente en
 * input[type=email] (0,1,1), que empata/vence a nuestra sola clase (0,1,0)
 * y deja una "caja doble" dentro de la píldora blanca ya vestida por la
 * piel. Ancestro+tipo+clase (0,2,1) anula esa caja sin !important.
 */
.zenth-ntabs input.zenth-ntabs__input {
	border: 0;
	border-radius: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	transition: none;
}

.zenth-ntabs__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: opacity 180ms ease;
}

.zenth-ntabs__submit:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.zenth-ntabs__submit:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.zenth-ntabs__arrow {
	display: block;
	pointer-events: none;
}

/* Legales de cada segmento. */
.zenth-ntabs__legals {
	position: relative;
}

.zenth-ntabs__legal {
	display: block;
}

/* Mensaje de estado del envío (aria-live="polite"). */
.zenth-ntabs__status {
	margin: 0;
}

.zenth-ntabs__status:empty {
	display: none;
}

/*
 * Honeypot: oculto a la vista, presente para bots que ignoran CSS. A
 * diferencia del honeypot de zenth-sform (una <p> wrapper con la clase, que
 * clippea al input normal-flow de dentro), aquí la clase va DIRECTO en el
 * <input type="text">: el reset de Hello Elementor
 * (input[type="text"]{width:100%}, especificidad elemento+atributo 0,1,1)
 * empata/vence a una sola clase nuestra (0,1,0) y, como el elemento es
 * position:absolute, ese width:100% se resuelve contra el bloque contenedor
 * (no contra sí mismo) y el campo terminaba midiendo ~1272px — abriendo
 * scroll horizontal en los 3 viewports aunque clip lo pintara invisible
 * (clip recorta el PINTADO, no el tamaño de caja que cuenta para el
 * scroll). Clase repetida (0,2,0) vence sin depender del orden de carga, y
 * box-sizing:border-box + padding/border en 0 evita que el reset de Hello
 * (padding .5rem 1rem, border 1px) vuelva a inflar la caja por otro lado.
 */
.zenth-ntabs__hp.zenth-ntabs__hp {
	position: absolute;
	box-sizing: border-box;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
	border-radius: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.zenth-ntabs__seg-label,
	.zenth-ntabs__submit {
		transition: none;
	}
}