/**
 * WooCommerce Notices — South Impact Styles
 *
 * Estilos globales para los avisos de WooCommerce
 * (.woocommerce-message, .woocommerce-info, .woocommerce-error)
 * aplicados en todas las páginas de WooCommerce: mi-cuenta, carrito,
 * checkout, producto, tienda, gracias, etc.
 *
 * @package SouthImpactCompanion
 */

/* ═══════════════════════════════════════════════════════════════
   Paleta local — mantiene coherencia sin depender del contexto
   ═══════════════════════════════════════════════════════════════ */
:root {
    --sic-notice-primary:   #3c5fd7;
    --sic-notice-success:   #10b981;
    --sic-notice-warning:   #f59e0b;
    --sic-notice-danger:    #ef4444;
    --sic-notice-dark:      #1a1a2e;
    --sic-notice-muted:     #6b7280;
    --sic-notice-radius:    12px;
    --sic-notice-shadow:    0 1px 2px rgba(16,25,92,.04), 0 4px 14px rgba(16,25,92,.06);
}

/* ═══════════════════════════════════════════════════════════════
   Wrapper común — reset WC + layout con icono a la izquierda
   ═══════════════════════════════════════════════════════════════ */
.woocommerce-notices-wrapper:empty {
    display: none !important;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 18px 14px 18px !important;
    margin: 0 0 20px !important;
    border: 1px solid transparent !important;
    border-left-width: 4px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--sic-notice-dark) !important;
    background: #eef4ff !important;
    box-shadow: var(--sic-notice-shadow) !important;
    list-style: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Anular el ::before gigante de WooCommerce (usa WebFont icons) */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-family: 'WooCommerce' !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

/* ─── INFO (azul) ─── */
.woocommerce-info {
    background: #eef4ff !important;
    border-color: #c7d5f5 !important;
    border-left-color: var(--sic-notice-primary) !important;
    color: #1e3a8a !important;
}
.woocommerce-info::before {
    content: "\e02d" !important; /* WC info glyph */
    background: var(--sic-notice-primary) !important;
}

/* ─── SUCCESS / MESSAGE (verde) ─── */
.woocommerce-message {
    background: #ecfdf5 !important;
    border-color: #b7ebd4 !important;
    border-left-color: var(--sic-notice-success) !important;
    color: #065f46 !important;
}
.woocommerce-message::before {
    content: "\e015" !important; /* WC check glyph */
    background: var(--sic-notice-success) !important;
}

/* ─── ERROR (rojo) ─── */
.woocommerce-error {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    border-left-color: var(--sic-notice-danger) !important;
    color: #991b1b !important;
    padding-left: 18px !important;
}
.woocommerce-error::before {
    content: "\e016" !important; /* WC cross glyph */
    background: var(--sic-notice-danger) !important;
}

/* Lista de errores múltiples */
.woocommerce-error li {
    margin: 0 0 4px !important;
    padding: 0 !important;
    list-style: none !important;
}
.woocommerce-error li:last-child {
    margin-bottom: 0 !important;
}

/* ─── Variante "info" adicional (mensajes vacíos) ─── */
.woocommerce-message--info {
    background: #f5f7fb !important;
    border-color: #e5e7eb !important;
    border-left-color: var(--sic-notice-primary) !important;
    color: var(--sic-notice-dark) !important;
}

/* ─── Enlaces y botones dentro de avisos ─── */
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
    color: inherit !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}
.woocommerce-message a:not(.button):hover,
.woocommerce-info a:not(.button):hover,
.woocommerce-error a:not(.button):hover {
    opacity: .8 !important;
}

/* Botón dentro de aviso (ej. "Volver a la tienda") */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
    margin-left: auto !important;
    background: #fff !important;
    color: currentColor !important;
    border: 1px solid currentColor !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    text-transform: none !important;
    letter-spacing: .01em !important;
    box-shadow: none !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
    background: currentColor !important;
    color: #fff !important;
}
.woocommerce-message .button:hover {
    color: #ecfdf5 !important;
}
.woocommerce-info .button:hover {
    color: #eef4ff !important;
}
.woocommerce-error .button:hover {
    color: #fef2f2 !important;
}

/* ═══════════════════════════════════════════════════════════════
   Overrides específicos cuando el aviso vive dentro de la card
   de Mi Cuenta (sic-mi-cuenta-body/content) — el padding del
   contenedor ya aporta aire.
   ═══════════════════════════════════════════════════════════════ */
