/* ==================================================
   SHORT LAPTOP SCREENS
================================================== */

@media (max-height: 760px) and (min-width: 992px) {

    .auth-page {
        padding: 14px;
    }

    .auth-shell {
        min-height: 565px;
        max-height: calc(100vh - 28px);
    }

    .auth-form-panel {
        padding:
                20px
                48px
                22px;
    }

    .auth-logo-link {
        margin-bottom: 17px;
    }

    .auth-heading {
        margin-bottom: 15px;
    }

    .auth-heading h1 {
        font-size: 31px;
    }

    .auth-form {
        gap: 11px;
    }

    .auth-input {
        height: 40px;
    }

    .auth-primary-button {
        height: 41px;
    }

    .auth-divider {
        margin:
                14px
                0
                11px;
    }

    .social-login-button {
        height: 36px;
    }

    .auth-bottom-text {
        margin-top: 13px;
    }

    .auth-visual-content {
        padding:
                38px
                38px
                18px;
    }

    .auth-visual-copy h2 {
        font-size: 27px;
    }

    .auth-illustration-wrapper {
        min-height: 230px;
    }

    .auth-illustration {
        max-width: 350px;
        max-height: 295px;
    }

}


/* ==================================================
   SMALL DESKTOP
================================================== */

@media (max-width: 1199.98px) {

    .auth-shell {
        width: min(1000px, 100%);

        grid-template-columns:
            minmax(0, 1.06fr)
            minmax(360px, 0.94fr);
    }

    .auth-form-panel {
        padding:
                27px
                44px
                29px;
    }

    .auth-visual-content {
        padding:
                47px
                36px
                23px;
    }

    .auth-illustration {
        max-width: 360px;
    }

}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 991.98px) {

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

        padding: 24px;
    }

    .auth-shell {
        width: min(610px, 100%);
        min-height: auto;
        max-height: none;

        grid-template-columns: 1fr;
    }

    .auth-form-panel {
        overflow: visible;

        padding:
                34px
                52px
                42px;
    }

    .auth-logo-link {
        margin-bottom: 31px;
    }

    .auth-form-content {
        max-width: 100%;
    }

    .auth-visual-panel {
        display: none;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767.98px) {

    .auth-page {
        display: block;

        padding: 0;

        background-color: var(--auth-white);
    }

    .auth-shell {
        width: 100%;
        min-height: 100vh;

        border: 0;
        border-radius: 0;

        box-shadow: none;
    }

    .auth-form-panel {
        min-height: 100vh;

        padding:
                28px
                27px
                38px;
    }

    .auth-logo-link {
        width: 150px;
        height: 46px;

        margin-bottom: 35px;
    }

    .auth-logo {
        width: 150px;
        height: 52px;
    }

    .auth-heading h1 {
        font-size: 32px;
    }

    .auth-heading p {
        font-size: 12px;
    }

}


/* ==================================================
   SMALL MOBILE
================================================== */

