/*! avalie-modal.css — Popup de avaliação (trial) sobre a página atual.
    Todas as classes usam o prefixo .mdt- e vivem sob .mdt-overlay, para não
    colidir com o CSS de nenhuma página do site.

    NUNCA ROLA: o modal não tem altura máxima nem overflow. Em vez disso, ele
    define uma "unidade base" no próprio font-size, proporcional à ALTURA da
    janela (clamp + vh), e todas as medidas internas são em `em`. Assim o
    formulário inteiro encolhe junto e sempre cabe na tela, em qualquer
    resolução. (Não dá para derivar um número puro de vh em calc() — daí o
    font-size como veículo da escala.)

    REMOÇÃO: apague este arquivo + assets/js/avalie-modal.js + inc/avalie-modal.php
    + a linha de require no functions.php. Nada mais depende dele. */

.mdt-no-scroll { overflow: hidden; }

.mdt-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  padding: 2vh 16px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}
.mdt-overlay.is-open { display: flex; }

.mdt-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 15, 60, 0.55);
  backdrop-filter: saturate(1.2) blur(4px);
  animation: mdt-fade .18s ease;
}

/* font-size = unidade base da escala (tudo abaixo é em `em`).
   O piso de 13.5px garante texto legível; o teto de 17px evita gigantismo em
   telas muito altas. O layout é SEMPRE de 1 coluna — em telas baixas quem cede
   espaço são as dicas, o subtítulo e os espaçamentos (ver faixas no fim). */
