/* =========================================================
   HAMMER CRAFT
   ACCOUNT
   account.css
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --account-bg:
        #f2eee8;

    --account-bg-soft:
        #e9e3db;

    --account-light:
        #f8f5f0;

    --account-text:
        #171717;

    --account-muted:
        #6f6a64;

    --account-dim:
        #99928a;

    --account-line:
        rgba(
            23,
            23,
            23,
            0.12
        );

    --account-line-strong:
        rgba(
            23,
            23,
            23,
            0.24
        );

    --account-orange:
        #d86a2b;

    --account-orange-dark:
        #b95520;

    --account-dark:
        #111111;

    --account-success:
        #357249;

    --account-danger:
        #a43f36;

}


/* =========================================================
   RESET
========================================================= */

* {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    min-height:
        100vh;

    background:
        var(
            --account-bg
        );

    color:
        var(
            --account-text
        );

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

}


button,
input,
textarea,
select {

    font:
        inherit;

}


/* =========================================================
   PAGE
========================================================= */

.account-page {

    position:
        relative;

    min-height:
        100vh;

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.05fr
        )
        minmax(
            420px,
            0.95fr
        );

}


/* =========================================================
   LEFT BRAND SIDE
========================================================= */

.account-brand-panel {

    position:
        relative;

    min-height:
        100vh;

    padding:
        120px
        6vw
        60px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    overflow:
        hidden;

    background:
        var(
            --account-bg
        );

    border-right:
        1px solid
        var(
            --account-line
        );

}


.account-brand-logo {

    position:
        absolute;

    right:
        -9vw;

    top:
        50%;

    width:
        min(
            48vw,
            700px
        );

    transform:
        translateY(
            -50%
        );

    opacity:
        0.15;

    pointer-events:
        none;

}


.account-brand-logo img {

    width:
        100%;

    height:
        auto;

}


.account-back-link {

    position:
        relative;

    z-index:
        2;

    width:
        fit-content;

    color:
        var(
            --account-muted
        );

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.13em;

    text-decoration:
        none;

}


.account-back-link:hover {

    color:
        var(
            --account-orange
        );

}


.account-brand-copy {

    position:
        relative;

    z-index:
        2;

    max-width:
        760px;

}


.account-eyebrow {

    color:
        var(
            --account-orange
        );

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.16em;

}


.account-brand-copy h1 {

    margin:
        18px
        0
        0;

    font-size:
        clamp(
            70px,
            8vw,
            130px
        );

    line-height:
        0.84;

    font-weight:
        500;

    letter-spacing:
        -0.065em;

}


.account-brand-copy h1 em {

    display:
        block;

    color:
        var(
            --account-orange
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight:
        400;

}


.account-brand-copy p {

    max-width:
        580px;

    margin:
        34px
        0
        0;

    color:
        var(
            --account-muted
        );

    font-size:
        14px;

    line-height:
        1.8;

}


.account-origin {

    position:
        relative;

    z-index:
        2;

    padding-top:
        20px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        20px;

    border-top:
        1px solid
        var(
            --account-line
        );

    color:
        var(
            --account-muted
        );

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.13em;

}


/* =========================================================
   AUTH SIDE
========================================================= */

.account-auth-panel {

    min-height:
        100vh;

    padding:
        130px
        clamp(
            35px,
            5vw,
            85px
        )
        70px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    background:
        var(
            --account-light
        );

}


.account-auth-inner {

    width:
        100%;

    max-width:
        590px;

    margin:
        0 auto;

}


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

.account-tabs {

    margin-bottom:
        45px;

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    border-bottom:
        1px solid
        var(
            --account-line
        );

}


.account-tabs button {

    min-height:
        50px;

    padding:
        0;

    border:
        0;

    border-bottom:
        2px solid
        transparent;

    background:
        transparent;

    color:
        var(
            --account-muted
        );

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.13em;

    cursor:
        pointer;

}


.account-tabs button.active {

    border-bottom-color:
        var(
            --account-orange
        );

    color:
        var(
            --account-text
        );

}


/* =========================================================
   PANEL
========================================================= */

.auth-panel h2 {

    margin:
        0;

    font-size:
        clamp(
            42px,
            5vw,
            68px
        );

    line-height:
        0.95;

    font-weight:
        500;

    letter-spacing:
        -0.05em;

}


.auth-panel > p {

    max-width:
        520px;

    margin:
        18px
        0
        36px;

    color:
        var(
            --account-muted
        );

    font-size:
        14px;

    line-height:
        1.7;

}


/* =========================================================
   FORM
========================================================= */

.auth-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

}


