/* =========================================================
   EXCHANGEZ AUTHENTICATION PAGE
   Namespace: exz_auth_
========================================================= */


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

:root {

    --exz-auth-dark: #35130d;
    --exz-auth-dark-soft: #45190f;
    --exz-auth-orange: #b84208;

    --exz-auth-bg: #f4eddb;
    --exz-auth-card: #eee4cc;
    --exz-auth-input: #fcf9f1;

    --exz-auth-text: #321710;
    --exz-auth-muted: #755f54;

    --exz-auth-border: rgba(65, 32, 20, 0.14);

    --exz-auth-radius: 18px;

    --exz-auth-transition:
        180ms ease;

}


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

.exz_auth_body {

    margin: 0;

    min-height: 100vh;

    background: var(--exz-auth-bg);

    color: var(--exz-auth-text);

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

}


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

.exz_auth_page {

    width: 100%;

    min-height: 100vh;

    display: grid;

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

    overflow: hidden;

}

.logo-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}
/* =========================================================
   LEFT PANEL
========================================================= */

.exz_auth_left {

    min-height: 100vh;

    background:
        linear-gradient(
            135deg,
            #52200f 0%,
            #35130d 48%,
            #2c100b 100%
        );

    color: #fff;

    position: relative;

    overflow: hidden;

}


/* subtle background glow */

.exz_auth_left::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -250px;
    bottom: -250px;

    background:
        radial-gradient(
            circle,
            rgba(184, 66, 8, 0.30),
            transparent 70%
        );

    pointer-events: none;

}


.exz_auth_left_inner {

    width: min(100%, 700px);

    min-height: 100vh;

    margin: 0 auto;

    padding:
        48px
        clamp(35px, 5vw, 72px);

    display: flex;

    flex-direction: column;

    position: relative;

    z-index: 2;

}


/* =========================================================
   BRAND
========================================================= */

.exz_auth_brand {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    width: fit-content;

    text-decoration: none;

    color: #fff;

}


.exz_auth_brand_icon {

    width: 27px;
    height: 27px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #c8752b;

    color: #fff;

    font-size: 13px;

    transform: rotate(-15deg);

}


.exz_auth_brand_text {

    font-size: 24px;

    font-weight: 700;

    letter-spacing: -0.5px;

}


/* =========================================================
   INTRO
========================================================= */

.exz_auth_intro {

    margin-top: auto;

    margin-bottom: 38px;

    max-width: 560px;

}


.exz_auth_intro h1 {

    margin: 0 0 18px;

    font-size:
        clamp(42px, 4.2vw, 62px);

    line-height: 0.98;

    letter-spacing: -2.5px;

    font-weight: 700;

}


.exz_auth_intro p {

    margin: 0;

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

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

    font-size: 16px;

    line-height: 1.55;

}


/* =========================================================
   RECENT TRADE CARD
========================================================= */

.exz_auth_trade_card {

    width: min(100%, 500px);

    padding: 22px 20px;

    border-radius: 22px;

    background:
        #f1e7ce;

    color: var(--exz-auth-text);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.12);

}


.exz_auth_trade_label {

    margin-bottom: 14px;

    color: var(--exz-auth-orange);

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

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.exz_auth_trade_items {

    display: flex;

    align-items: center;

    gap: 12px;

}


.exz_auth_trade_item {

    min-width: 0;

    flex: 1;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px 12px;

    border-radius: 25px;

    background: #fbf8f0;

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

    font-size: 14px;

    font-weight: 600;

}


.exz_auth_trade_icon {

    flex: 0 0 auto;

    width: 31px;
    height: 31px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e9e2d3;

    color: var(--exz-auth-text);

}


.exz_auth_trade_swap {

    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--exz-auth-orange);

    color: #fff;

    font-size: 14px;

}


.exz_auth_trade_quote {

    margin: 15px 0 0;

    color: #6f554a;

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

    font-size: 13px;

    line-height: 1.5;

}


.exz_auth_trade_quote span {

    color: #60483d;

}


/* =========================================================
   LEFT FOOTER
========================================================= */

.exz_auth_left_footer {

    margin-top: auto;

    padding-top: 38px;

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

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

    font-size: 12px;

}


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

.exz_auth_right {

    min-height: 100vh;

    background: var(--exz-auth-bg);

    display: flex;

    align-items: center;

    justify-content: center;

}


.exz_auth_right_inner {

    width: min(100%, 600px);

    padding:
        45px
        clamp(30px, 6vw, 80px);

}


/* =========================================================
   AUTH TOGGLE
========================================================= */

.exz_auth_toggle {

    width: 100%;

    min-height: 42px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    margin-bottom: 35px;

    padding: 3px;

    border-radius: 30px;

    background: #eae0c8;

}


.exz_auth_toggle_btn {

    border: 0;

    outline: 0;

    border-radius: 25px;

    background: transparent;

    color: #694f43;

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

    font-size: 14px;

    cursor: pointer;

    transition:
        background var(--exz-auth-transition),
        color var(--exz-auth-transition),
        box-shadow var(--exz-auth-transition);

}


