/* Approved Clubhouse account branding; other service-company colours remain intact. */
.account-page .auth-card img { max-width: 100%; height: auto; }
.account-page.clubhouse-account--brand { --account-accent: 51, 62, 50; }
[data-bs-theme="dark"] .account-page.clubhouse-account--brand { --account-accent: 180, 197, 174; }
/* Match the Client Dev wordmark at its native size; shrink only when space requires it. */
.account-page.clubhouse-account--brand .auth-card img[alt="Clubhouse" i] { width: 243px; }
.account-page.clubhouse-account--brand .auth-card img[alt*="Clubhouse" i] {
    filter: url(#clubhouse-account-logo-tint);
}
.account-page.clubhouse-account--brand :is(.btn-primary, .btn-outline-primary, .btn-phoenix-primary) {
    --phoenix-btn-color: rgb(var(--account-accent));
    --phoenix-btn-bg: transparent;
    --phoenix-btn-border-color: rgb(var(--account-accent));
    --phoenix-btn-hover-color: rgb(var(--account-accent));
    --phoenix-btn-hover-bg: rgba(var(--account-accent), .10);
    --phoenix-btn-hover-border-color: rgb(var(--account-accent));
    --phoenix-btn-active-color: rgb(var(--account-accent));
    --phoenix-btn-active-bg: rgba(var(--account-accent), .18);
    --phoenix-btn-active-border-color: rgb(var(--account-accent));
    --phoenix-btn-disabled-color: rgb(var(--account-accent));
    --phoenix-btn-disabled-bg: transparent;
    --phoenix-btn-disabled-border-color: rgb(var(--account-accent));
    --phoenix-btn-focus-shadow-rgb: var(--account-accent);
    background-color: var(--phoenix-btn-bg);
}
.account-page.clubhouse-account--brand :is(.btn-primary, .btn-outline-primary, .btn-phoenix-primary):hover {
    background-color: var(--phoenix-btn-hover-bg);
}
.account-page.clubhouse-account--brand :is(.btn-primary, .btn-outline-primary, .btn-phoenix-primary):active {
    background-color: var(--phoenix-btn-active-bg);
}
.account-page.clubhouse-account--brand .auth-card a:not(.btn) { color: rgb(var(--account-accent)); }
.account-page.clubhouse-account--brand .form-control:focus {
    border-color: rgb(var(--account-accent));
    box-shadow: 0 0 0 .2rem rgba(var(--account-accent), .2);
}
.account-page.clubhouse-account--brand .form-check-input:checked {
    border-color: rgb(var(--account-accent));
    background-color: rgb(var(--account-accent));
}
.account-page.clubhouse-account--brand :is(a, button, .form-check-input):focus-visible {
    outline: 2px solid rgb(var(--account-accent));
    outline-offset: 2px;
}
/* Cains reference: one third of spare height above, two thirds below.
   Intrinsic form height wins when the viewport is short or the keyboard opens. */
.account-page .row.flex-center.min-vh-100 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 2fr);
    justify-items: center;
    align-items: start !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding-block: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-bottom)) !important;
}
.account-page .row.flex-center.min-vh-100::before,
.account-page .row.flex-center.min-vh-100::after { content: ""; }
.account-page .row.flex-center.min-vh-100 > div { grid-row: 2; }
@media (max-width: 767.98px), (max-width: 991.98px) and (max-height: 500px) {
    .account-page .auth-card { width: 100%; }
}

/* Recovery cards reuse account branding and placement with compact, balanced content. */
.account-recovery .auth-card > .card-body { padding-block: 2.5rem; }
.account-recovery .account-recovery-intro { margin-bottom: 1.5rem; }
.account-recovery .account-recovery-logo { margin-bottom: 0; }
.account-recovery .account-recovery-intro h3 { margin: 1.5rem 0 0; }
.account-recovery .account-recovery-intro p { margin: 1rem 0 0; }
.account-recovery .auth-form-box > .account-recovery-intro { margin-bottom: 0; }
.account-recovery .form-label { padding-inline: 0; }
.account-recovery form { margin-bottom: 0; }
.account-recovery form > .btn { margin-bottom: 0 !important; }
.account-recovery .validation-summary-valid { display: none; }

/* Client login: balanced card insets and labels aligned to their field borders. */
.account-login .auth-card > .card-body { padding: 2.5rem 1.5rem; }
.account-login .form-label { padding-inline: 0; }
.account-login .validation-summary-valid { display: none; }
.account-login .validation-summary-errors { margin-bottom: 1rem; }

/* Shared Clubhouse account logo gap, matching the approved Sales login. */
.account-page.clubhouse-account--brand .auth-form-box .text-center > .d-flex:has(> img[alt="Clubhouse" i]) {
    margin-bottom: 2rem !important;
    justify-content: center;
}
/* A logo-only wrapper owns no additional gap; contain its child's margin. */
.account-page.clubhouse-account--brand .auth-form-box .text-center:has(> .d-flex:only-child > img[alt="Clubhouse" i]) {
    display: flow-root;
    margin-bottom: 0 !important;
}
.account-page.clubhouse-account--brand .auth-form-box .text-center > .d-flex:has(> img[alt="Clubhouse" i]) + :is(h3, p) {
    margin-top: 0 !important;
}