:root {
    --auth-keyboard-offset: 0px;
}

.auth-mobile-page {
    padding-bottom: calc(120px + var(--auth-keyboard-offset));
}

.auth-mobile-form .form-control,
.auth-mobile-form .form-select,
.auth-mobile-form .btn,
.auth-mobile-form .input-group-text {
    font-size: 16px;
}

.auth-mobile-form .form-control,
.auth-mobile-form .form-select {
    min-height: 52px;
}

.auth-mobile-form .btn {
    min-height: 48px;
}

.auth-mobile-form .input-group > .btn {
    min-width: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-mobile-form .mb-3 {
    margin-bottom: 1rem;
    scroll-margin-top: 96px;
}

.auth-mobile-form .form-label {
    margin-bottom: 0.45rem;
    font-weight: 600;
}

.auth-mobile-form .form-text,
.auth-mobile-form .small,
.auth-mobile-page .alert {
    line-height: 1.45;
}

.auth-submit-bar {
    position: sticky;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 5;
    background: linear-gradient(180deg, rgba(248, 249, 250, 0) 0%, rgba(248, 249, 250, 0.94) 22%, rgba(248, 249, 250, 1) 100%);
    padding-top: 0.9rem;
    padding-bottom: calc(0.35rem + env(safe-area-inset-bottom));
}

body.auth-mobile-login-page {
    padding: 16px 16px calc(120px + var(--auth-keyboard-offset));
}

body.auth-mobile-login-page .login-card {
    margin: min(8vh, 56px) auto 0;
}

body.auth-mobile-login-page .auth-submit-bar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.94) 22%, rgba(255, 255, 255, 1) 100%);
}

@media (max-width: 767.98px) {
    .auth-mobile-page {
        padding-bottom: calc(148px + var(--auth-keyboard-offset));
    }

    body.auth-mobile-login-page {
        align-items: flex-start;
        justify-content: flex-start;
        padding-bottom: calc(148px + var(--auth-keyboard-offset));
    }

    .auth-mobile-form .card-body,
    .auth-mobile-page .card-body {
        padding: 1.15rem;
    }

    .auth-submit-bar.auth-form-actions,
    .auth-mobile-form .auth-submit-bar.auth-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .auth-submit-bar .btn,
    .auth-submit-bar .btn-lg,
    .auth-mobile-form .input-group > .btn {
        width: 100%;
    }

    .auth-mobile-form .input-group {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .auth-mobile-form .input-group > .form-control,
    .auth-mobile-form .input-group > .form-select {
        width: 100%;
        border-radius: var(--bs-border-radius-lg) !important;
    }

    .auth-mobile-form .input-group > .btn {
        border-radius: var(--bs-border-radius) !important;
    }
}