/* ==============================================================
   EAGLE SPLIT AUTH V6 - EXECUTIVE OVERHAUL
   ============================================================== */

/* 1. DARK BLUR OVERLAY (Background Dimming) */
body.dialog-account-open .woostify-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 999990 !important;
}

/* 2. MODAL SIZING & CENTERING (Reduced to 850px) */
#woostify-login-form-popup,
.woostify-login-popup,
.dialog-popup-content,
.dialog-popup-inner {
    width: 95vw !important;
    max-width: 850px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 auto !important;
    position: fixed !important;
    z-index: 999999 !important;
}

.woostify-login-form-popup-content,
.woocommerce-account .woocommerce {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Improve Close Button */
.dialog-account-close-icon {
    z-index: 9999999 !important;
    background: #fff;
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -15px;
    right: -15px;
    transition: transform 0.2s, background 0.2s;
    cursor: pointer;
}
.dialog-account-close-icon:hover {
    transform: scale(1.1);
    background: #f8fafc;
}
.dialog-account-close-icon svg {
    width: 16px;
    height: 16px;
}

/* 3. NEW CONTAINER */
.eagle-v6-container {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: 850px !important;
    margin: auto !important;
    background: #fff !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
    min-height: 550px !important;
}

/* 4. LEFT PANEL (Reduced to 30%) */
.eagle-v6-left {
    flex: 0 0 30% !important;
    max-width: 30% !important;
    background: #1e5bbd !important;
    position: relative !important;
    padding: 40px 30px !important;
    color: #fff !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.eagle-v6-left::before, .eagle-v6-left::after, .eagle-v6-circle {
    content: '' !important;
    position: absolute !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #2b70d8, #184ea6) !important;
}
.eagle-v6-left::before { width: 250px !important; height: 250px !important; top: -100px !important; left: -100px !important; }
.eagle-v6-left::after { width: 150px !important; height: 150px !important; bottom: -50px !important; right: -50px !important; z-index: 1 !important; }
.eagle-v6-circle { width: 100px !important; height: 100px !important; bottom: 80px !important; left: -30px !important; }

.eagle-v6-left-content { position: relative !important; z-index: 2 !important; }
.eagle-v6-left-content h2 { font-size: 28px !important; font-weight: 800 !important; margin-bottom: 8px !important; color: #fff !important; text-transform: uppercase !important; letter-spacing: 1.5px !important;}
.eagle-v6-left-content h3 { font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; margin-bottom: 20px !important; color: #a4c6f5 !important; letter-spacing: 1px !important;}
.eagle-v6-left-content p { font-size: 13px !important; line-height: 1.6 !important; color: #e2e8f0 !important; }

/* 5. RIGHT PANEL (Increased to 70%) */
.eagle-v6-right {
    flex: 0 0 70% !important;
    max-width: 70% !important;
    width: 70% !important;
    padding: 45px 55px !important;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    max-height: 85vh; /* Ensure no clipping on short screens */
}

/* Strip native styles completely */
.eagle-v6-form,
.woocommerce-form.woocommerce-form-login,
.woocommerce-form.woocommerce-form-register {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    clear: none !important;
}

.eagle-v6-form { display: none !important; animation: fadeUp 0.4s ease !important; }
.eagle-v6-form.active { display: block !important; }

.eagle-v6-right h2 { font-size: 32px !important; font-weight: 700 !important; color: #1a202c !important; margin-bottom: 6px !important; line-height: 1.2 !important; }
.eagle-v6-right .subtitle { font-size: 14px !important; color: #4a5568 !important; margin-bottom: 25px !important; }

/* 6. FORM FIELDS (52px Height, Labels above inputs) */
.eagle-v6-grid { display: flex !important; gap: 20px !important; }
.eagle-v6-grid .eagle-input-wrapper { flex: 1 !important; }

.eagle-input-wrapper {
    margin-bottom: 18px !important;
    width: 100% !important;
}

.eagle-input-wrapper label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #2d3748 !important;
    margin-bottom: 8px !important;
}

.eagle-input-group {
    position: relative !important;
    width: 100% !important;
}
.eagle-input-group svg {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    color: #718096 !important;
    pointer-events: none !important;
}
.eagle-input-group input.eagle-v6-input {
    width: 100% !important;
    height: 52px !important;
    padding: 0 16px 0 48px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 16px !important; /* Larger text */
    color: #1a202c !important;
    outline: none !important;
    transition: all 0.3s !important;
    box-sizing: border-box !important;
}
.eagle-input-group input.eagle-v6-input::placeholder { color: #a0aec0 !important; font-weight: 400 !important; }
.eagle-input-group input.eagle-v6-input:focus {
    background: #fff !important;
    border-color: #3182ce !important;
    box-shadow: 0 0 0 3px rgba(49,130,206,0.15) !important;
}

/* SHOW PASSWORD EYE BUTTON */
.eagle-show-pass {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    padding: 6px !important;
    color: #718096 !important;
    transition: color 0.2s !important;
}
.eagle-show-pass:hover { color: #2b6cb0 !important; }
.eagle-show-pass .eye-icon { position: static !important; width: 22px !important; height: 22px !important; transform: none !important; pointer-events: auto !important; }

/* 7. ACTIONS & BUTTON */
.eagle-actions-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 25px !important;
    margin-top: -5px !important;
}
.eagle-checkbox-label { display: flex !important; align-items: center !important; gap: 8px !important; color: #4a5568 !important; font-size: 14px !important; cursor:pointer !important;}
.eagle-checkbox-label input { width: 16px !important; height: 16px !important; margin: 0 !important; }
.eagle-forgot-link { color: #2b6cb0 !important; font-weight: 600 !important; text-decoration: none !important; font-size: 14px !important; }

.eagle-btn-primary {
    width: 100% !important;
    height: 54px !important;
    background: #1e5bbd !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 12px rgba(30,91,189,0.3) !important;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s !important;
    letter-spacing: 0.5px !important;
}
.eagle-btn-primary:hover {
    background: #15489c !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(30,91,189,0.4) !important;
}

/* 8. TRUST SIGNALS & PASSWORD RULES */
.eagle-trust-signals {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
    font-size: 12px !important;
    color: #48bb78 !important;
    font-weight: 600 !important;
}

.eagle-password-rules {
    display: flex !important;
    gap: 15px !important;
    margin-bottom: 15px !important;
    margin-top: -10px !important;
    font-size: 12px !important;
    color: #e53e3e !important;
    font-weight: 500 !important;
}
.eagle-password-rules span.valid { color: #48bb78 !important; }

/* 9. SOCIAL LOGIN */
.eagle-social-divider {
    text-align: center !important;
    position: relative !important;
    margin: 25px 0 20px 0 !important;
}
.eagle-social-divider::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: #e2e8f0 !important;
    z-index: 1 !important;
}
.eagle-social-divider span {
    background: #fff !important;
    padding: 0 15px !important;
    color: #a0aec0 !important;
    font-size: 13px !important;
    position: relative !important;
    z-index: 2 !important;
}

.eagle-social-buttons {
    display: flex !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
}
.eagle-social-btn {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    height: 46px !important;
    background: #fff !important;
    border: 1px solid #cbd5e0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}
.eagle-social-btn:hover { background: #f8fafc !important; }
.eagle-social-btn img { width: 18px !important; height: 18px !important; }

/* Switch Mode */
.eagle-switch-mode { text-align: center !important; font-size: 15px !important; color: #4a5568 !important; margin-top: 15px !important; }
.eagle-switch-mode a { color: #1e5bbd !important; font-weight: 700 !important; cursor: pointer !important; text-decoration: underline !important; }

/* WooCommerce Privacy Link Override */
.woocommerce-privacy-policy-text { font-size: 13px !important; color: #4a5568 !important; text-align: center !important; margin-bottom: 15px !important; line-height: 1.5 !important; }
.woocommerce-privacy-policy-text a { color: #2b6cb0 !important; font-weight: 600 !important; text-decoration: underline !important; }

/* 10. MOBILE OPTIMIZATION */
@media (max-width: 900px) {
    #woostify-login-form-popup, .dialog-popup-content, .woostify-login-popup { 
        width: 100vw !important; 
        max-width: 100vw !important; 
        height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    .eagle-v6-container { 
        flex-direction: column !important; 
        border-radius: 0 !important; 
        margin: 0 !important; 
        box-shadow: none !important; 
        height: 100% !important;
        overflow-y: auto !important;
    }
    
    /* Completely hide blue panel on mobile to save space */
    .eagle-v6-left { display: none !important; }
    
    .eagle-v6-right { 
        flex: 1 1 100% !important; 
        max-width: 100% !important; 
        width: 100% !important; 
        padding: 30px 20px !important; 
        max-height: none !important;
    }
    
    .eagle-v6-grid { flex-direction: column !important; gap: 0 !important; }
    .eagle-input-wrapper { margin-bottom: 15px !important; }
    
    .eagle-social-buttons { flex-direction: column !important; gap: 10px !important; }
    
    .dialog-account-close-icon {
        top: 10px !important;
        right: 10px !important;
        background: rgba(0,0,0,0.05);
    }
}