/*====================================================================
   INLINE FORM VALIDATION
   Styles for FormValidation (js/validation.js).

   To restyle: override the variables in :root (or on a specific form
   or field). The class names below are the contract between the
   markup, the script, and this stylesheet:

     .required-indicator   the "*" next to a required label/legend
     .validation-field     wrapper around one field (div or fieldset)
     .is-valid             added by script: field passed validation
     .is-invalid           added by script: field failed validation
     .validation-message   added by script: error text under the field
     .validation-control   added by script: positioned container around a
                           text input so the status icon can sit inside
                           it (a new wrapper, or an existing icon container
                           such as .icon_input)
     .validation-icon      added by script: the status icon
     .validation-choice    added by script: field is a radio/checkbox
                           group (no in-field icon; icon shows beside
                           the message instead)
     .validation-live      added by script: hidden screen reader
                           announcement region

   Icons are drawn with CSS masks, so they take their color from the
   variables. Swap an icon by replacing its url(). Hide the valid
   checkmark with: --validation-valid-icon-display: none;
====================================================================*/

:root {
    /* colors (Bootstrap standard; both 4.53:1 on white, WCAG AA) */
    --validation-invalid-color: #dc3545;
    --validation-valid-color: #198754;
    --validation-required-color: var(--validation-invalid-color);
    --validation-valid-border-color: var(--validation-valid-color); /* set to your normal border color to turn the green border off */

    /* focus ring color on fields showing a state (the template's outline width
       and style are kept; only the color changes). Opacities keep the ring at
       3:1+ contrast on white (WCAG 1.4.11). To turn the tint off, set both
       to the template's focus color, e.g. rgba(21, 41, 80, 0.75). */
    --validation-invalid-focus-color: rgba(220, 53, 69, 0.75);
    --validation-valid-focus-color: rgba(25, 135, 84, 0.8);

    /* icons */
    --validation-icon-size: 1.1em;
    --validation-icon-offset: 0.75em;
    --validation-valid-icon-display: inline-block; /* text fields: "none" hides the valid checkmark */
    --validation-choice-valid-icon-display: none;  /* radio/checkbox groups: off by default; "inline-block" shows a checkmark after the selected option */
    --validation-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5' fill='none' stroke='black' stroke-width='1.1'/%3e%3cpath d='M5.8 3.6h.4L6 6.5z' stroke='black' stroke-linejoin='round'/%3e%3ccircle cx='6' cy='8.2' r='.6'/%3e%3c/svg%3e");
    --validation-icon-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");

    /* message */
    --validation-message-font-size: 0.8em;
    --validation-message-spacing: 0.4em;
}

/*--------------------------------------------------------------------
   Required indicator
--------------------------------------------------------------------*/
.required-indicator {
    color: var(--validation-required-color);
}

/*--------------------------------------------------------------------
   Text inputs: positioning wrapper and in-field icon
--------------------------------------------------------------------*/
.validation-control {
    position: relative;
    display: block;
}

    .validation-control > input,
    .validation-control > textarea,
    .validation-control > select {
        padding-right: calc(var(--validation-icon-offset) + var(--validation-icon-size) + 0.5em);
    }

.validation-icon {
    display: none;
    position: absolute;
    top: 50%;
    right: var(--validation-icon-offset);
    width: var(--validation-icon-size);
    height: var(--validation-icon-size);
    transform: translateY(-50%);
    pointer-events: none;
    background-color: currentColor;
    -webkit-mask: no-repeat center / contain;
    mask: no-repeat center / contain;
}

/* textarea: pin the icon to the top-right instead of the middle */
.validation-control > textarea ~ .validation-icon {
    top: var(--validation-icon-offset);
    transform: none;
}

/*--------------------------------------------------------------------
   Invalid state
--------------------------------------------------------------------*/
.validation-field.is-invalid input:not([type=radio]):not([type=checkbox]),
.validation-field.is-invalid textarea,
.validation-field.is-invalid select {
    border-color: var(--validation-invalid-color);
}