.exz_auth_toggle_btn:hover {

    color: var(--exz-auth-dark);

}


.exz_auth_toggle_btn.exz_auth_toggle_active {

    background: var(--exz-auth-dark);

    color: #fff;

    box-shadow:
        0 3px 8px rgba(53, 19, 13, 0.15);

}


/* =========================================================
   HEADING
========================================================= */

.exz_auth_heading {

    margin-bottom: 35px;

}


.exz_auth_heading h2 {

    margin: 0 0 7px;

    font-size:
        clamp(31px, 3vw, 38px);

    line-height: 1.05;

    letter-spacing: -1px;

}


.exz_auth_heading p {

    margin: 0;

    color: var(--exz-auth-muted);

    font-family:
        Arial,

        Helvetica,
        sans-serif;

    font-size: 14px;

}


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

.exz_auth_form {

    width: 100%;

}


.exz_auth_field {

    margin-bottom: 19px;

}


.exz_auth_field > label,
.exz_auth_password_label label {

    display: block;

    margin-bottom: 8px;

    color: #5f493f;

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

    font-size: 12px;

    font-weight: 500;

}


.exz_auth_password_label {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}


.exz_auth_password_label label {

    margin-bottom: 8px;

}


.exz_auth_forgot {

    color: var(--exz-auth-orange);

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

    font-size: 12px;

    text-decoration: none;

}


.exz_auth_forgot:hover {

    text-decoration: underline;

}


/* =========================================================
   INPUT
========================================================= */

.exz_auth_input {

    width: 100%;

    min-height: 49px;

    padding:
        12px
        15px;

    border: 1px solid var(--exz-auth-border);

    border-radius: 15px;

    outline: none;

    background:
        var(--exz-auth-input);

    color:
        var(--exz-auth-text);

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

    font-size: 14px;

    transition:
        border-color var(--exz-auth-transition),
        box-shadow var(--exz-auth-transition),
        background var(--exz-auth-transition);

    box-sizing: border-box;

}


.exz_auth_input::placeholder {

    color: #9b887d;

}


.exz_auth_input:hover {

    border-color:
        rgba(65, 32, 20, 0.25);

}


.exz_auth_input:focus {

    background: #fffdf7;

    border-color:
        rgba(184, 66, 8, 0.55);

    box-shadow:
        0 0 0 3px rgba(184, 66, 8, 0.08);

}


/* =========================================================
   PASSWORD
========================================================= */

.exz_auth_password_wrap {

    position: relative;

}


.exz_auth_password_wrap .exz_auth_input {

    padding-right: 48px;

}


.exz_auth_password_toggle {

    position: absolute;

    top: 50%;
    right: 13px;

    width: 30px;
    height: 30px;

    border: 0;

    transform: translateY(-50%);

    display: inline-flex;

    align-items: center;
    justify-content: center;

    background: transparent;

    color: #806b60;

    cursor: pointer;

    transition:
        color var(--exz-auth-transition);

}


.exz_auth_password_toggle:hover {

    color: var(--exz-auth-dark);

}


/* =========================================================
   ERROR
========================================================= */

.exz_auth_error {

    display: block;

    min-height: 0;

    margin-top: 5px;

    color: #a72f12;

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

    font-size: 11px;

}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.exz_auth_primary_btn {

    width: 100%;

    min-height: 49px;

    margin-top: 5px;

    padding: 11px 18px;

    border: 1px solid var(--exz-auth-dark);

    border-radius: 25px;

    background: var(--exz-auth-dark);

    color: #fff;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

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

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition:
        transform var(--exz-auth-transition),
        background var(--exz-auth-transition),
        box-shadow var(--exz-auth-transition);

}


.exz_auth_primary_btn:hover {

    background:
        #4a180f;

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 18px rgba(53, 19, 13, 0.15);

}


.exz_auth_primary_btn:active {

    transform:
        translateY(0);

}


.exz_auth_primary_btn i {

    font-size: 11px;

}


/* =========================================================
   DIVIDER
========================================================= */

.exz_auth_divider {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 12px;

    margin:
        27px 0;

}


.exz_auth_divider span {

    height: 1px;

    flex: 1;

    background:
        rgba(65, 32, 20, 0.16);

}


.exz_auth_divider em {

    flex: 0 0 auto;

    color:
        #806b60;

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

    font-size: 12px;

    font-style: normal;

}


/* =========================================================
   GOOGLE BUTTON
========================================================= */

.exz_auth_google_btn {

    width: 100%;

    min-height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    border:
        1px solid var(--exz-auth-border);

    border-radius: 25px;

    background:
        var(--exz-auth-input);

    color:
        var(--exz-auth-text);

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

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        transform var(--exz-auth-transition),
        border-color var(--exz-auth-transition),
        background var(--exz-auth-transition),
        box-shadow var(--exz-auth-transition);

}


