/*
 * Selector de la Preventa 2026.
 *
 * Estilos alineados con el look & feel del sitio (plugin upline-pickup-inventory):
 * rojo de marca #F41515, degradado firma negro -> rojo, tarjetas claras con
 * bordes suaves, títulos en mayúscula con acento rojo y sombras discretas.
 */

.upline-preventa-selector {
	/* Paleta de marca reutilizada en todo el selector. */
	--upl-red: #F41515;
	--upl-black: #000;
	--upl-gradient: linear-gradient(135deg, #000 0%, #F41515 100%);
	--upl-text: #333;
	--upl-label: #555;
	--upl-muted: #666;
	--upl-bg: #f9f9f9;
	--upl-card: #fff;
	--upl-border: #e0e0e0;

	counter-reset: upl-shirt;
	margin: 25px 0 !important;
	padding: 20px !important;
	background: var(--upl-bg) !important;
	border: 1px solid var(--upl-border) !important;
	border-radius: 8px !important;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.05 );
}

/* Banner introductorio con el degradado firma negro -> rojo. */
.upline-preventa-intro {
	margin: 0 0 20px !important;
	padding: 16px 20px !important;
	background: var(--upl-gradient) !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 15px rgba( 244, 21, 21, 0.25 );
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 );
}

/* Tarjeta por camiseta. */
.upline-preventa-shirt {
	position: relative;
	margin-bottom: 16px;
	padding: 18px 20px;
	background: var(--upl-card);
	border: 1px solid #f0f0f0;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.05 );
}

.upline-preventa-shirt:last-of-type {
	margin-bottom: 0;
}

/* Título de la camiseta: mayúsculas + acento rojo, como los títulos del sitio. */
.upline-preventa-shirt-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px !important;
	padding-bottom: 10px;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--upl-text) !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 2px solid var(--upl-red);
}

/* Contador circular (1, 2, 3) con el degradado de marca. */
.upline-preventa-shirt-title::before {
	counter-increment: upl-shirt;
	content: counter( upl-shirt );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	background: var(--upl-gradient);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba( 244, 21, 21, 0.35 );
}

/* Campos (Categoría / Talla). */
.upline-preventa-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 12px !important;
}

.upline-preventa-field:last-child {
	margin-bottom: 0 !important;
}

.upline-preventa-field label {
	font-size: 0.9em;
	font-weight: 600;
	color: var(--upl-label);
}

