/* Food checkout and item-dialog inline validation with shared field-error presentation. */
.pxab-food-order__form [data-pxab-food-field-wrap],
[data-pxab-food-item-form] [data-pxab-food-field-wrap] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.pxab-food-order__form [data-pxab-food-field-wrap].is-invalid input,
.pxab-food-order__form [data-pxab-food-field-wrap].is-invalid textarea,
.pxab-food-order__form [data-pxab-food-field-wrap].is-invalid select,
[data-pxab-food-item-form] [data-pxab-food-field-wrap].is-invalid input,
[data-pxab-food-item-form] [data-pxab-food-field-wrap].is-invalid textarea,
[data-pxab-food-item-form] [data-pxab-food-field-wrap].is-invalid select {
    border-color: var(--pxab-food-error-text) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pxab-food-error-text) 12%, transparent);
}

.pxab-food-order__form [data-pxab-food-field-wrap].is-invalid input:focus,
.pxab-food-order__form [data-pxab-food-field-wrap].is-invalid textarea:focus,
.pxab-food-order__form [data-pxab-food-field-wrap].is-invalid select:focus,
[data-pxab-food-item-form] [data-pxab-food-field-wrap].is-invalid input:focus,
[data-pxab-food-item-form] [data-pxab-food-field-wrap].is-invalid textarea:focus,
[data-pxab-food-item-form] [data-pxab-food-field-wrap].is-invalid select:focus {
    outline: 2px solid color-mix(in srgb, var(--pxab-food-error-text) 24%, transparent);
    outline-offset: 2px;
}

.pxab-food-order__form .pxab-field-error[data-pxab-food-field-error],
[data-pxab-food-item-form] .pxab-field-error[data-pxab-food-field-error] {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.pxab-food-order__form .pxab-field-error[data-pxab-food-field-error][hidden],
[data-pxab-food-item-form] .pxab-field-error[data-pxab-food-field-error][hidden] {
    display: none !important;
}

.pxab-food-special-request .pxab-field-error[data-pxab-food-field-error="special_request"] {
    margin-top: 8px;
}

.pxab-food-order__form [data-pxab-food-field-wrap="order_notes"] {
    margin-top: 16px;
}

@media (forced-colors: active) {
    .pxab-food-order__form [data-pxab-food-field-wrap].is-invalid input,
    .pxab-food-order__form [data-pxab-food-field-wrap].is-invalid textarea,
    .pxab-food-order__form [data-pxab-food-field-wrap].is-invalid select,
    [data-pxab-food-item-form] [data-pxab-food-field-wrap].is-invalid input,
    [data-pxab-food-item-form] [data-pxab-food-field-wrap].is-invalid textarea,
    [data-pxab-food-item-form] [data-pxab-food-field-wrap].is-invalid select {
        border-color: Mark;
    }
}