/* Painel de cadastro do período de testes — usado apenas por index.html.
   Abre sobreposto a partir dos CTAs; o comportamento está em signup-form.js. */

/* O painel não foi adaptado para o tema escuro: continua sendo um cartão
   claro por cima de qualquer fundo. Ele herda as variáveis de cor globais
   (base.css), então travamos aqui os três tokens do Tailwind usados dentro
   dele nos valores do tema claro, para o texto não desaparecer se alguém
   abrir o cadastro com o site no modo escuro. */
.cadastro-dialogo {
    --color-primary: 177 31 98;
    --color-on-surface: 25 28 30;
    --color-on-surface-variant: 87 65 71;
}

/* <dialog> nativo: o browser cuida do Esc, do foco preso e do fundo inerte.
   Aqui fica só a aparência — o elemento em si não desenha nada. */
dialog.cadastro-dialogo {
    width: min(560px, 100vw - 2rem);
    max-height: calc(100dvh - 2rem);
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}
dialog.cadastro-dialogo::backdrop {
    background: rgba(25, 28, 30, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
dialog.cadastro-dialogo[open] { animation: cadastro-entra .25s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes cadastro-entra {
    from { opacity: 0; transform: translateY(16px); }
}
@media (prefers-reduced-motion: reduce) {
    dialog.cadastro-dialogo[open] { animation: none; }
}

/* Formulário mais alto que a janela: a rolagem acontece dentro do cartão */
dialog.cadastro-dialogo .cadastro-cartao {
    position: relative;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}

.cadastro-fechar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    color: #574147;
    transition: background-color .2s, color .2s;
}
.cadastro-fechar:hover { background: #f1f5f9; color: #191c1e; }
.cadastro-fechar:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(177, 31, 98, .12);
}

/* O cartão que envolve o formulário e, depois do envio, a confirmação */
.cadastro-cartao {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 2rem;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .04);
}
@media (min-width: 640px) {
    .cadastro-cartao { padding: 2.5rem; }
}

/* o título não pode passar por baixo do X */
.cadastro-cartao form > p:first-child { padding-right: 3rem; }

.cadastro-campo { margin-bottom: 1.5rem; }

.cadastro-rotulo {
    display: block;
    margin-bottom: .5rem;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #191c1e;
}

/* O Tailwind injeta o CSS do plugin forms depois dos nossos <link>: o seletor
   precisa ser mais específico que o [type='text'] do plugin para prevalecer. */
input.cadastro-entrada {
    width: 100%;
    padding: .875rem 1rem;
    background: #f1f5f9;
    border: 1px solid transparent;
    border-radius: 1rem;
    font-size: 16px; /* abaixo de 16px o iOS dá zoom ao focar o campo */
    line-height: 1.5;
    color: #191c1e;
    transition: background-color .2s, border-color .2s, box-shadow .2s;
}
input.cadastro-entrada::placeholder { color: #8b7077; opacity: .7; }
input.cadastro-entrada:focus {
    outline: none;
    background: #fff;
    border-color: #b11f62;
    box-shadow: 0 0 0 4px rgba(177, 31, 98, .12);
}

/* Campo com marca fixa à esquerda (o @ do Instagram) */
.cadastro-prefixado { position: relative; }
.cadastro-prefixo {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    font-size: 16px;
    font-weight: 600;
    color: #574147;
    pointer-events: none;
}
.cadastro-prefixado input.cadastro-entrada { padding-left: 2.125rem; }

.cadastro-ajuda {
    margin-top: .5rem;
    font-size: 13px;
    line-height: 1.4;
    color: #574147;
}

.cadastro-erro {
    margin-top: .5rem;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    color: #ba1a1a;
}
/* Campo reprovado na validação: a borda acompanha a mensagem */
input.cadastro-entrada[aria-invalid="true"] {
    background: #fff;
    border-color: #ba1a1a;
}
input.cadastro-entrada[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 4px rgba(186, 26, 26, .12);
}

.cadastro-consentimento {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-top: 2rem;
}
input.cadastro-caixa {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .125rem;
    border: 1px solid #debfc6;
    border-radius: .375rem;
    color: #b11f62; /* o plugin forms usa a cor do texto para o preenchimento */
}
input.cadastro-caixa:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(177, 31, 98, .12);
}
input.cadastro-caixa[aria-invalid="true"] { border-color: #ba1a1a; }
.cadastro-rotulo-caixa {
    font-size: 14px;
    line-height: 1.5;
    color: #574147;
}
.cadastro-rotulo-caixa a {
    color: #b11f62;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cadastro-enviar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    margin-top: 2rem;
    padding: 1.125rem 2rem;
    border-radius: 9999px;
}
.cadastro-enviar[disabled] {
    opacity: .6;
    cursor: progress;
    transform: none;
}

/* Falha no envio: aparece logo abaixo do botão */
.cadastro-falha {
    margin-top: 1rem;
    padding: .875rem 1rem;
    background: #ffdad6;
    border-radius: 1rem;
    font-size: 14px;
    line-height: 1.5;
    color: #93000a;
}

.cadastro-sucesso { text-align: center; }
.cadastro-sucesso-selo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #FF5F9E 0%, #8d00d9 100%);
    box-shadow: 0 8px 24px -6px rgba(255, 95, 158, .5);
    color: #fff;
}
.cadastro-sucesso-selo .material-symbols-outlined { font-size: 2rem; }
.cadastro-voltar {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #b11f62;
    background: none;
    border: 0;
    cursor: pointer;
}
.cadastro-voltar:hover { text-decoration: underline; text-underline-offset: 4px; }