/**
 * cart-coupon.css — „Mam kod rabatowy": zwinięty panel <details> z polem
 * kuponu WooCommerce.
 *
 * Wymaga tokens.css, base.css i components/field.css (ramka pola).
 * Prefiks .dc-cart-coupon__; klasa .coupon i .coupon-error-notice to
 * kotwice cart.js (tam wstawia błąd kuponu) — dostają tu tylko kolor.
 *
 * MAKIETA MÓWI CO I GDZIE, PROJEKT MÓWI JAK: panel jak pasek dostawy
 * (r22, glass-soft, --dc-shadow-lg), studzienka 40 / r12 (C.8), przycisk
 * „Zastosuj kod" to ranga 2 z C.1 (szkło, --dc-border-line, Inter 600,
 * r16), obrót chevronu przez transformację stanu <details>, nie skrypt.
 */

.dc-cart-coupon {
  overflow: hidden;
  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-coupon__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-space-14);
  padding: var(--dc-space-18) var(--dc-space-24);
  list-style: none;
  cursor: pointer;
}

.dc-cart-coupon__summary::-webkit-details-marker {
  display: none;
}

.dc-cart-coupon__summary:focus-visible {
  border-radius: var(--dc-radius-22);
}

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

.dc-cart-coupon__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-coupon__title {
  display: block;
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-tight);
}

.dc-cart-coupon__subtitle {
  display: block;
  margin-block-start: var(--dc-space-2);
  font-size: var(--dc-text-sm);
  color: var(--dc-text-subtle);
}

/* Chevron obraca się ze stanem <details> — ten sam rysunek, nie drugi
   (komentarz przy 'chevron-down' w inc/icons.php). */
.dc-cart-coupon__chevron {
  flex: none;
  display: flex;
  color: var(--dc-text-subtle);
  transition: transform var(--dc-duration-base) var(--dc-ease);
}

.dc-cart-coupon[open] .dc-cart-coupon__chevron {
  transform: rotate(180deg);
}

.dc-cart-coupon__body {
  padding: 0 var(--dc-space-24) var(--dc-space-22);
}

.dc-cart-coupon__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-12);
  padding-block-start: var(--dc-space-18);
  border-block-start: var(--dc-border) solid var(--dc-border-line);
}

.dc-cart-coupon__field {
  flex: 1 1 var(--dc-grid-min-sm);
}

/* Kod pisany z lekkim traktem jak w makiecie — to ciąg znaków, nie zdanie. */
.dc-cart-coupon__field .dc-field__input {
  letter-spacing: var(--dc-tracking-wide);
}

.dc-cart-coupon__apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--dc-space-14) var(--dc-space-28);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface-glass);
  color: var(--dc-text);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-medium);
  line-height: var(--dc-leading-none);
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    border-color var(--dc-duration-base) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-cart-coupon__apply:hover {
  border-color: var(--dc-accent-a50);
  background-color: var(--dc-surface);
}

.dc-cart-coupon__apply:active {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-inset-press);
}

.dc-cart-coupon__apply:focus-visible {
  border-radius: var(--dc-radius-16);
}

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

/* Błąd kuponu wstawiany przez cart.js pod polem (klasa wtyczki). */
.dc-cart-coupon .coupon-error-notice {
  display: block;
  flex-basis: 100%;
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-danger);
}