/*
 * PAY SARAL - FINAL STYLING SHEET
 *
 * This CSS implements a responsive 50/50 split-screen layout (col-lg-6/6).
 */

/* =========================================
   0. GLOBAL & BASE STYLES
   ========================================= */
body {
    font-family: 'Poppins', sans-serif; 
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
}
a { text-decoration: none; }
.text-teal { color: #009688 !important; }

/* =========================================
   1. MAIN WRAPPER (FULL WIDTH 50/50 LAYOUT)
   ========================================= */
.login-wrapper {
    min-height: 100vh;
    width: 100%;
    margin: 0; 
    box-shadow: none; 
    overflow-x: hidden; 
}

/* 2. LEFT SIDE (BRANDING) - col-lg-6 (50%) */
.login-left {
    background: linear-gradient(135deg, #002b26 0%, #004d40 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 60px 80px; 
    text-align: left; 
    min-height: 100vh; 
    overflow-y: auto; 
}
.login-left::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(rgba(255,255,255,0.05) 2px, transparent 2px); background-size: 30px 30px; opacity: 0.6; }
.brand-content-fix { position: relative; z-index: 2; max-width: 500px; }
/* Logo position on desktop */
.login-logo-fixed { position: absolute; top: 40px; left: 40px; z-index: 10; } 
.main-logo { height: 50px; width: auto; object-fit: contain; }

/* A. TRUST BADGES LAYOUT */
.trust-badges-container { padding-bottom: 10px; position: relative; z-index: 2; margin-top: 20px; }
.trust-badges-top-row { display: flex; gap: 15px; margin-bottom: 15px; }
.trust-badges-top-row .badge-item { flex: 1 1 0; text-align: center; }
.badge-item { background: rgba(255,255,255,0.1); padding: 10px 15px; border-radius: 30px; font-size: 14px; font-weight: 600; border: 1px solid rgba(255,255,255,0.1); }
.badge-highlight { 
    width: 100%; 
    display: flex;
    justify-content: center; 
    align-items: center;
    background: #ffeb3b !important; 
    color: #004d40 !important; 
    font-weight: 700 !important; 
    border: 1px solid #ffca28 !important;
    box-shadow: 0 0 15px rgba(255, 235, 59, 0.5); 
}


/* 3. RIGHT SIDE (FORM AREA - col-lg-6) */
.login-right {
    background: #ffffff;
    display: flex;
    align-items: flex-start; 
    justify-content: center;
    padding: 100px 60px 60px 60px; 
    min-height: 100vh; 
    overflow-y: auto; 
}
.login-form-box { width: 100%; max-width: 420px; }


/* =========================================
   4. INPUT & BUTTONS (UNIVERSAL PREMIUM STYLES)
   ========================================= */
.form-control, .form-floating .form-control { background-color: #f7f9fb !important; border: 2px solid #e0e6ed !important; border-radius: 8px !important; font-weight: 500 !important; color: #333 !important; transition: all 0.3s ease !important; height: auto; }
.form-control:focus, .form-floating .form-control:focus { background-color: #ffffff !important; border-color: #009688 !important; box-shadow: 0 0 0 5px rgba(0, 150, 136, 0.3) !important; }
.form-floating .form-control { height: 50px !important; padding-top: 1.625rem !important; padding-bottom: 0.625rem !important; }
.form-floating label { color: #6c757d !important; font-weight: 500 !important; padding-left: 15px !important; }
.password-toggle { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #999; z-index: 10; }
.btn-login { background: #004d40; color: white; border-radius: 12px; padding: 14px; font-weight: 700; font-size: 16px; border: none; transition: 0.3s; }
.btn-login:hover { background: #002b26 !important; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 77, 64, 0.2); color: #ffffff !important; }
.form-check-input:checked { background-color: #009688 !important; border-color: #009688 !important; }


/* =========================================
   5. REGISTRATION PAGE (MULTI-STEP PREMIUM STYLES)
   ========================================= */
.login-wrapper:has(.registration-form-box) .login-form-box { max-width: 650px !important; }
.form-step { background: #ffffff; padding: 30px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); border: 1px solid #f0f0f0; margin-top: 20px; animation: fadeInStep 0.5s ease-out; }
.form-step h5 { color: #004d40 !important; font-size: 18px; font-weight: 700; padding-bottom: 8px; border-bottom: 2px solid #009688; display: inline-block; }
.progress { background-color: #e0f2f1; border-radius: 50px; height: 8px !important; }
.progress-bar { background-color: #009688 !important; border-radius: 50px; }
.btn-prev { background-color: #dee2e6 !important; color: #333 !important; border: none !important; border-radius: 50px !important; padding: 10px 20px !important; font-weight: 600 !important; transition: all 0.3s ease; }
.btn-prev:hover { background-color: #004d40 !important; color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 77, 64, 0.2); }
.form-step .btn-login { border-radius: 50px !important; padding: 10px 20px !important; }
.registration-form-box .row > [class*='col-'] { margin-bottom: 12px !important; }


/* 6. MOBILE VIEW FIXES (RESPONSIVE) */

@media (max-width: 992px) {
    /* Mobile: Both sides take 100% width, height is auto */
    .login-wrapper { height: auto; overflow-x: hidden; }

    /* Left Side Fixes: Logo Top-Left, Content Centered */
    .login-left {
        min-height: auto; 
        padding: 80px 40px 40px 40px !important; 
        display: flex !important;
        flex-direction: column !important;
        /* 👇 FIX 1: पूरे सेक्शन को Top-Left से शुरू करें (लोगो के लिए) */
        align-items: flex-start !important; 
        text-align: left !important; 
    }
    /* Logo Position (Top Left) */
    .login-logo-fixed { 
        position: absolute !important; 
        top: 20px !important; 
        left: 20px !important; 
		z-index: 100;
        margin: 0 !important; /* Logo Top Left */
    }
    
    /* 👇 FIX 2: Content Centering (Text and Badges) */
    .brand-content-fix { 
        /* बाकी कंटेंट को सेंटर करने के लिए इसे 100% चौड़ाई दें */
        width: 100%;
        text-align: left !important;
        margin-top: 25px !important;		
    }
    
    /* Text alignment within brand-content-fix */
    .brand-content-fix p {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100%;
		text-align: left !important;
    }
    
    /* Trust badges rows को भी सेंटर करें */
    .trust-badges-top-row { justify-content: flex-start !important; }
    .badge-highlight { margin-left: 0 !important; margin-right: auto !important; }
    .badge-item { padding: 8px 15px; }


    /* Right Side Fixes (Form) */
    .login-right {
        min-height: auto;
        padding: 30px 15px 80px 15px !important; 
    }
    
    /* Form Box Styles Reset */
    .login-form-box, .registration-form-box {
        box-shadow: none !important; 
        border: none !important; 
        padding: 0 !important; 
    }
}