/* Shared small components: summary card, badges, price-rule discount. */
@layer components {
    /* ---------- Summary card and badges ---------- */
    .summary-card { margin-bottom: var(--space-5); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
    .summary-list { display: grid; gap: var(--space-3); margin: 0; }
    .summary-list div { display: flex; flex-wrap: wrap; gap: var(--space-4); }
    .summary-list dt { min-width: 110px; color: var(--color-text-muted); font-weight: 600; }
    .summary-list dd { margin: 0; }
    .badge { display: inline-block; margin-left: var(--space-2); padding: .1rem var(--space-2); border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 700; }
    .badge-success { background: color-mix(in srgb, var(--color-success) 14%, var(--color-surface)); color: var(--color-success); }
    .badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }

    /* Price rules: a discount is highlighted, a surcharge is not shown */
    .quote-was { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
    .discount-badge { display: inline-block; padding: .1rem var(--space-2); border-radius: var(--radius-pill); background: var(--color-success); color: var(--color-on-dark); font-size: 0.72rem; font-weight: 800; }
    .quote-total.is-discounted { color: var(--color-success); }
    .quote-discount-label { font-size: var(--text-xs); font-weight: 700; color: var(--color-success); }
    .quote-breakdown li.is-discount, .quote-breakdown li.is-discount strong { color: var(--color-success); }
}