/* ===== Login Page Styles ===== */

/* Main Login Page Container */
.login-page .login-wrapper {
    padding: 32px 64px;
    height: 100%;
    position: relative;
}

.login-page .login-wrapper .login-heading {
    margin-bottom: 6px;
}

/* Content Styles */
.login-page .login-wrapper .content h1 {
    color: #135c0e;
    text-align: right;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
}

.login-page .login-wrapper .content>p {
    color: #00030a;
    text-align: right;
    font-size: 16px;
    font-weight: 400;
}

.login-page .login-wrapper .content label {
    color: #080808;
    text-align: right;
    font-size: 16px;
    font-weight: 600;
    display: block;
}

/* Form Input Styles */
.login-page .login-wrapper .content input[type="email"],
.login-page .login-wrapper .content input[type="number"],
.login-page .login-wrapper .content input[type="password"],
.login-page .login-wrapper .content input[type="tel"],
.login-page .login-wrapper .content input[type="text"] {
    border-radius: var(--br-10);
    border: 1px solid #b7b7b7;
    padding: 10px 32px;
    display: block;
    width: 100%;
    color: #b7b7b7;
    text-align: right;
    font-size: 14px;
    font-weight: 500;
    font-family: iranyekan, Serif !important;
    margin-top: 15px;
}

/* Authentication Group Inputs */
.login-page .login-wrapper .content .med-authenticate-gp input[type="number"],
.login-page .login-wrapper .content .med-authenticate-gp input[type="tel"],
.login-page .login-wrapper .content .med-authenticate-gp input[type="text"] {
    display: inline-block !important;
    width: 15vw !important;
    height: 15vw;
    text-align: center;
    padding: 4px !important;
}

/* Background Wrapper */
.login-page .bg-wrapper {
    background: url("/wp-content/themes/vertuka/assets/images/login-page-img.webp") left/contain no-repeat fixed;
    position: relative;
    overflow: hidden;
    min-height: 100dvh;
}

/* Version Box */
.login-page .version {
    padding: 28px 24px 20px;
    border-radius: 24px;
    background: #fff;
}

.login-page .version .number {
    background: #b3b3b3;
    padding: 5px 19px;
    border-radius: 46px;
}

/* Your Shop Box */
.login-page .yourshop {
    background: #000a23;
    padding: 28px 24px 20px;
    border-radius: 24px;
}

/* Product Item */
.login-page .product-item .img-box>img {
    max-height: 145px;
}

/* Agreement Privacy */
.login-page .login-wrapper .agreement-privacy {
    position: fixed;
    bottom: 0;
    right: 25px;
    left: 25px;
    color: #6a6a6a;
    text-align: right;
    font-size: 14px;
    font-weight: 300;
    line-height: 30px;
    /* background: rgba(255, 255, 255, 0.95); */
    padding: 10px 0;
    /* backdrop-filter: blur(5px); */
    z-index: 1000;
}

/* Form Submit Button */
.login-wrapper .med-form-container input[type="submit"] {
    border-radius: var(--br-10);
    background: #1f9a17;
    font-family: iranyekan, Serif !important;
    color: #fff !important;
}

/* Form Group */
.login-wrapper p.form-group {
    margin-bottom: 32px !important;
}

/* Form Container */
.login-page .med-form-container {
    width: 100%;
}

/* Edit Button */
.med-form-container .edit-button {
    border-radius: var(--br-10) !important;
}

/* Agreement Privacy Brand */
.login-page .login-wrapper .agreement-privacy .brand {
    color: #080808;
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
    text-decoration-line: underline;
}

/* Promotion Text */
.login-page .promotion-text h2 {
    color: #fff;
    text-align: center;
    font-size: 36px;
    font-weight: 600;
}

.login-page .promotion-text p {
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
}

/* Main Wrapper */
.login-page .main-wrapper {
    width: 100%;
}

/* Hidden Form Fields */
#signupform #password {
    display: none;
}

#signupform #email {
    display: none;
}

/* Resend Code Button */
#resend-code {
    width: 48%;
    float: right;
}

/* Login Submit Button */
.login-wrapper .med-form-container input[name="med_rp_login_submit"] {
    width: 48%;
    float: right;
}

/* Register Submit Button */
.login-wrapper .med-form-container input[name="med_rp_register_submit"] {
    width: 48%;
    float: right;
}

/* Edit Button */
.med-form-container .edit-button {
    width: 48%;
    float: left;
}

/* Submit Button Margins */
.login-wrapper .med-form-container input[name="med_rp_login_submit"] {
    margin-top: 7px;
}

.login-wrapper .med-form-container input[name="med_rp_register_submit"] {
    margin-top: 7px;
}

/* ===== Responsive Styles ===== */

/* Mobile Styles */
@media only screen and (max-width: 1024px) {
    .login-page .login-wrapper {
        padding: 32px 24px;
        height: 90vh;
        position: relative;
    }

    .register-button {
        width: 48% !important;
        float: right;
    }

    .button.secondary.d-block.w-100.register-or-login-button {
        width: 48% !important;
        float: left;
        padding: 9px 2px !important;
    }

    .med-form-container .edit-button {
        margin-top: 7px !important;
        padding: 12px 2px !important;
    }

    .content {
        padding-top: 30px;
    }

    .login-wrapper .med-form-container input[type="submit"] {
        font-size: 14px !important;
    }

    .login-page .login-wrapper .agreement-privacy {
        font-size: 14px;
        bottom: 0;
        right: 15px;
        left: 15px;
    }

    .login-page .login-wrapper .agreement-privacy .brand {
        font-size: 14px;
    }

    .register-or-login-button {
        font-size: 14px !important;
    }

    #resend-code {
        margin-bottom: 14px !important;
    }

    .form-row.med-authenticate-box.my-3 {
        margin-bottom: 30px !important;
    }

    .edit-button {
        margin-top: -8px !important;
    }

    .counter-box {
        margin-top: 0.5rem;
    }

    .bg-wrapper-login {
        display: none;
    }
}

/* Desktop Styles */
@media only screen and (min-width: 1023px) {
    .d-flex-or-not {
        display: flex;
    }

    .login-page .login-wrapper .agreement-privacy .brand {
        font-size: 16px;
    }

    .login-page .login-wrapper .agreement-privacy {
        bottom: 0;
        font-size: 14px;
        right: 25px;
        left: 25px;
    }

    .login-page .main-wrapper {
        width: 50%;
    }

    .login-page .login-wrapper {
        padding: 32px 64px;
        height: 100%;
    }

    .login-page .login-wrapper .content .med-authenticate-gp input[type="number"],
    .login-page .login-wrapper .content .med-authenticate-gp input[type="tel"],
    .login-page .login-wrapper .content .med-authenticate-gp input[type="text"] {
        width: 52px !important;
        height: 52px !important;
    }

    .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 79vh;
        box-sizing: border-box;
        padding: 10px 0px 20px 20px;
    }

    .med-form-container .edit-button {
        padding: 11px 13px !important;
    }

    /* .signup-submit {
        margin-top: 1rem !important;
    } */

    .login-wrapper .med-form-container input[type="submit"] {
        font-size: 16px !important;
    }

    .login-page .login-wrapper .agreement-privacy {
        bottom: 0 !important;
    }
}