/* ═══════════════════════════════════════════════════════════
   Zavvi — Auth (register / login), estilo neo-brutalist da LP
   Prefixo: au-
   ═══════════════════════════════════════════════════════════ */

:root {
    --au-ink: #150d30;
    --au-green: #00E785;
    --au-green-soft: #e7fff3;
    --au-green-pastel: #eafff2;
    --au-yellow: #ffd84d;
    --au-gray: #5b5772;
    --au-gray-light: #8a86a0;
    --au-line: #e9e7f2;
    --au-red: #b91c1c;
    --au-red-soft: #ffe1e1;
    --au-amber: #d97706;
    --au-blue: #2563eb;
    --au-ok: #00a05e;
    --au-font-display: 'Bricolage Grotesque', 'Inter', sans-serif;
    --au-font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body.au-body {
    font-family: var(--au-font-body);
    color: var(--au-ink);
    background: #fff;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
.au-body a { color: inherit; }
.au-body img { max-width: 100%; }

/* ── Layout split ── */
.au-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

/* Coluna esquerda: pastel verde com marca */
.au-side {
    background: var(--au-green-pastel);
    border-right: 2px solid var(--au-ink);
    padding: 2.5rem 3rem 3rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.au-side::after {
    content: '';
    position: absolute;
    right: -120px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: var(--au-green);
    border: 2px solid var(--au-ink);
    opacity: .35;
    pointer-events: none;
}
.au-side-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 3rem;
}
.au-logo { display: inline-flex; }
.au-back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--au-font-display);
    font-size: .82rem;
    font-weight: 700;
    color: var(--au-ink);
    text-decoration: none;
    padding: .4rem .8rem;
    border-radius: 10px;
    background: #fff;
    border: 1.5px solid var(--au-ink);
    box-shadow: 2px 2px 0 var(--au-ink);
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease;
}
.au-back:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--au-ink); }
.au-back svg { width: 14px; height: 14px; }

