/*
 * Web forms inside CMS pages (contact, request, leasing, registration ... forms of the MageMe WebForms module),
 * styled like the live shop: every field full width, small bold labels, light grey bordered inputs with an
 * orange hover/focus border, orange submit button. Only forms inside body.cms-page-view are touched;
 * the form markup, validation and submit logic are not changed. Plain CSS, no Tailwind rebuild.
 */
body.cms-page-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.cms-page-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.cms-page-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.cms-page-view form[id^="webform_"] .field .control {
    width: 100%;
}
body.cms-page-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.cms-page-view form[id^="webform_"] .field.required > .label::after {
    content: " *";
    color: #e41f12;
}

/* inputs */
body.cms-page-view form[id^="webform_"] .field input[type="text"],
body.cms-page-view form[id^="webform_"] .field input[type="email"],
body.cms-page-view form[id^="webform_"] .field input[type="tel"],
body.cms-page-view form[id^="webform_"] .field input[type="number"],
body.cms-page-view form[id^="webform_"] .field input[type="password"],
body.cms-page-view form[id^="webform_"] .field input[type="url"],
body.cms-page-view form[id^="webform_"] .field input[type="date"],
body.cms-page-view form[id^="webform_"] .field .input-text,
body.cms-page-view form[id^="webform_"] .field textarea,
body.cms-page-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.cms-page-view form[id^="webform_"] .field textarea {
    min-height: 59px;
    resize: vertical;
}
body.cms-page-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.cms-page-view form[id^="webform_"] .field input:hover:not([disabled]),
body.cms-page-view form[id^="webform_"] .field input:focus:not([disabled]),
body.cms-page-view form[id^="webform_"] .field textarea:hover:not([disabled]),
body.cms-page-view form[id^="webform_"] .field textarea:focus:not([disabled]),
body.cms-page-view form[id^="webform_"] .field select:hover:not([disabled]),
body.cms-page-view form[id^="webform_"] .field select:focus:not([disabled]) {
    border-color: #ff6101;
    outline: 0;
    box-shadow: none;
}
body.cms-page-view form[id^="webform_"] .field input[type="text"]::placeholder,
body.cms-page-view form[id^="webform_"] .field input[type="email"]::placeholder,
body.cms-page-view form[id^="webform_"] .field textarea::placeholder {
    opacity: 1;
    color: #bbb;
}
body.cms-page-view form[id^="webform_"] .field .mage-error,
body.cms-page-view form[id^="webform_"] .field ._error input,
body.cms-page-view form[id^="webform_"] .field ._error textarea {
    border-color: #e41f12;
}

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

/* submit button */
body.cms-page-view form[id^="webform_"] .actions-toolbar {
    clear: both;
    margin: 0;
    padding: 0 20px;
    box-sizing: border-box;
}
body.cms-page-view form[id^="webform_"] .actions-toolbar button[type="submit"],
body.cms-page-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.cms-page-view form[id^="webform_"] .actions-toolbar button[type="submit"]:hover,
body.cms-page-view form[id^="webform_"] .actions-toolbar .action.submit:hover {
    background-color: #e05500;
}

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

/* registration page: its forms keep two columns on wide screens (live: .group-registration .field.wf-lg-1-2 {width:50%}) */
body.cms-page-view .group-registration form[id^="webform_"] {
    max-width: none;
    margin-bottom: 0;
}
body.cms-page-view .group-registration form[id^="webform_"] fieldset {
    padding: 0;
    border: 0;
}
body.cms-page-view .group-registration form[id^="webform_"] .field.wf-lg-1-2 {
    float: left;
    clear: none;
    width: 50%;
}
body.cms-page-view .group-registration form[id^="webform_"] .actions-toolbar,
body.cms-page-view .group-registration form[id^="webform_"] .webforms-gdpr {
    padding-left: 0;
}
@media (max-width: 1023px) {
    body.cms-page-view .group-registration form[id^="webform_"] .field.wf-lg-1-2 {
        float: none;
        clear: both;
        width: 100%;
    }
    body.cms-page-view .group-registration form[id^="webform_"] .field {
        padding: 0;
    }
}

/*
 * Registration page (CMS page "registrierung" at /customer/account/create): headline, the customer type
 * selection (two columns) and the registration form like on the live shop. The page content, the form and
 * its logic are not changed.
 */
body.cms-registrierung .column.main h1,
body.cms-registrierung .column.main h2,
body.cms-registrierung main h1,
body.cms-registrierung main h2 {
    margin: 10px 0 20px;
    font-size: 26px;
    font-weight: 300;
    line-height: 28.6px;
    color: #212121;
}
body.cms-registrierung .customer-type-select {
    margin-top: 30px;
    font-size: 14px;
    color: #333;
}
body.cms-registrierung .customer-type-select .row {
    display: flex;
    flex-wrap: wrap;
}
body.cms-registrierung .customer-type-select .row.flex {
    flex-wrap: nowrap;
}
body.cms-registrierung .customer-type-select .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
    box-sizing: border-box;
}
body.cms-registrierung .customer-type-select label {
    margin: 0;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 20px;
    color: #333;
}
body.cms-registrierung .customer-type-select input[type="radio"] {
    appearance: auto;
    -webkit-appearance: radio;
    width: 13px;
    height: 13px;
    margin: 3px 5px 3px 4px;
    vertical-align: middle;
    accent-color: initial;
}

/* the form: same width as the page content (no negative side margin), 14px regular labels, 20px between rows */
body.cms-registrierung .group-registration .webforms,
body.cms-registrierung .group-registration form[id^="webform_"] {
    margin-left: 0;
    margin-right: 0;
}
body.cms-registrierung .group-registration form[id^="webform_"] fieldset {
    border: 0;
    padding: 0;
}
body.cms-registrierung .group-registration form[id^="webform_"] .field > .label {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #000;
}
body.cms-registrierung .group-registration form[id^="webform_"] .field input,
body.cms-registrierung .group-registration form[id^="webform_"] .field select,
body.cms-registrierung .group-registration form[id^="webform_"] .field textarea {
    margin-bottom: 20px;
}

/* phones: one column of options, the seal below them (like live) */
@media (max-width: 767px) {
    body.cms-registrierung .column.main h1,
    body.cms-registrierung .column.main h2,
    body.cms-registrierung main h1,
    body.cms-registrierung main h2 {
        font-size: 20px;
        line-height: 22px;
    }
    body.cms-registrierung .customer-type-select .row.flex {
        flex-wrap: wrap;
    }
    body.cms-registrierung .customer-type-select .row .col-lg-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    body.cms-registrierung .customer-type-select .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    body.cms-registrierung .customer-type-select .pci-siegel {
        position: static;
        display: inline-block;
        margin: 10px 0 0;
    }
}