/*! 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`) */
.mdt-dialog {
  font-size: clamp(10px, 1.42vh, 15px);
  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; }
.mdt-field { display: grid; gap: .33em; 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;
}

/* ---- selos ---- */
.mdt-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .35em 1.1em;
  margin-top: 1.1em; padding-top: .95em; border-top: 1px solid var(--line, #E4E2EE);
  font-size: .8em; color: var(--mute, #6b6785);
}

/* ---- 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 MUITO baixas: dicas neutras e selos recolhem ---- */
@media (max-height: 620px) {
  .mdt-helper:not(.is-error):not(.is-success) { display: none; }
}
@media (max-height: 480px) {
  .mdt-trust { display: none; }
  .mdt-sub { display: none; }
}

/* ---- mobile: vira folha inferior ---- */
@media (max-width: 600px) {
  .mdt-overlay { padding: 0; align-items: flex-end; }
  .mdt-dialog {
    max-width: 100%;
    border-radius: 1.3em 1.3em 0 0;
    padding: 1.8em 18px 1.4em;
    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 } }
  /* no celular o input precisa de >=16px, senão o iOS dá zoom ao focar */
  .mdt-input { font-size: max(1em, 16px); }
  .mdt-inputbox:has(.mdt-suffix) .mdt-input { padding-right: 8em; }
}