/* Override SSP's inline styles for form messages */

/* Error message (submission failed) — red pill with alert icon */
.ssp-form-message.ssp-error {
    background: #f15955 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin-top: 12px !important;
}

.ssp-form-message.ssp-error::before {
    content: '\26A0\FE0F ' !important;
}

/* Success message — red theme with checkmark */
.ssp-form-message.ssp-success {
    background: #f15955 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin-top: 12px !important;
}

.ssp-form-message.ssp-success::before {
    content: '\2705 ' !important;
}

/* Field-level validation error — red pill overlapping top of email field only */
.elementor-field-group {
    position: relative;
}

.elementor-field-group-email .ssp-field-error {
    position: absolute !important;
    left: 10px !important;
    top: 0 !important;
    transform: translateY(-75%) !important;
    background: #f15955 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    padding: 5px 10px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

.elementor-field-group-email .ssp-field-error::before {
    content: '\26A0\FE0F ' !important;
    font-size: 10px !important;
}

/* Form-level error summary — suppressed; inline field errors handle all validation feedback */
.ssp-form-error-summary {
    display: none !important;
}

/* Mobile: full-width form widget, inputs, buttons, and turnstile */
@media (max-width: 767px) {
    /* Override Elementor's custom widget width */
    .elementor-widget-form.elementor-widget__width-initial {
        width: 100% !important;
        max-width: 100% !important;
    }

    .elementor-form .elementor-field-group {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .elementor-form .elementor-field-textual {
        width: 100% !important;
    }

    .elementor-form .e-form__buttons {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .elementor-form .elementor-button {
        width: 100% !important;
    }

    .wct-turnstile-widget {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .elementor-field-group-email .ssp-field-error {
        max-width: calc(100% - 20px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}