/* language: CSS, file: alerta.css, target: todas as paginas com alerta.js
   Estilos do modal de alerta de preco.

   Por que folha propria: o modal nasce em quatro paginas que carregam folhas
   DIFERENTES — a home usa o bundle, /ofertas usa ofertas.css, /alertas usa
   alertas.css e /perfume usa perfume.css. Deixar o bloco dentro de card.css
   fazia o modal abrir sem estilo em /ofertas e na ficha do perfume.
   Uma folha so, linkada em todas, e o unico jeito de o modal ser o mesmo. */

/* ══ MODAL DE ALERTA DE PRECO (LGPD COMPLIANT) ══ */
.modal-alerta{position:fixed;inset:0;background:rgba(38,50,41,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:9999;display:none;align-items:center;justify-content:center;padding:1.25rem}
.modal-alerta.aberto{display:flex}
/* `[hidden]` perde para o `display:flex` acima: depois do sucesso o rodape
   continuava na tela e o botao "Ativar Alerta" seguia clicavel sobre um
   corpo que ja nao tinha mais o campo de erro. */
.modal-alerta [hidden]{display:none!important}
.modal-alerta-caixa{background:#fff;border-radius:20px;width:100%;max-width:460px;box-shadow:0 24px 60px -8px rgba(28,40,31,.28);
  overflow:hidden;animation:entraModalAlerta .22s cubic-bezier(0.16,1,0.3,1);display:flex;flex-direction:column}
@keyframes entraModalAlerta{from{transform:scale(.96) translateY(8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.modal-cab{padding:1.1rem 1.35rem;background:var(--papel-2,#f5f6f4);border-bottom:1px solid var(--linha-suave,#e4e7e4);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.modal-cab h2{font-family:var(--font-serif,serif);font-size:1.15rem;font-weight:600;margin:0;color:var(--verde,#223828)}
.modal-fechar{width:34px;height:34px;border-radius:50%;border:1px solid var(--linha-forte,#c8cfc8);background:rgba(100,130,103,.08);
  color:var(--cinza-texto,#586358);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}
.modal-fechar:hover{background:var(--verde,#223828);color:#fff;border-color:var(--verde,#223828)}
.modal-corpo{padding:1.3rem 1.35rem;display:flex;flex-direction:column;gap:1rem}
.modal-pergunta{font-size:.9rem;color:var(--cinza-texto,#4a544a);line-height:1.55;margin:0}
.modal-pergunta b{color:var(--verde,#223828);font-weight:700}
.canal-escolha{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem}
.canal-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:46px;
  border-radius:12px;border:1px solid var(--linha-forte,#c8cfc8);background:#fff;font-family:inherit;
  font-size:.82rem;font-weight:600;color:var(--cinza-texto,#586358);cursor:pointer;transition:all .15s ease}
.canal-btn svg{width:18px;height:18px;flex-shrink:0}
.canal-btn:hover{border-color:var(--verde,#223828);color:var(--verde,#223828);background:#fafbfa}
.canal-btn[aria-pressed="true"]{border-color:var(--verde,#223828);background:#eef4ef;color:var(--verde,#223828);font-weight:700;box-shadow:inset 0 0 0 1px var(--verde,#223828)}
.canal-btn[data-canal-op="whatsapp"][aria-pressed="true"]{border-color:#128c7e;background:#e7f7f4;color:#075e54;box-shadow:inset 0 0 0 1px #128c7e}
.canal-btn[data-canal-op="telegram"][aria-pressed="true"]{border-color:#0088cc;background:#eaf5fc;color:#006699;box-shadow:inset 0 0 0 1px #0088cc}
.canal-btn[data-canal-op="email"][aria-pressed="true"]{border-color:#9a7238;background:#fbf7ef;color:#705020;box-shadow:inset 0 0 0 1px #9a7238}
.campo-form{display:flex;flex-direction:column;gap:.35rem}
.campo-form label{font-size:.78rem;font-weight:700;color:var(--verde,#223828)}
.campo-form input{height:46px;padding:0 1rem;border:1px solid var(--linha-forte,#c8cfc8);border-radius:10px;
  font-family:inherit;font-size:.9rem;background:var(--papel-2,#f8faf8);outline:none;transition:border-color .15s ease}
.campo-form input:focus{border-color:var(--verde,#223828);box-shadow:0 0 0 3px rgba(34,56,40,.12)}
.campo-ajuda{font-size:.72rem;color:#6b7280;line-height:1.4}
.modal-consentimento{display:flex;align-items:flex-start;gap:.6rem;font-size:.73rem;color:#4b5563;line-height:1.45;background:#f9fafb;padding:.7rem;border-radius:8px;border:1px solid #e5e7eb}
.modal-consentimento input{margin-top:2px;cursor:pointer}
.modal-erro{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:.6rem .8rem;border-radius:9px;font-size:.82rem;display:none}
.modal-erro.vis{display:block}
.modal-pe{padding:1rem 1.35rem;background:var(--papel-2,#f5f6f4);border-top:1px solid var(--linha-suave,#e4e7e4);
  display:flex;justify-content:flex-end;gap:.6rem}
.btn-sec{min-height:42px;padding:0 1.1rem;border-radius:10px;border:1px solid var(--linha-forte,#c8cfc8);background:#fff;
  font-weight:600;font-size:.84rem;color:var(--cinza-texto,#586358);cursor:pointer}
.btn-sec:hover{background:#f3f4f6}
.btn-primario{min-height:42px;padding:0 1.3rem;border-radius:10px;border:none;background:var(--verde,#223828);
  font-weight:700;font-size:.86rem;color:#fff;cursor:pointer;transition:background-color .15s ease}
.btn-primario:hover{background:#17291c}
.btn-primario:disabled{opacity:.6;cursor:not-allowed}
.modal-ok{text-align:center;padding:2rem 1.35rem}
.modal-ok-icone{width:54px;height:54px;border-radius:50%;background:#dcfce7;color:#166534;
  display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.modal-ok h2{font-family:var(--font-serif,serif);font-size:1.25rem;font-weight:600;margin-bottom:.4rem;color:var(--verde,#223828)}
.modal-ok p{font-size:.88rem;color:var(--cinza-texto,#4a544a);max-width:38ch;margin:0 auto}
/* A CSP do site nao aceita `style=` inline: a linha de canal/contato usa classe. */
.modal-ok-meta{font-size:.75rem;color:#6b7280;margin-top:1rem}
@media (max-width:480px){
  .canal-escolha{grid-template-columns:1fr;gap:.4rem}
}