/**
 * ==========================================
 * GSTORE NOTICES & MODALS
 * ==========================================
 * Estilização moderna para notificações do WooCommerce
 * e modais do sistema.
 */

/* Container de notificações */
.woocommerce-notices-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
    width: 100%;
}

/* Quando as notices viram flutuantes (position: fixed), o wrapper não deve reservar espaço */
.woocommerce-notices-wrapper.gstore-notices-floating {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    gap: 0 !important;
    display: block !important;
}

/* Esconder wrapper quando vazio (sem notices) */
.woocommerce-notices-wrapper:empty {
    display: none;
    margin-bottom: 0;
}

/* Base para todas as mensagens */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: var(--gstore-color-bg-light);
    border: 1px solid var(--gstore-color-border);
    border-left-width: 4px;
    border-radius: var(--gstore-radius-md);
    box-shadow: var(--gstore-shadow-sm);
    color: var(--gstore-color-text-primary);
    font-size: var(--gstore-font-size-sm);
    line-height: 1.5;
    position: relative;
    overflow: hidden;
    animation: slideIn 0.3s ease-out forwards;
    list-style: none;
    margin: 0 !important;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================
   NOTICES CLÁSSICAS FLUTUANTES
   ========================================== */

.woocommerce-message.gstore-notice-floating,
.woocommerce-error.gstore-notice-floating,
.woocommerce-info.gstore-notice-floating {
    /* Evita conflito com a animação original (usa classes slide-in/out) */
    animation: none !important;
    transition: all 0.3s ease-out;
    opacity: 0;
    pointer-events: none;
    margin: 0 !important;
}

.woocommerce-message.gstore-notice-floating.gstore-notice-slide-in,
.woocommerce-error.gstore-notice-floating.gstore-notice-slide-in,
.woocommerce-info.gstore-notice-floating.gstore-notice-slide-in {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) !important;
}

.woocommerce-message.gstore-notice-floating.gstore-notice-slide-out,
.woocommerce-error.gstore-notice-floating.gstore-notice-slide-out,
.woocommerce-info.gstore-notice-floating.gstore-notice-slide-out {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-100px) !important;
}

/* Remover ícones padrão do WooCommerce (pseudo-elementos) */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
    display: none !important;
}

/* Adicionar ícones via FontAwesome (classes auxiliares) */
/* Como não podemos alterar o HTML facilmente, usamos pseudo-elementos com content do FontAwesome */

/* Sucesso */
.woocommerce-message {
    border-left-color: var(--gstore-color-success);
}

.woocommerce-message::after {
    content: "\f058";
    /* fa-circle-check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--gstore-color-success);
    font-size: var(--gstore-font-size-xl);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

/* Erro */
.woocommerce-error {
    border-left-color: var(--gstore-color-error);
}

.woocommerce-error::after {
    content: "\f06a";
    /* fa-circle-exclamation */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--gstore-color-error);
    font-size: var(--gstore-font-size-xl);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

/* Info */
.woocommerce-info {
    border-left-color: var(--gstore-color-accent);
}

.woocommerce-info::after {
    content: "\f05a";
    /* fa-circle-info */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--gstore-color-accent);
    font-size: var(--gstore-font-size-xl);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

/* Ajuste de padding para acomodar o ícone absoluto e botão de fechar */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    padding-left: 56px;
    padding-right: 48px;
}

/* Botão de fechar para notices clássicos */
.woocommerce-message .gstore-notice-close,
.woocommerce-error .gstore-notice-close,
.woocommerce-info .gstore-notice-close {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--gstore-color-text-secondary, #666);
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    border-radius: 4px;
    line-height: 1;
}

.woocommerce-message .gstore-notice-close:hover,
.woocommerce-error .gstore-notice-close:hover,
.woocommerce-info .gstore-notice-close:hover,
.woocommerce-message .gstore-notice-close:focus,
.woocommerce-error .gstore-notice-close:focus,
.woocommerce-info .gstore-notice-close:focus {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.08);
    outline: none;
}

.woocommerce-message .gstore-notice-close svg,
.woocommerce-error .gstore-notice-close svg,
.woocommerce-info .gstore-notice-close svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* Botões dentro das mensagens (ex: "Ver carrinho") */
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
    float: right;
    background: transparent;
    color: var(--gstore-color-text-primary);
    border: 1px solid var(--gstore-color-border);
    padding: 6px 16px;
    border-radius: var(--gstore-radius-sm);
    font-weight: var(--gstore-font-weight-semibold);
    font-size: var(--gstore-font-size-sm);
    transition: all 0.2s ease;
    margin-left: auto;
    order: 2;
    /* Garante que fique à direita no flex */
}