.exz_auth_google_btn:hover {

    background: #fffdf7;

    border-color:
        rgba(65, 32, 20, 0.27);

    transform:
        translateY(-1px);

    box-shadow:
        0 5px 15px rgba(50, 25, 15, 0.06);

}


.exz_auth_google_icon {

    display: inline-flex;

    font-size: 16px;

    color: #4285f4;

}


/* =========================================================
   TERMS
========================================================= */

.exz_auth_terms {

    max-width: 390px;

    margin:
        28px auto 0;

    text-align: center;

    color:
        #806b60;

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

    font-size: 11px;

    line-height: 1.55;

}


.exz_auth_terms a {

    color:
        #6c4a3c;

    text-decoration: none;

}


.exz_auth_terms a:hover {

    text-decoration: underline;

}


/* =========================================================
   CREATE ACCOUNT
========================================================= */

.exz_auth_create_wrap .exz_auth_heading {

    margin-bottom: 27px;

}


.exz_auth_create_wrap .exz_auth_field {

    margin-bottom: 16px;

}


/* =========================================================
   FOCUS ACCESSIBILITY
========================================================= */

.exz_auth_toggle_btn:focus-visible,
.exz_auth_password_toggle:focus-visible,
.exz_auth_primary_btn:focus-visible,
.exz_auth_google_btn:focus-visible,
.exz_auth_forgot:focus-visible {

    outline:
        2px solid var(--exz-auth-orange);

    outline-offset:
        3px;

}


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

@media (max-width: 991.98px) {

    .exz_auth_page {

        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

    }


    .exz_auth_left_inner {

        padding:
            38px;

    }


    .exz_auth_intro h1 {

        font-size:
            clamp(38px, 5vw, 50px);

    }


    .exz_auth_trade_card {

        padding:
            18px;

    }


    .exz_auth_trade_items {

        gap: 8px;

    }


    .exz_auth_trade_item {

        font-size: 12px;

        padding:
            8px;

    }


    .exz_auth_right_inner {

        padding:
            35px;

    }

}


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

@media (max-width: 767.98px) {

    .exz_auth_page {

        display: flex;

        flex-direction: column;

        overflow: visible;

    }


    .exz_auth_left {

        min-height: auto;

        border-radius:
            0 0 28px 28px;

    }


    .exz_auth_left_inner {

        min-height: auto;

        padding:
            28px
            22px
            32px;

    }


    .exz_auth_brand {

        gap: 10px;

    }


    .exz_auth_brand_icon {

        width: 25px;
        height: 25px;

    }


    .exz_auth_brand_text {

        font-size: 21px;

    }


    .exz_auth_intro {

        margin:
            55px 0 28px;

    }


    .exz_auth_intro h1 {

        font-size:
            clamp(37px, 11vw, 48px);

        letter-spacing:
            -1.8px;

        margin-bottom:
            15px;

    }


    .exz_auth_intro p {

        font-size:
            14px;

    }


    .exz_auth_intro p br {

        display: none;

    }


    .exz_auth_trade_card {

        width: 100%;

        padding:
            18px;

        border-radius:
            18px;

    }


    .exz_auth_trade_items {

        flex-direction:
            row;

    }


    .exz_auth_trade_item {

        font-size:
            12px;

        padding:
            8px 9px;

    }


    .exz_auth_trade_icon {

        width: 28px;
        height: 28px;

        font-size: 11px;

    }


    .exz_auth_trade_swap {

        width: 31px;
        height: 31px;

        font-size: 11px;

    }


    .exz_auth_trade_quote {

        font-size:
            12px;

    }


    .exz_auth_left_footer {

        padding-top:
            27px;

        font-size:
            11px;

    }


    .exz_auth_right {

        min-height: auto;

        align-items:
            flex-start;

    }


    .exz_auth_right_inner {

        width: 100%;

        padding:
            35px
            22px
            45px;

    }


    .exz_auth_toggle {

        margin-bottom:
            30px;

    }


    .exz_auth_heading {

        margin-bottom:
            27px;

    }


    .exz_auth_heading h2 {

        font-size:
            31px;

    }

}


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

@media (max-width: 420px) {

    .exz_auth_left_inner {

        padding:
            24px
            17px
            27px;

    }


    .exz_auth_intro {

        margin-top:
            42px;

    }


    .exz_auth_intro h1 {

        font-size:
            36px;

    }


    .exz_auth_trade_items {

        gap:
            6px;

    }


    .exz_auth_trade_item {

        gap:
            6px;

        font-size:
            11px;

    }


    .exz_auth_trade_item span:last-child {

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;

    }


    .exz_auth_trade_swap {

        width:
            28px;

        height:
            28px;

    }


    .exz_auth_right_inner {

        padding:
            30px
            17px
            40px;

    }


    .exz_auth_heading h2 {

        font-size:
            29px;

    }

}