/* Auth pages: sign-in, registration, verification */
body.xbl-auth-page {
    min-height: 100vh;
    background-color: var(--site-page-bg, #f5f4f1);
    background-image:
        radial-gradient(ellipse 120% 80% at 50% -20%, rgba(255, 171, 46, 0.18), transparent 55%),
        radial-gradient(ellipse 90% 60% at 100% 50%, rgba(107, 101, 99, 0.08), transparent 50%),
        radial-gradient(ellipse 70% 50% at 0% 80%, rgba(90, 82, 76, 0.08), transparent 45%);
}

body.xbl-auth-page .cntMain {
    max-width: 480px;
    padding-top: 1.25rem;
    padding-bottom: 2rem;
}

body.xbl-auth-page.xbl-auth-wide .cntMain {
    max-width: 720px;
}

.xbl-auth-wrap {
    min-height: calc(100vh - 6rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 0.5rem 0 1rem;
}

body.xbl-auth-wide .xbl-auth-wrap {
    min-height: calc(100vh - 4rem);
    justify-content: flex-start;
    padding-top: 1rem;
}

.xbl-auth-card {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(107, 101, 99, 0.06),
        0 12px 40px rgba(60, 55, 53, 0.12) !important;
}

.xbl-auth-card .card-body {
    padding-top: 1.5rem;
}

.xbl-auth-accent {
    height: 4px;
    background: linear-gradient(90deg, var(--kelmer-yellow) 0%, #ffc966 45%, var(--kelmer-grey) 100%);
}

img.xbl-auth-brand {
    max-height: 44px;
    width: auto;
}

.xbl-auth-powered {
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

.xbl-auth-powered a {
    color: var(--kelmer-grey);
    text-decoration: none;
    border-bottom: 1px solid rgba(107, 101, 99, 0.25);
}

.xbl-auth-powered a:hover {
    color: var(--site-primary, #5a524c);
    border-bottom-color: rgba(90, 82, 76, 0.45);
}

.xbl-auth-card .input-group-text {
    background-color: #f8f7f6;
    border-color: #dee2e6;
    color: var(--kelmer-grey);
}

.xbl-auth-card .input-group .btn-outline-secondary {
    border-color: #dee2e6;
    color: var(--kelmer-grey);
}

.xbl-auth-card .input-group .btn-outline-secondary:hover,
.xbl-auth-card .input-group .btn-outline-secondary:focus {
    background-color: #f8f7f6;
    border-color: #dee2e6;
    color: var(--site-primary, #5a524c);
}

.xbl-auth-card .form-control:focus {
    border-color: rgba(255, 171, 46, 0.65);
    box-shadow: 0 0 0 0.2rem rgba(255, 171, 46, 0.2);
}

.xbl-auth-card .btn-primary {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

body.xbl-auth-wide .form-label {
    font-weight: 600;
    color: var(--kelmer-grey, #6b6563);
}

.xbl-auth-foot {
    margin-top: 1.5rem;
    font-size: 0.75rem;
    color: #8a8480;
}