/**
 * OptimalProtech Login Security - Formulaires et reCAPTCHA
 */

/* === CONTENEUR DU CAPTCHA === */

.g-recaptcha > div {
    display: flex;
    justify-content: center;
}

/* === FORCER LE CENTRAGE DU MODAL reCAPTCHA === */
div[style*="position: absolute"][style*="z-index: 2000000000"] {
    left: 50% !important;
    right: auto !important;
    margin-left: -200px !important;
    transition: opacity 0.3s ease !important;
    overflow-y: auto !important;
    max-height: 100vh !important;
}

/* === ANIMATION DE FERMETURE === */
div[style*="position: absolute"][style*="z-index: 2000000000"].closing {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* === FORMULAIRES AJAX === */
.ajax-login-form,
.ajax-register-form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.ajax-login-form p,
.ajax-register-form p {
    margin: 15px 0;
    text-align: center;
}

.ajax-login-form input[type="text"],
.ajax-login-form input[type="email"],
.ajax-login-form input[type="password"],
.ajax-register-form input[type="text"],
.ajax-register-form input[type="email"],
.ajax-register-form input[type="password"] {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

/* === MESSAGES === */
.login-message,
.register-message {
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    text-align: center;
}

.login-message.error,
.register-message.error {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ef5350;
}

.login-message.msg,
.register-message.msg {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #66bb6a;
}

/* === RESPONSIVE MOBILE === */
@media (max-width: 480px) {
    .ajax-login-form,
    .ajax-register-form {
        padding: 15px;
        /* Amélioration du scroll sur mobile */
        -webkit-overflow-scrolling: touch;
        overflow: visible;
    }
    
    .ajax-login-form input[type="text"],
    .ajax-login-form input[type="email"],
    .ajax-login-form input[type="password"],
    .ajax-register-form input[type="text"],
    .ajax-register-form input[type="email"],
    .ajax-register-form input[type="password"] {
        font-size: 16px;
        /* Évite le zoom automatique sur iOS */
        line-height: 1.618;
    }
    
    .g-recaptcha {
        overflow-x: hidden;
        justify-content: center;
    }
    
    /* Support du scroll pour les conteneurs parent */
    .mini-connection-container .ajax-login-form,
    .mini-connection-container .ajax-register-form {
        overflow: visible;
        max-width: 100%;
        touch-action: manipulation;
      
    }
     .mini-connection-container .ajax-register-form {
       
        height: 80vh;
    }

}
   

/* === FORMULAIRES AJAX === */
.ajax-login-form,
.ajax-register-form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.ajax-login-form p,
.ajax-register-form p {
    margin: 15px 0;
}

.ajax-login-form input[type="text"],
.ajax-login-form input[type="email"],
.ajax-login-form input[type="password"],
.ajax-register-form input[type="text"],
.ajax-register-form input[type="email"],
.ajax-register-form input[type="password"] {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

/* === MESSAGES === */
.login-message,
.register-message {
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    text-align: center;
}

.login-message.error,
.register-message.error {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ef5350;
}

.login-message.msg,
.register-message.msg {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #66bb6a;
}

/* === RESPONSIVE MOBILE === */
@media (max-width: 480px) {
    .ajax-login-form,
    .ajax-register-form {
        padding: 15px;
    }
    
    .ajax-login-form input[type="text"],
    .ajax-login-form input[type="email"],
    .ajax-login-form input[type="password"],
    .ajax-register-form input[type="text"],
    .ajax-register-form input[type="email"],
    .ajax-register-form input[type="password"] {
        font-size: 16px; /* Évite le zoom automatique sur iOS */
    }
}