/*
 * Styling for LEXO Forms markup.
 *
 * The plugin renders `.form-field.form-field-<name>` wrappers instead of the theme's
 * former `.cf-field-wrapper`. These rules carry the existing contact-form design over
 * to that markup - same grid, same control styling - so nothing about the look changes.
 * Values reference the tokens in rte.css; never hard-code a colour here.
 */

form[data-action="lexo-form"] {
    font-size: 1.4rem;
}

/*
 * iOS Safari zooms the page in when a focused control renders below 16px and never
 * zooms back out. Pinch-zoom is allowed again site-wide, so the controls have to carry
 * their own guard - 16px only where that behaviour exists, so the design is unchanged
 * on every other device.
 */
@supports (-webkit-touch-callout: none) {
    form[data-action="lexo-form"] input,
    form[data-action="lexo-form"] select,
    form[data-action="lexo-form"] textarea {
        font-size: 16px;
    }
}

form[data-action="lexo-form"] .cf-fields-container {
    display: grid;
    grid-gap: 30px;
    row-gap: 15px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

form[data-action="lexo-form"] .form-field {
    position: relative;
    box-sizing: border-box;
}

form[data-action="lexo-form"] .form-field > div.error {
    display: inline-flex;
    position: absolute;
    z-index: 2;
    top: var(--validation-pill-top, 14px);
    right: 10px;
    align-items: center;
    gap: 5px;
    width: max-content;
    max-width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 0;
    padding: 2px 9px 2px 5px;
    border: 1px solid var(--color-red);
    border-radius: 999px;
    background: var(--color-gray-light);
    color: var(--color-red);
    font-size: 13px;
    line-height: 20px;
    text-align: left;
    white-space: nowrap;
}

form[data-action="lexo-form"] .form-field > div.error::before {
    content: "";
    display: inline-block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Crect x='3' width='2' height='7' rx='1' fill='%23fff'/%3E%3Ccircle cx='4' cy='10' r='1.2' fill='%23fff'/%3E%3C/svg%3E") no-repeat center;
    background-size: 8px 12px;
}

form[data-action="lexo-form"] .form-field label {
    font-weight: 300;
    margin-bottom: 1px;
    display: block;
}

/* The message spans the full row, like the old .message-wrapper did. */
form[data-action="lexo-form"] .form-field-nachricht {
    grid-column: 1 / span 3;
}

/* Native selects, styled to match the inputs (no jQuery select plugin needed). */
form[data-action="lexo-form"] select {
    width: 100%;
    display: block;
    border: 1px solid var(--color-gray-contact-form-border);
    background-color: #F7F7F7;
    border-radius: 6px;
    padding: 6px 30px 6px 15px;
    font-weight: 300;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.5;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239F9F9F' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 10px auto;
}

form[data-action="lexo-form"] select:focus {
    border-color: var(--color-gray);
}

form[data-action="lexo-form"] .cf-field-bottom {
    align-items: center;
    margin-top: 20px;
}

form[data-action="lexo-form"] .cf-required-note {
    margin: 0 30px 0 0;
    font-weight: 300;
}

form[data-action="lexo-form"] .cf-submit {
    border: none;
    margin-top: 0;
    margin-left: auto;
}

/* Plugin response messages */
form[data-action="lexo-form"] + .lexo-form-message,
form[data-action="lexo-form"] .lexo-form-message {
    margin-top: 15px;
    font-weight: 300;
}

/*
 * Busy state. CSS-only and keyed on :disabled so it fires for whoever sets it -
 * js/form-submit-loader.js, or a captcha build that disables the button itself.
 */
form[data-action="lexo-form"] button[type="submit"]:disabled {
    position: relative;
    cursor: wait;
    padding-right: 44px;
    opacity: .75;
}

form[data-action="lexo-form"] button[type="submit"]:disabled:hover {
    opacity: .75;
}

form[data-action="lexo-form"] button[type="submit"]:disabled::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: nhp-form-spin .7s linear infinite;
}

@keyframes nhp-form-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    form[data-action="lexo-form"] button[type="submit"]:disabled::after {
        animation: none;
    }
}

@media (max-width: 768px) {
    form[data-action="lexo-form"] .cf-fields-container {
        display: block;
    }

    form[data-action="lexo-form"] .form-field {
        margin-bottom: 0;
    }
}

@media (max-width: 420px) {
    form[data-action="lexo-form"] .cf-field-bottom {
        display: block;
    }

    form[data-action="lexo-form"] .cf-required-note {
        margin: 0 0 15px 0;
    }

    form[data-action="lexo-form"] .cf-submit {
        width: 100%;
        margin-top: 15px;
    }
}