/*
Theme Name: Woodmart Child
Description: Woodmart Child Theme
Author: XTemos
Template: woodmart
Version: 1.0.0
Text Domain: woodmart
*/


/* =========================================================
   THESTYLISHGEM
   PREMIUM LOGIN / REGISTER 3D UI
   ========================================================= */


/* ---------------------------------------------------------
   MAIN AUTH WRAPPER
   --------------------------------------------------------- */

.tsg-login-register-wrapper {
    width: 100%;
    max-width: 760px;
    margin: 0px auto 90px;
    padding: 0 20px;
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   LOGIN + REGISTER CARD
   --------------------------------------------------------- */

.tsg-login-box,
.tsg-register-box {

    position: relative;

    width: 100%;
    box-sizing: border-box;

    padding: 48px 55px 50px;

    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #fffdfb 55%,
        #faf7f3 100%
    );

    border: 1px solid rgba(91, 45, 20, 0.18);

    border-radius: 14px;

    /* Main 3D shadow */
    box-shadow:
        0 2px 3px rgba(67, 36, 18, 0.05),
        0 8px 18px rgba(67, 36, 18, 0.08),
        0 20px 45px rgba(67, 36, 18, 0.10);

    transition:
        box-shadow 0.35s ease,
        transform 0.35s ease,
        border-color 0.35s ease;

}


/* ---------------------------------------------------------
   SUBTLE PREMIUM TOP HIGHLIGHT
   --------------------------------------------------------- */

.tsg-login-box::before,
.tsg-register-box::before {

    content: "";

    position: absolute;

    top: 0;
    left: 7%;
    right: 7%;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(126, 78, 45, 0.45),
        transparent
    );

    pointer-events: none;
}


/* ---------------------------------------------------------
   SLIGHT ELEVATION ON HOVER
   --------------------------------------------------------- */

.tsg-login-box:hover,
.tsg-register-box:hover {

    transform: translateY(-3px);

    border-color: rgba(91, 45, 20, 0.25);

    box-shadow:
        0 3px 5px rgba(67, 36, 18, 0.05),
        0 12px 25px rgba(67, 36, 18, 0.10),
        0 28px 55px rgba(67, 36, 18, 0.12);

}


/* ---------------------------------------------------------
   HEADING
   --------------------------------------------------------- */

.tsg-auth-title {

    margin: 0 0 38px;

    text-align: center;

    color: #24150f;

    font-size: 34px;
    line-height: 1.2;

    font-weight: 400;

    letter-spacing: 0.2px;

}


/* ---------------------------------------------------------
   FORM ROW
   --------------------------------------------------------- */

.tsg-form-row {

    margin: 0 0 25px !important;

}


/* ---------------------------------------------------------
   LABEL
   --------------------------------------------------------- */

.tsg-form-row label {

    display: block;

    margin-bottom: 9px;

    color: #2d211b;

    font-size: 14px;

    font-weight: 500;

    letter-spacing: 0.2px;

}


/* ---------------------------------------------------------
   INPUTS
   --------------------------------------------------------- */

.tsg-form-row input.input-text {

    width: 100%;

    height: 56px;

    padding: 0 17px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #ded7d1;

    border-radius: 6px;

    color: #24150f;

    font-size: 15px;

    outline: none;

    /* Small inset 3D effect */

    box-shadow:
        inset 0 1px 3px rgba(50, 30, 20, 0.05),
        0 1px 0 rgba(255, 255, 255, 0.9);

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;

}


/* Input hover */

.tsg-form-row input.input-text:hover {

    border-color: #c8b8ac;

}


/* Input focus */

.tsg-form-row input.input-text:focus {

    background: #fffefd;

    border-color: #6b351b;

    box-shadow:
        0 0 0 3px rgba(107, 53, 27, 0.08),
        inset 0 1px 3px rgba(50, 30, 20, 0.04);

}


/* ---------------------------------------------------------
   PASSWORD WRAPPER
   --------------------------------------------------------- */

