/**
 * WCK Notices — avisos flotantes.
 *
 * El contenedor es fijo (independiente del scroll) y los toasts entran y
 * salen con transform + opacity (sin reflow). La dirección de la animación
 * depende de la esquina configurada. Se respeta prefers-reduced-motion.
 */

/* ---------------------------------------------------------------------
 * Contenedor fijo por esquinas
 * ------------------------------------------------------------------- */
.wck-notices {
	position: fixed;
	z-index: 100000; /* Por encima del drawer del side-cart. */
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(420px, calc(100vw - 32px));
	pointer-events: none; /* El hueco no bloquea clics; los toasts sí los reciben. */
}

.wck-notices--top-right    { top: 16px;    right: 16px; }
.wck-notices--top-left     { top: 16px;    left: 16px; }
.wck-notices--bottom-right { bottom: 16px; right: 16px; flex-direction: column-reverse; }
.wck-notices--bottom-left  { bottom: 16px; left: 16px;  flex-direction: column-reverse; }

/* ---------------------------------------------------------------------
 * Toast: estado base (oculto) → .is-visible (entrada). Quitar la clase
 * revierte al estado base: la salida recorre el mismo camino a la inversa.
 * ------------------------------------------------------------------- */
.wck-notice {
	pointer-events: auto;
	position: relative;
	overflow: hidden;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
	border-left: 4px solid #767676;
	opacity: 0;
	transition: opacity 0.28s ease, transform 0.28s ease;
	will-change: opacity, transform;
}

/* Dirección de entrada/salida según la esquina. */
.wck-notices--top-right .wck-notice,
.wck-notices--bottom-right .wck-notice { transform: translateX(24px); }
.wck-notices--top-left .wck-notice,
.wck-notices--bottom-left .wck-notice  { transform: translateX(-24px); }

.wck-notice.is-visible {
	opacity: 1;
	transform: none;
}

/* Acento por tipo. */
.wck-notice--success { border-left-color: #2e7d32; }
.wck-notice--error   { border-left-color: #b3261e; }
.wck-notice--info    { border-left-color: #1565c0; }

/* ---------------------------------------------------------------------
 * Aviso original de Woo dentro del toast: se neutraliza su caja (margen,
 * fondo, bordes del tema) y manda la del toast.
 * ------------------------------------------------------------------- */
.wck-notice .woocommerce-message,
.wck-notice .woocommerce-error,
.wck-notice .woocommerce-info {
	margin: 0 !important;
	padding: 14px 40px 14px 16px !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: #1f1f1f;
	font-size: 0.92em;
	line-height: 1.45;
	width: auto !important;
}

/* Lista de errores múltiples (ul.woocommerce-error). */
.wck-notice ul.woocommerce-error {
	list-style: none;
}

.wck-notice ul.woocommerce-error li {
	margin: 0 0 6px;
}

.wck-notice ul.woocommerce-error li:last-child {
	margin-bottom: 0;
}

/* El botón que Woo incluye en algunos avisos («Ver carrito») se integra. */
.wck-notice .woocommerce-message .button,
.wck-notice .woocommerce-error .button,
.wck-notice .woocommerce-info .button {
	float: none;
	display: inline-block;
	margin: 8px 8px 0 0;
}

/* ---------------------------------------------------------------------
 * Botón de cierre
 * ------------------------------------------------------------------- */
.wck-notice__close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #6b6b6b;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	border-radius: 6px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wck-notice__close:hover,
.wck-notice__close:focus-visible {
	background: rgba(0, 0, 0, 0.06);
	color: #1f1f1f;
}

/* ---------------------------------------------------------------------
 * Barra de progreso del auto-cierre (duración inyectada por JS; se pausa
 * con animation-play-state al pasar el ratón o enfocar).
 * ------------------------------------------------------------------- */
.wck-notice__progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 100%;
	background: currentColor;
	opacity: 0.25;
	transform-origin: left center;
	animation-name: wck-notice-progress;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.wck-notice--success .wck-notice__progress { color: #2e7d32; }
.wck-notice--info .wck-notice__progress    { color: #1565c0; }

@keyframes wck-notice-progress {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

/* ---------------------------------------------------------------------
 * Movimiento reducido: sin transiciones ni barra animada.
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wck-notice {
		transition: none;
		transform: none;
	}

	.wck-notice__progress {
		animation: none;
		display: none;
	}
}

/* ---------------------------------------------------------------------
 * Móvil: a ancho completo, pegado al borde configurado.
 * ------------------------------------------------------------------- */
@media (max-width: 520px) {
	.wck-notices {
		width: calc(100vw - 20px);
	}

	.wck-notices--top-right,
	.wck-notices--top-left { top: 10px; right: 10px; left: 10px; }

	.wck-notices--bottom-right,
	.wck-notices--bottom-left { bottom: 10px; right: 10px; left: 10px; }
}