/* css-cart-offers.css — styles that only matter when one of these sections is on the page:
 * main-cart, main-menu.
 * Linked from each of them (see the first line of the section file); theme.css
 * holds the common styles. */

/* Cart: progress towards an offer. The unearned one on the cart page is a full
   .qty-offer-card; the earned one and the menu panel's are plain. */
.qty-progress { margin: 0 0 0.9rem; }

.qty-progress__text { margin: 0.4rem 0 0; font-size: 0.88rem; }

.qty-progress__bar { display: block; height: 8px; margin-top: 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); overflow: hidden; }

.qty-progress__fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.3s var(--ease, ease); }

.qty-progress__meta { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.8rem; }

.qty-progress--earned {
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.qty-progress--earned .qty-progress__text { margin: 0; color: var(--accent); font-weight: 700; }

.qty-progress--compact {
  padding: 0.7rem 0.85rem;
  border: 1.5px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.qty-progress--compact .qty-progress__text { margin: 0; font-size: 0.82rem; font-weight: 600; }

.qty-progress--compact .qty-progress__bar { height: 6px; margin-top: 0.45rem; }