/* ===========================================================
   Triagem WhatsApp — LP Recife. Speed-dial on-brand.
   Alinhado ao Florence Design System (docs/design-system/).
   Usa os tokens da página quando presentes, com fallback literal
   idêntico (o arquivo é enfileirado de forma independente).

   TAMANHOS DE FONTE EM px, DE PROPÓSITO — não trocar por rem.
   Este componente é injetado em hosts que não controlamos, e o tema
   institucional (florence-2025-06-17) redefine a base do rem:
     body,html { font-size: 10px }   → em todo o site
     @media (min-width:992px) and (max-width:1599px) { 8px }   → notebook
   O design system usa 16px (docs/design-system/tokens.css). Enquanto esta
   folha era em rem, a mesma declaração rendia três tamanhos diferentes —
   `1rem` num input virava 16px na LP, 10px no institucional e 8px num
   notebook. px torna o componente imune à base do host; o zoom do
   navegador (que é o que atende ao WCAG 1.4.4) continua escalando normal.
   =========================================================== */

.fl-triagem-menu {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  pointer-events: none;
  z-index: 700; /* fallback quando o JS não roda; a LP host é 600 (base 700), o institucional é 1000 (base 1100) — o JS SEMPRE sobrescreve isto inline, lendo o z-index do host */
}
.fl-triagem-menu[data-open="true"] { pointer-events: auto; }

