/* ===================================================================
   WPUM reCAPTCHA v2 — frontend.css
   Mise en forme du widget reCAPTCHA dans les formulaires WPUM.
=================================================================== */

/* ── Conteneur du widget ─────────────────────────────────────── */
.wpumrc-widget-wrap {
    margin: 16px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
}

/* ── Centrage optionnel ──────────────────────────────────────── */
.wpumrc-widget-wrap .g-recaptcha {
    display: inline-block;
}

/* ── Responsive : réduire sur très petits écrans ─────────────── */
@media (max-width: 360px) {
    .wpumrc-widget-wrap .g-recaptcha {
        -webkit-transform: scale(0.9);
        -ms-transform:     scale(0.9);
        transform:         scale(0.9);
        -webkit-transform-origin: 0 0;
        -ms-transform-origin:     0 0;
        transform-origin:         0 0;
    }
}

/* ── Message d'erreur reCAPTCHA ──────────────────────────────── */
.wpumrc-error {
    color: #dc2626;
    font-size: 13px;
    margin-top: 6px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 6px;
}

/* ── Séparateur visuel au-dessus du widget ───────────────────── */
.wpumrc-widget-wrap::before {
    content: '';
    display: block;
    height: 1px;
    background: #e2e8f0;
    margin-bottom: 8px;
}

/* ── Animation shake (reCAPTCHA non validé) ──────────────────── */
@-webkit-keyframes wpumrc-shake {
    0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); }
    20%       { -webkit-transform: translateX(-8px); transform: translateX(-8px); }
    40%       { -webkit-transform: translateX(8px); transform: translateX(8px); }
    60%       { -webkit-transform: translateX(-5px); transform: translateX(-5px); }
    80%       { -webkit-transform: translateX(5px); transform: translateX(5px); }
}
@keyframes wpumrc-shake {
    0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); }
    20%       { -webkit-transform: translateX(-8px); transform: translateX(-8px); }
    40%       { -webkit-transform: translateX(8px); transform: translateX(8px); }
    60%       { -webkit-transform: translateX(-5px); transform: translateX(-5px); }
    80%       { -webkit-transform: translateX(5px); transform: translateX(5px); }
}

.wpumrc-shake {
    -webkit-animation: wpumrc-shake 0.6s ease;
    animation: wpumrc-shake 0.6s ease;
}