@media (max-width: 575.98px) {

    .auth-form-panel {
        padding:
                24px
                19px
                34px;
    }

    .auth-logo-link {
        margin-bottom: 29px;
    }

    .auth-heading {
        margin-bottom: 20px;
    }

    .auth-heading h1 {
        font-size: 29px;
    }

    .auth-form {
        gap: 13px;
    }

    .auth-options {
        gap: 12px;
    }

    .social-login-grid {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .social-login-button {
        height: 41px;

        font-size: 10.5px;
    }

}


/* ==================================================
   VERY SMALL MOBILE
================================================== */

@media (max-width: 380px) {

    .auth-form-panel {
        padding-right: 15px;
        padding-left: 15px;
    }

    .auth-options {
        align-items: flex-start;
        flex-direction: column;

        gap: 10px;
    }

}
/* ==================================================
   AUTH LOGO + ILLUSTRATION RESPONSIVE
================================================== */

@media (max-width: 1199.98px) {

    .auth-logo-link {
        width: 195px;
        height: 59px;
    }

    .auth-logo {
        width: 208px;
        height: 72px;

        transform: scale(1.06);
    }

    .auth-illustration-wrapper {
        min-height: 295px;
    }

    .auth-illustration {
        width: 110%;
        max-width: 455px;
        max-height: 425px;
    }

    .auth-illustration-glow {
        width: 320px;
        height: 320px;
    }

}


@media (max-height: 760px) and (min-width: 992px) {

    .auth-logo-link {
        width: 185px;
        height: 55px;

        margin-bottom: 15px;
    }

    .auth-logo {
        width: 198px;
        height: 68px;
    }

    .auth-illustration-wrapper {
        min-height: 250px;
    }

    .auth-illustration {
        width: 108%;
        max-width: 410px;
        max-height: 345px;
    }

    .auth-illustration-glow {
        width: 285px;
        height: 285px;
    }

}


@media (max-width: 991.98px) {

    .auth-logo-link {
        width: 185px;
        height: 56px;
    }

    .auth-logo {
        width: 195px;
        height: 68px;

        transform: scale(1.04);
    }

}


@media (max-width: 575.98px) {

    .auth-logo-link {
        width: 165px;
        height: 51px;
    }

    .auth-logo {
        width: 174px;
        height: 61px;

        transform: scale(1.02);
    }

}
/* ==================================================
   AUTH BOX FINAL RESPONSIVE SIZE
================================================== */

@media (max-width: 1199.98px) {

    .auth-shell {
        width: min(1000px, 100%);
        min-height: 550px;
        max-height: 660px;
    }

    .auth-form-panel {
        padding:
                24px
                43px
                26px;
    }

    .auth-logo-link {
        width: 180px;
        height: 52px;
    }

    .auth-logo {
        width: 195px;
        height: 65px;
    }

    .auth-visual-content {
        padding:
                35px
                34px
                17px;
    }

    .auth-illustration-wrapper {
        min-height: 220px;
    }

    .auth-illustration {
        max-width: 390px;
        max-height: 320px;
    }

}


@media (max-height: 760px) and (min-width: 992px) {

    .auth-shell {
        min-height: 520px;
        max-height: calc(100vh - 28px);
    }

    .auth-form-panel {
        padding:
                18px
                43px
                20px;
    }

    .auth-logo-link {
        margin-bottom: 12px;
    }

    .auth-heading {
        margin-bottom: 13px;
    }

    .auth-heading h1 {
        font-size: 29px;
    }

    .auth-form {
        gap: 10px;
    }

    .auth-input {
        height: 39px;
    }

    .auth-primary-button {
        height: 40px;
    }

    .auth-divider {
        margin:
                12px
                0
                10px;
    }

    .social-login-button {
        height: 35px;
    }

    .auth-bottom-text {
        margin-top: 11px;
    }

    .auth-visual-content {
        padding:
                29px
                32px
                14px;
    }

    .auth-visual-copy h2 {
        font-size: 26px;
    }

    .auth-illustration-wrapper {
        min-height: 200px;
    }

    .auth-illustration {
        max-width: 360px;
        max-height: 285px;
    }

}
/* ==================================================
   CREATE ACCOUNT — SHORT DESKTOP
================================================== */

@media (max-height: 760px) and (min-width: 992px) {

    .auth-shell-create {
        min-height: 600px;
        max-height: calc(100vh - 24px);
    }

    .auth-create-panel {
        padding:
                17px
                43px
                18px;
    }

    .auth-create-panel .auth-logo-link {
        height: 47px;

        margin-bottom: 9px;
    }

    .auth-create-panel .auth-logo {
        width: 185px;
        height: 61px;
    }

    .auth-create-heading {
        margin-bottom: 11px;
    }

    .auth-create-heading h1 {
        font-size: 27px;
    }

    .auth-create-heading p {
        font-size: 10.5px;
    }

    .create-account-form {
        gap: 8px;
    }

    .auth-create-panel .auth-input {
        height: 35px;
    }

    .username-meta {
        font-size: 7.5px;
    }

    .auth-create-panel .auth-primary-button {
        height: 38px;
    }

    .create-account-bottom-text {
        margin-top: 9px;
    }

    .auth-shell-create .auth-visual-content {
        padding:
                28px
                32px
                12px;
    }

    .auth-shell-create .auth-illustration-wrapper {
        min-height: 225px;
    }

    .auth-shell-create .auth-illustration {
        max-width: 390px;
        max-height: 315px;
    }

}


/* ==================================================
   CREATE ACCOUNT — SMALL DESKTOP
================================================== */

@media (max-width: 1199.98px) {

    .auth-shell-create {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(350px, 0.9fr);
    }

    .auth-create-panel {
        padding:
                22px
                39px
                24px;
    }

    .auth-shell-create .auth-illustration {
        max-width: 390px;
    }

}


/* ==================================================
   CREATE ACCOUNT — TABLET
================================================== */

@media (max-width: 991.98px) {

    .auth-shell-create {
        width: min(650px, 100%);
        max-height: none;

        grid-template-columns: 1fr;
    }

    .auth-create-panel {
        padding:
                31px
                48px
                38px;
    }

    .auth-create-panel .auth-logo-link {
        margin-bottom: 25px;
    }

    .auth-create-heading {
        margin-bottom: 20px;
    }

    .auth-create-heading h1 {
        font-size: 31px;
    }

    .create-account-form {
        gap: 13px;
    }

    .auth-create-panel .auth-input {
        height: 42px;

        font-size: 11.5px;
    }

    .auth-create-panel .auth-label {
        font-size: 10.5px;
    }

    .username-meta,
    .username-meta strong {
        font-size: 8.5px;
    }

    .auth-terms-checkbox {
        font-size: 10px;
    }

}


/* ==================================================
   CREATE ACCOUNT — MOBILE
================================================== */

@media (max-width: 767.98px) {

    .auth-create-panel {
        padding:
                27px
                26px
                35px;
    }

    .auth-fields-row {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .auth-create-panel .auth-logo-link {
        margin-bottom: 31px;
    }

    .auth-create-heading h1 {
        font-size: 30px;
    }

}


/* ==================================================
   CREATE ACCOUNT — SMALL MOBILE
================================================== */

@media (max-width: 575.98px) {

    .auth-create-panel {
        padding:
                23px
                18px
                31px;
    }

    .username-meta {
        align-items: flex-start;
        flex-direction: column;

        gap: 3px;
    }

    .username-meta strong {
        text-align: left;
    }

}
/* ==================================================
   FORGOT PASSWORD — SHORT DESKTOP
================================================== */

@media (max-height: 700px) and (min-width: 992px) {

    .auth-shell-forgot,
    .auth-shell-success {
        min-height: 500px;
        max-height: calc(100vh - 24px);
    }

    .auth-forgot-panel,
    .auth-success-panel {
        padding:
                20px
                46px
                22px;
    }

    .auth-forgot-panel .auth-logo-link,
    .auth-success-panel .auth-logo-link {
        margin-bottom: 16px;
    }

    .auth-back-link {
        margin-bottom: 20px;
    }

    .auth-forgot-heading {
        margin-bottom: 19px;
    }

    .auth-success-content {
        margin-top: 30px;
    }

    .auth-success-icon {
        width: 60px;
        height: 60px;

        margin-bottom: 17px;

        font-size: 26px;
    }

}


/* ==================================================
   FORGOT PASSWORD — TABLET
================================================== */

@media (max-width: 991.98px) {

    .auth-shell-forgot,
    .auth-shell-success {
        width: min(610px, 100%);
        max-height: none;
    }

    .auth-forgot-panel,
    .auth-success-panel {
        min-height: 620px;

        padding:
                34px
                52px
                42px;
    }

    .auth-success-content {
        max-width: 100%;

        margin: 65px auto 0;
    }

}


/* ==================================================
   FORGOT PASSWORD — MOBILE
================================================== */

@media (max-width: 767.98px) {

    .auth-forgot-panel,
    .auth-success-panel {
        min-height: 100vh;

        padding:
                28px
                27px
                38px;
    }

    .auth-back-link {
        margin-bottom: 31px;
    }

    .auth-success-content {
        margin-top: 74px;
    }

}


/* ==================================================
   FORGOT PASSWORD — SMALL MOBILE
================================================== */

@media (max-width: 575.98px) {

    .auth-forgot-panel,
    .auth-success-panel {
        padding:
                24px
                19px
                34px;
    }

    .auth-success-content {
        margin-top: 60px;
    }

    .auth-success-icon {
        width: 62px;
        height: 62px;

        font-size: 27px;
    }

}
/* ==================================================
   RESET SUCCESS — SHORT DESKTOP
================================================== */

@media (max-height: 700px) and (min-width: 992px) {

    .auth-shell-success {
        min-height: 500px;
        max-height: calc(100vh - 24px);
    }

    .auth-success-panel {
        padding:
                19px
                46px
                21px;
    }

    .auth-success-panel .auth-logo-link {
        height: 47px;

        margin-bottom: 8px;
    }

    .auth-success-content {
        margin-top: 18px;
    }

    .auth-success-icon {
        width: 58px;
        height: 58px;

        margin-bottom: 14px;

        font-size: 24px;
    }

    .auth-success-content h1 {
        font-size: 29px;
    }

    .auth-success-primary-button {
        margin-top: 18px;
    }

}


/* ==================================================
   RESET SUCCESS — TABLET
================================================== */

@media (max-width: 991.98px) {

    .auth-shell-success {
        width: min(610px, 100%);
        max-height: none;

        grid-template-columns: 1fr;
    }

    .auth-success-panel {
        min-height: 620px;

        padding:
                34px
                52px
                42px;
    }

    .auth-success-content {
        max-width: 100%;

        margin-top: 58px;
    }

}


/* ==================================================
   RESET SUCCESS — MOBILE
================================================== */

@media (max-width: 767.98px) {

    .auth-success-panel {
        min-height: 100vh;

        padding:
                28px
                27px
                38px;
    }

    .auth-success-content {
        margin-top: 72px;
    }

}


/* ==================================================
   RESET SUCCESS — SMALL MOBILE
================================================== */

@media (max-width: 575.98px) {

    .auth-success-panel {
        padding:
                24px
                19px
                34px;
    }

    .auth-success-content {
        margin-top: 54px;
    }

    .auth-success-icon {
        width: 60px;
        height: 60px;

        font-size: 25px;
    }

    .auth-success-content h1 {
        font-size: 29px;
    }

    .auth-success-description {
        font-size: 11px;
    }

    .auth-success-primary-button {
        height: 42px;
    }

}