/* Gemeinsame Felder für Kontakt, Wunschgericht und native WooCommerce-Formulare. */
:root {
    --et-field-height: 46px;
    --et-field-border: #8093aa;
    --et-field-focus: var(--et-navy);
    --et-field-radius: var(--et-radius-small);
}

body :is(.woocommerce, .wpcf7, .wc-block-checkout) :is(input:not([type]), input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=search], input[type=url], input[type=date], textarea, select):where(:not(.qty)),
body .woocommerce form .form-row :is(input.input-text, textarea, select),
body .woocommerce table.cart td.actions .coupon .input-text {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: var(--et-control-height, var(--et-field-height));
    min-height: var(--et-control-height, var(--et-field-height));
    padding: 10px 12px;
    border: 1px solid var(--et-field-border);
    border-radius: var(--et-field-radius);
    background-color: #fff;
    color: var(--et-ink);
    font: 400 16px/24px var(--et-body);
    box-shadow: none;
    transition: border-color .15s, outline-color .15s;
}

body :is(.woocommerce, .wpcf7, .wc-block-checkout) textarea,
body .woocommerce form .form-row textarea {
    --et-control-height: 132px;
    resize: vertical;
}

body :is(.woocommerce, .wpcf7) select:not(.qty),
body .woocommerce form .form-row select:not(.qty) {
    padding-right: 46px;
    background-position: right 16px center;
}

body :is(.woocommerce, .wpcf7, .wc-block-checkout) :is(input, textarea, select):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):focus,
body .woocommerce form .form-row :is(input.input-text, textarea, select):focus {
    border-color: var(--et-field-focus);
    outline: 2px solid #5c8c9c66;
    outline-offset: 2px;
    box-shadow: none;
}

body .woocommerce form .form-row .password-input input {
    padding-right: 44px;
}
body .woocommerce select#lieferdatum.aeo-ok:not(:focus) {
    outline: 0;
}
/* Safari keeps native selects blue unless the text fill is set explicitly. */
.woocommerce select#lieferdatum,
.woocommerce select#lieferdatum:focus,
.woocommerce select#lieferdatum:active {
    color: var(--et-ink);
    -webkit-text-fill-color: var(--et-ink);
    color-scheme: light;
}
.woocommerce select#lieferdatum option,
.woocommerce .aeo-selected-date {
    color: var(--et-ink);
}
body .woocommerce select#lieferdatum:focus,
body .select2-dropdown .select2-search__field:focus {
    border-color: var(--et-field-focus);
    outline: 2px solid #5c8c9c66;
    outline-offset: 2px;
}

/* Die schwebenden Beschriftungen der Block-Kasse behalten Platz im Feld. */
body :is(.wc-block-checkout, .wc-block-components-form) .wc-block-components-text-input :is(input[type=email], input[type=text], input[type=tel], input[type=number], input[type=password], input[type=url]) {
    height: var(--et-field-height);
    min-height: var(--et-field-height);
    padding: 10px 12px;
    border: 1px solid var(--et-field-border);
    border-radius: var(--et-field-radius);
    font: 400 16px/22px var(--et-body);
    box-shadow: none;
}
body :is(.wc-block-checkout, .wc-block-components-form) .wc-block-components-text-input :is(input[type=email], input[type=text], input[type=tel], input[type=number], input[type=password], input[type=url]):focus {
    border: 1px solid var(--et-field-focus);
    box-shadow: none;
}
body :is(.wc-block-checkout, .wc-block-components-form) .wc-block-components-text-input.is-active :is(input[type=email], input[type=text], input[type=tel], input[type=number], input[type=password], input[type=url]),
body :is(.wc-block-checkout, .wc-block-components-form) .wc-block-components-text-input.is-active :is(input[type=email], input[type=text], input[type=tel], input[type=number], input[type=password], input[type=url]):focus,
body :is(.wc-block-checkout, .wc-block-components-form) .wc-block-components-text-input input:-webkit-autofill,
body :is(.wc-block-checkout, .wc-block-components-form) .wc-block-components-text-input input:-webkit-autofill:focus {
    padding: 18px 12px 4px;
}
body :is(.wc-block-checkout, .wc-block-components-form) .wc-block-components-text-input label {
    left: 13px;
    top: calc(var(--et-field-height) / 2);
}
body :is(.wc-block-checkout, .wc-block-components-form) .wc-block-components-text-input.is-active label,
body :is(.wc-block-checkout, .wc-block-components-form) .wc-block-components-text-input input:-webkit-autofill + label {
    top: 4px;
    transform: scale(.82);
}
body .wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
body .wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus {
    height: var(--et-field-height);
    min-height: var(--et-field-height);
    padding: 18px 46px 4px 12px;
    border: 1px solid var(--et-field-border);
    border-radius: var(--et-field-radius);
    font: 400 16px/22px var(--et-body);
}
body .wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus {
    border-color: var(--et-field-focus);
}
body .wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__label {
    top: 4px;
    left: 13px;
}
body .wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__expand {
    right: 16px;
}

/* SelectWoo-Felder im Konto und die Suchzeile im geöffneten Auswahlmenü. */
body .woocommerce .select2-container .select2-selection--single {
    height: var(--et-field-height);
    min-height: var(--et-field-height);
    padding: 0;
    border: 1px solid var(--et-field-border);
    border-radius: var(--et-field-radius);
    background: #fff;
    font: 400 16px/24px var(--et-body);
}
body .woocommerce .select2-container .select2-selection__rendered {
    padding: 10px 46px 10px 12px;
    line-height: 24px;
    color: var(--et-ink);
}
body .woocommerce .select2-container .select2-selection__arrow {
    top: 0;
    right: 12px;
    height: 44px;
}
body .woocommerce .select2-container--focus .select2-selection--single,
body .woocommerce .select2-container--open .select2-selection--single {
    border-color: var(--et-field-focus);
    outline: 2px solid #5c8c9c66;
    outline-offset: 2px;
}
body .select2-dropdown .select2-search__field {
    min-height: var(--et-field-height);
    padding: 10px 12px;
    border: 1px solid var(--et-field-border);
    border-radius: var(--et-field-radius);
    font: 400 16px/24px var(--et-body);
}

/* Kompakte Mengenfelder teilen Rahmen und Rundung, behalten aber ihre Breite. */
body .woocommerce div.product form.cart .quantity,
body .woocommerce table.et-cart-table .quantity .qty {
    border-color: var(--et-field-border);
    border-radius: var(--et-field-radius);
}

/* Fehlermeldungen bleiben auch beim Fokussieren sichtbar rot. */
body :is(.has-error, .woocommerce-invalid),
body .wpcf7 .wpcf7-not-valid,
body :is(.woocommerce, .wpcf7, .wc-block-checkout) [aria-invalid=true] {
    --et-field-border: #b81c23;
    --et-field-focus: #b81c23;
}
body .woocommerce form .form-row.woocommerce-invalid :is(input.input-text, textarea, select),
body .wpcf7 :is(input, textarea, select).wpcf7-not-valid {
    border-color: var(--et-field-border);
}
body :is(.woocommerce, .wpcf7, .wc-block-checkout) :is(input, textarea, select):disabled {
    background-color: var(--et-soft);
    color: #626d78;
}
@media (forced-colors: active) {
    body .woocommerce select#lieferdatum {
        padding-right: 12px;
        color: CanvasText;
        -webkit-text-fill-color: CanvasText;
    }
}