/* =======================================================================
   Modal de entrada — <dialog> nativo.
   ======================================================================= */

.auth {
    width: min(100% - 2rem, 27.5rem);
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: #fff;
    color: #1d1240;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
    /* Em tela baixa (celular deitado) o modal rola por dentro em vez de
       ser cortado pelo overflow: hidden. */
    max-height: 92dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.auth::backdrop {
    background: rgba(8, 4, 26, .72);
    backdrop-filter: blur(3px);
}

/* Entrada suave do cartão */
.auth[open] { animation: authIn .22s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes authIn {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Fechar ---------- */
.auth__close-form { margin: 0; }
.auth__close {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 3;
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b6396;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}
.auth__close:hover { background: rgba(0, 0, 0, .07); color: #1d1240; }
.auth__close svg { width: 15px; height: 15px; }

/* ---------- Confete decorativo ---------- */
.auth__confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cf { position: absolute; display: block; }

.cf--1  { top: 6%;  left: 7%;  width: 26px; height: 26px; border: 4px solid #ef4e64; border-radius: 50%; }
.cf--2  { top: 3%;  left: 20%; width: 34px; height: 12px; background: #7b5cf0; border-radius: 2px; transform: rotate(-18deg); }
.cf--3  { top: 12%; left: 32%; width: 14px; height: 14px; background: #ef4e64; border-radius: 50%; }
.cf--4  { top: 5%;  left: 44%; width: 10px; height: 10px; background: #35c8f7; border-radius: 50%; }
.cf--5  { top: 4%;  right: 26%; width: 22px; height: 22px; border: 4px solid #7b5cf0; border-radius: 50%; }
.cf--6  { top: 9%;  right: 12%; width: 30px; height: 30px; border: 4px solid #35c8f7; border-radius: 50%; }
.cf--7  { top: 20%; right: 6%; width: 18px; height: 18px; background: #ef4e64; border-radius: 50%; }
.cf--8  { top: 26%; right: 16%; width: 13px; height: 13px; background: #7b5cf0; border-radius: 50%; }
.cf--9  { top: 17%; left: 4%;  width: 12px; height: 12px; background: #35c8f7; border-radius: 50%; }
.cf--10 { top: 23%; left: 14%; width: 26px; height: 10px; background: #2be0b6; border-radius: 2px; transform: rotate(22deg); }
.cf--11 { top: 30%; left: 3%;  width: 20px; height: 20px; border: 3px solid #7b5cf0; border-radius: 50%; }
.cf--12 { top: 33%; right: 4%; width: 15px; height: 15px; background: #e23ac8; border-radius: 50%; }

/* ---------- Estado de carregamento ---------- */
.auth__loading {
    display: grid;
    place-items: center;
    min-height: 19rem;
    padding: 2rem;
}

.wordmark-load {
    position: relative;
    display: inline-block;
    font-size: clamp(2rem, 9vw, 2.8rem);
    font-weight: 800;
    font-style: italic;
    letter-spacing: -.03em;
    line-height: 1;
}

/* Base apagada: é o "vazio" que vai sendo preenchido */
.wordmark-load__base { color: #e3e0f2; }

/* Camada colorida por cima, revelada da esquerda para a direita */
.wordmark-load__fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg, #35c8f7 0%, #7b5cf0 48%, #e23ac8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    clip-path: inset(0 100% 0 0);
    animation: wordFill 1s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes wordFill {
    0%   { clip-path: inset(0 100% 0 0); }
    65%  { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 0 0); opacity: .55; }
}

/* ---------- Corpo ---------- */
.auth__body { padding: 2.5rem 1.75rem 1.75rem; text-align: center; position: relative; z-index: 1; }

.auth__logo {
    margin: 0 0 1.5rem;
    font-size: 2.1rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -.03em;
    background: linear-gradient(95deg, #35c8f7 0%, #7b5cf0 48%, #e23ac8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth__title {
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1d1240;
}

.auth__primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    padding: .8rem 1rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(95deg, #35c8f7, #7b5cf0 55%, #e23ac8);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: filter .18s ease, transform .18s ease;
}
.auth__primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.auth__primary:active { transform: none; }
.auth__primary svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.auth__primary--submit { margin-top: 1.1rem; }

.auth__hint { margin: .9rem 0 0; font-size: .82rem; color: #6b6396; }

.auth__divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.1rem 0;
    color: #9a93bd;
    font-size: .85rem;
}
.auth__divider::before,
.auth__divider::after { content: ""; flex: 1; height: 1px; background: #e6e3f2; }

/* ---------- Formulário ---------- */
.auth__form { text-align: left; margin-top: .5rem; }

.auth__label {
    display: block;
    margin-bottom: .3rem;
    font-size: .82rem;
    font-weight: 600;
    color: #4a4270;
}

.auth__input {
    width: 100%;
    padding: .7rem .9rem;
    margin-bottom: .9rem;
    border: 1.5px solid #ded9ee;
    border-radius: 10px;
    background: #fbfaff;
    color: #1d1240;
    font: inherit;
    font-size: .95rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.auth__input:focus {
    outline: none;
    border-color: #7b5cf0;
    box-shadow: 0 0 0 3px rgba(123, 92, 240, .18);
}
.auth__input::placeholder { color: #a9a2c6; }

.auth__help {
    margin: -.5rem 0 .9rem;
    font-size: .78rem;
    color: #8a83ac;
}

.auth__error {
    margin: 0 0 .5rem;
    padding: .6rem .8rem;
    border-radius: 8px;
    background: #fdecef;
    border-left: 3px solid #ef4e64;
    color: #8c1f30;
    font-size: .86rem;
}
/* Mesmo elemento serve para o aviso de sucesso — uma região só evita
   que o leitor de tela precise procurar a mensagem em dois lugares. */
.auth__error--ok {
    background: #e7f8f2;
    border-left-color: #12b98e;
    color: #0c5c46;
}

.auth__secondary {
    display: block;
    width: 100%;
    margin-top: .6rem;
    padding: .75rem 1rem;
    border: 1.5px solid #ded9ee;
    border-radius: 999px;
    background: #fff;
    color: #4a4270;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}
.auth__secondary:hover { border-color: #7b5cf0; color: #1d1240; }
.auth__primary:disabled,
.auth__secondary:disabled { opacity: .55; cursor: progress; }

.auth__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: 1rem;
    font-size: .85rem;
    color: #6b6396;
}
.auth__links a,
.auth__linkbtn {
    color: #6b3fd6;
    font: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: .15em;
}
.auth__links a:hover,
.auth__linkbtn:hover { color: #1d1240; }

.auth__legal {
    margin: 1.1rem 0 0;
    font-size: .76rem;
    line-height: 1.5;
    color: #8a83ac;
}
.auth__legal a { color: #6b3fd6; }

/* ---------- Lojas ---------- */
.auth__stores { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #ece9f7; }
.auth__stores-text { display: block; margin-bottom: .75rem; font-size: .82rem; color: #6b6396; }
.auth__stores .stores { gap: .5rem; }
.auth__stores .store {
    flex: 1;
    padding: .45rem .7rem;
    background: #1d1240;
    color: #fff;
}
.auth__stores .store:hover { background: #2d1d63; }
.auth__stores .store__glyph { width: 20px; height: 20px; }
.auth__stores .store__text small { font-size: .55rem; }
.auth__stores .store__text strong { font-size: .9rem; }

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
    /* A entrada do cartão e o efeito de hover param aqui.
       O preenchimento do logotipo NÃO: é decisão do dono do produto que
       ele apareça para todo mundo. Por isso .auth também está fora da
       regra global de redução de movimento no app.css. */
    .auth[open] { animation: none; }
    .auth__primary:hover { transform: none; }
}