.sic-mi-cuenta-body > .woocommerce-message,
.sic-mi-cuenta-body > .woocommerce-info,
.sic-mi-cuenta-body > .woocommerce-error,
.sic-mi-cuenta-body > .woocommerce-notices-wrapper .woocommerce-message,
.sic-mi-cuenta-body > .woocommerce-notices-wrapper .woocommerce-info,
.sic-mi-cuenta-body > .woocommerce-notices-wrapper .woocommerce-error {
    margin-bottom: 16px !important;
}

/* ═══════════════════════════════════════════════════════════════
   WooCommerce BLOCKS notices — .wc-block-components-notice-banner
   Variante moderna basada en bloques (checkout blocks, cart blocks,
   mi-cuenta blocks). Usa SVG inline en vez de font icon.
   ═══════════════════════════════════════════════════════════════ */
.wc-block-components-notice-banner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    margin: 0 0 20px !important;
    border: 1px solid transparent !important;
    border-left-width: 4px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--sic-notice-dark) !important;
    background: #eef4ff !important;
    box-shadow: var(--sic-notice-shadow) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.wc-block-components-notice-banner > svg {
    flex: 0 0 auto !important;
    width: 22px !important;
    height: 22px !important;
    padding: 3px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    fill: #fff !important;
    background: var(--sic-notice-primary) !important;
    box-sizing: border-box !important;
    align-self: flex-start !important;
}

.wc-block-components-notice-banner__content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 1px 0 0 !important;
    font-size: inherit !important;
    color: inherit !important;
}

/* ─── INFO (azul) ─── */
.wc-block-components-notice-banner.is-info {
    background: #eef4ff !important;
    border-color: #c7d5f5 !important;
    border-left-color: var(--sic-notice-primary) !important;
    color: #1e3a8a !important;
}
.wc-block-components-notice-banner.is-info > svg {
    background: var(--sic-notice-primary) !important;
}

/* ─── SUCCESS (verde) ─── */
.wc-block-components-notice-banner.is-success {
    background: #ecfdf5 !important;
    border-color: #b7ebd4 !important;
    border-left-color: var(--sic-notice-success) !important;
    color: #065f46 !important;
}
.wc-block-components-notice-banner.is-success > svg {
    background: var(--sic-notice-success) !important;
}

/* ─── WARNING (ámbar) ─── */
.wc-block-components-notice-banner.is-warning {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    border-left-color: var(--sic-notice-warning) !important;
    color: #92400e !important;
}
.wc-block-components-notice-banner.is-warning > svg {
    background: var(--sic-notice-warning) !important;
}

/* ─── ERROR (rojo) ─── */
.wc-block-components-notice-banner.is-error {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    border-left-color: var(--sic-notice-danger) !important;
    color: #991b1b !important;
}
.wc-block-components-notice-banner.is-error > svg {
    background: var(--sic-notice-danger) !important;
}

/* Enlaces dentro del aviso block */
.wc-block-components-notice-banner a:not(.wc-block-components-button) {
    color: inherit !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}
.wc-block-components-notice-banner a:not(.wc-block-components-button):hover {
    opacity: .8 !important;
}

/* Listas de errores dentro del content */
.wc-block-components-notice-banner__content .wc-block-components-notice-banner__summary,
.wc-block-components-notice-banner__content ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.wc-block-components-notice-banner__content ul li {
    margin: 0 0 4px !important;
    list-style: none !important;
}
.wc-block-components-notice-banner__content ul li:last-child {
    margin-bottom: 0 !important;
}

/* Botón dismiss (si aparece) */
.wc-block-components-notice-banner__dismiss,
.wc-block-components-notice-banner button[aria-label*="ismiss"],
.wc-block-components-notice-banner button[aria-label*="escartar"],
.wc-block-components-notice-banner button[aria-label*="errar"] {
    margin-left: auto !important;
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    opacity: .7 !important;
    cursor: pointer !important;
    padding: 2px !important;
    flex-shrink: 0 !important;
}
.wc-block-components-notice-banner__dismiss:hover {
    opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .wc-block-components-notice-banner {
        padding: 12px 14px !important;
        font-size: 13px !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }
    .woocommerce-message .button,
    .woocommerce-info .button,
    .woocommerce-error .button {
        margin-left: 0 !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 8px !important;
        order: 99 !important;
    }
}