/* =========================================================
   NAARI — OTP LOGIN
   ========================================================= */

.naari-login-methods {
    width: 100%;
    margin: 0 0 24px;
    font-family: "Jost", sans-serif;
}


/* =========================================================
   LOGIN METHOD TABS
   ========================================================= */

.naari-login-methods__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;

    width: 100%;
    margin-bottom: 24px;

    border: 1px solid rgba(61, 0, 16, .18);

    background: #fff;
}


.naari-login-methods__tab {
    min-height: 48px;

    padding: 0 18px;

    border: 0;
    border-radius: 0;

    background: #fff;

    color: var(--burgundy, #3D0010);

    font-family: "Jost", sans-serif;
    font-size: 11px;
    font-weight: 600;

    letter-spacing: .08em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease;
}


.naari-login-methods__tab + .naari-login-methods__tab {
    border-left: 1px solid rgba(61, 0, 16, .18);
}


.naari-login-methods__tab.is-active {
    background: var(--burgundy, #3D0010);

    color: var(--gold-light, #F1CD70);
}


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

.naari-otp-login-panel {
    width: 100%;

    padding: 26px 24px 24px;

    box-sizing: border-box;

    border: 1px solid rgba(212, 162, 58, .38);

    background:
        linear-gradient(
            145deg,
            #fffdf9 0%,
            #fff8ed 100%
        );

    box-shadow:
        0 12px 30px rgba(61, 0, 16, .06);
}


/*
 * HTML hidden must always win.
 */
.naari-otp-login-panel[hidden] {
    display: none !important;
}


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

.naari-otp-login-panel__intro {
    margin-bottom: 22px;
}


.naari-otp-login-panel__eyebrow {
    display: block;

    margin-bottom: 6px;

    color: var(--gold, #D4A23A);

    font-family: "Jost", sans-serif;
    font-size: 9.5px;
    font-weight: 600;

    line-height: 1.4;

    letter-spacing: .18em;
    text-transform: uppercase;
}


.naari-otp-login-panel__intro h3 {
    margin: 0 0 7px !important;

    color: var(--burgundy, #3D0010) !important;

    font-family:
        "Cormorant Garamond",
        serif !important;

    font-size: 27px !important;
    font-weight: 600 !important;

    line-height: 1.1 !important;
}


.naari-otp-login-panel__intro p {
    margin: 0 !important;

    color: #765c63;

    font-family: "Jost", sans-serif;
    font-size: 12.5px;

    line-height: 1.6;
}


/* =========================================================
   FIELDS
   ========================================================= */

.naari-otp-login-panel__field {
    margin-bottom: 18px;
}


.naari-otp-login-panel__field label,
.naari-otp-login-panel__verify > label {
    display: block;

    margin: 0 0 8px !important;

    color: var(--burgundy, #3D0010) !important;

    font-family: "Jost", sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;

    letter-spacing: .1em;

    text-transform: uppercase;
}


.naari-otp-login-panel__phone-wrap {
    display: grid;

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

    align-items: stretch;

    width: 100%;
}


.naari-otp-login-panel__country {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 58px;

    padding: 0 12px;

    box-sizing: border-box;

    border: 1px solid rgba(61, 0, 16, .2);
    border-right: 0;

    background: #f8f1ed;

    color: var(--burgundy, #3D0010);

    font-size: 13px;
    font-weight: 600;
}


.naari-otp-login-panel__phone,
.naari-otp-login-panel__code {
    width: 100% !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    box-sizing: border-box;

    border: 1px solid rgba(61, 0, 16, .22) !important;
    border-radius: 0 !important;

    background: #fff !important;

    color: var(--burgundy, #3D0010) !important;

    font-family: "Jost", sans-serif !important;
    font-size: 14px !important;

    outline: none !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.naari-otp-login-panel__phone:focus,
.naari-otp-login-panel__code:focus {
    border-color: var(--gold, #D4A23A) !important;

    box-shadow:
        0 0 0 2px rgba(212, 162, 58, .12) !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.naari-otp-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 0 24px;

    box-sizing: border-box;

    border:
        1px solid var(--burgundy, #3D0010) !important;

    border-radius: 0 !important;

    background:
        var(--burgundy, #3D0010) !important;

    color:
        var(--gold-light, #F1CD70) !important;

    font-family: "Jost", sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    letter-spacing: .13em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .15s ease,
        opacity .2s ease;
}


.naari-otp-login-btn:hover:not(:disabled) {
    background:
        var(--burgundy-2, #65001B) !important;

    color: #fff !important;

    transform: translateY(-1px);
}


.naari-otp-login-btn:disabled {
    opacity: .5;

    cursor: not-allowed;

    transform: none !important;
}


/* =========================================================
   VERIFY AREA
   ========================================================= */

.naari-otp-login-panel__verify {
    margin-top: 20px;
}


.naari-otp-login-panel__verify[hidden] {
    display: none !important;
}


.naari-otp-login-panel__verify-row {
    display: grid;

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

    gap: 10px;

    align-items: stretch;
}


.naari-otp-login-panel__code {
    font-size: 17px !important;
    font-weight: 500;

    letter-spacing: .28em;
}


/* =========================================================
   RESEND
   ========================================================= */

.naari-otp-login-panel__resend {
    margin: 12px 0 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: var(--magenta, #C9004C) !important;

    font-family: "Jost", sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;

    text-decoration: underline;
    text-underline-offset: 3px;

    cursor: pointer;
}


.naari-otp-login-panel__resend:disabled {
    color: #aa959a !important;

    cursor: default;

    text-decoration: none;
}


/* =========================================================
   STATUS
   ========================================================= */

.naari-otp-login-panel__status {
    min-height: 18px;

    margin-top: 14px;

    font-family: "Jost", sans-serif;
    font-size: 11.5px;

    line-height: 1.5;
}


.naari-otp-login-panel__status.is-loading {
    color: var(--accent-deep, #8B0030);

    font-weight: 500;
}


.naari-otp-login-panel__status.is-success {
    color: #277442;

    font-weight: 600;
}


.naari-otp-login-panel__status.is-error {
    color: #B42318;

    font-weight: 600;
}


/* =========================================================
   HIDE NORMAL PASSWORD LOGIN FIELDS IN OTP MODE
   ========================================================= */

/*
 * The OTP switcher itself stays visible.
 *
 * Standard WooCommerce username/password/login elements
 * disappear only while the form has .naari-otp-mode.
 */

.woocommerce-form-login.naari-otp-mode
> p:not(.form-row):not(.lost_password) {
    display: none;
}


.woocommerce-form-login.naari-otp-mode
.woocommerce-form-row {
    display: none !important;
}


.woocommerce-form-login.naari-otp-mode
.form-row:not(
    .naari-otp-login-panel .form-row
) {
    display: none !important;
}


.woocommerce-form-login.naari-otp-mode
.lost_password {
    display: none !important;
}


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

@media (max-width: 767px) {

    .naari-login-methods__tabs {
        grid-template-columns: 1fr;
    }


    .naari-login-methods__tab + .naari-login-methods__tab {
        border-left: 0;

        border-top:
            1px solid rgba(61, 0, 16, .18);
    }


    .naari-otp-login-panel {
        padding:
            23px
            18px
            21px;
    }


    .naari-otp-login-panel__intro h3 {
        font-size:
            24px !important;
    }


    .naari-otp-login-panel__verify-row {
        grid-template-columns: 1fr;
    }


    .naari-otp-login-btn {
        width: 100%;
    }
}


@media (max-width: 420px) {

    .naari-otp-login-panel {
        padding:
            21px
            15px
            19px;
    }


    .naari-login-methods__tab {
        font-size: 10px;
    }


    .naari-otp-login-panel__country {
        min-width: 52px;
    }
}