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

.auth-page {
    min-height: 100vh;
}

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

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

.auth-cover-logo {
    width: 54px;
    height: 54px;
}

.auth-cover-visual {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, .18), rgba(15, 23, 42, .58)),
        url("/assets/img/trailbase-cover.jpg");
    background-position: center;
    background-size: 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 {
    border-radius: 1rem;
    border-width: 1.5px;
    font-size: 1rem;
    height: 4.25rem;
    line-height: 1.25;
    transition: border-color .2s ease, box-shadow .2s ease;
}

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

.auth-field .form-label {
    background: var(--tblr-bg-surface);
    color: var(--tblr-secondary-color);
    font-size: .95rem;
    left: 1rem;
    margin: 0;
    padding: 0 .25rem;
    pointer-events: none;
    position: absolute;
    top: 1.3rem;
    transform-origin: left top;
    transition: transform .2s ease, top .2s ease, color .2s ease;
    z-index: 2;
}

.auth-field .form-control:focus,
.auth-field .form-control:not(:placeholder-shown) {
    border-color: #7dd3fc;
    box-shadow: 0 0 0 .2rem rgba(125, 211, 252, .18);
}

.auth-field .form-control:focus + .form-label,
.auth-field .form-control:not(:placeholder-shown) + .form-label {
    color: #0891b2;
    top: -.5rem;
    transform: scale(.82);
}

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

.password-toggle {
    background: transparent;
    border: 0;
    color: var(--tblr-secondary-color);
    cursor: pointer;
    line-height: 1;
    padding: .25rem;
    position: absolute;
    right: .875rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.password-toggle:hover,
.password-toggle:focus {
    box-shadow: none;
    color: var(--tblr-body-color);
    outline: none;
}

.auth-submit {
    background: transparent;
    border: 2px solid #111827;
    border-radius: 14px;
    color: #111827;
    font-weight: 600;
    height: 3.5rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.auth-submit:hover,
.auth-submit:focus {
    background: transparent;
    border-color: #111827;
    box-shadow: 0 0 0 .2rem rgba(17, 24, 39, .08);
    color: #111827;
}

.auth-social {
    background: transparent;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
    font-weight: 500;
    height: 3.5rem;
}

.auth-social:hover,
.auth-social:focus,
.auth-social:active,
.auth-social:disabled {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

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

[data-bs-theme="dark"] .auth-submit {
    border-color: #fff;
    color: #fff;
}

[data-bs-theme="dark"] .auth-submit:hover,
[data-bs-theme="dark"] .auth-submit:focus {
    border-color: #fff;
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .08);
    color: #fff;
}

@media (max-width: 991.98px) {
    .auth-form-column,
    .auth-cover-visual {
        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);
    }
}