/**
 * Avisos de WooCommerce.
 *
 * El tema Hello Elementor no los viste, así que salían como una línea de texto
 * gris casi indistinguible del resto de la página. Un "este vehículo ya está en
 * tu carrito" pasaba completamente desapercibido: el cliente pulsaba reservar,
 * la página se recargaba, y aparentemente no ocurría nada.
 *
 * Aquí se les da forma de aviso —color según el tipo, icono e importancia
 * visual— usando la misma paleta que el resto del módulo.
 */

.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-noreviews,
ul.woocommerce-error {
	position: relative;
	box-sizing: border-box;
	margin: 0 0 18px;
	padding: 16px 18px 16px 52px;
	border: 1px solid transparent;
	border-left-width: 4px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
	color: #1c2733;
	font-size: 14.5px;
	line-height: 1.55;
	list-style: none;
}

/* El icono, dibujado con CSS para no depender de ninguna tipografía. */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
	content: '';
	position: absolute;
	top: 16px;
	left: 16px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
}

/* ── Error: algo impide continuar ───────────────────────────────────────── */

.woocommerce-error,
ul.woocommerce-error {
	border-color: #f3c9cf;
	border-left-color: #c1121f;
	background: #fff6f7;
	color: #7a1220;
}

.woocommerce-error::before {
	background-color: #c1121f;
	/* Aspa */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

/* ── Confirmación: algo ha salido bien ──────────────────────────────────── */

.woocommerce-message {
	border-color: #b9e3d4;
	border-left-color: #0b7a5c;
	background: #f2fbf7;
	color: #0b5c46;
}

.woocommerce-message::before {
	background-color: #0b7a5c;
	/* Marca de verificación */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E");
}

/* ── Información ────────────────────────────────────────────────────────── */

.woocommerce-info {
	border-color: #c6dcf5;
	border-left-color: #1d4ed8;
	background: #f5f9ff;
	color: #14418f;
}

.woocommerce-info::before {
	background-color: #1d4ed8;
	/* Letra i */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 10v7M12 6.5v.01'/%3E%3C/svg%3E");
}

/* ── Enlaces y botones dentro del aviso ─────────────────────────────────── */

.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * El enlace de "ver el carrito" viene como .button, que en muchos temas es un
 * botón enorme flotado a la derecha. Aquí interesa que se lea como parte de la
 * frase, no que compita con el aviso.
 */
.woocommerce-error .button,
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .wc-forward,
.woocommerce-message .wc-forward,
.woocommerce-info .wc-forward {
	float: none;
	display: inline;
	margin: 0 0 0 4px;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	font-size: inherit;
	font-weight: 700;
	text-decoration: underline;
}

/* Varias listas de errores a la vez. */
.woocommerce-error li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-error li + li {
	margin-top: 6px;
}

/*
 * Marcado breve del aviso al que se ha llevado la vista, para que el cliente
 * localice de un golpe lo que ha cambiado en la página.
 */
.idt-notice-flash {
	animation: idt-notice-flash 1.6s ease-out 1;
}

@keyframes idt-notice-flash {
	0%   { box-shadow: 0 0 0 0 rgba(193, 18, 31, 0.35); }
	70%  { box-shadow: 0 0 0 10px rgba(193, 18, 31, 0); }
	100% { box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06); }
}

@media (max-width: 600px) {
	.woocommerce-error,
	.woocommerce-message,
	.woocommerce-info {
		padding: 14px 14px 14px 46px;
		font-size: 14px;
	}

	.woocommerce-error::before,
	.woocommerce-message::before,
	.woocommerce-info::before {
		top: 14px;
		left: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.idt-notice-flash {
		animation: none;
	}
}