/*
 * Sitepackage theme for the ALTCHA web component.
 * ALTCHA consumes these custom properties inside its component styles.
 */
.frame-type-form_formframework .form-element:has(altcha-widget) {
    grid-column: 1 / -1;
}

.frame-type-form_formframework altcha-widget {
    /* ALTCHA Widget v3 */
    --altcha-border-color: var(--color-border-strong);
    --altcha-color-base-content: #ffffff !important;
    --altcha-color-primary: var(--color-primary);
    --altcha-color-primary-content: var(--color-on-primary);
    --altcha-color-neutral: rgba(255, 255, 255, 0.22);
    --altcha-color-neutral-content: #ffffff;
    --altcha-color-error: #ffb4ab;
    --altcha-color-error-content: var(--color-surface-deep);
    --altcha-input-background-color: var(--color-surface-deep);
    --altcha-input-color: #ffffff;
    --altcha-checkbox-border-color: var(--color-primary);
    --altcha-checkbox-outline-color: rgba(106, 1, 9, 0.28);
    --altcha-spinner-color: var(--color-primary);
    --altcha-shadow: none;

    /* Compatibility aliases for the extension's legacy v2 stylesheet. */
    --altcha-color-base: var(--color-surface-dark);
    --altcha-color-border: var(--color-border-strong);
    --altcha-color-border-focus: var(--color-primary);
    --altcha-color-text: #ffffff !important;
    --altcha-color-active: var(--color-primary);
    --altcha-color-error-text: #ffb4ab;
    --altcha-color-footer-bg: rgba(255, 255, 255, 0.035);
    --altcha-border-width: 1px;
    --altcha-border-radius: 2px;
    --altcha-max-width: 100%;

    display: block;
    width: 100%;
    color: #ffffff !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.frame-type-form_formframework altcha-widget:focus-within {
    filter: drop-shadow(0 0 0.2rem rgba(106, 1, 9, 0.18));
}

.frame-type-form_formframework altcha-widget a {
    color: var(--color-primary);
}
.altcha-checkbox {
    color: white !important;
}