.tsg-password-wrapper {

    position: relative;

    display: block;

    width: 100%;

}


/* Password input needs space for eye icon */

.tsg-password-wrapper input.input-text {

    padding-right: 55px;

}


/* ---------------------------------------------------------
   PASSWORD EYE BUTTON
   --------------------------------------------------------- */

.tsg-password-toggle {

    position: absolute;

    top: 50%;
    right: 15px;

    width: 34px;
    height: 34px;

    transform: translateY(-50%);

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

    padding: 0;

    border: none !important;

    background: transparent !important;

    color: #6d5547;

    cursor: pointer;

    box-shadow: none !important;

    transition:
        color 0.2s ease,
        transform 0.2s ease;

}


.tsg-password-toggle:hover {

    color: #5a2c16;

    transform: translateY(-50%) scale(1.08);

}


.tsg-eye {

    display: flex;

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

    font-size: 15px;

    line-height: 1;

}


/* ---------------------------------------------------------
   LOGIN / REGISTER BUTTON
   --------------------------------------------------------- */

.tsg-login-button,
.tsg-register-button {

    width: 100%;

    height: 56px;

    margin-top: 5px;

    border: 1px solid #4b2412 !important;

    border-radius: 5px !important;

    background: linear-gradient(
        145deg,
        #663218 0%,
        #542712 100%
    ) !important;

    color: #ffffff !important;

    font-size: 15px;

    font-weight: 500;

    letter-spacing: 0.3px;

    cursor: pointer;

    box-shadow:
        0 3px 0 #35170c,
        0 7px 15px rgba(70, 31, 15, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;

}


/* Button hover */

.tsg-login-button:hover,
.tsg-register-button:hover {

    background: linear-gradient(
        145deg,
        #713a1e 0%,
        #5c2b15 100%
    ) !important;

    transform: translateY(-2px);

    box-shadow:
        0 4px 0 #35170c,
        0 10px 22px rgba(70, 31, 15, 0.22);

}


/* Button pressed */

.tsg-login-button:active,
.tsg-register-button:active {

    transform: translateY(2px);

    box-shadow:
        0 1px 0 #35170c,
        0 4px 10px rgba(70, 31, 15, 0.15);

}


/* =========================================================
   LOGIN OPTIONS
   REMEMBER ME + FORGOT PASSWORD
   ========================================================= */

.tsg-login-options {

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: space-between !important;

    width: 100%;

    gap: 15px;

    margin-top: 18px;

    white-space: nowrap;

}


/* Remember me */

.tsg-remember-me {

    display: inline-flex !important;

    flex: 1 1 auto;

    align-items: center;

    gap: 9px;

    margin: 0 !important;

    color: #3c3029;

    font-size: 14px;

    cursor: pointer;

    white-space: nowrap;

}


/* Remember checkbox */

.tsg-remember-me input[type="checkbox"] {

    width: 17px;
    height: 17px;

    min-width: 17px;

    margin: 0;

    accent-color: #5c2d17;

    cursor: pointer;

}


/* Forgot password */

.tsg-forgot-password {

    flex: 0 0 auto;

    color: #5c2d17 !important;

    font-size: 14px;

    text-decoration: none !important;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;

}


.tsg-forgot-password:hover {

    color: #8a5434 !important;

    opacity: 0.9;

}


/* =========================================================
   SWITCH LOGIN / REGISTER AREA
   IMPORTANT:
   BOTH TEXT + LINK MUST STAY ON ONE CENTERED LINE

   NOTE: this class must match the wrapping <div> in
   form-login.php exactly - it was previously mismatched
   ("tsg-switch-area" in the PHP vs "tsg-switch-text" here),
   which is why none of this centering ever applied.
   ========================================================= */

.tsg-switch-text {

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: center !important;

    flex-wrap: nowrap !important;

    width: 100%;

    margin: 32px 0 0 !important;

    padding: 0 !important;

    text-align: center !important;

    white-space: nowrap;

    line-height: 1.5;

}


/* The paragraph/text portion */

.tsg-switch-text p {

    display: inline !important;

    width: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #786b63;

    font-size: 14px;

    line-height: 1.5;

}


/* =========================================================
   SWITCH LINK
   CREATE ACCOUNT / LOG IN
   NO BUTTON / NO BORDER / NO PADDING
   ========================================================= */

.tsg-switch-link {

    display: inline !important;

    width: auto !important;

    margin: 0 0 0 5px !important;

    padding: 0 !important;

    border: none !important;

    border-width: 0 !important;

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    color: #5c2d17 !important;

    font-family: inherit;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.5;

    text-decoration: none !important;

    position: relative;

    cursor: pointer;

    -webkit-appearance: none;
    appearance: none;

    vertical-align: baseline;

    transition:
        color 0.25s ease;

}


/* Elegant underline animation */

.tsg-switch-link::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -3px;

    width: 0;

    height: 1px;

    background: #5c2d17;

    transition: width 0.25s ease;

}