.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover {
    background: var(--gstore-color-bg-muted);
    border-color: var(--gstore-color-text-primary);
    color: var(--gstore-color-text-primary);
}

/* Ajuste para listas de erros */
.woocommerce-error {
    flex-direction: column;
    align-items: flex-start;
}

.woocommerce-error li {
    width: 100%;
}

/* Animação */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsivo */
@media (max-width: 640px) {

    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        padding-left: 48px;
        padding-right: 40px;
        /* Mantém espaço para ícone e botão fechar */
    }

    .woocommerce-message::after,
    .woocommerce-error::after,
    .woocommerce-info::after {
        top: 24px;
        /* Alinha com a primeira linha de texto */
    }

    .woocommerce-message .button,
    .woocommerce-error .button,
    .woocommerce-info .button {
        width: 100%;
        text-align: center;
        margin-top: 8px;
        float: none;
    }

    .woocommerce-message .gstore-notice-close,
    .woocommerce-error .gstore-notice-close,
    .woocommerce-info .gstore-notice-close {
        top: 16px;
        right: 12px;
        transform: none;
    }
}

/* ==========================================
   WOOCOMMERCE BLOCKS NOTICES
   ==========================================
   Estilização para avisos do WooCommerce Blocks
   com animações de slide-in e auto-dismiss
 */

/* Base para avisos do WooCommerce Blocks */
.wc-block-components-notice-banner {
    position: relative;
    z-index: 1100;
    transition: all 0.3s ease-out;
    opacity: 0;
    transform: translateY(-100px);
    pointer-events: none;
}

/* Estado inicial - escondido */
.wc-block-components-notice-banner:not(.gstore-notice-animated) {
    opacity: 0;
    transform: translateY(-100px);
}

/* Animação de entrada - slide-in */
.wc-block-components-notice-banner.gstore-notice-animated.gstore-notice-slide-in {
    opacity: 1;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto;
}

/* Animação de saída - slide-out */
.wc-block-components-notice-banner.gstore-notice-animated.gstore-notice-slide-out {
    opacity: 0;
    transform: translateX(-50%) translateY(-100px) !important;
    pointer-events: none;
}

/* Estilos base para avisos posicionados */
.wc-block-components-notice-banner.gstore-notice-animated {
    border-radius: 8px;
    padding: 14px 48px 14px 18px;
    font-size: var(--gstore-font-size-sm, 0.875rem);
    line-height: 1.5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    position: relative;
}

/* Botão de fechar com SVG */
.gstore-notice-close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: currentColor;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    border-radius: 4px;
    line-height: 1;
}

.gstore-notice-close:hover,
.gstore-notice-close:focus {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.1);
    outline: none;
}

.gstore-notice-close svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* Tipos de aviso */
.wc-block-components-notice-banner.is-success {
    background: var(--gstore-color-success-bg, #d4edda);
    border: 1px solid var(--gstore-color-success-border, #c3e6cb);
    color: var(--gstore-color-success-text, #155724);
}

.wc-block-components-notice-banner.is-error {
    background: var(--gstore-color-error-bg, #f8d7da);
    border: 1px solid var(--gstore-color-error-border, #f5c6cb);
    color: var(--gstore-color-error-text, #721c24);
}

.wc-block-components-notice-banner.is-info {
    background: var(--gstore-color-info-bg, #d1ecf1);
    border: 1px solid var(--gstore-color-info-border, #bee5eb);
    color: var(--gstore-color-info-text, #0c5460);
}

/* Hover - pausa o auto-dismiss */
.wc-block-components-notice-banner.gstore-notice-animated:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    transform: translateX(-50%) translateY(0) scale(1.02) !important;
}

/* Responsivo */
@media (max-width: 640px) {
    .wc-block-components-notice-banner.gstore-notice-animated {
        max-width: calc(100% - 16px);
        width: calc(100% - 16px);
        font-size: var(--gstore-font-size-xs, 0.75rem);
        padding: 12px 40px 12px 16px;
    }

    .wc-block-components-notice-banner .gstore-notice-close {
        right: 8px;
    }
}