/**
 * NNCC — Avisos WooCommerce (message / info / error)
 *
 * Éxito en verde suave (sin amarillo de cabecera); info neutra; error rojo suave.
 * Botones internos: estilo NNCC (negro / amarillo).
 * Alcance: front con WooCommerce activo (inc/woocommerce.php).
 */

/* -------------------------------------------------------------------------
   Variables locales (alineadas al brief; no dependen del header)
------------------------------------------------------------------------- */
:root {
	--nncc-wc-notice-text: #1a1a1a;
	--nncc-wc-notice-success-bg: #e6f4ea;
	--nncc-wc-notice-success-border: #28a745;
	--nncc-wc-notice-info-bg: #eef2f7;
	--nncc-wc-notice-info-border: #5c6f82;
	--nncc-wc-notice-error-bg: #fdecea;
	--nncc-wc-notice-error-border: #dc3545;
	--nncc-wc-notice-edge: rgba(0, 0, 0, 0.07);
}

/* -------------------------------------------------------------------------
   Contenedor de notices (espaciado vertical)
------------------------------------------------------------------------- */
.woocommerce-notices-wrapper {
	display: block;
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

.woocommerce-notices-wrapper:empty {
	display: none;
	margin: 0;
}

/* -------------------------------------------------------------------------
   Base común: alerta moderna, sin sombra pesada
------------------------------------------------------------------------- */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce ul.woocommerce-error {
	box-sizing: border-box;
	border-radius: 8px;
	box-shadow: none !important;
	padding: 1rem 1.125rem 1rem 2.75rem;
	margin: clamp(1rem, 2vw, 1.5rem) 0;
	line-height: 1.5;
	color: var(--nncc-wc-notice-text) !important;
	list-style: none;
}

/* -------------------------------------------------------------------------
   Éxito — .woocommerce-message
------------------------------------------------------------------------- */
.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-message {
	background-color: var(--nncc-wc-notice-success-bg) !important;
	border: 1px solid var(--nncc-wc-notice-edge) !important;
	border-left: 4px solid var(--nncc-wc-notice-success-border) !important;
}

.woocommerce .woocommerce-message::before,
.woocommerce-page .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-message::before {
	color: var(--nncc-wc-notice-success-border) !important;
}

/* -------------------------------------------------------------------------
   Info — .woocommerce-info
------------------------------------------------------------------------- */
.woocommerce .woocommerce-info,
.woocommerce-page .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-info {
	background-color: var(--nncc-wc-notice-info-bg) !important;
	border: 1px solid var(--nncc-wc-notice-edge) !important;
	border-left: 4px solid var(--nncc-wc-notice-info-border) !important;
}

.woocommerce .woocommerce-info::before,
.woocommerce-page .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-info::before {
	color: var(--nncc-wc-notice-info-border) !important;
}

/* -------------------------------------------------------------------------
   Error — ul.woocommerce-error (típico) u otro .woocommerce-error
------------------------------------------------------------------------- */
.woocommerce ul.woocommerce-error,
.woocommerce-page ul.woocommerce-error,
.woocommerce-notices-wrapper ul.woocommerce-error,
.woocommerce .woocommerce-error:not(.woocommerce-message):not(.woocommerce-info),
.woocommerce-page .woocommerce-error:not(.woocommerce-message):not(.woocommerce-info) {
	background-color: var(--nncc-wc-notice-error-bg) !important;
	border: 1px solid var(--nncc-wc-notice-edge) !important;
	border-left: 4px solid var(--nncc-wc-notice-error-border) !important;
	padding-left: 2.75rem;
}

.woocommerce ul.woocommerce-error li,
.woocommerce-page ul.woocommerce-error li {
	margin: 0.35rem 0;
}

.woocommerce ul.woocommerce-error li:first-child,
.woocommerce-page ul.woocommerce-error li:first-child {
	margin-top: 0;
}

.woocommerce ul.woocommerce-error li:last-child,
.woocommerce-page ul.woocommerce-error li:last-child {
	margin-bottom: 0;
}

.woocommerce ul.woocommerce-error::before,
.woocommerce-page ul.woocommerce-error::before,
.woocommerce-notices-wrapper ul.woocommerce-error::before,
.woocommerce .woocommerce-error:not(.woocommerce-message):not(.woocommerce-info)::before,
.woocommerce-page .woocommerce-error:not(.woocommerce-message):not(.woocommerce-info)::before {
	color: var(--nncc-wc-notice-error-border) !important;
}

/* -------------------------------------------------------------------------
   Enlaces de texto (no botón)
------------------------------------------------------------------------- */
.woocommerce .woocommerce-message a:not(.button),
.woocommerce .woocommerce-info a:not(.button),
.woocommerce .woocommerce-error a:not(.button),
.woocommerce ul.woocommerce-error a:not(.button),
.woocommerce-page .woocommerce-message a:not(.button),
.woocommerce-page .woocommerce-info a:not(.button),
.woocommerce-page .woocommerce-error a:not(.button) {
	color: var(--nncc-wc-notice-text);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: rgba(0, 0, 0, 0.35);
	text-underline-offset: 2px;
}

.woocommerce .woocommerce-message a:not(.button):hover,
.woocommerce .woocommerce-info a:not(.button):hover,
.woocommerce .woocommerce-error a:not(.button):hover,
.woocommerce ul.woocommerce-error a:not(.button):hover {
	text-decoration-color: var(--nncc-wc-notice-text);
}

/* -------------------------------------------------------------------------
   Botones .button dentro del aviso — NNCC (no violeta Woo)
------------------------------------------------------------------------- */
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button,
.woocommerce ul.woocommerce-error .button,
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-info a.button,
.woocommerce .woocommerce-error a.button,
.woocommerce ul.woocommerce-error a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.5rem 1.15rem;
	border-radius: var(--nncc-btn-radius, 999px);
	font-weight: 800;
	text-decoration: none !important;
	background: var(--nncc-black) !important;
	color: var(--nncc-yellow) !important;
	border: 2px solid var(--nncc-black) !important;
	box-shadow: none;
	transition: background 0.18s ease, color 0.18s ease;
}

