:root {
    --trailbase-primary: #206bc4;
}

.auth-page,
.auth-form-column,
.auth-cover-visual {
    min-height: 100vh;
}

.auth-form-shell {
    max-width: 27rem;
}

.auth-cover-logo {
    display: inline-block;
    height: 48px;
    width: 48px;
}

.auth-cover-visual {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, .18), rgba(15, 23, 42, .58)) center / cover,
        url("/assets/img/trailbase-cover.jpg") center / cover;
    overflow: hidden;
    position: relative;
}

.auth-cover-visual::before {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .22), transparent 18%),
        radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .16), transparent 24%),
        radial-gradient(circle at 78% 82%, rgba(255, 255, 255, .12), transparent 22%);
    content: "";
    inset: 0;
    position: absolute;
}

.auth-cover-copy {
    bottom: 3rem;
    color: #fff;
    left: 3rem;
    max-width: 31rem;
    position: absolute;
    right: 3rem;
    z-index: 1;
}

.auth-cover-copy h2 {
    color: #fff;
    font-size: calc(2rem - 4px);
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: .75rem;
}

.auth-cover-copy p {
    color: rgba(255, 255, 255, .86);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
}

.auth-form-shell .h1 {
    font-weight: 600;
}

.auth-field {
    margin-bottom: 1rem;
    position: relative;
}

.auth-field .form-control {
    background-color: var(--tblr-bg-forms, #fff);
    border: 1px solid var(--tblr-border-color, #dce1e7);
    border-radius: var(--tblr-border-radius, 4px);
    color: var(--tblr-body-color, #182433);
    font-size: .875rem;
    height: 3.5rem;
    line-height: 1.4;
    padding: .95rem .875rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.auth-field .form-control::placeholder {
    color: transparent;
}

.auth-field .form-label {
    background: var(--tblr-bg-forms, #fff);
    color: var(--tblr-secondary-color, #667085);
    font-size: .875rem;
    font-weight: 400;
    left: .625rem;
    line-height: 1;
    margin: 0;
    max-width: calc(100% - 1.25rem);
    overflow: hidden;
    padding: 0 .25rem;
    pointer-events: none;
    position: absolute;
    text-overflow: ellipsis;
    top: 1.08rem;
    transform-origin: left top;
    transition: transform .15s ease-in-out, top .15s ease-in-out, color .15s ease-in-out;
    white-space: nowrap;
    z-index: 2;
}

.auth-field .form-control:focus {
    border-color: var(--tblr-primary, #206bc4);
    box-shadow: none;
}

.auth-field .form-control:focus + .form-label,
.auth-field .form-control:not(:placeholder-shown) + .form-label {
    color: var(--tblr-primary, #206bc4);
    top: -.42rem;
    transform: scale(.78);
}

.auth-field .form-control:focus,
.auth-field .form-control:not(:placeholder-shown) {
    padding-bottom: .75rem;
    padding-top: 1.05rem;
}

.auth-password .form-control {
    padding-right: 3.125rem;
}

.password-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--tblr-border-radius, 4px);
    color: var(--tblr-secondary-color, #667085);
    cursor: pointer;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: .625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    z-index: 3;
}

.password-toggle:focus,
.password-toggle:hover {
    background: var(--tblr-bg-surface-secondary, #f6f8fb);
    box-shadow: none;
    color: var(--tblr-body-color, #182433);
    outline: 0;
}

.password-toggle svg {
    height: 1.125rem;
    width: 1.125rem;
}

.auth-submit {
    border-radius: var(--tblr-border-radius, 4px);
    font-weight: 600;
    height: 2.75rem;
    letter-spacing: 0;
    text-transform: none;
}

.auth-social {
    background: var(--tblr-bg-forms, #fff);
    border: 1px solid var(--tblr-border-color, #dce1e7);
    border-radius: var(--tblr-border-radius, 4px);
    box-shadow: none;
    color: var(--tblr-body-color, #182433);
    font-weight: 500;
    height: 2.75rem;
}

.auth-social:focus,
.auth-social:hover {
    background: var(--tblr-bg-surface-secondary, #f6f8fb);
    border-color: var(--tblr-border-color, #dce1e7);
    box-shadow: none;
    color: var(--tblr-body-color, #182433);
}

.auth-social:active,
.auth-social:disabled {
    box-shadow: none;
}

.auth-social.is-disabled {
    cursor: not-allowed;
    opacity: .65;
}

[data-bs-theme="dark"] .auth-field .form-label {
    background: var(--tblr-bg-forms, #1f2937);
}

@media (max-width: 991.98px) {
    .auth-cover-visual,
    .auth-form-column {
        min-height: auto;
    }

    .auth-cover-copy {
        bottom: 1.5rem;
        left: 1.5rem;
        right: 1.5rem;
    }

    .auth-cover-copy h2 {
        font-size: calc(1.625rem - 4px);
    }
}