/* ==========================================================================
   LOGIN & ONBOARDING MODALS - flow-specific rules.
   Buttons, choice cards, badges, forms, alerts, modals and the OTP step come from the
   shared design system (components.css, forms.css); this file only holds what belongs
   to these flows.
   ========================================================================== */

/* ---------- Login modal ---------- */
#login-modal .modal-panel {
    max-width: 450px;
}

.login-step {
    padding: 2rem;
}

.step-title {
    margin-bottom: 0.5rem;
    font-size: 1.75rem;
    font-weight: 800;
    text-align: center;
}

.step-subtitle {
    margin-bottom: 1.5rem;
    color: var(--ds-muted);
    text-align: center;
}

/* Continue with Google: a block secondary button, followed by the divider */
.btn-google {
    --btn-gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.google-icon {
    width: 20px;
    height: 20px;
}

.divider {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    color: var(--ds-muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--ds-border);
}

.divider::before {
    margin-right: 1rem;
}

.divider::after {
    margin-left: 1rem;
}

/* CAPTCHA widget */
.login-step .cf-turnstile {
    margin-bottom: 0.5rem;
}

/* Hide widget after validation with fade-out */
.login-step .cf-turnstile[data-validated] {
    opacity: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    transition: opacity 0.3s ease, height 0.3s ease, margin 0.3s ease;
}

/* ---------- Onboarding modal ---------- */

/* Centered end states (request sent, address refused) */
.modal-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    text-align: center;
}

.modal-state-title {
    font-size: 1.25rem;
    font-weight: 700;
}

.modal-state .alert {
    width: 100%;
    margin-bottom: 0;
}

/* Bullet list inside a modal body */
.modal-list {
    margin-top: 0.5rem;
    padding-left: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Address search */
.onboarding-search-container {
    position: relative;
}

.onboarding-address-results-list {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 0.5rem;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
}

.onboarding-address-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--ds-border);
    cursor: pointer;
    transition: background-color 0.1s;
}

.onboarding-address-result-item:last-child {
    border-bottom: none;
}

.onboarding-address-result-item:hover {
    background-color: var(--ds-surface-alt);
}

/* Selected residence (manager form, email verification) */
.onboarding-selected-address {
    padding: 0.75rem 1rem;
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-sm);
    background-color: var(--ds-surface-alt);
    color: var(--ds-text);
}