/*
 * Elementor Pro Mathe-Spamschutz 1.4
 * Small, single-line layout; accessible on dark and light form sections.
 * A manually inserted field keeps its native Elementor position and width.
 *
 * Optional custom CSS (also works for the automatic field):
 *   selector .eams-math {
 *     --eams-foreground: #fff;
 *     --eams-input-background: rgba(255, 255, 255, .08);
 *     --eams-border-color: #fff;
 *   }
 */
.elementor-form .eams-math {
    display: block;
    width: 100%;
    min-width: 0;
    color: var(--eams-foreground, inherit);
}

/* Auto-detected dark CSS backgrounds, or explicit dark mode from Elementor. */
.elementor-form .eams-math.eams-math--detected-dark,
.elementor-form .eams-math[data-eams-theme="dark"] {
    --eams-foreground: #f8fafc;
    --eams-input-background: rgba(255, 255, 255, 0.10);
    --eams-border-color: rgba(255, 255, 255, 0.78);
    --eams-hover-background: rgba(255, 255, 255, 0.16);
}

/* Explicit light mode is useful in otherwise dark site designs. */
.elementor-form .eams-math[data-eams-theme="light"] {
    --eams-foreground: #20252b;
    --eams-input-background: rgba(255, 255, 255, 0.65);
    --eams-border-color: rgba(32, 37, 43, 0.65);
    --eams-hover-background: rgba(32, 37, 43, 0.10);
}

/* Render the label ourselves directly beside the calculation. */
.elementor-form .elementor-field-type-eams_math > label.elementor-field-label {
    display: none !important;
}

.elementor-form .eams-math__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    min-height: 36px;
}

.elementor-form .eams-math__label {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    line-height: 1.4;
    cursor: text;
}

.elementor-form .eams-math__question {
    color: inherit;
    white-space: nowrap;
    font-weight: 600;
}

/* Elementor/theme input rules can force a white background or dark text.
   Use explicit values here so the answer remains readable on dark sections. */
.elementor-form input.eams-math__answer {
    box-sizing: border-box;
    flex: 0 0 76px;
    width: 76px;
    max-width: 76px;
    min-width: 68px;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 6px 7px;
    border: 1px solid var(--eams-border-color, currentColor) !important;
    border-radius: 4px;
    background: var(--eams-input-background, transparent) !important;
    color: var(--eams-foreground, inherit) !important;
    font: inherit;
    line-height: 1.2;
    text-align: center;
    -webkit-text-fill-color: var(--eams-foreground, currentColor);
}

.elementor-form input.eams-math__answer::placeholder {
    color: inherit;
    opacity: 0.75;
    -webkit-text-fill-color: currentColor;
}

.elementor-form .eams-math__refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--eams-border-color, currentColor);
    border-radius: 4px;
    color: var(--eams-foreground, inherit);
    background: var(--eams-input-background, transparent);
    cursor: pointer;
    font: inherit;
    font-size: 22px;
    line-height: 1;
    transition: background-color 0.15s ease;
}

.elementor-form .eams-math__refresh:not(:disabled):hover {
    background: var(--eams-hover-background, rgba(127, 127, 127, 0.12));
}

.elementor-form .eams-math__refresh:disabled {
    opacity: 0.6;
    cursor: wait;
}

.elementor-form .eams-math__refresh:focus-visible,
.elementor-form input.eams-math__answer:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.elementor-form .eams-math__status {
    display: block;
    margin-top: 4px;
    color: inherit;
    font-size: 0.85em;
    line-height: 1.35;
}

.elementor-form .eams-math__status:empty {
    display: none;
}

/* Inherit high-contrast text instead of using a red that disappears on dark
   backgrounds. The icon communicates error state without relying on color. */
.elementor-form .eams-math__status[data-state="error"] {
    font-weight: 600;
}

.elementor-form .eams-math__status[data-state="error"]::before {
    content: "⚠ ";
}

@media (prefers-reduced-motion: reduce) {
    .elementor-form .eams-math__refresh {
        transition: none;
    }
}

/* For dynamic login forms and Elementor editor changes. The opt-out is
   intentional, so it takes precedence over the normal display rule. */
.elementor-form .eams-math.eams-math--excluded {
    display: none !important;
}

/* If an editor previously placed a math field inside a login Form widget,
   suppress Elementor's surrounding field-group label as well. */
.elementor-widget-form[data-eams-excluded="1"] .elementor-field-type-eams_math,
.elementor-form .elementor-field-type-eams_math.eams-math-group--excluded {
    display: none !important;
}