.woocommerce .woocommerce-message .button:hover,
.woocommerce .woocommerce-info .button:hover,
.woocommerce .woocommerce-error .button:hover,
.woocommerce ul.woocommerce-error .button:hover,
.woocommerce .woocommerce-message a.button:hover,
.woocommerce .woocommerce-info a.button:hover,
.woocommerce .woocommerce-error a.button:hover,
.woocommerce ul.woocommerce-error a.button:hover {
	background: transparent !important;
	color: var(--nncc-black) !important;
}

.woocommerce .woocommerce-message .button:focus-visible,
.woocommerce .woocommerce-info .button:focus-visible,
.woocommerce .woocommerce-error .button:focus-visible,
.woocommerce ul.woocommerce-error .button:focus-visible,
.woocommerce .woocommerce-message a.button:focus-visible,
.woocommerce .woocommerce-info a.button:focus-visible,
.woocommerce .woocommerce-error a.button:focus-visible,
.woocommerce ul.woocommerce-error a.button:focus-visible {
	outline: 2px solid var(--nncc-black);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Checkout / tienda — bloques React (banner)
------------------------------------------------------------------------- */
.wc-block-components-notice-banner.is-success {
	background-color: var(--nncc-wc-notice-success-bg) !important;
	color: var(--nncc-wc-notice-text) !important;
	border: 1px solid var(--nncc-wc-notice-edge) !important;
	border-left: 4px solid var(--nncc-wc-notice-success-border) !important;
	border-radius: 8px;
	box-shadow: none !important;
}

.wc-block-components-notice-banner.is-info {
	background-color: var(--nncc-wc-notice-info-bg) !important;
	color: var(--nncc-wc-notice-text) !important;
	border: 1px solid var(--nncc-wc-notice-edge) !important;
	border-left: 4px solid var(--nncc-wc-notice-info-border) !important;
	border-radius: 8px;
	box-shadow: none !important;
}

.wc-block-components-notice-banner.is-error {
	background-color: var(--nncc-wc-notice-error-bg) !important;
	color: var(--nncc-wc-notice-text) !important;
	border: 1px solid var(--nncc-wc-notice-edge) !important;
	border-left: 4px solid var(--nncc-wc-notice-error-border) !important;
	border-radius: 8px;
	box-shadow: none !important;
}

.wc-block-components-notice-banner .wc-block-components-button:not(.is-link) {
	background: var(--nncc-black) !important;
	color: var(--nncc-yellow) !important;
	border: 2px solid var(--nncc-black) !important;
	border-radius: var(--nncc-btn-radius, 999px);
	font-weight: 800;
}

.wc-block-components-notice-banner .wc-block-components-button:not(.is-link):hover {
	background: transparent !important;
	color: var(--nncc-black) !important;
}