.mdt-dialog {
  font-size: clamp(13.5px, 2.2vh, 17px);
  position: relative; z-index: 1;
  width: 100%; max-width: 37em;
  overflow: visible;
  background: #fff; border-radius: 1.3em;
  padding: 2em clamp(16px, 3.4vw, 2.3em) 1.6em;
  box-shadow: 0 30px 90px rgba(20, 15, 60, 0.35);
  animation: mdt-pop .22s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes mdt-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes mdt-pop { from { opacity: 0; transform: translateY(14px) scale(.97) } to { opacity: 1; transform: none } }

.mdt-close {
  position: absolute; top: .75em; right: .9em;
  width: 2.2em; height: 2.2em; border: none; border-radius: 50%;
  background: #F2F1F7; color: #4a4566;
  font-size: max(1em, 13px); line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background .15s;
}
.mdt-close:hover { background: #E6E4EF; }

/* ---- cabeçalho ---- */
.mdt-head { text-align: center; margin-bottom: 1.35em; }
.mdt-title {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800; letter-spacing: -0.025em;
  font-size: 1.65em; line-height: 1.2;
  color: var(--ink, #1B1840); margin: 0 0 .35em;
}
.mdt-sub { font-size: .93em; line-height: 1.5; color: var(--mute, #6b6785); margin: 0; }

/* ---- campos ---- */
.mdt-form { display: grid; gap: .85em; }
/* align-content:start mantém rótulo e input ancorados no topo do campo, sem
   esticar quando sobra altura. */
.mdt-field { display: grid; gap: .33em; align-content: start; transition: opacity .18s; min-width: 0; }
.mdt-field.is-locked { opacity: .5; }

.mdt-label { font-size: .87em; font-weight: 700; color: var(--ink, #1B1840); }

.mdt-inputbox { position: relative; display: flex; align-items: center; }
.mdt-input {
  width: 100%; font-family: inherit; font-size: 1em; color: var(--ink, #1B1840);
  padding: .8em 2.9em .8em .95em;
  border: .1em solid var(--line, #E4E2EE); border-radius: .75em;
  background: #fff; transition: border-color .15s, box-shadow .15s, background .15s;
}
.mdt-input::placeholder { color: #a8a4bd; }
.mdt-input:hover:not(:disabled) { border-color: #cfccdd; }
.mdt-input:focus {
  outline: none; border-color: var(--milldesk-orange, #FF6B1A);
  box-shadow: 0 0 0 .2em rgba(255, 107, 26, 0.14);
}
.mdt-input:disabled { background: #F7F6FB; cursor: not-allowed; }
.mdt-input.is-invalid { border-color: #e04957; }
.mdt-input.is-invalid:focus { box-shadow: 0 0 0 .2em rgba(224, 73, 87, 0.14); }

/* sufixo (.milldesk.com) — o input encolhe pra dar espaço */
.mdt-inputbox:has(.mdt-suffix) .mdt-input { padding-right: 9em; }
.mdt-suffix {
  position: absolute; right: 2.7em; font-size: .9em; font-weight: 600;
  color: var(--mute, #6b6785); pointer-events: none; white-space: nowrap;
}

.mdt-check {
  position: absolute; right: .85em;
  width: 1.45em; height: 1.45em; border-radius: 50%;
  background: rgba(52, 224, 161, 0.18); color: #0a8755;
  font-size: .9em; font-weight: 800;
  display: grid; place-items: center;
  opacity: 0; transform: scale(.7); transition: opacity .15s, transform .15s;
}
.mdt-check.is-visible { opacity: 1; transform: none; }

.mdt-helper { font-size: .83em; line-height: 1.4; color: var(--mute, #6b6785); margin: 0; }
.mdt-helper:empty { display: none; }
.mdt-helper.is-error { color: #c62b3a; font-weight: 600; }
.mdt-helper.is-success { color: #0a8755; font-weight: 600; }

/* ---- botão ---- */
.mdt-submit {
  margin-top: .2em; width: 100%; font-family: inherit;
  font-size: 1.03em; font-weight: 800;
  color: #fff; background: var(--milldesk-orange, #FF6B1A);
  border: none; border-radius: .8em; padding: .95em 1.3em; cursor: pointer;
  box-shadow: 0 .6em 1.7em rgba(255, 107, 26, 0.32);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.mdt-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 .9em 2.1em rgba(255, 107, 26, 0.4); }
.mdt-submit:disabled { background: #D9D6E4; color: #8b87a2; box-shadow: none; cursor: not-allowed; }

.mdt-erro {
  margin: 0; padding: .65em .9em; border-radius: .65em; text-align: center;
  background: rgba(224, 73, 87, 0.10); color: #b81f33; font-size: .9em; font-weight: 600;
}

/* ---- enviando ---- */
.mdt-dialog.is-loading { pointer-events: none; }
.mdt-dialog.is-loading .mdt-form { opacity: .55; }

/* ---- sucesso ---- */
.mdt-ok { text-align: center; padding: .5em 0 .3em; }
.mdt-ok-ic {
  width: 4.8em; height: 4.8em; margin: 0 auto 1em; border-radius: 50%;
  background: rgba(52, 224, 161, 0.16);
  display: grid; place-items: center;
  animation: mdt-pop .3s cubic-bezier(.2, .9, .3, 1.4);
}
.mdt-ok-ic svg { width: 40%; height: 40%; stroke: #0a8755; fill: none; }
.mdt-ok-mail {
  display: inline-block; margin: .9em 0 1.1em; padding: .6em 1.05em;
  background: #F7F6FB; border: 1px solid var(--line, #E4E2EE); border-radius: .65em;
  font-size: .93em; font-weight: 600; color: var(--ink, #1B1840);
}
.mdt-ok-passos { text-align: left; margin: 0; padding-left: 1.3em; display: grid; gap: .65em; }
.mdt-ok-passos li { font-size: .93em; line-height: 1.5; color: #3d3a55; }
.mdt-ok-passos span { display: block; font-size: .85em; color: var(--mute, #6b6785); margin-top: .15em; }

/* ---- telas baixas: dicas neutras e subtítulo recolhem ---- */
@media (max-height: 700px) {
  .mdt-helper:not(.is-error):not(.is-success) { display: none; }
}
@media (max-height: 500px) {
  .mdt-sub { display: none; }
}

/* telas bem curtas: aperta só os ESPAÇOS, nunca a fonte */
@media (max-height: 520px) {
  .mdt-dialog { padding: 1em clamp(16px, 3.4vw, 2.3em) .9em; }
  .mdt-head { margin-bottom: .7em; }
  .mdt-form { gap: .5em; }
  .mdt-field { gap: .2em; }
  .mdt-input { padding: .6em 2.9em .6em .95em; }
  .mdt-submit { padding: .75em 1.3em; margin-top: .1em; }
}

/* celular deitado (altura <=440px): espaços no mínimo e título menor — é a única
   forma de 5 campos em coluna única caberem em ~390px sem rolagem. */
@media (max-height: 440px) {
  .mdt-overlay { padding: 4px 16px; }
  .mdt-dialog { padding: .8em clamp(16px, 3.4vw, 2.3em) .7em; }
  .mdt-title { font-size: 1.4em; }
  .mdt-head { margin-bottom: .5em; }
  .mdt-form { gap: .4em; }
  .mdt-field { gap: .15em; }
  .mdt-input { padding: .5em 2.9em .5em .95em; }
  .mdt-submit { padding: .65em 1.3em; margin-top: 0; }
}

/* ---- mobile: vira folha inferior ----
   No celular a base é no mínimo 16px: além de legível, é o piso que evita o
   iOS dar zoom ao focar um input. Como a fonte não encolhe, quem cede espaço
   em telas curtas são o subtítulo, as dicas e os espaçamentos. */
@media (max-width: 600px) {
  .mdt-overlay { padding: 0; align-items: flex-end; }
  .mdt-dialog {
    font-size: clamp(16px, 1.9vh, 17px);
    max-width: 100%;
    border-radius: 1.3em 1.3em 0 0;
    padding: 1.5em 16px 1.2em;
    animation: mdt-up .24s cubic-bezier(.2, .9, .3, 1.1);
  }
  @keyframes mdt-up { from { transform: translateY(40px); opacity: 0 } to { transform: none; opacity: 1 } }
  .mdt-form { gap: .7em; }
  .mdt-inputbox:has(.mdt-suffix) .mdt-input { padding-right: 8em; }
}
@media (max-width: 600px) and (max-height: 640px) { .mdt-sub { display: none; } }
/* celular bem curto: aperta só os espaços — a fonte continua em 16px */
@media (max-width: 600px) and (max-height: 620px) {
  .mdt-dialog { padding: 1em 16px .9em; }
  .mdt-head { margin-bottom: .75em; }
  .mdt-form { gap: .5em; }
  .mdt-field { gap: .2em; }
  .mdt-input { padding: .62em 2.9em .62em .95em; }
  .mdt-submit { padding: .8em 1.3em; }
}