/* Cadastro (/Account/Register). Mobile first: até 640px sem card, formulário na tela inteira. */

.rg-page {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--uc-bg);
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--uc-ink);
    padding: 0 20px 24px;
}

.rg-wrap {
    max-width: 400px;
    margin: 0 auto;
}

.rg-logo {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    color: var(--uc-brand);
    font-size: 20px;
    font-weight: 600;
}

.rg-coupon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--uc-promo-bg);
    color: var(--uc-promo-text);
    font-size: 13px;
    line-height: 1.3;
}

.rg-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 6px;
    color: var(--uc-ink);
}

.rg-lead {
    font-size: 15px;
    line-height: 1.4;
    color: var(--uc-ink-2);
    margin: 0 0 24px;
}

.rg-field + .rg-field {
    margin-top: 16px;
}

.rg-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6px;
    color: var(--uc-ink);
}

.rg-input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    font-size: 16px; /* nunca menos: abaixo de 16px o iOS dá zoom ao focar */
    font-family: inherit;
    color: var(--uc-ink);
    background: var(--uc-surface);
    border: 1.5px solid var(--uc-field-border);
    border-radius: 10px;
    outline: none !important; /* anula o outline .valid.modified/.invalid de app.css; foco e erro usam a borda */
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .rg-input::placeholder {
        color: var(--uc-field-placeholder);
        opacity: 1;
    }

    .rg-input:focus {
        border: 2px solid var(--uc-brand);
        padding: 0 13.5px; /* compensa a borda mais grossa, texto não pula */
        box-shadow: 0 0 0 3px rgba(var(--uc-brand-rgb), .16);
    }

    .rg-input[aria-invalid="true"] {
        border-color: var(--uc-error);
    }

.rg-password {
    position: relative;
}

    .rg-password .rg-input {
        padding-right: 52px;
    }

.rg-eye {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--uc-ink-3);
    font-size: 18px;
    border-radius: 8px;
}

.rg-error:has(span) { /* :has, não :empty: o Razor deixa espaço em branco dentro do div vazio */
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--uc-error);
}

    .rg-error i {
        line-height: 1.4;
    }

.rg-suggestion {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--uc-ink-2);
}

    .rg-suggestion:not(:empty) {
        margin-top: 6px;
    }

    .rg-suggestion button {
        border: 0;
        background: none;
        padding: 0;
        font: inherit;
        font-weight: 600;
        color: var(--uc-brand);
        text-decoration: underline;
    }

.rg-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 52px;
    margin-top: 24px; /* 16px do ritmo entre campos + 8px */
    border: 0;
    border-radius: 12px;
    background: var(--uc-brand);
    color: var(--uc-brand-on);
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
}

    .rg-submit:hover {
        background: var(--uc-brand-hover);
    }

    .rg-submit:disabled {
        opacity: .75;
    }

    .rg-submit:focus-visible, .rg-eye:focus-visible, .rg-suggestion button:focus-visible {
        outline: 2px solid var(--uc-focus-ring);
        outline-offset: 2px;
    }

.rg-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--uc-ink-2);
}

    .rg-note i {
        color: var(--uc-brand);
        font-size: 16px;
        line-height: 1.2;
    }

.rg-footer {
    margin-top: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--uc-ink-2);
}

    .rg-footer p {
        margin: 0 0 8px;
    }

    .rg-footer a {
        font-weight: 600;
        text-decoration: none;
        color: var(--uc-action-text);
    }

@media (min-width: 640px) {
    .rg-page {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px 16px;
    }

    .rg-wrap {
        width: 100%;
    }

    .rg-card {
        background: var(--uc-surface);
        border-radius: 1.5rem;
        padding: 1.5rem;
        box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    }
}