/*
 * Ridni Core — shared state layer for custom form fields.
 *
 * One rule outranks everything else here: a validation message must not change
 * the height of the form. It is drawn out of flow, so a red line under the phone
 * field cannot push every field below it down the page while somebody is typing.
 * That costs one thing — the message floats over whatever sits underneath — so it
 * carries its own background and shadow and reads as a small callout.
 *
 * Three states, one vocabulary, both fields: valid, invalid, warning. Only
 * `invalid` blocks a submit; `warning` is advice the visitor is free to ignore.
 *
 * Every colour and size is a custom property with a default. The admin screen
 * «Поля форм → Вигляд повідомлень» overwrites the properties in one inline
 * block, so restyling the callout never means editing this file.
 */

:root {
    --ridni-field-valid: #008a20;
    --ridni-field-invalid: #b32d2e;
    --ridni-field-warning: #a56a00;
    --ridni-field-message-bg: #ffffff;
    --ridni-field-message-error: #b32d2e;
    --ridni-field-message-warning: #8a5a00;
    --ridni-field-message-radius: 6px;
    --ridni-field-message-size: 0.8125em;
    --ridni-field-message-shadow: 0 1px 4px rgba(0, 0, 0, .16);
    --ridni-field-suggest: #8a5a00;
    --ridni-field-suggest-hover: #ffffff;
    --ridni-field-suggest-bg: #8a5a00;
}

.ridni-field {
    position: relative;
    display: block;
    width: 100%;
    /* Elementor field groups are flex rows; the wrapper has to grow the way the
       input it replaced did. */
    flex: 1 1 auto;
}

/* ---------- status mark inside the field ---------- */

/* Masks rather than background images: the shape comes from the SVG, the colour
   from a custom property, so the marks follow the site's palette. */
.ridni-field-valid::after,
.ridni-field-invalid::after,
.ridni-field-warning::after {
    position: absolute;
    pointer-events: none;
    content: '';
    height: 20px;
    width: 20px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.ridni-field-valid::after {
    background-color: var(--ridni-field-valid);
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>');
}

.ridni-field-invalid::after {
    background-color: var(--ridni-field-invalid);
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>');
}

/* A triangle, deliberately not a cross: nothing is broken, something is worth a
   second look. */
.ridni-field-warning::after {
    background-color: var(--ridni-field-warning);
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.721-1.36 3.486 0l6.518 11.591c.75 1.334-.213 2.98-1.742 2.98H3.481c-1.53 0-2.492-1.646-1.743-2.98L8.257 3.1zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.721-1.36 3.486 0l6.518 11.591c.75 1.334-.213 2.98-1.742 2.98H3.481c-1.53 0-2.492-1.646-1.743-2.98L8.257 3.1zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>');
}

/* ---------- message ---------- */

.ridni-field-message {
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-start: 0;
    z-index: 6;
    display: block;
    box-sizing: border-box;
    max-width: 100%;
    /* Out of flow, so nothing below moves; the callout look keeps it readable
       over whatever it now covers. */
    padding: 5px 9px;
    border-radius: var(--ridni-field-message-radius);
    background: var(--ridni-field-message-bg);
    box-shadow: var(--ridni-field-message-shadow);
    font-size: var(--ridni-field-message-size);
    line-height: 1.35;
    text-align: start;
    pointer-events: none;
}

.ridni-field-message[hidden] { display: none; }
.ridni-field-message--error { color: var(--ridni-field-message-error); }
.ridni-field-message--warning { color: var(--ridni-field-message-warning); }

/* Two selectors deep on purpose: this is a <button> inside a theme's form, and
   `.woocommerce button` style rules were painting their own background over it. */
.ridni-field-message .ridni-field-suggest {
    pointer-events: auto;
    display: inline-block;
    margin: 0 1px;
    /* A couple of pixels either side so the suggestion is not flush against the
       words around it once it picks up a background. */
    padding: 1px 5px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ridni-field-suggest);
    font: inherit;
    line-height: inherit;
    text-decoration: underline;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.ridni-field-message .ridni-field-suggest:hover,
.ridni-field-message .ridni-field-suggest:focus-visible {
    background: var(--ridni-field-suggest-bg);
    color: var(--ridni-field-suggest-hover);
    text-decoration: none;
}