/* assets/front/css/google-recaptcha.css */

/* Style général pour reCAPTCHA */
.g-recaptcha {
    margin: 10px 0;
    display: inline-block;
}

/* Container pour reCAPTCHA dans newsletter */
.newsletter-recaptcha-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px auto;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
}

/* Style pour reCAPTCHA compact (newsletter) */
.newsletter-recaptcha-container .g-recaptcha {
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

/* Forcer la largeur du reCAPTCHA dans le container newsletter */
.newsletter-recaptcha-container .g-recaptcha[data-size="compact"] {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto;
    display: block;
}

/* Override avec spécificité maximale pour le container newsletter */
.newsletter-recaptcha-container .g-recaptcha .rc-anchor-compact {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto;
    display: block;
}

/* Override pour tous les éléments reCAPTCHA dans le container newsletter */
.newsletter-recaptcha-container .g-recaptcha * {
    max-width: 500px !important;
}

/* Override spécifique pour l'iframe reCAPTCHA */
.newsletter-recaptcha-container .g-recaptcha iframe {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto;
    display: block;
}

/* Container pour reCAPTCHA dans contact */
.contact-recaptcha-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin: 15px 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Style pour reCAPTCHA normal (contact) */
.contact-recaptcha-container .g-recaptcha {
    margin: 0;
    width: 100%;
}

/* Style pour le texte explicatif */
.recaptcha-text {
    font-size: 11px;
    color: #666;
    margin-top: 8px;
    line-height: 1.4;
    text-align: left; /* Aligné à gauche pour contact */
    width: 100%;
    max-width: 100%;
}

/* Style pour le texte explicatif dans contact */
.contact-recaptcha-container .recaptcha-text {
    text-align: left; /* Aligné à gauche */
    margin-top: 8px;
}

.recaptcha-text a {
    color: #4285f4;
    text-decoration: none;
}

.recaptcha-text a:hover {
    text-decoration: underline;
}

/* Style pour newsletter - texte plus grand et à la ligne */
.newsletter-recaptcha-container .recaptcha-text {
    font-size: 12px;
    margin-top: 8px;
    text-align: center;
    max-width: 500px;
    line-height: 1.4;
    white-space: normal;
    word-wrap: break-word;
}

/* Responsive design */
@media (max-width: 768px) {
    .newsletter-recaptcha-container {
        padding: 10px;
        margin: 8px auto;
        width: 100%;
        max-width: 500px; /* Largeur plus grande */
        box-sizing: border-box;
    }
    
    .newsletter-recaptcha-container .recaptcha-text {
        font-size: 11px;
        max-width: 500px; /* Largeur plus grande */
    }
    
    .contact-recaptcha-container {
        padding: 12px;
        margin: 12px 0;
    }
}

/* Style pour thème sombre */
@media (prefers-color-scheme: dark) {
    .recaptcha-text {
        color: #999;
    }
    
    .newsletter-recaptcha-container,
    .contact-recaptcha-container {
        background: rgba(0, 0, 0, 0.1);
        border-color: rgba(255, 255, 255, 0.05);
    }
}

/* Animation pour l'apparition */
.g-recaptcha {
    animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Style pour les messages d'erreur reCAPTCHA */
.recaptcha-error {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
    text-align: center;
}

/* Style pour le badge reCAPTCHA */
.grecaptcha-badge {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.grecaptcha-badge:hover {
    opacity: 1;
}