/* ============================================================
   FlatCaptcha — Feuille de style
   Utilise exclusivement les variables CSS Bootstrap 5 / Flatboard
   pour être automatiquement uniforme au thème (clair, sombre,
   ou tout thème custom) sans aucune surcharge manuelle.
   ============================================================ */

/* ─── Conteneur principal ──────────────────────────────────── */
.flatcaptcha-container {
    margin: 1rem 0;
    padding: 0;
}

/* ─── Widget rendu ─────────────────────────────────────────── */
.flatcaptcha-widget {
    background:    var(--bs-tertiary-bg, var(--bs-light, #f8f9fa));
    border:        1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem);
    padding:       1rem 1.25rem;
    color:         var(--bs-body-color);
}

/* ─── Label ────────────────────────────────────────────────── */
.flatcaptcha-label {
    display:        block;
    font-size:      .8rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:          var(--bs-secondary-color, var(--bs-secondary, #6c757d));
    margin-bottom:  .5rem;
}

/* ─── Question ─────────────────────────────────────────────── */
.flatcaptcha-question {
    font-size:   1.05rem;
    font-weight: 600;
    color:       var(--bs-emphasis-color, var(--bs-body-color));
    margin:      0 0 .75rem;
    line-height: 1.4;
}

/* ─── Rangée input + bouton refresh ───────────────────────── */
.flatcaptcha-input-row {
    display:     flex;
    align-items: center;
    gap:         .5rem;
}

/* ─── Champ de réponse ─────────────────────────────────────── */
.flatcaptcha-answer {
    flex:             1;
    min-width:        0;
    max-width:        260px;
    font-size:        1rem;
    font-weight:      500;
    letter-spacing:   .05em;
    background-color: var(--bs-body-bg)        !important;
    color:            var(--bs-body-color)      !important;
    border:           1px solid var(--bs-border-color, #dee2e6) !important;
    border-radius:    var(--bs-border-radius, .375rem);
    padding:          .375rem .75rem;
    line-height:      1.5;
    transition:       border-color .15s, box-shadow .15s;
}

.flatcaptcha-answer::placeholder {
    color:   var(--bs-secondary-color, #6c757d);
    opacity: 1;
}

.flatcaptcha-answer:focus {
    outline:      none;
    border-color: var(--bs-primary, #0d6efd) !important;
    box-shadow:   0 0 0 .25rem rgba(var(--bs-primary-rgb, 13,110,253), .25);
}

/* ─── Bouton refresh ───────────────────────────────────────── */
.flatcaptcha-refresh-btn {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           2rem;
    height:          2rem;
    background:      transparent;
    border:          1px solid var(--bs-border-color, #dee2e6);
    border-radius:   50%;
    cursor:          pointer;
    color:           var(--bs-secondary-color, #6c757d);
    padding:         0;
    transition:      color .2s, border-color .2s, transform .35s ease-in-out;
    line-height:     1;
}

.flatcaptcha-refresh-btn:hover {
    color:         var(--bs-primary, #0d6efd);
    border-color:  var(--bs-primary, #0d6efd);
    background:    transparent;
}

.flatcaptcha-refresh-btn:active {
    transform: rotate(180deg);
}

.flatcaptcha-refresh-btn:focus-visible {
    outline:        2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

/* ─── Spinner de chargement ────────────────────────────────── */
.flatcaptcha-loading {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    padding:     .75rem 0;
    font-size:   .9rem;
    color:       var(--bs-secondary-color, #6c757d);
}

.flatcaptcha-spinner {
    display:      inline-block;
    width:        1rem;
    height:       1rem;
    border:       2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation:    flatcaptcha-spin .7s linear infinite;
    flex-shrink:  0;
}

@keyframes flatcaptcha-spin {
    to { transform: rotate(360deg); }
}

/* ─── Feedback ─────────────────────────────────────────────── */
.flatcaptcha-feedback {
    margin-top: .5rem;
    font-size:  .875rem;
    min-height: 1.2em;
}

.flatcaptcha-feedback.flatcaptcha-ok {
    color:       var(--bs-success, #198754);
    font-weight: 500;
}

.flatcaptcha-feedback.flatcaptcha-error {
    color:       var(--bs-danger, #dc3545);
    font-weight: 500;
}

/* ─── Bouton retry (erreur réseau) ─────────────────────────── */
.flatcaptcha-retry-btn {
    margin-top:   .5rem;
    color:        var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    background:   transparent;
}
.flatcaptcha-retry-btn:hover {
    background: var(--bs-primary, #0d6efd);
    color:      #fff;
}