/* Millianshof Bestellformular — minimal supplemental styles to UIkit */

.millianshof-bestellformular {
    margin: 1em 0;
}

.millianshof-form .ms-required {
    color: #b00;
}

.millianshof-form__intro {
    background: #f8f8f8;
    border-left: 3px solid #2c5530;
    padding: 8px 12px;
}

.millianshof-form__category {
    margin-top: 24px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e0e0e0;
}

.millianshof-form__product {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.millianshof-form__product:last-child {
    border-bottom: none;
}

.millianshof-form__product .uk-form-label-small {
    font-size: 11px;
    color: #666;
    margin-bottom: 2px;
}

.millianshof-form [data-errors-for]:empty {
    display: none;
}

.millianshof-form__product--invalid {
    background-color: #fff5f5;
    box-shadow: inset 3px 0 0 0 #b00;
}

.millianshof-form__product .uk-form-danger {
    border-color: #b00;
    background-color: #fff;
}

.millianshof-form__product-error {
    margin-top: 4px;
    font-weight: 600;
}

/* Wunschprodukte: notice above the product list, rows below it. Every row
   keeps room on the right for the remove control, so all rows line up whether
   or not they can be removed (the first one cannot). */
.millianshof-form__wish-notice {
    margin: 8px 0 0;
}

.millianshof-form__wish {
    scroll-margin-top: 80px;
}

.millianshof-form__wish-row {
    position: relative;
    padding-right: 44px;
}

/* Specific enough to beat UIkit's grid child padding/margin, which would
   otherwise shift the absolutely positioned cell. It starts where the field
   cells start (the row's top padding) and repeats their label line, so the
   control lines up with the inputs. */
.millianshof-form .millianshof-form__wish-row > .millianshof-form__wish-remove-cell {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 8px;
    right: 0;
    width: 36px;
}

.millianshof-form__wish-remove {
    display: block;
    width: 36px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.millianshof-form__wish-remove:hover,
.millianshof-form__wish-remove:focus-visible {
    border-color: #b00;
    color: #b00;
}

.millianshof-form__wish-add {
    margin-top: 8px;
}

.millianshof-form__wish-remove[hidden],
.millianshof-form__wish-add[hidden] {
    display: none;
}

.millianshof-form__wish-hint {
    margin: 8px 0 0;
}

[data-form-success] {
    margin: 1em 0;
}

.millianshof-form.is-loading {
    pointer-events: none;
    opacity: 0.75;
}

.millianshof-form__progress {
    margin-top: 8px;
}

.millianshof-form__progress-hint {
    margin: 4px 0 0;
}

/* Livesumme: Positionswerte, geschätzter Warenwert und Anzahlung.
   Name/Basis links, Betrag rechts; auf schmalen Viewports untereinander,
   damit lange Basiszeilen („2 × ca. 4,5 kg × 15,00 €/kg") nicht umbrechen
   und den Betrag verdrängen. */
.millianshof-form__summary {
    background: #f8f8f8;
    border-left: 3px solid #2c5530;
    padding: 12px 16px;
}

.millianshof-form__summary-title {
    margin: 0 0 8px;
}

.millianshof-form__summary-list {
    margin: 0;
}

.millianshof-form__summary-item {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    justify-content: space-between;
}

.millianshof-form__summary-value {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Wunschprodukte: a fixed sentence instead of an amount, so it may wrap. */
.millianshof-form__summary-value--text {
    white-space: normal;
}

.millianshof-form__summary-total {
    margin: 12px 0 0;
    font-weight: 600;
}

.millianshof-form__summary-hint {
    margin: 4px 0 0;
}

@media (max-width: 480px) {
    .millianshof-form__summary-item {
        flex-direction: column;
    }
    .millianshof-form__summary-value {
        font-weight: 600;
    }
}