.au-side-body { position: relative; z-index: 1; margin: auto 0; }
.au-side h1, .au-side .au-headline {
    font-family: var(--au-font-display);
    font-size: clamp(1.9rem, 3vw, 2.75rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    max-width: 480px;
}
.au-mark {
    display: inline-block;
    background: var(--au-green);
    border: 2px solid var(--au-ink);
    border-radius: 10px;
    padding: 0 .35em;
    box-shadow: 4px 4px 0 var(--au-ink);
    transform: rotate(-1.5deg);
    line-height: 1.15;
}
.au-side-lead {
    color: var(--au-gray);
    font-size: 1rem;
    max-width: 440px;
    margin-bottom: 1.75rem;
}
.au-bullets { list-style: none; display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.75rem; }
.au-bullets li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .95rem;
    font-weight: 500;
}
.au-bullets li b { font-weight: 700; }
.au-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--au-ink);
    color: var(--au-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.au-check svg { width: 12px; height: 12px; }
.au-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1.5px solid var(--au-ink);
    border-radius: 40px;
    background: #fff;
    padding: .4rem 1rem;
    font-size: .82rem;
    font-weight: 700;
    font-family: var(--au-font-display);
    box-shadow: 3px 3px 0 rgba(21,13,48,.12);
}
.au-pill svg { width: 15px; height: 15px; color: #00b56a; }
.au-side-foot {
    position: relative;
    z-index: 1;
    margin-top: 2.5rem;
    font-size: .78rem;
    color: var(--au-gray-light);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.au-side-foot a { text-decoration: none; }
.au-side-foot a:hover { text-decoration: underline; }

/* Coluna direita: card */
.au-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    background:
        radial-gradient(circle at 1px 1px, rgba(21,13,48,.08) 1px, transparent 0) 0 0 / 22px 22px;
}
.au-card {
    width: 100%;
    max-width: 520px;
    background: #fff;
    border: 2px solid var(--au-ink);
    border-radius: 20px;
    box-shadow: 8px 8px 0 var(--au-ink);
    padding: 2.25rem 2.25rem 2rem;
}
.au-card-head { margin-bottom: 1.5rem; }
.au-card-head h2, .au-card-head h1 {
    font-family: var(--au-font-display);
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.15;
    margin-bottom: .35rem;
}
.au-card-head p { color: var(--au-gray); font-size: .92rem; }
.au-card-logo { display: none; height: 36px; margin-bottom: 1.25rem; }

/* Formulário */
.au-field { margin-bottom: 1.05rem; }
.au-label {
    display: block;
    font-family: var(--au-font-display);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--au-ink);
    margin-bottom: .4rem;
}
.au-input-wrap { position: relative; }
.au-input-wrap svg.au-icon {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--au-gray-light);
    pointer-events: none;
}
.au-input-wrap:focus-within svg.au-icon { color: #00a05e; }
.au-input {
    width: 100%;
    font-family: var(--au-font-body);
    font-size: .95rem;
    color: var(--au-ink);
    background: #fff;
    border: 1.5px solid var(--au-ink);
    border-radius: 10px;
    padding: .7rem .9rem .7rem 2.5rem;
    outline: none;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.au-input::placeholder { color: var(--au-gray-light); }
.au-input:focus { box-shadow: 3px 3px 0 var(--au-green); }
.au-input.au-invalid { border-color: var(--au-red); background: #fff7f7; }
.au-input.au-invalid:focus { box-shadow: 3px 3px 0 var(--au-red-soft); }
.au-hint { font-size: .76rem; color: var(--au-gray-light); margin-top: .35rem; }
.au-error {
    display: block;
    color: var(--au-red);
    font-size: .8rem;
    font-weight: 600;
    margin-top: .4rem;
}
.au-error-center { text-align: center; margin: -.4rem 0 .9rem; }
.au-hidden { display: none !important; }

/* ── Mostrar / ocultar senha ── */
.au-input--eye { padding-right: 2.7rem; }
.au-eye {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--au-gray-light);
    cursor: pointer;
}
.au-eye:hover { color: var(--au-ink); background: var(--au-green-soft); }
.au-eye:focus-visible { outline: 2px solid var(--au-ink); outline-offset: 1px; }
.au-eye svg { width: 17px; height: 17px; }
.au-eye .au-eye-off { display: none; }
.au-eye.is-on .au-eye-on { display: none; }
.au-eye.is-on .au-eye-off { display: block; }

/* ── Medidor de força da senha ── */
.au-strength {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .5rem;
}
.au-strength-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; flex: 1; }
.au-strength-bars span {
    height: 6px;
    border-radius: 4px;
    background: var(--au-line);
    border: 1px solid rgba(21,13,48,.12);
    transition: background .15s ease, border-color .15s ease;
}
.au-strength-label {
    font-family: var(--au-font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    min-width: 3.6rem;
    text-align: right;
    color: var(--au-gray-light);
}
.au-strength[data-level="1"] .au-strength-bars span:nth-child(-n+1),
.au-strength[data-level="2"] .au-strength-bars span:nth-child(-n+2),
.au-strength[data-level="3"] .au-strength-bars span:nth-child(-n+3),
.au-strength[data-level="4"] .au-strength-bars span:nth-child(-n+4) { border-color: var(--au-ink); }
.au-strength[data-level="1"] .au-strength-bars span:nth-child(-n+1) { background: var(--au-red); }
.au-strength[data-level="2"] .au-strength-bars span:nth-child(-n+2) { background: var(--au-amber); }
.au-strength[data-level="3"] .au-strength-bars span:nth-child(-n+3) { background: var(--au-blue); }
.au-strength[data-level="4"] .au-strength-bars span:nth-child(-n+4) { background: var(--au-green); }
.au-strength[data-level="1"] .au-strength-label { color: var(--au-red); }
.au-strength[data-level="2"] .au-strength-label { color: var(--au-amber); }
.au-strength[data-level="3"] .au-strength-label { color: var(--au-blue); }
.au-strength[data-level="4"] .au-strength-label { color: var(--au-ok); }

/* ── Requisitos ao vivo ── */
.au-reqs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin-top: .5rem;
}
.au-reqs li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .76rem;
    font-weight: 500;
    color: var(--au-gray-light);
}
.au-req-mark {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid var(--au-line);
    background: #fff;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.au-req-mark svg { width: 9px; height: 9px; }
.au-reqs li.is-ok { color: var(--au-ok); font-weight: 600; }
.au-reqs li.is-ok .au-req-mark { background: var(--au-green); border-color: var(--au-ink); color: var(--au-ink); }

/* ── Feedback inline (senhas coincidem, CPF/CNPJ) ── */
.au-feedback {
    display: none;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 600;
    margin-top: .35rem;
}
.au-feedback.is-ok, .au-feedback.is-err { display: inline-flex; }
.au-feedback.is-ok { color: var(--au-ok); }
.au-feedback.is-err { color: var(--au-red); }

/* Duas colunas (Nome / Sobrenome) */
.au-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 .85rem;
}

