/* CyberAce Spam Protection - front-end
 *
 * Designed to sit on ANY background (white, black, brand colours):
 *  - "auto" theme: no fixed colours. Text inherits the form's own colour,
 *    borders are semi-transparent grey, and the input is left to the
 *    site's own input styling so it matches the other fields.
 *  - "light" / "dark": explicit palettes for sites that prefer to force one.
 */

.cyberace-spam-protection-honeypot{
    position:absolute !important;
    left:-9999px !important;
    width:1px;
    height:1px;
    overflow:hidden;
}

/* ---------- math question ---------- */
.cyberace-spam-protection-captcha{
    --casp-line: rgba(128, 128, 128, .45);
    --casp-error: #dc3232;
    margin: 10px 0;
    color: inherit;
}

/* Compact: one row, no frame (default). */
.cyberace-spam-protection-captcha.casp-layout-inline{
    padding: 0;
    margin: 8px 0;
}

/* Boxed: framed panel (the previous look), but colour-neutral. */
.cyberace-spam-protection-captcha.casp-layout-box{
    margin: 16px 0;
    padding: 12px 16px;
    border: 1px solid var(--casp-line);
    border-radius: 10px;
    background: transparent;
}

.cyberace-spam-protection-captcha-label{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    color: inherit;
}

.cyberace-spam-protection-captcha-question{
    font-size: 14px;
    font-weight: 600;
    color: inherit;
}

.cyberace-spam-protection-captcha-input{
    width: 90px;
    max-width: 100%;
}

/* Only a neutral focus ring in auto mode; the site's own input style
   (colours, border, radius) is left alone so it matches other fields. */
.cyberace-spam-protection-captcha-input:focus{
    box-shadow: 0 0 0 3px rgba(46, 179, 165, .25);
}

.cyberace-spam-protection-captcha-input.wpcf7-not-valid{
    border-color: var(--casp-error);
}

/* ---------- forced palettes ---------- */
.cyberace-spam-protection-captcha.casp-theme-light,
.cyberace-spam-protection-captcha[data-casp-scheme="light"].casp-theme-light{
    --casp-line: #d6dae1;
    color: #1f2937;
}
.cyberace-spam-protection-captcha.casp-theme-light .cyberace-spam-protection-captcha-input{
    background: #fff;
    color: #1f2937;
    border: 1px solid #cfd3da;
    border-radius: 6px;
    padding: 8px 10px;
}

.cyberace-spam-protection-captcha.casp-theme-dark{
    --casp-line: #4b5563;
    --casp-error: #ff6b6b;
    color: #f1f5f9;
}
.cyberace-spam-protection-captcha.casp-theme-dark .cyberace-spam-protection-captcha-input{
    background: #1f2937;
    color: #f1f5f9;
    border: 1px solid #4b5563;
    border-radius: 6px;
    padding: 8px 10px;
}
.cyberace-spam-protection-captcha.casp-theme-dark .cyberace-spam-protection-captcha-input::placeholder{
    color: #9ca3af;
}

/* In auto mode the script marks dark surfaces so the error colour stays readable. */
.cyberace-spam-protection-captcha[data-casp-scheme="dark"],
.cyberace-spam-protection-turnstile[data-casp-scheme="dark"]{
    --casp-error: #ff6b6b;
}

/* ---------- messages ---------- */
.cyberace-spam-protection-captcha .wpcf7-not-valid-tip,
.cyberace-spam-protection-turnstile .wpcf7-not-valid-tip{
    display: block;
    width: 100%;
    margin-top: 6px;
    font-size: 13px;
    color: var(--casp-error, #dc3232);
}

/* ---------- Turnstile ---------- */
.cyberace-spam-protection-turnstile{
    --casp-error: #dc3232;
    margin: 10px 0;
}

/* "Only when needed": the widget stays hidden for most visitors, so it
   must not leave an empty gap in the form. */
.cyberace-spam-protection-turnstile.casp-ts-interaction-only{
    margin: 0;
}
.cyberace-spam-protection-turnstile.casp-ts-interaction-only .cf-turnstile{
    min-height: 0;
}
/* ...but when Cloudflare does need the visitor to click, give it room. */
.cyberace-spam-protection-turnstile.casp-ts-interaction-only .cf-turnstile iframe{
    margin: 6px 0;
}

/* ---------- responsive container: math question + Turnstile ----------
 * The number of columns per screen size is written into the page from the
 * plugin settings (Responsive Layout card), after this file. 2 columns use
 * auto-fit, so a form that is too narrow stacks by itself.
 */
.casp-security{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px 16px;
    align-items: center;
    margin: 8px 0;
}

.casp-security.casp-flush,
.casp-security.casp-count-0{
    margin: 0;
}

/* One visible block always uses the full width (more specific than the
   per-screen rules, so it wins in every media query). */
.casp-security.casp-count-1,
.casp-security.casp-count-0{
    grid-template-columns: minmax(0, 1fr);
}

.casp-security .cyberace-spam-protection-captcha.casp-layout-inline,
.casp-security .cyberace-spam-protection-captcha.casp-layout-box,
.casp-security > .cyberace-spam-protection-turnstile{
    margin: 0;
    min-width: 0;
}

.casp-security .cf-turnstile iframe{
    max-width: 100%;
}