/* ---------- item (pílula) ---------- */
.fl-triagem-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px 11px 22px;
  min-height: 52px;
  box-sizing: border-box;
  border: 0; -webkit-appearance: none; appearance: none; text-align: left; /* reset p/ <button> */
  background: var(--white, #FFFFFF);
  color: var(--forest, #005540);
  font-family: var(--font-body, "Nunito Sans", system-ui, -apple-system, sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: var(--radius-pill, 60px);
  box-shadow: var(--shadow-md, 0 8px 32px rgba(0, 40, 25, 0.10));
  white-space: nowrap;
  max-width: calc(100vw - 32px); /* nunca estourar o viewport */
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition:
    transform .3s var(--ease-soft, cubic-bezier(.22, .61, .36, 1)),
    opacity .3s var(--ease-soft, cubic-bezier(.22, .61, .36, 1)),
    box-shadow .3s var(--ease-soft, cubic-bezier(.22, .61, .36, 1));
}
.fl-triagem-menu[data-open="true"] .fl-triagem-item { opacity: 1; transform: none; }

/* "lançam" a partir do botão: o item mais próximo (de baixo) entra primeiro */
.fl-triagem-menu[data-open="true"] .fl-triagem-item:nth-last-child(1) { transition-delay: 0s; }
.fl-triagem-menu[data-open="true"] .fl-triagem-item:nth-last-child(2) { transition-delay: .05s; }
.fl-triagem-menu[data-open="true"] .fl-triagem-item:nth-last-child(3) { transition-delay: .10s; }

.fl-triagem-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg, 0 24px 72px rgba(0, 40, 25, 0.14)); }
/* vence a especificidade do estado aberto (transform:none) */
.fl-triagem-menu[data-open="true"] .fl-triagem-item:hover { transform: translateY(-2px); }
.fl-triagem-item:active { transform: translateY(0) scale(.98); }
.fl-triagem-item:focus-visible { outline: 2px solid var(--forest-soft, #009170); outline-offset: 3px; }

/* font-family:inherit é necessário: o reset universal do tema institucional (*{font-family:Raleway,...})
   casa DIRETAMENTE com este span, e uma regra que casa direto vence a herança de .fl-triagem-item —
   sem isto o rótulo (único texto visível antes de qualquer clique) cairia em Raleway (fonte de
   display) em vez de Nunito Sans (corpo). Na LP isto é um no-op: o span já herdava o mesmo valor. */
.fl-triagem-label { display: inline-block; font-family: inherit; }

/* ---------- chip de destino (cor = significado) ---------- */
.fl-triagem-chip {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  background: var(--forest, #005540); /* destino Florence (Gupy / formulário) */
}
.fl-triagem-item[data-dest="wa"] .fl-triagem-chip { background: var(--wa, #25D366); } /* verde = abre o WhatsApp */
/* blindar contra regras svg do tema host (ex.: `svg{fill:currentColor}`) */
.fl-triagem-chip svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; }

/* ---------- scrim transparente (capta toque fora) ---------- */
.fl-triagem-scrim { position: fixed; inset: 0; background: transparent; z-index: 699; display: none; }
.fl-triagem-scrim[data-open="true"] { display: block; }

/* ---------- morph "X" sobre o botão flutuante (linguagem do toggle +→×) ----------
   Elemento fixo no body, posicionado sobre o botão via JS (getBoundingClientRect).
   Independe do contexto de posicionamento do botão host. */
.fl-triagem-x {
  position: fixed;
  z-index: 701; /* fallback: 699/700/701 são os valores desta folha, sobrescritos pelo JS a partir do z-index do host (LP 600 → base 700; institucional 1000 → base 1100) */
  display: flex; align-items: center; justify-content: center;
  background: var(--wa, #25D366);
  color: #fff;
  pointer-events: none; /* cliques passam para o botão embaixo (fecha o menu) */
  opacity: 0; visibility: hidden;
  transform: rotate(-90deg) scale(.5);
  transition:
    opacity .3s var(--ease-soft, cubic-bezier(.22, .61, .36, 1)),
    transform .3s var(--ease-soft, cubic-bezier(.22, .61, .36, 1)),
    visibility .3s;
}
.fl-triagem-x[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
/* blindar contra regras `.host svg{fill/width}` do tema */
.fl-triagem-x svg { width: 26px; height: 26px; display: block; fill: none; stroke: currentColor; }

/* ===========================================================
   Modal "Outros assuntos" — formulário on-page (vira ticket/e-mail)
   =========================================================== */
.fl-modal-scrim {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0, 30, 18, 0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease-soft, cubic-bezier(.22, .61, .36, 1)), visibility .28s;
}
.fl-modal-scrim[data-open="true"] { opacity: 1; visibility: visible; }

.fl-modal {
  position: relative;
  width: 100%; max-width: 480px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--white, #FFFFFF);
  border-radius: var(--radius, 24px);
  box-shadow: var(--shadow-lg, 0 24px 72px rgba(0, 40, 25, 0.14));
  padding: clamp(24px, 4vw, 40px);
  transform: translateY(16px) scale(.98);
  transition: transform .28s var(--ease-soft, cubic-bezier(.22, .61, .36, 1));
}
.fl-modal-scrim[data-open="true"] .fl-modal { transform: none; }

.fl-modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--cream, #FAF8F3); color: var(--forest, #005540);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s var(--ease-soft, cubic-bezier(.22, .61, .36, 1));
}
.fl-modal__close:hover { background: var(--cream-2, #F5F0E8); }
.fl-modal__close:focus-visible { outline: 2px solid var(--forest-soft, #009170); outline-offset: 2px; }
.fl-modal__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.fl-modal__title {
  font-family: var(--font-display, "Raleway", sans-serif);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.12;
  font-size: clamp(24px, 5vw, 30px); color: var(--forest, #005540);
  margin: 0 44px 8px 0;
}
.fl-modal__title em { font-style: normal; color: var(--forest-mid, #007055); }
.fl-modal__sub {
  font-family: var(--font-body, "Nunito Sans", sans-serif);
  font-size: 16px; line-height: 1.6; color: var(--text-2, #3D5248);
  margin: 0 0 22px;
}

.fl-field { margin-bottom: 16px; }
.fl-field > label {
  display: block;
  font-family: var(--font-body, "Nunito Sans", sans-serif);
  font-size: 14px; font-weight: 700; color: var(--text, #1B2B25); margin-bottom: 6px;
}
/* mesmo caso do .fl-triagem-label: o reset universal do tema casa direto com este span
   e venceria a herança de .fl-field > label. */
.fl-field .req { color: var(--forest-soft, #009170); font-family: inherit; }
.fl-input, .fl-textarea, .fl-select {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-body, "Nunito Sans", sans-serif);
  /* 17px: acima dos 16px em que o iOS deixa de dar zoom automático no foco. */
  font-size: 17px; color: var(--text, #1B2B25);
  background: var(--white, #fff);
  border: 1px solid var(--border, #DCE8E2);
  border-radius: var(--radius-sm, 14px);
  padding: 13px 15px;
  transition: border-color .2s var(--ease-soft, cubic-bezier(.22, .61, .36, 1)),
              box-shadow .2s var(--ease-soft, cubic-bezier(.22, .61, .36, 1));
}
.fl-input:focus, .fl-textarea:focus, .fl-select:focus {
  outline: none;
  border-color: var(--forest-soft, #009170);
  box-shadow: 0 0 0 3px rgba(0, 145, 112, .15);
}
.fl-input[aria-invalid="true"], .fl-textarea[aria-invalid="true"] { border-color: var(--amber-mid, #C48B3A); }
.fl-textarea { min-height: 96px; resize: vertical; }

.fl-consent {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 8px 0 22px;
  font-family: var(--font-body, "Nunito Sans", sans-serif);
  font-size: 14px; color: var(--text-2, #3D5248); line-height: 1.55;
  cursor: pointer;
}
.fl-consent input { margin-top: 2px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--forest, #005540); cursor: pointer; }
.fl-consent input:focus-visible { outline: 2px solid var(--forest-soft, #009170); outline-offset: 2px; }
/* mesmo caso do .fl-triagem-label: o reset universal do tema institucional
   (*{font-family:Raleway,...}) casa DIRETAMENTE com estes dois nós e venceria a
   herança de .fl-consent — sem o inherit o texto do consentimento e o link cairiam
   na fonte de display. */
.fl-consent__text { font-family: inherit; }
.fl-consent__link {
  font-family: inherit; font-weight: 700;
  color: var(--forest, #005540);
  text-decoration: underline; text-underline-offset: 2px;
  transition: color .2s var(--ease-soft, cubic-bezier(.22, .61, .36, 1));
}
.fl-consent__link:hover { color: var(--forest-mid, #007055); }
.fl-consent__link:focus-visible {
  outline: 2px solid var(--forest-soft, #009170); outline-offset: 2px; border-radius: 3px;
}

/* honeypot anti-spam (fora da tela; humanos não veem, bots preenchem) */
.fl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fl-submit {
  width: 100%; border: 0; cursor: pointer;
  background: var(--forest, #005540); color: #fff;
  font-family: var(--font-body, "Nunito Sans", sans-serif);
  font-weight: 700; font-size: 17px;
  border-radius: var(--radius-pill, 60px); padding: 17px 24px;
  box-shadow: var(--shadow-fforest, 0 8px 28px rgba(0, 85, 64, .22));
  transition: background .25s var(--ease-soft, cubic-bezier(.22, .61, .36, 1)),
              transform .25s var(--ease-soft, cubic-bezier(.22, .61, .36, 1));
}
.fl-submit:hover { background: var(--forest-dark, #003D2E); transform: translateY(-2px); }
.fl-submit:active { transform: translateY(0); }
.fl-submit:disabled { opacity: .55; cursor: default; transform: none; }
.fl-submit:focus-visible { outline: 2px solid var(--forest-soft, #009170); outline-offset: 2px; }

.fl-modal__error {
  display: none;
  font-family: var(--font-body, "Nunito Sans", sans-serif);
  font-size: 14px; font-weight: 600; color: var(--text, #1B2B25); margin-top: 12px; text-align: center;
}
.fl-modal__error[data-show="true"] { display: block; }

/* estado de sucesso */
.fl-modal__success { display: none; text-align: center; padding: 12px 0 4px; }
.fl-modal[data-state="success"] .fl-modal__form { display: none; }
.fl-modal[data-state="success"] .fl-modal__success { display: block; }
.fl-modal__success-ico {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--forest-bg, #EAF4EE); color: var(--forest, #005540);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.fl-modal__success-ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fl-modal__success h3 {
  font-family: var(--font-display, "Raleway", sans-serif);
  color: var(--forest, #005540); font-size: 22px; margin: 0 0 6px;
}
.fl-modal__success p { font-family: var(--font-body, "Nunito Sans", sans-serif); color: var(--text-2, #3D5248); font-size: 16px; line-height: 1.6; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .fl-modal-scrim { transition: opacity .15s linear, visibility .15s; }
  .fl-modal { transition: none; transform: none; }
  .fl-modal-scrim[data-open="true"] .fl-modal { transform: none; }
  .fl-submit:hover { transform: none; }
}

/* ---------- telas estreitas: rótulo longo quebra em vez de vazar ---------- */
@media (max-width: 480px) {
  .fl-triagem-item { white-space: normal; padding: 10px 12px 10px 18px; }
  .fl-triagem-label { line-height: 1.25; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .fl-triagem-item {
    transition: opacity .15s linear;
    transform: none;
  }
  .fl-triagem-menu[data-open="true"] .fl-triagem-item,
  .fl-triagem-menu[data-open="true"] .fl-triagem-item:hover,
  .fl-triagem-item:hover,
  .fl-triagem-item:active { transform: none; }
  .fl-triagem-x { transition: opacity .15s linear, visibility .15s; transform: none; }
}