/**
 * Elementor Pro forms on the whole site (newsletter popups and footers, Contactos, Wholesale). Loaded on every page by
 * inc/elementor/form-selects.php, because the popups can open anywhere.
 *
 * "html:not(#twf-form)" counts as an id, so these rules sit above each form's own settings in Elementor without
 * !important. Those settings had what is typed in a thin grey (#737373, weight 100 to 300) and Elementor's messages at
 * the size of a heading, with a green tick.
 */

/* What is typed, the hint and the note under the newsletter field */
html:not(#twf-form) .elementor-form .elementor-field-textual {
    color: #212529;
    font-weight: 400;
}

html:not(#twf-form) .elementor-form .elementor-field-textual::placeholder {
    color: #737373;
    font-weight: 400;
    opacity: 1;
}

html:not(#twf-form) .elementor-form .elementor-field-textual:focus {
    border-color: #212529;
    outline: 0;
}

html:not(#twf-form) .elementor-form .elementor-field-type-html {
    color: #5F5E5A;
    font-weight: 400;
}

/* A field with its error stays level with the field beside it */
html:not(#twf-form) .elementor-form .elementor-field-group {
    align-content: flex-start;
}

/* The form's answer: a tinted band in the colours of the site's notices */
html:not(#twf-form) .elementor-form > .elementor-message {
    position: relative;
    box-sizing: border-box;
    margin: 16px 0 0;
    padding: 12px 14px 12px 44px;
    color: #212529;
    background: #F6F1E8;
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
}

html:not(#twf-form) .elementor-form > .elementor-message::before {
    --twf-form-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M7.6 12.4l3 3 5.9-6.3' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    content: "";
    position: absolute;
    top: 12px;
    left: 14px;
    width: 20px;
    height: 20px;
    margin: 0;
    background: #8E7348;
    -webkit-mask: var(--twf-form-icon) center / contain no-repeat;
    mask: var(--twf-form-icon) center / contain no-repeat;
}

html:not(#twf-form) .elementor-form > .elementor-message-danger {
    background: #FBF0EF;
}

html:not(#twf-form) .elementor-form > .elementor-message-danger::before {
    --twf-form-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M12 6.9v6.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.9' r='1.15'/%3E%3C/svg%3E");
    background: #B3261E;
}

/* An error under one field: tinted too, because the footers' forms sit on a dark background */
html:not(#twf-form) .elementor-form .elementor-field-group .elementor-message {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 6px 0 0;
    padding: 4px 8px;
    color: #B3261E;
    background: #FBF0EF;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
}

html:not(#twf-form) .elementor-form .elementor-field-group .elementor-message::before {
    display: none;
}

html:not(#twf-form) .elementor-form .elementor-error .elementor-field-textual {
    border-color: #B3261E;
}