/* Segmento PF/PJ */
.au-segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    background: var(--au-green-soft);
    border: 2px solid var(--au-ink);
    border-radius: 14px;
    padding: 4px;
}
.au-segment input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.au-segment label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .6rem .75rem;
    border-radius: 10px;
    border: 1.5px solid transparent;
    font-family: var(--au-font-display);
    font-size: .88rem;
    font-weight: 700;
    color: var(--au-gray);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    user-select: none;
}
.au-segment label svg { width: 16px; height: 16px; }
.au-segment label:hover { color: var(--au-ink); }
.au-segment input[type="radio"]:checked + label {
    background: var(--au-green);
    color: var(--au-ink);
    border-color: var(--au-ink);
    box-shadow: 2px 2px 0 var(--au-ink);
}
.au-segment input[type="radio"]:focus-visible + label { outline: 2px solid var(--au-ink); outline-offset: 2px; }

/* Linha lembrar / esqueci */
.au-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: -.25rem 0 1.1rem;
    font-size: .85rem;
}
.au-checkbox {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--au-gray);
}
.au-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: #00b56a;
    border: 1.5px solid var(--au-ink);
    cursor: pointer;
}
.au-link {
    font-weight: 600;
    color: var(--au-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--au-green);
}
.au-link:hover { background: var(--au-green-soft); }

/* reCAPTCHA */
.au-captcha { display: flex; justify-content: center; margin: .25rem 0 1.1rem; }

/* Botão neo-brutalist */
.au-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    font-family: var(--au-font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--au-ink);
    background: var(--au-green);
    border: 2px solid var(--au-ink);
    border-radius: 12px;
    padding: .85rem 1.5rem;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--au-ink);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    position: relative;
}
.au-btn:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--au-ink); background: #2bf28f; }
.au-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--au-ink); }
.au-btn svg { width: 18px; height: 18px; }
.au-btn[disabled] { cursor: progress; opacity: .85; }
.au-btn.au-loading { color: transparent; }
.au-btn.au-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 20px; height: 20px;
    margin: -10px 0 0 -10px;
    border: 2.5px solid rgba(21,13,48,.25);
    border-top-color: var(--au-ink);
    border-radius: 50%;
    animation: au-spin .8s linear infinite;
}
@keyframes au-spin { to { transform: rotate(360deg); } }

/* Rodapé do card */
.au-card-foot {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1.5px dashed var(--au-line);
    text-align: center;
    font-size: .9rem;
    color: var(--au-gray);
}
.au-card-foot .au-link { margin-left: .25rem; }
.au-status {
    background: var(--au-green-soft);
    border: 1.5px solid var(--au-ink);
    border-radius: 10px;
    padding: .65rem .9rem;
    font-size: .88rem;
    font-weight: 500;
    margin-bottom: 1.1rem;
    box-shadow: 2px 2px 0 var(--au-ink);
}
.au-legal { font-size: .76rem; color: var(--au-gray-light); text-align: center; margin-top: 1rem; }
.au-legal a { color: var(--au-gray); }

/* ═══ Responsivo ═══ */
@media (max-width: 991px) {
    .au-page { grid-template-columns: 1fr; }
    .au-side {
        border-right: none;
        border-bottom: 2px solid var(--au-ink);
        padding: 1.5rem 1.25rem 2rem;
    }
    .au-side::after { width: 160px; height: 160px; right: -100px; bottom: -100px; opacity: .25; }
    .au-side-top { margin-bottom: 1.5rem; }
    .au-side h1, .au-side .au-headline { font-size: clamp(1.6rem, 6vw, 2.1rem); }
    .au-side-lead { font-size: .92rem; margin-bottom: 1rem; }
    .au-bullets { display: none; }
    .au-side-foot { display: none; }
    .au-main { padding: 1.5rem 1rem 2.5rem; align-items: flex-start; }
    .au-card { padding: 1.75rem 1.5rem; box-shadow: 6px 6px 0 var(--au-ink); }
}
@media (max-width: 480px) {
    .au-card { padding: 1.5rem 1.15rem; border-radius: 16px; }
    .au-grid-2 { grid-template-columns: 1fr; gap: 0; }
    .au-back span { display: none; }
    .au-back { padding: .45rem .55rem; }
    .au-row { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .au-mark { box-shadow: 3px 3px 0 var(--au-ink); }
    /* reCAPTCHA v2 (304px) num card estreito */
    .au-captcha { transform: scale(.9); transform-origin: center; }
}