/* =========================================================
   AORIA AUTH V3
   Folder-tab shell
   Loaded after styles.css so legacy auth remains available.
========================================================= */

.auth3-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px;
    overflow-x: hidden;

    background:
        radial-gradient(circle at 12% 18%,
            rgba(79, 135, 222, 0.11),
            transparent 28%),
        linear-gradient(145deg, #edf3fb 0%, #f8faff 100%);
}

.auth3-experience {
    width: min(1280px, 100%);
    overflow: hidden;

    border: 1px solid rgba(20, 39, 70, 0.09);
    border-radius: 28px;

    background: #ffffff;

    box-shadow:
        0 30px 80px rgba(18, 38, 72, 0.15),
        0 8px 24px rgba(18, 38, 72, 0.07);
}



/* =========================================================
   HERO
========================================================= */

.auth3-hero {
    position: relative;

    min-height: 245px;

    padding:
        32px clamp(34px, 5vw, 68px) 72px;

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(circle at 20% 18%,
            rgba(15, 78, 216, 0.42),
            transparent 38%),
        radial-gradient(circle at 90% 85%,
            rgba(91, 140, 255, 0.16),
            transparent 34%),
        linear-gradient(155deg,
            #0f2b5b 0%,
            #0b2148 58%,
            #081a39 100%);
}

.auth3-logo {

    margin-top: 24px;
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    width: 100%;
}

.auth3-logo-icon {
    width: 100px;
    height: 100px;

    display: block;

    object-fit: contain;

    border-radius: 13px;

    box-shadow:
        0 8px 22px rgba(15, 78, 216, 0.24);
}

.auth3-logo-name {
    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 50px;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.auth3-message {
    position: relative;
    z-index: 2;

    width: min(780px, 100%);

    margin-top: 30px;
}

.auth3-kicker {
    margin: 0 0 10px;
    margin-bottom: 20px;

    color: #5b8cff;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;

    text-transform: uppercase;
}

.auth3-message h1 {
    margin: 0 0 14px;
    margin-bottom: 50px;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: clamp(34px, 2.8vw, 46px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.auth3-message p:last-child {
    max-width: 340px;

    margin: 0;

    color: rgba(255, 255, 255, 0.78);

    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
}

/* Two hero messages occupy same space */

.auth3-message-login,
.auth3-message-signup {
    transition:
        opacity 240ms ease,
        transform 320ms ease;
}

.auth3-message-signup {
    position: absolute;

    left: clamp(34px, 5vw, 68px);
    right: clamp(34px, 5vw, 68px);

    bottom: 68px;

    opacity: 0;
    transform: translateY(10px);

    pointer-events: none;
}

.auth3-experience[data-auth-view="signup"] .auth3-message-login {
    opacity: 0;
    transform: translateY(-10px);

    pointer-events: none;
}

.auth3-experience[data-auth-view="signup"] .auth3-message-signup {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   FOLDER TABS
========================================================= */

.auth3-tabs {
    position: relative;
    z-index: 5;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    width: min(680px, calc(100% - 48px));

    margin:
        -48px auto 0;
}

.auth3-experience[data-auth-view="forgotPassword"] .auth3-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.auth3-tab-recover[hidden] {
    display: none;
}

.auth3-tab {
    min-height: 74px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 0;

    padding: 12px 22px;

    color: rgba(255, 255, 255, 0.82);

    background: rgba(255, 255, 255, 0.045);

    font: inherit;
    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    box-shadow: none;

    transition:
        background-color 220ms ease,
        color 220ms ease,
        border-color 220ms ease,
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.auth3-tab:first-child {
    border-radius: 32px 32px 0 0;
}

.auth3-tab:last-child {
    border-radius: 32px 32px 0 0;
}

.auth3-tab:hover:not(.is-active) {
    color: #ffffff;

    background: rgba(255, 255, 255, 0.08);
}

.auth3-tab.is-active {
    z-index: 2;

    color: #172640;

    background: #ffffff;

    border-color: rgba(20, 39, 70, 0.08);

    transform: translateY(-7px);
}

.auth3-tab-icon {
    font-size: 17px;
    line-height: 1;
}

/* =========================================================
   WHITE CONTENT SURFACE
========================================================= */

.auth3-surface {
    position: relative;

    display: grid;

    min-height: 0;

    padding:
        38px clamp(32px, 6vw, 78px) 46px;

    background: #ffffff;
}

/*
 * These are the EXISTING auth views.
 * We only normalize the geometry that belonged to the old split shell.
 */

.auth3-surface>.auth-view {
    grid-area: 1 / 1;

    width: 100%;
    max-width: 560px;

    margin: 0 auto;

    align-self: start;

    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;

    transition:
        opacity 220ms ease,
        transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.auth3-surface>.auth-view-signup {
    max-width: 1080px;
}

.auth3-signup-form {
    gap: 22px;
}

.auth3-signup-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 20px;
}

.auth3-signup-grid>* {
    min-width: 0;
}

.auth3-signup-detail {
    grid-column: span 2;
}

.auth3-signup-footer {
    display: grid;
    gap: 18px;
}

.auth3-signup-footer .auth-primary-button {
    width: 100%;
}

.auth3-signup-footer .auth-terms-checkbox {
    margin: 0;
}

/*
 * Existing auth transitions remain active.
 * Only remove old horizontal travel distance.
 */

.auth3-surface>.auth-view {
    transform: translate3d(18px, 8px, 0);
}

.auth3-surface>.auth-view.is-active {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.auth3-surface>.auth-view.is-active.auth-view-exit {
    transform: translate3d(-18px, -8px, 0);
}

.auth3-surface>.auth-view.is-active.auth-view-enter {
    transform: translate3d(18px, 8px, 0);
}

/* =========================================================
   LOGIN-SPECIFIC SPACING
========================================================= */

.auth3-surface .auth-view-login .auth-view-header {
    margin-bottom: 28px;
}

.auth3-surface .auth-view-login .auth-form {
    gap: 20px;
}

/* =========================================================
   DESKTOP LAYOUT
   Left brand rail + right auth workspace
========================================================= */

@media (min-width: 1180px) {
    .auth3-experience {
        display: grid;
        grid-template-columns: 31% 69%;
        grid-template-rows: auto 1fr;

        width: min(1360px, 100%);
    }

    .auth3-hero {
        grid-column: 1;
        grid-row: 1 / 3;

        min-height: 100%;

        padding:
            44px 38px 48px;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .auth3-logo {
        margin-bottom: 120px;
    }

    .auth3-message {
        width: 100%;
        margin-top: 0;
    }

    .auth3-message h1 {
        max-width: 360px;

        font-size: clamp(34px, 2.8vw, 46px);
    }

    .auth3-message p:last-child {
        max-width: 340px;
    }

    .auth3-message-signup {
        position: absolute;

        left: 38px;
        right: 38px;
        bottom: auto;
        top: 145px;
    }

    .auth3-tabs {
        grid-column: 2;
        grid-row: 1;

        width: 100%;

        margin: 0;

        align-self: end;

        background: #ffffff;
    }

    .auth3-tab {
        min-height: 72px;

        color: #58667a;

        background: #e8eef7;

        border:
            1px solid rgba(20, 39, 70, 0.08);

        border-bottom: 0;

        box-shadow: none;
    }

    .auth3-tab:hover:not(.is-active) {
        color: #172640;

        background: #dfe8f4;
    }

    .auth3-tab.is-active {
        color: #172640;

        background: #ffffff;

        transform: none;
    }

    .auth3-surface {
        grid-column: 2;
        grid-row: 2;

        padding:
            36px 54px 42px;
    }

    .auth3-surface>.auth-view-login {
        max-width: 560px;
    }

    .auth3-surface>.auth-view-signup {
        max-width: 100%;
    }
}

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

@media (max-width: 1179px) {
    .auth3-shell {
        padding: 20px;
    }

    .auth3-experience {
        width: min(960px, 100%);
        border-radius: 24px;
    }

    .auth3-hero {
        grid-column: 1;
        grid-row: 1 / 3;

        min-height: 100%;

        padding:
            44px 38px 48px;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .auth3-logo {
        margin-bottom: 72px;
    }

    .auth3-message {
        margin-top: 0px;
    }

    .auth3-message-signup {
        left: 36px;
        right: 36px;
        bottom: 64px;
    }

    .auth3-tabs {
        width: min(620px, calc(100% - 40px));
    }

    .auth3-surface {
        padding:
            34px 36px 42px;
    }

    .auth3-signup-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .auth3-signup-detail {
        grid-column: span 1;
    }

}

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

@media (max-width: 767px) {
    .auth3-shell {
        display: block;

        min-height: 100vh;

        padding: 0;

        background: #142746;
    }

    .auth3-experience {
        width: 100%;

        min-height: 100vh;

        border: 0;
        border-radius: 0;

        box-shadow: none;
    }

    .auth3-hero {
        min-height: 330px;

        padding:
            32px 24px 82px;
    }

    .auth3-logo-mark {
        width: 44px;
        height: 44px;

        font-size: 26px;
    }

    .auth3-logo-name {
        font-size: 23px;
    }

    .auth3-message {
        margin-top: 34px;
    }

    .auth3-message h1 {
        font-size: clamp(30px, 9vw, 40px);
    }

    .auth3-message p:last-child {
        font-size: 15px;
    }

    .auth3-message-signup {
        left: 24px;
        right: 24px;
        bottom: 76px;
    }

    .auth3-tabs {
        width: calc(100% - 32px);

        margin-top: -58px;
    }

    .auth3-tab {
        min-height: 82px;

        flex-direction: column;
        gap: 6px;

        padding: 12px 8px;

        font-size: 14px;
    }

    .auth3-tab:first-child,
    .auth3-tab:last-child {
        border-radius: 34px 34px 0 0;
    }

    .auth3-surface {
        padding:
            30px 20px 38px;

        border-radius: 26px 26px 0 0;
    }

    .auth3-surface>.auth-view,
    .auth3-surface>.auth-view-signup {
        max-width: none;
    }

    .auth3-surface .auth-view-header {
        margin-bottom: 28px;
    }

    .auth3-signup-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .auth3-signup-detail {
        grid-column: auto;
    }

}