/**
 * cart-shipping-bar.css — pasek darmowej dostawy w koszyku, dwa stany:
 * próg osiągnięty (zieleń) i brakuje X zł (złoto).
 *
 * Wymaga tokens.css i base.css. Prefiks .dc-cart-shipping-bar__.
 *
 * MAKIETA MÓWI CO I GDZIE, PROJEKT MÓWI JAK: panel r20 -> --dc-radius-22,
 * szkło .5 -> --dc-surface-glass-soft, cień 0 10 32 .07 -> --dc-shadow-lg
 * (stopień 2, karta rzędu drugiego), studzienka 34 -> 40 / r12 (C.8),
 * pigułka jak tag z C.8. Zieleń stanu bez nowego tokenu — color-mix()
 * z --dc-success, jak w components/notice.css (ten sam powód i te same
 * stopnie 10 / 15 / 30 %).
 *
 * Szerokość wypełnienia: var(--dc-progress) ustawiane w atrybucie style
 * przez PHP — to dana z koszyka, nie wartość projektowa.
 */

.dc-cart-shipping-bar {
  padding: var(--dc-space-20) var(--dc-space-24);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-22);
  background-color: var(--dc-surface-glass-soft);
  -webkit-backdrop-filter: var(--dc-blur-lg);
  backdrop-filter: var(--dc-blur-lg);
  box-shadow: var(--dc-shadow-lg), var(--dc-shadow-inset-top);
}

.dc-cart-shipping-bar__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-space-16);
  margin-block-end: var(--dc-space-14);
}

.dc-cart-shipping-bar__lead {
  display: flex;
  align-items: center;
  gap: var(--dc-space-10);
}

.dc-cart-shipping-bar__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-40);
  height: var(--dc-space-40);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-12);
  background-color: var(--dc-accent-a15);
  color: var(--dc-accent-strong);
}

.dc-cart-shipping-bar__title {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-tight);
  font-variant-numeric: tabular-nums;
}

.dc-cart-shipping-bar__note {
  margin-block-start: var(--dc-space-2);
  font-size: var(--dc-text-sm);
  line-height: var(--dc-leading-snug);
  color: var(--dc-text-subtle);
}

.dc-cart-shipping-bar__pill {
  flex: none;
  padding: var(--dc-space-6) var(--dc-space-12);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-accent-a10);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-base);
  font-weight: var(--dc-weight-black);
  font-variant-numeric: tabular-nums;
  color: var(--dc-accent-strong);
}

/* Tor 8 px w studzience (--dc-surface-sunken), wypełnienie gradientem
   złota z tokenu; szerokość z danych. Przejście szerokości, żeby po
   dorzuceniu worka pasek dojechał, a nie skoczył. */
.dc-cart-shipping-bar__track {
  position: relative;
  height: var(--dc-space-8);
  overflow: hidden;
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-surface-sunken);
}

.dc-cart-shipping-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--dc-progress, 0%);
  border-radius: var(--dc-radius-pill);
  background-image: var(--dc-gradient-gold);
  transition: width var(--dc-duration-slow) var(--dc-ease-out);
}

/* Stan osiągnięty: studzienka, pigułka i końcówka paska w zieleni. */
.dc-cart-shipping-bar--reached .dc-cart-shipping-bar__icon {
  border-color: color-mix(in srgb, var(--dc-success) 30%, transparent);
  background-color: color-mix(in srgb, var(--dc-success) 15%, transparent);
  color: var(--dc-success);
}

.dc-cart-shipping-bar--reached .dc-cart-shipping-bar__pill {
  border-color: color-mix(in srgb, var(--dc-success) 30%, transparent);
  background-color: color-mix(in srgb, var(--dc-success) 10%, transparent);
  color: var(--dc-success);
}

.dc-cart-shipping-bar--reached .dc-cart-shipping-bar__fill {
  background-image: linear-gradient(90deg, var(--dc-accent), var(--dc-success));
}