/*
 * Login e Registro (#login-modal).
 * Só visual: o seletor reutiliza os cliques já existentes em .register-text e .login-text.
 */
#login-modal {
    --auth-bg: #0b0b0e;
    --auth-field: #16161c;
    --auth-field-border: rgba(255, 255, 255, .12);
    --auth-text: #f4f4f5;
    --auth-muted: rgba(255, 255, 255, .62);
    --auth-radius: 16px;
}

#login-modal::part(content) {
    background: var(--auth-bg);
}

#login-modal .warpper[data-v-307e04a7] {
    background:
        radial-gradient(90% 32% at 50% 0%, color-mix(in srgb, var(--primary-color, #f3ba2f) 22%, transparent), transparent 68%),
        var(--auth-bg);
}

#login-modal .header[data-v-307e04a7] {
    height: auto;
    padding: .85rem 1.15rem 0;
}

#login-modal .btn-close[data-v-307e04a7] {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

#login-modal .content[data-v-307e04a7] {
    height: auto;
    flex: 1;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    border-radius: 0 !important;
    padding: .85rem 1.15rem 1.25rem;
    color: var(--auth-text);
}

/* ---------- Seletor Entrar | Registro ---------- */
#login-modal .content .header[data-v-7864016c],
#login-modal .content .header[data-v-05f04c1b] {
    padding: 0 0 .35rem;
}

#login-modal .content .header .title {
    display: none;
}

#login-modal .content .header > span {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;
    padding: 4px;
    background: #121216;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
}

#login-modal .content .register-hint,
#login-modal .content .login-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.65rem;
    margin: 0;
    padding: 0 !important;
    border-radius: 999px;
    background: var(--primary-color, #f3ba2f) !important;
    color: var(--on-primary-color, #1a1404) !important;
    font-size: 0 !important;
    font-weight: 800 !important;
    line-height: 1;
}

#login-modal .content .header[data-v-7864016c] .register-hint {
    grid-column: 1;
    grid-row: 1;
}

#login-modal .content .header[data-v-7864016c] .register-hint::before {
    content: "Entrar";
    font-size: .95rem;
    font-weight: 800;
}

#login-modal .content .header[data-v-7864016c] .register-text {
    grid-column: 2;
    grid-row: 1;
}

#login-modal .content .header[data-v-05f04c1b] .login-text {
    grid-column: 1;
    grid-row: 1;
}

#login-modal .content .header[data-v-05f04c1b] .login-hint {
    grid-column: 2;
    grid-row: 1;
}

#login-modal .content .header[data-v-05f04c1b] .login-hint::before {
    content: "Registro";
    font-size: .95rem;
    font-weight: 800;
}

#login-modal .content .register-text,
#login-modal .content .login-text {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.65rem;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--auth-muted) !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    line-height: 1;
    text-align: center;
    cursor: pointer;
}

/* ---------- Campos ---------- */
#login-modal .form-wrapper {
    padding-top: 1.05rem;
}

#login-modal .form-wrapper .item-height {
    height: auto;
    margin-bottom: .8rem;
}

#login-modal div.relative > ion-input {
    --background: var(--auth-field) !important;
    --border-radius: var(--auth-radius) !important;
    --padding-start: .95rem !important;
    --padding-end: .35rem !important;
    --placeholder-color: rgba(255, 255, 255, .42) !important;
    --placeholder-opacity: 1 !important;
    --color: var(--auth-text) !important;
    --highlight-color-focused: transparent !important;
    --highlight-color-valid: transparent !important;
    --highlight-color-invalid: transparent !important;
    height: 3.25rem !important;
    min-height: 3.25rem !important;
    font-size: .95rem;
}

#login-modal div.relative > ion-input .input-wrapper {
    background: var(--auth-field) !important;
    border: 1px solid var(--auth-field-border) !important;
    border-radius: var(--auth-radius) !important;
    box-shadow: none !important;
}

#login-modal div.relative > ion-input.ion-focused .input-wrapper,
#login-modal div.relative > ion-input.has-focus .input-wrapper {
    border-color: color-mix(in srgb, var(--primary-color, #f3ba2f) 75%, #fff) !important;
}

#login-modal div.relative > ion-input.ion-invalid.ion-touched .input-wrapper {
    border-color: #e85d4c !important;
}

#login-modal .phone .fi {
    font-size: 1.35rem;
    line-height: 1;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}

#login-modal .phone .border-r-2 {
    border-color: rgba(255, 255, 255, .22) !important;
    color: #fff;
    font-weight: 700;
    margin-right: .7rem !important;
    padding-right: .7rem !important;
}

#login-modal .password ion-icon.input-icon,
#login-modal .account ion-icon.input-icon,
#login-modal .cpf ion-icon.input-icon,
#login-modal .realName ion-icon.input-icon {
    color: #fff;
    font-size: 1.35rem;
    opacity: .92;
    filter: brightness(0) invert(1);
    margin-right: .15rem;
}

#login-modal .password .password-icon {
    color: #fff;
    opacity: .85;
    filter: brightness(0) invert(1);
}

/* ---------- Botão principal ---------- */
#login-modal .btn-login,
#login-modal .register-btn-warpper {
    margin-top: .35rem;
    margin-bottom: .5rem;
}

#login-modal .btn-login .button,
#login-modal .register-btn-warpper .button {
    height: 3.25rem !important;
    width: 100% !important;
}

#login-modal .btn-login ion-button,
#login-modal .register-btn-warpper ion-button {
    --background: var(--primary-color, #f3ba2f) !important;
    --background-hover: var(--primary-color, #f3ba2f) !important;
    --background-activated: var(--primary-color-hover, #d9a41f) !important;
    --background-focused: var(--primary-color, #f3ba2f) !important;
    --color: var(--on-primary-color, #1a1404) !important;
    --border-radius: var(--auth-radius) !important;
    --box-shadow: none !important;
    --ripple-color: transparent;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: none;
    min-height: 3.25rem;
}

#login-modal .btn-login ion-button::part(native),
#login-modal .register-btn-warpper ion-button::part(native) {
    background: var(--primary-color, #f3ba2f);
    color: #1a1404;
    border-radius: var(--auth-radius);
    font-weight: 800;
}

#login-modal .btn-login ion-button p,
#login-modal .btn-login ion-button span,
#login-modal .register-btn-warpper ion-button p,
#login-modal .register-btn-warpper ion-button span {
    color: #1a1404 !important;
    -webkit-text-fill-color: #1a1404 !important;
    opacity: 1 !important;
}

#login-modal .btn-login ion-button.button-disabled,
#login-modal .register-btn-warpper ion-button.button-disabled {
    opacity: 1;
}

/* ---------- Lembrar / termos ---------- */
#login-modal .remember-account,
#login-modal .adultConfirm {
    justify-content: flex-start;
    margin: .15rem 0 1rem;
    color: var(--auth-muted) !important;
    font-size: .8rem;
}

#login-modal .remember-account .text-warpper,
#login-modal .adultConfirm .text-warpper {
    color: var(--auth-muted) !important;
    font-size: .8rem;
}

#login-modal .remember-account ion-checkbox,
#login-modal .adultConfirm ion-checkbox {
    --size: 1.15rem;
    --checkbox-background-checked: var(--primary-color, #f3ba2f);
    --border-color: rgba(255, 255, 255, .28);
    --border-color-checked: var(--primary-color, #f3ba2f);
    margin-right: .35rem;
}