/* Plugin me_endpreis – Styles (Bootstrap-4-kompatibel, NOVA). Anpassbar über CSS-Custom-Properties im Child-Template. */
:root {
    --me-endpreis-box-bg: rgba(0, 0, 0, 0.03);
    --me-endpreis-box-border: rgba(0, 0, 0, 0.125);
    --me-endpreis-box-radius: 0.25rem;
    --me-endpreis-value-size: 1.25rem;
    --me-endpreis-active-bg: rgba(40, 167, 69, 0.15);
    --me-endpreis-active-color: inherit;
}

.me-endpreis {
    margin-top: 1rem;
}

.me-endpreis.me-endpreis-no-box {
    margin: 0;
}

.me-endpreis-box {
    padding: 0.75rem 1rem;
    background: var(--me-endpreis-box-bg);
    border: 1px solid var(--me-endpreis-box-border);
    border-radius: var(--me-endpreis-box-radius);
}

.me-endpreis-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
}

.me-endpreis-label {
    flex: 1 1 auto;
}

.me-endpreis-value {
    font-size: var(--me-endpreis-value-size);
    white-space: nowrap;
}

.me-endpreis-secondary,
.me-endpreis-saving,
.me-endpreis-vat {
    margin-top: 0.25rem;
}

.me-endpreis-hint {
    margin-top: 0.5rem;
}

.me-endpreis-min {
    font-weight: 600;
    margin-bottom: 0;
}

/* Mengenfeld bei ungültiger Eingabe */
.me-endpreis-qty-invalid {
    border-color: #dc3545 !important;
}

/* Staffelpreis-Tabelle */
.bulk-prices .me-endpreis-bulk-row[role="button"] {
    cursor: pointer;
}

.bulk-prices .me-endpreis-bulk-row[role="button"]:focus {
    outline: 2px solid rgba(0, 123, 255, 0.5);
    outline-offset: -2px;
}

.bulk-prices .me-endpreis-bulk-row.me-endpreis-active > td {
    background-color: var(--me-endpreis-active-bg);
    color: var(--me-endpreis-active-color);
    font-weight: 600;
}

.bulk-prices .me-endpreis-most-bought-badge {
    margin-left: 0.5rem;
    vertical-align: middle;
}

.bulk-prices.me-endpreis-bulk-styled table {
    border: 1px solid var(--me-endpreis-box-border);
}

.bulk-prices.me-endpreis-bulk-styled tbody tr:nth-of-type(odd) > td {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Fallback-Buttons für Templates ohne form-counter */
.me-endpreis-plusminus {
    display: flex;
    align-items: stretch;
}

.me-endpreis-plusminus .me-endpreis-btn {
    flex: 0 0 auto;
    min-width: 2.75rem;
}

.me-endpreis-plusminus .form-control {
    flex: 1 1 auto;
    text-align: center;
}

@media (max-width: 575.98px) {
    .me-endpreis-value {
        font-size: 1.1rem;
    }
}

/* Box ausblenden, solange noch kein Ergebnis vorliegt (z. B. Konfigurator vor der ersten IO-Antwort) */
.me-endpreis.me-endpreis-pending .me-endpreis-box,
.me-endpreis.me-endpreis-pending .me-endpreis-hint {
    display: none;
}