/*
Notices padrao do WooCommerce (.woocommerce-message, .woocommerce-info,
.woocommerce-error), nunca estilizados em lugar nenhum do tema ate agora.
Aparecem no Carrinho ("Produto adicionado ao carrinho") e no Checkout
("Ja e cliente? Clique aqui para entrar", "Tem um cupom?") no visual azul
e cinza generico do proprio plugin, destoando da paleta terrosa do site.
Este arquivo so reveste a superficie visual desses avisos com os tokens
da marca, sem tocar em cart.css, checkout.css ou qualquer outro CSS do
tema (territorio isolado, ver DESIGN.md/PRODUCT.md antes de expandir).

Markup real gerado pelo plugin (conferido em
wp-content/plugins/woocommerce/templates/notices/*.php):
  - success.php  -> <div class="woocommerce-message" role="alert">
  - notice.php   -> <div class="woocommerce-info" role="status">
  - error.php    -> <ul class="woocommerce-error" role="alert"><li>...</li></ul>

Sucesso e informativo recebem o mesmo tratamento visual (fundo Linho 2,
borda esquerda em Mata): na paleta da marca os dois sao "neutro", nao ha
necessidade de distinguir muito um do outro (pedido explicito). Erro e o
unico caso onde o terracota entra como sinalizador, uso legitimo da Regra
do Acento Raro porque erro e raro por natureza (ver DESIGN.md).
*/

/*
Achado real de bug (validacao ao vivo, 01/08/2026): o WooCommerce core
define ".woocommerce-error, .woocommerce-info, .woocommerce-message" com
um "border-top: 3px solid" proprio, com cor diferente por classe (azul no
info, vermelho no erro, verde-amarelo no sucesso) — a faixa colorida que a
correcao deveria ter eliminado continuava visivel no topo de toda notice,
porque o bloco original so sobrescrevia border-left, nunca border-top.
Corrigido com "border-top: none" abaixo. O icone (::before) do plugin
tambem herdava essa mesma cor nao-marca, corrigido no bloco seguinte.
*/
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    margin: 0 0 var(--espaco-lg) 0;
    /* Achado real (auditoria de responsividade, 01/08/2026): o icone
       ::before do WooCommerce core e position:absolute com left proprio,
       independente do padding do texto. Em telas estreitas --espaco-lg
       (fluido, chega a ~20px) nao dava clearance suficiente e o icone
       ficava por cima do primeiro caractere do texto ("Produto adicionado"
       virava "'leo Essencial..."), reproduzido em todos os breakpoints
       testados, nao so mobile. padding-left fixo de 2.75rem (44px) garante
       clearance do icone em qualquer largura. */
    padding: var(--espaco-md) var(--espaco-lg) var(--espaco-md) 2.75rem;
    /* Redesign minimalista/futurista (07/08/2026, 5a passada): fundo solido
       --cor-linho-2 trocado por vidro real (mesmo vocabulario do resto do
       redesign), ja que a notice na Loja aparece flutuando sobre a grade
       de produtos (superficie com complexidade por tras, regra do vidro
       do DESIGN.md respeitada). */
    background: var(--vidro-bg-claro);
    backdrop-filter: var(--vidro-blur-md);
    -webkit-backdrop-filter: var(--vidro-blur-md);
    color: var(--cor-cacau);
    border-top: none;
    border-left: 4px solid var(--cor-mata);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-sm);
    font-family: var(--fonte-corpo);
    font-size: var(--texto-base);
    line-height: 1.6;
    list-style: none;
    position: relative;
}
.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--cor-mata) !important;
    left: var(--espaco-md) !important;
}
.woocommerce-error::before{
    left: var(--espaco-md) !important;
}

/* Erro real (campo obrigatorio faltando, cupom invalido etc): mesma
   estrutura, so a borda esquerda troca para terracota como sinalizador
   de atencao. O icone (::before) acompanha a mesma cor. */
.woocommerce-error {
    border-left-color: var(--cor-terracota);
}
.woocommerce-error::before {
    color: var(--cor-terracota) !important;
}

/* O erro chega como <ul><li>; sucesso/info sao <div> simples, mas
   mantemos a limpeza de lista nos tres por seguranca, caso algum plugin
   de terceiro reaproveite essas classes em cima de uma lista propria.
   O reset global do tema (01-reset.css) ja zera list-style/padding de
   ul, mas o CSS proprio do plugin WooCommerce (fora do controle do tema)
   pode reintroduzir marcador e recuo com especificidade propria. */
.woocommerce-message li,
.woocommerce-info li,
.woocommerce-error li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-message p,
.woocommerce-info p,
.woocommerce-error p {
    margin: 0;
}
.woocommerce-message p:not(:last-child),
.woocommerce-info p:not(:last-child),
.woocommerce-error p:not(:last-child) {
    margin-bottom: var(--espaco-xs);
}

/* Links de texto dentro do aviso (ex: "Clique aqui para entrar" no
   toggle de login do checkout, "Clique aqui para inserir seu cupom"):
   o reset global do tema ja faz "a" herdar a cor do texto ao redor
   (color: inherit), o que deixa o link on-brand mas sem nenhuma pista
   visual de que e clicavel. Aqui devolvemos sublinhado e a cor de marca,
   com o mesmo hover para terracota usado no botao "link" do site
   (ver buttons.css / DESIGN.md, componente Link). Excluimos ".button"
   porque o link "Ver carrinho" (wc-forward) tem tratamento proprio logo
   abaixo. */
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
    color: var(--cor-mata);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.woocommerce-message a:not(.button):hover,
.woocommerce-info a:not(.button):hover,
.woocommerce-error a:not(.button):hover {
    color: var(--cor-terracota);
}

/* Achado real (auditoria de responsividade, 01/08/2026): os toggles
   "Clique aqui para entrar" (.showlogin) e "Clique aqui para digitar seu
   cupom" (.showcoupon) do Checkout mediam 21-22px de altura clicavel real
   em todos os breakpoints, abaixo do minimo de 44px. */
.showlogin,
.showcoupon{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Link "Ver carrinho" (wc-forward) dentro do aviso de "produto
   adicionado": e uma acao secundaria dentro de uma notificacao, nunca
   deve virar um botao pilula grande competindo com o CTA principal da
   pagina. Especificidade alta (tipo + 3 classes) e !important sao
   necessarios pra vencer a regra generica de botao do WooCommerce em
   buttons.css (".woocommerce a.button", que ja usa !important pra
   sobrescrever o CSS do proprio plugin) sem tocar naquele arquivo. */
.woocommerce-message a.button.wc-forward,
.woocommerce-info a.button.wc-forward {
    display: inline !important;
    background: transparent !important;
    color: var(--cor-mata) !important;
    border: none !important;
    border-bottom: 1.5px solid var(--cor-mata) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-left: var(--espaco-sm) !important;
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: var(--texto-sm);
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.woocommerce-message a.button.wc-forward:hover,
.woocommerce-info a.button.wc-forward:hover {
    background: transparent !important;
    color: var(--cor-terracota) !important;
    border-color: var(--cor-terracota) !important;
}