/* =============================================================================
   Modal de contato (CTAs "Falar com vendas" / "Falar com vendas →")
   Tokens vivem em layout.css :root (--brand, --brand-deep, --bg, --bg-raised,
   --fg, --fg-muted, --fg-subtle, --line, --line-strong, --font-sans/mono) —
   nenhum token é (re)definido aqui. Molde visual: `.om-lightbox` (home.css).
   ========================================================================= */

.om-contact-modal { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.72); display: grid; place-items: center; padding: 24px; backdrop-filter: blur(8px); }
.om-contact-modal[hidden] { display: none; }

.om-contact-modal-inner { position: relative; width: min(480px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 32px; box-shadow: 0 32px 64px rgba(0,0,0,.5); display: flex; flex-direction: column; }

.om-contact-modal-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-raised); border: 1px solid var(--line); color: var(--fg); display: grid; place-items: center; cursor: pointer; transition: background 120ms; }
.om-contact-modal-close:hover { background: var(--line); }
.om-contact-modal-close svg { width: 18px; height: 18px; }

.om-contact-modal-title { font-family: var(--font-sans); font-size: 24px; font-weight: 500; letter-spacing: -.012em; color: var(--fg); margin: 0 0 8px; padding-right: 40px; transition: opacity 240ms ease; }
.om-contact-modal-sub { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--fg-muted); margin: 0 0 24px; transition: opacity 240ms ease; }

.om-contact-form { display: flex; flex-direction: column; gap: 16px; transition: opacity 240ms ease; }
/* `[hidden]` do HTML só some se nada em CSS puser `display` de volta no
   elemento — como `.om-contact-form` acima sempre define `display: flex`,
   sem este override o form continuava ocupando espaço (e visível) mesmo com
   `form.hidden = true` no JS. Bug pré-existente desde o merge `9238e845`,
   mascarado porque a verificação anterior só checava `success.isVisible()`,
   não se o form ainda ocupava layout por trás. */
.om-contact-form[hidden] { display: none; }

/* Fadeout do formulário (+ título/subtítulo, pra sobrar só o sucesso
   centralizado) — duração precisa bater com FORM_FADE_OUT_DURATION_MS no JS. */
.om-contact-modal-title.is-fading-out,
.om-contact-modal-sub.is-fading-out,
.om-contact-form.is-fading-out {
    opacity: 0;
    pointer-events: none;
}

.om-contact-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); font-size: 13px; color: var(--fg-muted); }
.om-contact-field input,
.om-contact-field textarea {
    font-family: var(--font-sans); font-size: 15px; color: var(--fg);
    background: var(--bg-raised); border: 1px solid var(--line); border-radius: 6px;
    padding: 10px 12px; resize: vertical; transition: border-color 120ms;
}
.om-contact-field input:focus,
.om-contact-field textarea:focus { outline: none; border-color: var(--brand); }
.om-contact-field input:invalid[data-touched],
.om-contact-field textarea:invalid[data-touched] { border-color: #d64545; }

.om-contact-error { font-family: var(--font-sans); font-size: 12px; color: #d64545; min-height: 1em; }

.om-contact-general-error { font-family: var(--font-sans); font-size: 13px; color: #d64545; background: rgba(214,69,69,.08); border: 1px solid rgba(214,69,69,.3); border-radius: 6px; padding: 10px 12px; margin: 0; }
.om-contact-general-error[hidden] { display: none; }

.om-contact-success {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    flex: 1 1 auto;
    padding: 32px 8px; text-align: center;
    opacity: 0; transform: translateY(8px) scale(.96);
    transition: opacity 240ms ease, transform 240ms ease;
}
.om-contact-success[hidden] { display: none; }
.om-contact-success.is-visible { opacity: 1; transform: translateY(0) scale(1); }

.om-contact-success-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: color-mix(in oklab, var(--brand) 16%, transparent);
    color: var(--brand); display: grid; place-items: center;
}
.om-contact-success-icon svg { width: 28px; height: 28px; }
.om-contact-success-icon path {
    stroke-dasharray: 24; stroke-dashoffset: 24;
    animation: om-contact-success-check 420ms ease 160ms forwards;
}
.om-contact-success.is-visible .om-contact-success-icon path { animation-play-state: running; }

.om-contact-success-text { font-family: var(--font-sans); font-size: 15px; color: var(--fg); margin: 0; }

@keyframes om-contact-success-check {
    to { stroke-dashoffset: 0; }
}

/* `.om-btn` (home.css) nunca precisou de reset de <button> nativo porque todo
   uso existente era <a> — este é o primeiro <button> real da landing, e sem
   isso o Chrome/Safari desenham o gradiente/relevo padrão de UA por cima do
   background flat. */
.om-contact-form button.om-btn {
    appearance: none;
    -webkit-appearance: none;
    background-image: none;
    box-shadow: none;
}
.om-contact-form button[data-contact-submit]:disabled { opacity: .6; cursor: not-allowed; transform: none; }

@media (max-width: 480px) {
    .om-contact-modal { padding: 12px; }
    .om-contact-modal-inner { padding: 24px 20px; border-radius: 8px; }
}