/* Labels keep their normal color on error (the red asterisk, border, icon
   and message are enough). To turn labels red as well, add:
   .validation-field.is-invalid:not(.validation-choice) label,
   .validation-field.is-invalid > legend { color: var(--validation-invalid-color); }
*/

.validation-field.is-invalid .validation-icon {
    display: block;
    color: var(--validation-invalid-color);
    -webkit-mask-image: var(--validation-icon-invalid);
    mask-image: var(--validation-icon-invalid);
}

/*--------------------------------------------------------------------
   Valid state (text inputs: green border and in-field checkmark;
   choice groups: optional checkmark after the selected option, off by default)
--------------------------------------------------------------------*/
.validation-field.is-valid:not(.validation-choice) input:not([type=radio]):not([type=checkbox]),
.validation-field.is-valid:not(.validation-choice) textarea,
.validation-field.is-valid:not(.validation-choice) select {
    border-color: var(--validation-valid-border-color);
}

.validation-field.is-valid:not(.validation-choice) .validation-icon {
    display: var(--validation-valid-icon-display);
    color: var(--validation-valid-color);
    -webkit-mask-image: var(--validation-icon-valid);
    mask-image: var(--validation-icon-valid);
}

/*--------------------------------------------------------------------
   Focus ring: tint the template's outline to match the field's state
   (red on error, green when valid) instead of layering its accent color
   around a red/green border. Neutral fields keep the template's ring.
--------------------------------------------------------------------*/
.validation-field.is-invalid input:not([type=radio]):not([type=checkbox]):focus,
.validation-field.is-invalid textarea:focus,
.validation-field.is-invalid select:focus {
    outline-color: var(--validation-invalid-focus-color);
}

.validation-field.is-valid:not(.validation-choice) input:not([type=radio]):not([type=checkbox]):focus,
.validation-field.is-valid:not(.validation-choice) textarea:focus,
.validation-field.is-valid:not(.validation-choice) select:focus {
    outline-color: var(--validation-valid-focus-color);
}

/*--------------------------------------------------------------------
   Message
--------------------------------------------------------------------*/
.validation-message {
    display: none;
    margin-top: var(--validation-message-spacing);
    font-size: var(--validation-message-font-size);
    line-height: 1.35;
    color: var(--validation-invalid-color);
    overflow-wrap: anywhere;
}

.validation-field.is-invalid .validation-message {
    display: block;
}

/* choice groups: icon sits before the message text */
.validation-field.validation-choice .validation-message::before {
    content: "";
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.35em;
    vertical-align: -0.25em;
    background-color: currentColor;
    -webkit-mask: var(--validation-icon-invalid) no-repeat center / contain;
    mask: var(--validation-icon-invalid) no-repeat center / contain;
}

/* choice groups: optional valid checkmark right after the selected option's text
   (off by default; turn on with --validation-choice-valid-icon-display: inline-block) */
.validation-field.validation-choice.is-valid input:checked ~ label::after {
    content: "";
    display: var(--validation-choice-valid-icon-display);
    width: 0.9em;
    height: 0.9em;
    margin-left: 0.4em;
    vertical-align: -0.1em;
    background-color: var(--validation-valid-color);
    -webkit-mask: var(--validation-icon-valid) no-repeat center / contain;
    mask: var(--validation-icon-valid) no-repeat center / contain;
}

/*--------------------------------------------------------------------
   Side-by-side fields: while a message shows under one field, top-align
   the row so the neighboring input stays level (rows are bottom-aligned
   by default). Doubled class only raises specificity over the template.
--------------------------------------------------------------------*/
.row.row:has(> .validation-field.is-invalid) {
    align-items: flex-start;
}

/*--------------------------------------------------------------------
   Screen reader announcement region (visually hidden)
--------------------------------------------------------------------*/
.validation-live {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/*--------------------------------------------------------------------
   Windows high contrast / forced colors: keep icons visible
--------------------------------------------------------------------*/
@media (forced-colors: active) {
    .validation-icon,
    .validation-field.validation-choice .validation-message::before,
    .validation-field.validation-choice.is-valid input:checked ~ label::after {
        background-color: CanvasText;
    }
}