.tsg-switch-link:hover {

    color: #8a5434 !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

}


.tsg-switch-link:hover::after {

    width: 100%;

}


/* ---------------------------------------------------------
   REGISTER FORM
   --------------------------------------------------------- */

.tsg-register-box {

    /* Same card treatment as login */

    animation: tsgAuthFadeIn 0.3s ease both;

}


@keyframes tsgAuthFadeIn {

    from {

        opacity: 0;

        transform: translateY(8px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* ---------------------------------------------------------
   REGISTER PRIVACY TEXT
   --------------------------------------------------------- */

.tsg-register-form .woocommerce-privacy-policy-text {

    margin: 4px 0 25px;

    color: #756b65;

    font-size: 13px;

    line-height: 1.7;

}


.tsg-register-form .woocommerce-privacy-policy-text a {

    color: #5c2d17;

    text-decoration: underline;

}


/* ---------------------------------------------------------
   REMOVE UNNECESSARY WOODMART FORM EFFECTS
   --------------------------------------------------------- */

.tsg-login-box .form-row,
.tsg-register-box .form-row {

    padding: 0 !important;

}


/* Prevent theme from adding weird margins */

.tsg-login-box form,
.tsg-register-box form {

    margin: 0;

}


/* =========================================================
   REGISTER SWITCH POSITION
   AFTER CREATE ACCOUNT BUTTON
   ========================================================= */

.tsg-register-box .tsg-switch-text {

    margin-top: 32px !important;

    margin-bottom: 0 !important;

}


/* =========================================================
   LOGIN SWITCH POSITION
   AFTER LOGIN OPTIONS
   ========================================================= */

.tsg-login-box .tsg-switch-text {

    margin-top: 32px !important;

    margin-bottom: 0 !important;

}


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

@media (max-width: 767px) {

    .tsg-login-register-wrapper {

        margin: 0px auto 55px;

        padding: 0 15px;

    }


    .tsg-login-box,
    .tsg-register-box {

        padding: 35px 24px 38px;

        border-radius: 11px;

    }


    .tsg-auth-title {

        margin-bottom: 30px;

        font-size: 28px;

    }


    .tsg-form-row {

        margin-bottom: 21px !important;

    }


    .tsg-form-row input.input-text {

        height: 53px;

    }


    .tsg-login-button,
    .tsg-register-button {

        height: 53px;

    }


    /* -----------------------------------------------------
       LOGIN OPTIONS
       STILL ONE ROW ON MOBILE
       ----------------------------------------------------- */

    .tsg-login-options {

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 10px;

        width: 100%;

        white-space: nowrap;

    }


    .tsg-remember-me {

        flex: 1 1 auto;

        min-width: 0;

        font-size: 13px;

        white-space: nowrap;

    }


    .tsg-forgot-password {

        flex: 0 0 auto;

        font-size: 13px;

        white-space: nowrap;

    }


    /* -----------------------------------------------------
       SWITCH TEXT
       ALWAYS ONE CENTERED LINE
       ----------------------------------------------------- */

    .tsg-switch-text {

        display: flex !important;

        flex-direction: row !important;

        justify-content: center !important;

        align-items: center !important;

        flex-wrap: nowrap !important;

        width: 100%;

        white-space: nowrap;

        text-align: center !important;

        margin-top: 28px !important;

    }


    .tsg-switch-text p,
    .tsg-switch-link {

        font-size: 13px;

        line-height: 1.5;

    }


    .tsg-switch-link {

        margin-left: 4px !important;

    }

}


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

@media (max-width: 480px) {

    .tsg-login-box,
    .tsg-register-box {

        padding: 30px 19px 32px;

    }


    .tsg-auth-title {

        font-size: 26px;

    }


    /* -----------------------------------------------------
       KEEP REMEMBER + FORGOT ON SAME ROW
       EVEN ON SMALL PHONES
       ----------------------------------------------------- */

    .tsg-login-options {

        flex-direction: row !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 6px;

        white-space: nowrap;

    }


    .tsg-remember-me {

        font-size: 12px;

        gap: 6px;

    }


    .tsg-remember-me input[type="checkbox"] {

        width: 16px;

        height: 16px;

        min-width: 16px;

    }


    .tsg-forgot-password {

        font-size: 12px;

    }


    /* -----------------------------------------------------
       KEEP SWITCH TEXT + LINK ON ONE LINE
       ----------------------------------------------------- */

    .tsg-switch-text {

        display: flex !important;

        flex-direction: row !important;

        justify-content: center !important;

        align-items: center !important;

        flex-wrap: nowrap !important;

        white-space: nowrap;

        margin-top: 26px !important;

    }


    .tsg-switch-text p,
    .tsg-switch-link {

        font-size: 12px;

        line-height: 1.5;

    }


    .tsg-switch-link {

        margin-left: 4px !important;

    }

}

/* =========================================================
   TSG - Hide WooCommerce's duplicate password toggle
   ========================================================= */

.tsg-password-wrapper .show-password-input {
    display: none !important;
}

/* =========================================================
   MY ACCOUNT BANNER
   Show only for logged-in users
   ========================================================= */

body:not(.logged-in) .elementor-element-0e916b3 {
    display: none !important;
}


/* =========================================================
   GOOGLE LOGIN
   ========================================================= */

.tsg-google-login {
    width: 100%;
    margin: 0 0 22px !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.tsg-google-login .nsl-container {
    width: auto !important;
    margin: 0 auto !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.tsg-google-login .nsl-container-block {
    width: auto !important;
    margin: 0 auto !important;
}

.tsg-google-login a {
    width: auto !important;
}


/* =========================================================
   GOOGLE / EMAIL DIVIDER
   ========================================================= */

.tsg-login-divider {
    display: flex !important;
    align-items: center !important;
    width: 100%;
    margin: 4px 0 28px !important;
    color: #9a8d84;
    font-size: 12px;
    letter-spacing: 1.5px;
}

.tsg-login-divider::before,
.tsg-login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e8dfd8;
}

.tsg-login-divider span {
    margin: 0 15px;
    color: #9a8d84;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
}


/* =========================================================
   GOOGLE LOGIN
   ========================================================= */

.tsg-google-register {
    width: 100%;
    margin: 0 0 22px !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.tsg-google-register .nsl-container {
    width: auto !important;
    margin: 0 auto !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.tsg-google-register .nsl-container-block {
    width: auto !important;
    margin: 0 auto !important;
}

.tsg-google-register a {
    width: auto !important;
}


/* =========================================================
   GOOGLE / EMAIL DIVIDER
   ========================================================= */

.tsg-register-divider {
    display: flex !important;
    align-items: center !important;
    width: 100%;
    margin: 4px 0 28px !important;
    color: #9a8d84;
    font-size: 12px;
    letter-spacing: 1.5px;
}

.tsg-register-divider::before,
.tsg-register-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e8dfd8;
}

.tsg-register-divider span {
    margin: 0 15px;
    color: #9a8d84;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
}