.auth-form label {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    color:
        var(
            --account-muted
        );

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.13em;

}


.auth-form input {

    width:
        100%;

    min-height:
        52px;

    padding:
        0
        14px;

    border:
        1px solid
        var(
            --account-line
        );

    border-radius:
        0;

    outline:
        none;

    background:
        transparent;

    color:
        var(
            --account-text
        );

    transition:
        border-color
        150ms ease,
        background
        150ms ease;

}


.auth-form input:focus {

    border-color:
        var(
            --account-orange
        );

    background:
        #ffffff;

}


.auth-form input::placeholder {

    color:
        var(
            --account-dim
        );

}


/* =========================================================
   AUTH BUTTON
========================================================= */

.auth-submit,
#loginButton,
#registerButton {

    width:
        100%;

    min-height:
        54px;

    margin-top:
        7px;

    border:
        1px solid
        var(
            --account-orange
        );

    border-radius:
        0;

    background:
        var(
            --account-orange
        );

    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.13em;

    cursor:
        pointer;

    transition:
        background
        150ms ease,
        border-color
        150ms ease;

}


.auth-submit:hover,
#loginButton:hover,
#registerButton:hover {

    background:
        var(
            --account-dark
        );

    border-color:
        var(
            --account-dark
        );

}


.auth-submit:disabled,
#loginButton:disabled,
#registerButton:disabled {

    opacity:
        0.55;

    cursor:
        wait;

}


/* =========================================================
   SECONDARY ACTIONS
========================================================= */

.auth-secondary {

    margin-top:
        22px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

}


.auth-text-button,
#forgotPasswordButton {

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        var(
            --account-muted
        );

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.11em;

    cursor:
        pointer;

}


.auth-text-button:hover,
#forgotPasswordButton:hover {

    color:
        var(
            --account-orange
        );

}


/* =========================================================
   MESSAGE
========================================================= */

.auth-message,
#loginMessage,
#loginError,
#registerMessage,
#registerError {

    margin:
        18px
        0
        0;

    padding:
        13px
        15px;

    border:
        1px solid
        var(
            --account-line
        );

    color:
        var(
            --account-muted
        );

    font-size:
        12px;

    line-height:
        1.6;

}


.auth-message:empty,
#loginMessage:empty,
#loginError:empty,
#registerMessage:empty,
#registerError:empty {

    display:
        none;

}


.auth-message.error,
#loginError.error,
#registerError.error {

    border-color:
        rgba(
            164,
            63,
            54,
            0.3
        );

    color:
        var(
            --account-danger
        );

}


.auth-message.success,
#loginMessage.success,
#registerMessage.success {

    border-color:
        rgba(
            53,
            114,
            73,
            0.3
        );

    color:
        var(
            --account-success
        );

}


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

@media
(max-width: 950px) {

    .account-page {

        grid-template-columns:
            1fr;

    }


    .account-brand-panel {

        min-height:
            520px;

        padding:
            100px
            28px
            45px;

        border-right:
            0;

        border-bottom:
            1px solid
            var(
                --account-line
            );

    }


    .account-brand-logo {

        right:
            -20vw;

        width:
            90vw;

        opacity:
            0.11;

    }


    .account-auth-panel {

        min-height:
            auto;

        padding:
            75px
            28px;

    }

}


@media
(max-width: 600px) {

    .account-brand-panel {

        min-height:
            450px;

        padding:
            85px
            20px
            35px;

    }


    .account-brand-copy h1 {

        font-size:
            clamp(
                58px,
                18vw,
                88px
            );

    }


    .account-auth-panel {

        padding:
            65px
            20px;

    }


    .auth-secondary {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}