/*
 * Contact / request form (MageMe WebForms) at the end of blog posts, styled like the live shop and like the forms of the
 * CMS pages (same rules as css/cms-forms.css, here for body.blog-post-view): every field full width, small bold labels,
 * light grey bordered inputs with an orange hover/focus border, orange submit button.
 * The form markup, validation and submit logic are not changed. Plain CSS, no Tailwind rebuild.
 */

body.blog-post-view form[id^="webform_"] {
    width: 100%;
    max-width: none;
    margin: 0 auto 15px;
    color: #333;
    font-size: 14px;
    line-height: 20px;
    box-sizing: border-box;
}
body.blog-post-view form[id^="webform_"] fieldset {
    min-width: 0;
    margin: 0;
    padding: 5px 10px 9px;
    border: 2px groove #f0f0f0;
}

/* fields: one per row, like live (the module's 1/2 and 2/3 column widths are not used there) */
body.blog-post-view form[id^="webform_"] .field {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: center;
    float: none;
    clear: both;
    width: 100%;
    margin: 0;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 14px;
}
body.blog-post-view form[id^="webform_"] .field .control {
    width: 100%;
}
body.blog-post-view form[id^="webform_"] .field > .label {
    width: 100%;
    margin: 0 0 3px;
    font-size: 11.9px;
    font-weight: 700;
    line-height: 17px;
    color: inherit;
    text-transform: none;
}
body.blog-post-view form[id^="webform_"] .field.required > .label::after {
    content: " *";
    color: #e41f12;
}

/* inputs */
body.blog-post-view form[id^="webform_"] .field input[type="text"],
body.blog-post-view form[id^="webform_"] .field input[type="email"],
body.blog-post-view form[id^="webform_"] .field input[type="tel"],
body.blog-post-view form[id^="webform_"] .field input[type="number"],
body.blog-post-view form[id^="webform_"] .field input[type="password"],
body.blog-post-view form[id^="webform_"] .field input[type="url"],
body.blog-post-view form[id^="webform_"] .field input[type="date"],
body.blog-post-view form[id^="webform_"] .field .input-text,
body.blog-post-view form[id^="webform_"] .field textarea,
body.blog-post-view form[id^="webform_"] .field select {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 10px;
    padding: 10.5px 14px;
    color: #212121;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.275em;
    transition: border-color .5s;
    box-sizing: border-box;
}
body.blog-post-view form[id^="webform_"] .field textarea {
    min-height: 59px;
    resize: vertical;
}
body.blog-post-view form[id^="webform_"] .field select {
    padding-right: 32px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' fill='%23dcdcdc'%3E%3Cpath d='M0 1.2C0 .5.6 0 1.2 0c.3 0 .6.1.8.3l6 5.9 6-5.9c.5-.4 1.2-.3 1.7.1.4.4.4 1.1 0 1.5L8.9 8.7c-.5.4-1.2.4-1.7 0L.4 2a.9.9 0 01-.4-.8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px auto;
}
body.blog-post-view form[id^="webform_"] .field input:hover:not([disabled]),
body.blog-post-view form[id^="webform_"] .field input:focus:not([disabled]),
body.blog-post-view form[id^="webform_"] .field textarea:hover:not([disabled]),
body.blog-post-view form[id^="webform_"] .field textarea:focus:not([disabled]),
body.blog-post-view form[id^="webform_"] .field select:hover:not([disabled]),
body.blog-post-view form[id^="webform_"] .field select:focus:not([disabled]) {
    border-color: #ff6101;
    outline: 0;
    box-shadow: none;
}
body.blog-post-view form[id^="webform_"] .field input[type="text"]::placeholder,
body.blog-post-view form[id^="webform_"] .field input[type="email"]::placeholder,
body.blog-post-view form[id^="webform_"] .field textarea::placeholder {
    opacity: 1;
    color: #bbb;
}
body.blog-post-view form[id^="webform_"] .field .mage-error,
body.blog-post-view form[id^="webform_"] .field ._error input,
body.blog-post-view form[id^="webform_"] .field ._error textarea {
    border-color: #e41f12;
}

/* checkboxes / radios (consent, options): orange when checked */
body.blog-post-view form[id^="webform_"] input[type="checkbox"],
body.blog-post-view form[id^="webform_"] input[type="radio"] {
    accent-color: #ff6101;
}

