/*
 * Survey forms (SurveyJS survey-core 2.3.11) - the portal's look for validation errors, on the citizen form and
 * in the creator's Preview tab alike: the message is plain red text under the field and the field gets a red
 * border, the way the portal's Bootstrap forms (Payments) render .is-invalid and a ValidationMessage. SurveyJS
 * itself paints a tinted red box above the question and tints the field's background. Colours come from the
 * survey theme (--sjs-special-red), so every theme keeps its own red.
 *
 * Loaded after survey-core.min.css on both webs; every selector starts with .sd-root-modern so it outweighs the
 * SurveyJS rule it replaces (named in the comments) without !important. Placing the message under the field is
 * the survey default set in survey-core.js (ApplySurveyDefaults), not CSS.
 */

/* Message: text only - no tinted box, no bold (.sd-error, .sd-error__item). */
.sd-root-modern .sd-error:not(.sd-error--warning):not(.sd-error--info) {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}

.sd-root-modern .sd-error:not(.sd-error--warning):not(.sd-error--info) .sd-error__item {
    font-size: calc(0.875 * var(--sjs-font-size, 16px));
    font-weight: 400;
    line-height: 1.5;
}

/* A framed question stretches the box to the card edges and drops the card padding on the error side
   (.sd-element--with-frame > .sd-element__erbox, .sd-question--error-bottom / --error-top); the text stays
   inside the padding instead. */
.sd-root-modern .sd-element--with-frame > .sd-element__erbox,
.sd-root-modern .sd-element--nested-with-borders > .sd-element__erbox {
    position: static;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.sd-root-modern .sd-element--with-frame.sd-question--error-bottom {
    padding-bottom: var(--sd-base-padding);
}

.sd-root-modern .sd-element--with-frame.sd-question--error-bottom > .sd-question__content {
    margin-bottom: 0;
}

.sd-root-modern .sd-element--with-frame.sd-question--error-top {
    padding-top: var(--sd-base-padding);
}

/* Bootstrap's .invalid-feedback gap between the field and the message (.sd-question__erbox--below-question). */
.sd-root-modern .sd-question__erbox--below-question {
    margin-top: calc(0.5 * var(--sjs-base-unit, 8px));
}

/* Field: a red ring instead of a tinted background (.sd-input--error). The ring replaces the theme's inner
   shadow the way .is-invalid replaces the border colour; focus thickens it. */
.sd-root-modern .sd-input--error {
    background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
    box-shadow: var(--sjs-shadow-inner-reset, inset 0 0 0 0 rgba(0, 0, 0, 0.15)), 0 0 0 1px var(--sjs-special-red, var(--red, #e60a3e));
}

.sd-root-modern .sd-input--error:focus,
.sd-root-modern .sd-input--error:focus-within {
    box-shadow: var(--sjs-shadow-inner-reset, inset 0 0 0 0 rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-special-red, var(--red, #e60a3e));
}

/* Multiple-text items tint their cell and make the input transparent; the ring on the input is enough. */
.sd-root-modern .sd-multipletext__item-container--error {
    background-color: transparent;
}

/* Checkbox and radio boxes (.sd-item--error .sd-item__decorator): a red ring, a checked box keeps its fill. */
.sd-root-modern .sd-item--error:not(.sd-item--checked) .sd-item__decorator {
    background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
    box-shadow: var(--sjs-shadow-inner-reset, inset 0 0 0 0 rgba(0, 0, 0, 0.15)), 0 0 0 1px var(--sjs-special-red, var(--red, #e60a3e));
}

.sd-root-modern .sd-item--error:not(.sd-item--checked) .sd-item__control:focus + .sd-item__decorator {
    box-shadow: var(--sjs-shadow-inner-reset, inset 0 0 0 0 rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-special-red, var(--red, #e60a3e));
}

/* Yes/No switch (.sd-boolean--error). */
.sd-root-modern .sd-boolean--error {
    background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
    box-shadow: 0 0 0 1px var(--sjs-special-red, var(--red, #e60a3e));
}