/**
 * GS Premium — avisos emergentes. Handle 'gs-toast' (dep: gs-tokens).
 *
 * Port del motor de Fanor. Sustituye a `alert()` y a los avisos nativos de WooCommerce
 * (`.woocommerce-message` / `-error` / `-info`), que se interceptan por JS.
 *
 * Dos cambios respecto al original, ambos a propósito:
 *  · Los colores salen de los tokens en vez de ser literales, para que un aviso se vea del
 *    mismo verde y del mismo rojo que el resto del plugin. Por eso depende de `gs-tokens`.
 *  · Añade el bloque de `prefers-reduced-motion`, que el original no tenía.
 *
 * Se encola GLOBALMENTE (no por widget), así que sus reglas tienen que aguantar cualquier
 * página y cualquier tema.
 */

.gs-toast-stack {
	position: fixed;
	top: 24px;
	right: 24px;
	/* Del contrato de z-index de tokens.css: por encima del cajón del carrito, porque un
	   aviso de error tiene que verse aunque el cajón esté abierto. */
	z-index: var(--gs-z-toast);
	display: flex;
	flex-direction: column;
	gap: 12px;
	/* El contenedor no intercepta clics; cada aviso los recupera por su cuenta. Sin esto,
	   una franja invisible de 420px de ancho bloquearía la esquina de la página. */
	pointer-events: none;
	max-width: calc(100vw - 48px);
}

.gs-toast {
	pointer-events: auto;
	min-width: 280px;
	max-width: 420px;
	background: #fff;
	color: var(--gs-tinta);
	border-left: 4px solid var(--gs-verde);
	border-radius: var(--gs-r-lg);
	padding: 14px 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06);
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--gs-font-body);
	font-size: 14px;
	line-height: 1.45;
	transform: translateX(120%);
	opacity: 0;
	transition: transform 240ms var(--gs-e-out), opacity 240ms var(--gs-e-soft);
	box-sizing: border-box;
}

.gs-toast.is-visible {
	transform: translateX(0);
	opacity: 1;
}

.gs-toast.is-leaving {
	transform: translateX(120%);
	opacity: 0;
}

/* ── Variantes ───────────────────────────────────────────────────────────── */

.gs-toast--success { border-left-color: var(--gs-verde); }
.gs-toast--error   { border-left-color: var(--gs-rojo); }
.gs-toast--info    { border-left-color: var(--gs-oro); }
.gs-toast--warning { border-left-color: var(--gs-ambar); }

.gs-toast__icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}

.gs-toast--success .gs-toast__icon { color: var(--gs-verde); }
.gs-toast--error   .gs-toast__icon { color: var(--gs-rojo); }
.gs-toast--info    .gs-toast__icon { color: var(--gs-oro); }
.gs-toast--warning .gs-toast__icon { color: var(--gs-ambar); }

.gs-toast__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.gs-toast__text {
	flex: 1;
	word-break: break-word;
	font-weight: 500;
	color: var(--gs-tinta);
}

/* ── Aviso con lista (`opciones.lineas`) ─────────────────────────────────────
   Un título y, debajo, una línea por cosa que corregir. Lo usa el checkout cuando un paso
   tiene varios campos mal. A (0,2,0) y con márgenes y viñetas declarados: el aviso se pinta
   en cualquier página, y un tema o el Kit de Elementor estilan `p` y `ul` a (0,1,1). */

.gs-toast .gs-toast__titulo {
	margin: 0;
	padding: 0;
	font-weight: 600;
}

.gs-toast .gs-toast__lista {
	margin: 6px 0 0;
	padding: 0 0 0 18px;
	list-style: disc;
	font-weight: 400;
}

.gs-toast .gs-toast__lista li {
	margin: 0;
	padding: 0;
}

.gs-toast .gs-toast__lista li + li {
	margin-top: 3px;
}

/* ── Botón de cerrar ─────────────────────────────────────────────────────────
   Los `!important` se CONSERVAN del original y no son pereza: este botón se pinta en
   cualquier página del sitio, fuera del alcance de `.gsp-p` y de `.gs-hd`, así que no tiene
   detrás ningún blindaje de familia. Elementor y muchos temas estilan `button` con borde,
   fondo y hover propios, y sin esto el aspa sale con caja gris y se tiñe al pasar el ratón. */

.gs-toast__close {
	flex-shrink: 0;
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	text-shadow: none;
	cursor: pointer;
	color: var(--gs-gris-3) !important;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	padding: 0 !important;
	margin: -1px 0 0;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--gs-r-sm);
	transition: color 150ms var(--gs-e-soft), background-color 150ms var(--gs-e-soft);
}

/* Se declaran fondo Y color en las cuatro pseudoclases: el que se deje sin declarar es el
   que rellena el Global Kit (INSTRUCCIONES.md §3.1). */

.gs-toast__close:hover,
.gs-toast__close:focus,
.gs-toast__close:focus-visible,
.gs-toast__close:active {
	color: var(--gs-tinta) !important;
	background-color: var(--gs-hueso) !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* El foco visible sí se conserva (el original lo anulaba con `outline: none !important`,
   que deja el botón inalcanzable a la vista de quien navega con teclado). */

.gs-toast__close:focus-visible {
	outline: 2px solid var(--gs-oro) !important;
	outline-offset: 2px;
}

/* ── Móvil: abajo y a todo el ancho ──────────────────────────────────────── */

@media (max-width: 600px) {
	.gs-toast-stack {
		top: auto;
		bottom: 16px;
		right: 16px;
		left: 16px;
		max-width: none;
	}

	.gs-toast {
		min-width: 0;
		max-width: none;
		width: 100%;
		font-size: 13.5px;
		padding: 12px 14px;
	}
}

/* ── Reduced motion ─────────────────────────────────────────────────────────
   Sin desplazamiento lateral: el aviso aparece y desaparece con opacidad. El transform se
   neutraliza en los tres estados, porque si solo se quitara la transición el aviso se
   plantaría de golpe fuera de la pantalla. */

@media (prefers-reduced-motion: reduce) {
	.gs-toast {
		transition-duration: .01ms;
		transform: none;
	}

	.gs-toast.is-visible,
	.gs-toast.is-leaving {
		transform: none;
	}
}