/**
 * Captcha Mathématique v2 — styles compatibles Cassiopeia / Joomla 6
 * Utilise les variables CSS Cassiopeia Extended (Joomla 6) et bascule
 * automatiquement en mode sombre si le thème l'active.
 */

/* ------------------------------------------------------------------ */
/* Bloc wrapper                                                         */
/* ------------------------------------------------------------------ */
.captchamath-field.control-group {
    margin-bottom: 1.25rem;
}

/* ------------------------------------------------------------------ */
/* Bulle de question                                                    */
/* ------------------------------------------------------------------ */
.captchamath-question {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--cassiopeia-color-primary, #0077b6);
    color: #fff;
    border-radius: 0.5rem;
    padding: 0.45rem 1rem;
    margin-bottom: 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    user-select: none;
    /* Empêche le texte de révéler la réponse dans l'inspector */
    -webkit-touch-callout: none;
}

.captchamath-icon {
    font-size: 1.1em;
    line-height: 1;
}

/* ------------------------------------------------------------------ */
/* Champ de saisie                                                      */
/* ------------------------------------------------------------------ */
.captchamath-input {
    max-width: 120px;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    border: 2px solid #ced4da;
    border-radius: 0.4rem;
    padding: 0.4rem 0.5rem;
    transition: border-color .2s ease, box-shadow .2s ease;
    /* Masquer les boutons spin natifs */
    -moz-appearance: textfield;
}
.captchamath-input::-webkit-outer-spin-button,
.captchamath-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.captchamath-input:focus {
    outline: none;
    border-color: var(--cassiopeia-color-primary, #0077b6);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cassiopeia-color-primary, #0077b6) 25%, transparent);
}

/* ------------------------------------------------------------------ */
/* État d'erreur                                                        */
/* ------------------------------------------------------------------ */
.captchamath-input.captchamath-error {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .2);
    animation: captchamath-shake .35s ease;
}

.captchamath-hint {
    color: #dc3545;
    font-size: .85rem;
    margin-top: .3rem;
}

/* ------------------------------------------------------------------ */
/* Animation shake                                                      */
/* ------------------------------------------------------------------ */
@keyframes captchamath-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}

/* ------------------------------------------------------------------ */
/* Mode sombre (Cassiopeia Extended / Joomla 6)                        */
/* ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
    .captchamath-input {
        background: #1e1e1e;
        color: #f0f0f0;
        border-color: #555;
    }
    .captchamath-input:focus {
        border-color: var(--cassiopeia-color-primary, #4dabcf);
    }
}

/* ------------------------------------------------------------------ */
/* Responsive                                                           */
/* ------------------------------------------------------------------ */
@media (max-width: 576px) {
    .captchamath-question {
        font-size: .9rem;
        padding: .4rem .75rem;
    }
    .captchamath-input {
        max-width: 90px;
        font-size: 1rem;
    }
}