/* submit button */
body.blog-post-view form[id^="webform_"] .actions-toolbar {
    clear: both;
    margin: 0;
    padding: 0 20px;
    box-sizing: border-box;
}
body.blog-post-view form[id^="webform_"] .actions-toolbar button[type="submit"],
body.blog-post-view form[id^="webform_"] .actions-toolbar .action.submit {
    min-width: 120px;
    margin: 0;
    padding: 10.5px 14px;
    color: #fff;
    background-color: #ff6101;
    border: 1px solid transparent;
    border-radius: 3px;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.275em;
    text-align: center;
    text-transform: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color .5s, border-color .5s, color .5s;
}
body.blog-post-view form[id^="webform_"] .actions-toolbar button[type="submit"]:hover,
body.blog-post-view form[id^="webform_"] .actions-toolbar .action.submit:hover {
    background-color: #e05500;
}

/* phones */
@media (max-width: 767px) {
    body.blog-post-view form[id^="webform_"] fieldset {
        padding: 5px 0 9px;
    }
    body.blog-post-view form[id^="webform_"] .field {
        padding: 0;
    }
    body.blog-post-view form[id^="webform_"] .actions-toolbar {
        padding: 0;
    }
    body.blog-post-view form[id^="webform_"] .actions-toolbar button[type="submit"],
    body.blog-post-view form[id^="webform_"] .actions-toolbar .action.submit {
        width: 100%;
    }
}

/* checkboxes / radios: normal small boxes (the Hyva form reset makes them big and empty-looking) */
body.blog-post-view form[id^="webform_"] input[type="checkbox"],
body.blog-post-view form[id^="webform_"] input[type="radio"] {
    -webkit-appearance: auto;
    appearance: auto;
    width: 14px;
    height: 14px;
    margin: 0 6px 0 0;
    vertical-align: middle;
}
/* file upload fields */
body.blog-post-view form[id^="webform_"] .field input[type="file"] {
    display: block;
    width: 100%;
    margin: 0 0 6px;
    font-size: 14px;
}
/* option lists (checkboxes under a question): readable spacing, labels next to the box */
body.blog-post-view form[id^="webform_"] .field .control label {
    font-weight: 400;
}

/* file upload: grey "Choose File" button like the browser default (the Hyva form reset removes it), hint text 14px with space below */
body.blog-post-view form[id^="webform_"] .field input[type="file"] {
    margin: 0 0 14px;
    color: #000;
    font-size: 13.333px;
    line-height: 1.5;
}
body.blog-post-view form[id^="webform_"] .field input[type="file"]::file-selector-button {
    margin: 0 6px 0 0;
    padding: 1px 6px;
    background: #efefef;
    border: 1px solid #767676;
    border-radius: 3px;
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 13.333px;
    cursor: pointer;
}
body.blog-post-view form[id^="webform_"] .field input[type="file"]::file-selector-button:hover {
    background: #e5e5e5;
}
body.blog-post-view form[id^="webform_"] .webforms-fields-comment {
    margin: 0 0 20px;
    color: #333;
    font-size: 14px;
    line-height: 20px;
}

/* submit area: no stray lines around the button */
body.blog-post-view form[id^="webform_"] .actions-toolbar,
body.blog-post-view form[id^="webform_"] .actions-toolbar .primary,
body.blog-post-view form[id^="webform_"] .captcha-container {
    border: 0;
    box-shadow: none;
}
body.blog-post-view form[id^="webform_"] .actions-toolbar {
    margin-top: 10px;
}

/* a little space between the option questions (like live) */
body.blog-post-view form[id^="webform_"] .field[class*="type-checkbox"],
body.blog-post-view form[id^="webform_"] .field[class*="type-radio"] {
    margin-bottom: 14px;
}

/* phones: less space at the sides of the form. The form sits in a Page Builder row with 10px side padding (inline style)
   inside the page container; take the row padding away and let the form use a bit more of the width. */
@media (max-width: 767px) {
    body.blog-post-view [data-content-type="row"] > [data-element="inner"]:has(.webforms) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body.blog-post-view .webforms {
        margin-left: -8px;
        margin-right: -8px;
    }
}

/* phones: space between the frame of the form and the fields (the fields touched the border) */
@media (max-width: 767px) {
    body.blog-post-view form[id^="webform_"] fieldset {
        padding: 10px 12px 10px;
    }
}