.login-section { padding-block: var(--space-16); }

.login-card { max-width: 420px; margin-inline: auto; }

.login-card h1 { text-align: center; font-size: var(--text-2xl); }

.login-card__hint {
    text-align: center;
    color: var(--text-light);
    font-size: var(--text-sm);
    margin-bottom: var(--space-6);
}

.login-card__submit { width: 100%; margin-top: var(--space-2); }

#rabta-login-notice {
    background: var(--gold-light);
    color: var(--on-gold-container, #2B1700);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
}
#rabta-login-notice[hidden] { display: none; }

.field__input-wrap { position: relative; }

.field__input-wrap input {
    padding-inline-end: var(--space-10);
}

.field__toggle-password {
    position: absolute;
    inset-inline-end: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: var(--radius-full);
    background: none;
    color: var(--text-light);
    cursor: pointer;
}

.field__toggle-password:hover { color: var(--primary); }

.field__toggle-password svg {
    width: 1.25rem;
    height: 1.25rem;
}