.elementor-12885 .elementor-element.elementor-element-54e03c3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-12885 .elementor-element.elementor-element-4af564f .elementor-button{background-color:#005CFF;font-family:"Roboto", Sans-serif;font-size:54px;font-weight:500;}.elementor-12885 .elementor-element.elementor-element-4af564f .elementor-button-content-wrapper{flex-direction:row;}#elementor-popup-modal-12885{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-12885 .dialog-message{width:812px;height:auto;}#elementor-popup-modal-12885 .dialog-close-button{display:flex;}#elementor-popup-modal-12885 .dialog-widget-content{box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}@media(max-width:767px){.elementor-12885 .elementor-element.elementor-element-54e03c3{--min-height:76px;}.elementor-12885 .elementor-element.elementor-element-4af564f .elementor-button{font-size:28px;}.elementor-12885 .elementor-element.elementor-element-1932f07 > .elementor-widget-container{margin:-19px 0px 0px 0px;}#elementor-popup-modal-12885 .dialog-message{width:330px;}#elementor-popup-modal-12885{justify-content:flex-start;}#elementor-popup-modal-12885 .dialog-close-button{top:0%;font-size:28px;}body:not(.rtl) #elementor-popup-modal-12885 .dialog-close-button{right:0%;}body.rtl #elementor-popup-modal-12885 .dialog-close-button{left:0%;}}/* Start custom CSS for shortcode, class: .elementor-element-1932f07 *//* =========================================
   1. FIX THE GREEN BLOCKS (GLITCH FIX)
   ========================================= */
/* This removes the background from the password toggle button */
.woocommerce-form-login .show-password-input,
.woocommerce-form-register .show-password-input {
    background-color: transparent !important;
    color: #333; /* Make the 'eye' icon dark */
    top: 15px; /* Adjust vertical position */
    right: 15px;
} 

/* If the green block is a separate empty element, hide it */
.woocommerce form .form-row span.password-input-background {
    display: none !important;
}

/* =========================================
   2. PC MOD (DESKTOP VIEW - Side by Side)
   ========================================= */
@media only screen and (min-width: 992px) {
    /* Make the container a flex row to put items side-by-side */
    .u-columns.col2-set, 
    #customer_login {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between;
        gap: 40px; /* Space between the two columns */
        max-width: 1000px; /* Limit total width */
        margin: 0 auto; /* Center it */
    }

    /* Set each column (Login & Register) to roughly half width */
    .u-column1, .u-column2 {
        width: 48% !important;
        float: none !important; /* Override default floats */
    }

    /* Add a vertical divider line between them */
    .u-column1 {
        border-right: 1px solid #eee;
        padding-right: 40px;
        border-bottom: none !important; /* Remove mobile divider */
    }
}

/* =========================================
   3. TAB MOD (TABLET VIEW)
   ========================================= */
@media only screen and (min-width: 600px) and (max-width: 991px) {
    /* On Tablets, keep them stacked but make them nicer width */
    .u-columns.col2-set, 
    #customer_login {
        max-width: 80%;
        margin: 0 auto;
    }
    
    /* Ensure inputs are easy to tap */
    input.input-text {
        padding: 18px !important;
    }
}

/* =========================================
   4. GENERAL STYLING (Refining your Headers)
   ========================================= */
/* Style the "LOGIN" and "REGISTER" headers */
h2 {
    font-size: 22px;
    font-weight: 700;
    color: #4CAF50; /* Match your App Download button green */
    text-transform: uppercase;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

/* Style the App Download Banner to fit nicely */
.app-download-banner {
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}






/* =========================================
   MOBILE OPTIMIZED CSS (My City Dukaan)
   ========================================= */

/* 1. लेआउट को सीधा (Vertical) रखें - Login ऊपर, Register नीचे */
.u-columns.col2-set, 
#customer_login {
    display: flex;
    flex-direction: column; /* एक के नीचे एक */
    gap: 20px; /* दोनों के बीच गैप */
    padding: 15px;
    width: 100%;
    max-width: 100%;
}

/* 2. Login और Register के बीच में लाइन (Divider) */
.u-column1 {
    border-bottom: 2px dashed #e0e0e0; /* सेपरेशन लाइन */
    padding-bottom: 30px;
    margin-bottom: 20px;
}

/* 3. इनपुट बॉक्स (Mobile Touch Friendly) */
.woocommerce form .form-row input.input-text,
input[type="text"], 
input[type="password"], 
input[type="email"],
input[type="tel"] {
    width: 100%;
    padding: 16px; /* उंगली से टच करने के लिए पर्याप्त जगह */
    font-size: 16px; /* iPhone पर ज़ूम होने से रोकता है */
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 10px; /* गोल कोने */
    background-color: #fff;
    box-sizing: border-box;
}

/* फोकस करने पर हरा बॉर्डर */
input:focus {
    border-color: #4CAF50 !important;
    outline: none;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.2);
}

/* 4. हरे रंग के ब्लॉक (Glitch) को हटाना */
.woocommerce form .form-row {
    background: transparent !important;
}
/* पासवर्ड वाली आंख (Eye Icon) के पीछे का हरा रंग हटाना */
.woocommerce-form-login .show-password-input,
.woocommerce-form-register .show-password-input {
    background-color: transparent !important;
    top: 15px;
    right: 15px;
    color: #666;
}

/* 5. बटन स्टाइल (Full Width Green Button) */
button[name="login"],
button[name="register"] {
    width: 100%; /* पूरा चौड़ा बटन */
    padding: 18px;
    border-radius: 50px; /* कैप्सूल जैसा शेप */
    background: #4CAF50; /* ब्रांड ग्रीन */
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-top: 10px;
}

/* 6. हेडिंग (Heading Styling) */
h2 {
    font-size: 22px;
    color: #333;
    border-bottom: 3px solid #4CAF50;
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 25px;
}

/* 7. लेबल्स (Labels) */
form label {
    font-size: 14px;
    font-weight: 600;
    color: #444;
    margin-bottom: 8px;
    display: block;
}/* End custom CSS */