/* ------------------------------------------- */
/* 🚀 Padrão TOAST FIXO (Posicionamento Global) */
/* ------------------------------------------- */

/* CONTAINER GLOBAL DOS TOASTS */
.woocommerce-notices-wrapper,
.woocommerce-form-coupon-toggle,
.wc-empty-cart-message {
    position: fixed;
    top: 60px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espaço entre os toasts */
    max-width: 400px;
    width: calc(100% - 40px); /* Responsivo */
    pointer-events: none; /* Evita bloquear clique no site */
}

/* Aplica o posicionamento fixo para todos os tipos de alerta */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    position: relative; /* ERA fixed */
    top: auto;
    right: auto;
    left: auto;
    pointer-events: auto; /* Permite clicar no botão X */
    margin: 0;
	border-top: none;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra um pouco mais forte para destaque */
	border-radius: 8px;
	font-weight: 500;
}

.woocommerce-message:focus-visible,
.woocommerce-error:focus-visible,
.woocommerce-info:focus-visible {
	outline: none;
}

.woocommerce-message:before,
.woocommerce-error:before,
.woocommerce-info:before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background-size: contain; /* Faz o SVG caber dentro dos 20x20px */
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    font-weight: bold;
}

/* ------------------------------------------- */
/* 🟢 SUCESSO (Dourado / Tom Neutro) */
/* ------------------------------------------- */
.woocommerce-message {
    background: #f5f3ef; /* Um bege bem mais claro e suave que o anterior */
    border-left: 5px solid #B2935C; /* Seu dourado/bronze - perfeito! */
    color: #5a4a3b; /* Um marrom escuro, que harmoniza melhor que o verde */
}

.woocommerce-message::before {
    background-image: url('/wp-content/uploads/2025/10/check.svg');
}


/* ------------------------------------------- */
/* 🔴 ERRO (Vermelho Terracota / Tom de Alerta) */
/* ------------------------------------------- */
.woocommerce-error {
    background: #fcf0f0; /* Fundo vermelho bem claro e "quente" */
    border-left: 5px solid #c0504d; /* Vermelho terracota/tijolo, desaturado */
    color: #7b241c; /* Texto vermelho escuro para legibilidade */
}

.woocommerce-error::before {
    background-image: url('/wp-content/uploads/2025/10/erro.svg');
}

/* ------------------------------------------- */
/* 🔵 INFORMAÇÃO (Azul Ardósia / Tom Frio) */
/* ------------------------------------------- */
.woocommerce-info {
    background: #eef3f7; /* Fundo azul-acinzentado bem claro */
    border-left: 5px solid #5d8aa8; /* Azul ardósia (slate blue), elegante e sóbrio */
    color: #34495e; /* Texto azul-escuro acinzentado */
}

.woocommerce-info::before {
    background-image: url('/wp-content/uploads/2025/10/info.svg');
}


/* ------------------------------------------- */
/* ✖️ ESTILO: BOTÃO DE FECHAR DO TOAST */
/* ------------------------------------------- */
.woocommerce-message .toast-close-button,
.woocommerce-error .toast-close-button,
.woocommerce-info .toast-close-button {
    /* Posicionamento (Fica à direita do texto) */
	padding: 0;
    position: absolute;
    top: 18px;
    right: 8px; /* Distância da borda direita */
    transform: translateY(-50%);

    /* Estilo Básico */
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5em; /* Tamanho do 'x' */
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    
    /* Cor: Usa uma cor escura para contraste */
    color: #444; 
}

/* Hover/Foco */
.woocommerce-message .toast-close-button:hover,
.woocommerce-error .toast-close-button:hover,
.woocommerce-info .toast-close-button:hover {
    opacity: 1;
}

.woocommerce-message .button {
	margin-top: 10px !important;
}

/* ------------------------------------------- */
/* 💨 ANIMAÇÃO (Entrada pela Direita) */
/* ------------------------------------------- */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%); 
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ------------------------------------------- */
/* 📱 Responsividade (Ajuste para Telas Pequenas) */
/* ------------------------------------------- */
@media screen and (max-width: 768px) {
	.woocommerce-notices-wrapper,
	.woocommerce-form-coupon-toggle,
	.wc-empty-cart-message {
        right: 50%;
        top: 15%;
        width: 94vw;
        max-width: none;
    }
	/* Os toasts seguem somente o tamanho fluido */
	.woocommerce-message,
	.woocommerce-error,
	.woocommerce-info {
		width: 100%;
		max-width: none;
		animation: slideUpCenter 0.4s ease forwards;
	}

    @keyframes slideUpCenter {
        from {
            opacity: 0;
            transform: translate(50%, 100%); /* Começa abaixo */
        }
        to {
            opacity: 1;
            transform: translate(50%, 0); /* Vai para a posição top: 20px */
        }
    }
}