.upline-preventa-field select {
	width: 100%;
	max-width: 340px;
	padding: 10px 12px;
	font-size: 14px;
	color: var(--upl-text);
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.upline-preventa-field select:focus {
	outline: none;
	border-color: var(--upl-red);
	box-shadow: 0 0 0 3px rgba( 244, 21, 21, 0.15 );
}

.upline-preventa-field select:disabled {
	background: #f4f4f4;
	color: #999;
	cursor: not-allowed;
}

.upline-preventa-loading {
	font-size: 0.85em;
	color: var(--upl-muted);
	font-style: italic;
}

/* Marca de campo obligatorio en rojo de marca. */
.upline-preventa-field .required {
	color: var(--upl-red);
	border: 0;
	text-decoration: none;
}

/* Estado de carga mientras se recalcula el precio de la ficha. */
.upline-preventa-price-updating {
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

/* Aviso de error con la paleta de error del sitio. */
.upline-preventa-error {
	margin: 16px 0 0 !important;
	padding: 12px 16px !important;
	background: #f8d7da !important;
	border-left: 4px solid #dc3545 !important;
	border-radius: 4px !important;
	color: #721c24 !important;
	font-weight: 600 !important;
	font-size: 0.9em !important;
}

/*
 * Gate "solo socios": aviso + login incrustado para no-socios.
 * Reutiliza la misma identidad visual (degradado firma, rojo de marca).
 */
/* Fondo oscuro SOLO en las pantallas del gate (aviso / login), para que no
 * haya contraste raro con el contenido oscuro sobre fondo blanco. La clase la
 * añade el plugin al <body> únicamente en estas 2 pantallas. */
body.upline-preventa-gate-page,
body.upline-preventa-gate-page .site,
body.upline-preventa-gate-page #page,
body.upline-preventa-gate-page .site-content,
body.upline-preventa-gate-page .content-area,
body.upline-preventa-gate-page main {
	background-color: #000 !important;
}

/* Contenedor de la página-gate (cuando se corta el render del producto).
 * Más ancho en desktop para que los inputs del login respiren mejor;
 * en móvil se ajusta al ancho de pantalla (ver media query al final). */
.upline-preventa-gate-wrap {
	max-width: 820px;
	margin: 60px auto;
	padding: 0 20px;
}

/*
 * Gate en tema OSCURO (el sitio en producción usa fondo negro).
 * Superficie oscura elevada, texto claro, acento rojo de marca.
 */
.upline-preventa-gate {
	margin: 20px 0;
	padding: 24px 26px;
	background: #141414;
	border: 1px solid rgba( 255, 255, 255, 0.12 );
	border-left: 4px solid #F41515;
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.55 );
}

.upline-preventa-gate-title {
	margin: 0 0 10px !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.upline-preventa-gate-text {
	margin: 0 0 18px !important;
	color: rgba( 255, 255, 255, 0.78 ) !important;
	line-height: 1.6;
}

/* Mensaje configurable (HTML): texto siempre blanco + espaciado arriba/abajo. */
.upline-preventa-gate-custom,
.upline-preventa-gate-custom * {
	color: #ffffff !important;
}

.upline-preventa-gate-custom {
	padding-top: 12px;
	padding-bottom: 12px;
	line-height: 1.6;
}

/* Formulario de login de WooCommerce dentro del gate (oscuro). */
.upline-preventa-gate .woocommerce-form-login {
	margin: 0 !important;
	padding: 20px !important;
	background: rgba( 255, 255, 255, 0.04 );
	border: 1px solid rgba( 255, 255, 255, 0.12 );
	border-radius: 6px;
}

.upline-preventa-gate .woocommerce-form-login label,
.upline-preventa-gate .woocommerce-form-login .woocommerce-form-login__rememberme {
	color: rgba( 255, 255, 255, 0.85 ) !important;
}

/* Campos de texto/contraseña sobre fondo oscuro. */
.upline-preventa-gate .woocommerce-form-login input.input-text,
.upline-preventa-gate .woocommerce-form-login input[type="text"],
.upline-preventa-gate .woocommerce-form-login input[type="password"],
.upline-preventa-gate .woocommerce-form-login input[type="email"] {
	background: #1e1e1e !important;
	color: #ffffff !important;
	border: 1px solid rgba( 255, 255, 255, 0.22 ) !important;
	border-radius: 4px !important;
}

.upline-preventa-gate .woocommerce-form-login input.input-text::placeholder,
.upline-preventa-gate .woocommerce-form-login input[type="text"]::placeholder,
.upline-preventa-gate .woocommerce-form-login input[type="password"]::placeholder,
.upline-preventa-gate .woocommerce-form-login input[type="email"]::placeholder {
	color: rgba( 255, 255, 255, 0.45 ) !important;
}

.upline-preventa-gate .woocommerce-form-login input.input-text:focus,
.upline-preventa-gate .woocommerce-form-login input[type="text"]:focus,
.upline-preventa-gate .woocommerce-form-login input[type="password"]:focus,
.upline-preventa-gate .woocommerce-form-login input[type="email"]:focus {
	border-color: #F41515 !important;
	box-shadow: 0 0 0 3px rgba( 244, 21, 21, 0.25 ) !important;
	outline: none !important;
}

/* Enlaces (¿olvidaste tu contraseña?) legibles sobre negro. */
.upline-preventa-gate .woocommerce-form-login a,
.upline-preventa-gate .lost_password a {
	color: #ff6b6b !important;
}

.upline-preventa-gate .woocommerce-form-login .button,
.upline-preventa-gate .woocommerce-form-login button[name="login"] {
	background: var(--upl-gradient, linear-gradient(135deg, #000 0%, #F41515 100%)) !important;
	color: #fff !important;
	border: 0 !important;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 );
}

/*
 * Layout: WooCommerce apila usuario/contraseña en 2 columnas flotadas
 * (form-row-first / form-row-last). Los ponemos a ancho completo, apilados,
 * para que respiren (sin tocar el HTML).
 */
.upline-preventa-gate .woocommerce-form-login .form-row {
	float: none !important;
	width: 100% !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

.upline-preventa-gate .woocommerce-form-login label {
	display: block !important;
	margin-bottom: 6px !important;
}

/* Inputs y el wrapper del campo de contraseña a ancho completo. */
.upline-preventa-gate .woocommerce-form-login .input-text,
.upline-preventa-gate .woocommerce-form-login .password-input {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.upline-preventa-gate .woocommerce-form-login .password-input {
	position: relative !important;
}

/* El botón de "mostrar contraseña" queda dentro del input, a la derecha. */
.upline-preventa-gate .woocommerce-form-login .password-input .show-password-input {
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY( -50% ) !important;
}

/* Fila de "Recuérdame" + botón: apiladas y botón a ancho completo. */
.upline-preventa-gate .woocommerce-form-login .woocommerce-form-login__rememberme {
	display: block !important;
	margin-bottom: 14px !important;
}

.upline-preventa-gate .woocommerce-form-login .woocommerce-form-login__submit {
	display: block !important;
	width: 100% !important;
	padding: 12px 20px !important;
	float: none !important;
}

/* Limpiamos el float que separa las columnas nativas. */
.upline-preventa-gate .woocommerce-form-login .clear {
	display: none !important;
}

/* Responsive: mismo breakpoint que el resto del sitio. */
@media ( max-width: 768px ) {
	.upline-preventa-selector {
		padding: 15px !important;
	}

	.upline-preventa-shirt {
		padding: 15px;
	}

	.upline-preventa-intro {
		font-size: 14px !important;
		padding: 14px 16px !important;
	}

	.upline-preventa-field select {
		max-width: 100%;
	}
}

/* Avisos de WooCommerce en la ficha del pack (visibles sobre tema oscuro). */
.upline-preventa-notices {
	margin: 0 0 16px;
}

.upline-preventa-notices .woocommerce-error,
.upline-preventa-notices .woocommerce-message,
.upline-preventa-notices .woocommerce-info {
	margin: 0 0 12px !important;
	padding: 14px 16px !important;
	border-radius: 6px !important;
	list-style: none !important;
	color: #fff !important;
	font-weight: 600;
	box-shadow: none !important;
}

.upline-preventa-notices .woocommerce-error {
	background: #4a0e11 !important;
	border-left: 4px solid #F41515 !important;
}

.upline-preventa-notices .woocommerce-message {
	background: #103021 !important;
	border-left: 4px solid #46b450 !important;
}

.upline-preventa-notices .woocommerce-info {
	background: #10263c !important;
	border-left: 4px solid #3a86ff !important;
}

.upline-preventa-notices li {
	list-style: none !important;
	margin: 0 !important;
}

.upline-preventa-notices a {
	color: #ffd3d3 !important;
	text-decoration: underline !important;
}