/*
 * 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;
}

/* consent checkbox ("Die Hinweise zum Datenschutz ..."): the 20px bottom margin of the rule above pushed the box above its text.
   Checkboxes and radios get no bottom margin, the 20px sit on the row, and the box is aligned with the first line of text. */
body.cms-registrierung .group-registration form[id^="webform_"] .field.choice {
    align-items: flex-start;
    flex-wrap: nowrap;
    margin-bottom: 20px;
}
body.cms-registrierung .group-registration form[id^="webform_"] .field.choice > label {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
}
body.cms-registrierung .group-registration form[id^="webform_"] .field.choice input[type="checkbox"],
body.cms-registrierung .group-registration form[id^="webform_"] .field.choice input[type="radio"] {
    margin: 1px 12px 0 0;
}

/* 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;
    }
}