/* ==========================================================================
   WooPlainly – WooCommerce – Cart
   ========================================================================= */

.wooplainly-cart {
  /* System zmiennych */
  --container-max: 1250px !important;
  --gap-xl: 2.75rem !important; /* ~44px (clamp u dołu i tak mniejszy) */
  --gap-lg: 1.5rem !important; /* 24px */
  --gap-md: 1rem !important; /* 16px */
  --gap-sm: 0.75rem !important; /* 12px */

  --bg: var(--wooplainly-color-surface) !important;
  --surface: var(--wooplainly-color-surface-alt) !important;
  --surface-2: color-mix(
    in srgb,
    var(--wooplainly-color-surface) 75%,
    var(--wooplainly-color-surface-contrast) 25%
  ) !important;
  --stroke: var(--wooplainly-color-surface-contrast) !important;

  --text: var(--wooplainly-color-text) !important;
  --muted: var(--wooplainly-color-text-muted) !important;
  --muted-2: var(--wooplainly-color-text-muted-strong) !important;

  --primary: var(--wooplainly-color-primary) !important;
  --primary-600: var(--wooplainly-color-primary-alt) !important;
  --primary-700: var(--wooplainly-color-primary-strong) !important;

  --danger: var(--wooplainly-color-danger) !important;
  --success: var(--wooplainly-color-success) !important;

  --radius-lg: var(--wooplainly-radius-lg) !important;
  --radius-md: var(--wooplainly-radius-md) !important;
  --radius-sm: var(--wooplainly-radius-sm) !important;

  --shadow: var(--wooplainly-shadow-lg) !important;

  width: min(var(--container-max), 100%) !important;
  margin: 0 auto !important;
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2.5rem) !important;
  color: var(--text) !important;
}

/* =========================================================
   LAYOUT
   ========================================================= */
.wooplainly-cart__layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(18.75rem, 32vw, 26.25rem) !important; /* 300px–420px */
  gap: clamp(1.5rem, 4vw, 2.75rem) !important;
  align-items: start !important;
}

@media (max-width: 62rem) {
  /* 992px */
  .wooplainly-cart__layout {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   HEADER + PROGRESS
   ========================================================= */
.wooplainly-cart__header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
}

.wooplainly-cart__title {
  margin: 0 !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}

.wooplainly-cart__progress {
  width: 100% !important;
  margin-inline-start: clamp(1rem, 2vw, 2rem) !important;
}

.wooplainly-cart__progress-bar {
  width: 100% !important;
  height: 0.75rem !important; /* 12px */
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface) 70%, transparent) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stroke) 60%, transparent) !important; /* 1px */
}

.wooplainly-cart__progress-fill {
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: var(--primary) !important;
  transition: width 0.3s ease !important;
}

.wooplainly-cart__progress-text {
  margin-top: 0.5rem !important;
  margin-bottom: 0 !important;
  font-size: 0.875rem !important;
  color: var(--muted) !important;
}

/* =========================================================
   LISTA POZYCJI
   ========================================================= */
.wooplainly-cart__list {
  display: grid !important;
  gap: clamp(1rem, 2vw, 1.5rem) !important;
}

.wooplainly-cart__item {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: clamp(1rem, 2vw, 1.5rem) !important;
  padding: 1rem !important;
  background: var(--surface) !important;
  border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent) !important; /* 1px */
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow) !important;
}

[data-theme="dark"] .wooplainly-cart__item {
  background: var(--surface-2) !important;
  border-color: color-mix(
    in srgb,
    var(--stroke) 45%,
    transparent
  ) !important; /* 1px */
}

.wooplainly-cart__thumb {
  inline-size: clamp(6rem, 12vw, 8.125rem) !important; /* 96px–130px */
  block-size: clamp(6rem, 12vw, 8.125rem) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
  background: var(--surface-2) !important;
  flex-shrink: 0 !important;
}

.wooplainly-cart__thumb img {
  inline-size: 100% !important;
  block-size: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.wooplainly-cart__details {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.wooplainly-cart__name {
  margin: 0 !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  text-decoration: none !important;
}

.wooplainly-cart__meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
  color: var(--muted) !important;
}

.wooplainly-cart__price {
  margin: 0 !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

/* Akcje w wierszu pozycji */
.wooplainly-cart__actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  gap: 0.75rem !important;
}

/* QTY (spójne z product.css) */
.wooplainly-cart__qty {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important; /* 4px */
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  margin-top: auto !important;
}

.wooplainly-cart__qty button {
  border-radius: 0.5rem !important; /* 8px */
  height: 2.375rem !important; /* 38px */
  padding: 0 0.875rem !important; /* 14px */
  border: 1.5px solid var(--stroke) !important; /* px */
  background: var(--bg) !important;
  color: var(--text) !important;
  font-size: 1.125rem !important; /* 18px */
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: 0.2s !important;
}

.wooplainly-cart__qty button:is(:hover, :focus-visible, :active) {
  background: var(--surface-2) !important;
}

.wooplainly-cart__qty-input {
  text-align: center !important;
  border: none !important;
  font-size: 1rem !important; /* 16px */
  font-weight: 700 !important;
  inline-size: 3.4rem !important;
  background: transparent !important;
  color: var(--text) !important;
}

.wooplainly-cart__qty input::-webkit-outer-spin-button,
.wooplainly-cart__qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.wooplainly-cart__qty input[type="number"] {
  -moz-appearance: textfield;
}

/* Usuń pozycję (spójne z mini-cart) */
.wooplainly-cart__remove {
  padding: 0.5em !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition:
    color 0.2s ease,
    background 0.2s ease !important;
  color: var(--muted-2) !important;
}

.wooplainly-cart__remove svg {
  height: 1.25em !important;
  stroke: color-mix(in srgb, var(--danger) 85%, var(--text) 15%) !important;
}

.wooplainly-cart__remove:is(:hover, :focus-visible, :active) {
  color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 14%, transparent) !important;
  outline: none !important;
}

/* =========================================================
   PODSUMOWANIE (SIDEBAR)
   ========================================================= */
.wooplainly-cart__summary {
  position: sticky !important;
  top: clamp(1rem, 4vw, 2rem) !important;
}

.wooplainly-cart__summary-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  padding: clamp(1.25rem, 3vw, 2rem) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--stroke) !important; /* 1px */
  box-shadow: var(--shadow) !important;
}

.wooplainly-cart__summary-title {
  margin: 0 !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}

.wooplainly-cart__totals {
  display: grid !important;
  gap: 0.75rem !important;
}

.wooplainly-cart__totals-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.95rem !important;
  color: var(--muted) !important;
}

.wooplainly-cart__totals-row--total {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin-top: 0.5rem !important;
}

.wooplainly-cart__divider {
  height: 1px !important;
  margin: 0 !important;
  background: var(--stroke) !important;
  border: none !important;
}

/* CTA w podsumowaniu (spójne z buttonami systemowymi) */
.wooplainly-cart__cta {
  display: grid !important;
  gap: 0.75rem !important;
}

.wooplainly-cart__button-primary,
.wooplainly-cart__button-outline {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
  min-height: 3.125rem !important; /* 50px */
  padding: 0.94em 1.875em !important;
  border-radius: var(--radius-sm) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important; /* 15px */
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}

.wooplainly-cart__button-primary {
  background: var(--primary) !important;
  color: var(--wooplainly-color-on-primary) !important;
}

.wooplainly-cart__button-primary:is(:hover, :focus-visible, :active) {
  background: var(--primary-600) !important;
  transform: translateY(-0.125rem) !important; /* -2px */
  box-shadow: 0 0.25rem 0.9375rem
    color-mix(in srgb, var(--primary) 18%, transparent) !important;
  outline: none !important;
}

/* Outline/ghost */
.wooplainly-cart__button-outline {
  border: 1.5px solid var(--stroke) !important; /* px */
  background: var(--bg) !important;
  color: var(--text) !important;
}

.wooplainly-cart__button-outline:is(:hover, :focus-visible, :active) {
  background: var(--surface-2) !important;
  transform: translateY(-0.125rem) !important;
  box-shadow: 0 0.25rem 0.9375rem
    color-mix(in srgb, var(--text) 18%, transparent) !important;
  outline: none !important;
}

/* =========================================================
   KUPONY
   ========================================================= */
.wooplainly-cart__coupon {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.wooplainly-cart__coupon-label {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
}

.wooplainly-cart__coupon-form {
  display: flex !important;
  gap: 0.75rem !important;
}

.wooplainly-cart__coupon-input {
  flex: 1 !important;
  inline-size: 100% !important;
  min-height: 2.875rem !important; /* 46px */
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--stroke) !important; /* 1px */
  background: var(--bg) !important;
  padding: 0 1rem !important;
  color: var(--text) !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

.wooplainly-cart__coupon-input:focus-visible {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent) !important; /* 3px */
  outline: none !important;
}

.wooplainly-cart__coupon-button {
  min-inline-size: 7.5rem !important; /* 120px */
  min-height: 2.875rem !important; /* 46px */
  border-radius: var(--radius-sm) !important;
  border: none !important;
  font-weight: 600 !important;
  background: var(--primary) !important;
  color: var(--wooplainly-color-on-primary) !important;
  cursor: pointer !important;
  padding: 0 1rem !important;
  transition:
    background 0.2s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}

.wooplainly-cart__coupon-button:is(:hover, :focus-visible, :active) {
  background: var(--primary-600) !important;
  transform: translateY(-0.125rem) !important;
  box-shadow: 0 0.25rem 0.9375rem
    color-mix(in srgb, var(--primary) 18%, transparent) !important;
  outline: none !important;
}

.wooplainly-cart__applied-coupons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin-top: 0.25rem !important;
}

.wooplainly-cart__coupon-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important; /* 6px */
  padding: 0.35rem 0.75rem !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent) !important; /* 1px */
  background: color-mix(in srgb, var(--surface) 70%, transparent) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--muted-2) !important;
  line-height: 1 !important;
}

.wooplainly-cart__coupon-chip span {
  letter-spacing: 0.01em !important;
}

.wooplainly-cart__coupon-chip button {
  border: none !important;
  background: transparent !important;
  color: inherit !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  inline-size: 1.25rem !important; /* 20px */
  block-size: 1.25rem !important;
  border-radius: 999px !important;
  transition: background 0.2s ease !important;
}

.wooplainly-cart__coupon-chip button:is(:hover, :focus-visible, :active) {
  background: color-mix(in srgb, var(--stroke) 14%, transparent) !important;
}

/* =========================================================
   BENEFITY / USP (mała lista w podsumowaniu)
   ========================================================= */
.wooplainly-cart__benefits {
  display: grid !important;
  gap: 0.5rem !important;
  font-size: 0.875rem !important;
  color: var(--muted) !important;
}

.wooplainly-cart__benefit {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.wooplainly-cart__benefit-icon {
  inline-size: 1.125rem !important; /* 18px */
  block-size: 1.125rem !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--success) !important;
  font-size: 1rem !important;
}

/* =========================================================
   STAN PUSTY
   ========================================================= */
.wooplainly-cart__empty {
  text-align: center !important;
  padding: clamp(2rem, 6vw, 4rem) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-md) !important;
  border: 1px dashed var(--stroke) !important; /* 1px dashed */
  color: var(--muted) !important;
}

.wooplainly-cart__empty-title {
  margin: 1rem 0 0.5rem !important;
  font-size: 1.5rem !important;
  color: var(--text) !important;
}

.wooplainly-cart__empty-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 1.5rem !important;
  padding: 0.94em 1.875em !important;
  min-height: 2.875rem !important; /* 46px */
  border-radius: var(--radius-sm) !important;
  background: var(--primary) !important;
  color: var(--wooplainly-color-on-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition:
    background 0.2s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}

.wooplainly-cart__empty-link:is(:hover, :focus-visible, :active) {
  background: var(--primary-600) !important;
  transform: translateY(-0.125rem) !important;
  box-shadow: 0 0.25rem 0.9375rem
    color-mix(in srgb, var(--primary) 18%, transparent) !important;
  outline: none !important;
}

/* =========================================================
   CROSS-SELL
   ========================================================= */
.wooplainly-cart__cross-sell {
  margin-top: clamp(2rem, 4vw, 3rem) !important;
  display: grid !important;
  gap: 1rem !important;
}

.wooplainly-cart__cross-sell-title {
  margin: 0 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.wooplainly-cart__cross-sell-grid {
  display: grid !important;
  grid-template-columns: repeat(
    auto-fill,
    minmax(11.25rem, 1fr)
  ) !important; /* 180px */
  gap: 1rem !important;
}

.wooplainly-cart__cross-sell-card {
  background: var(--surface) !important;
  border-radius: var(--radius-md) !important;
  padding: 1rem !important;
  border: 1px solid var(--stroke) !important; /* 1px */
  display: grid !important;
  gap: 0.5rem !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease !important;
}

.wooplainly-cart__cross-sell-card:is(:hover, :focus-visible, :active) {
  transform: translateY(-0.125rem) !important;
  border-color: color-mix(
    in srgb,
    var(--primary) 45%,
    transparent
  ) !important; /* 1px */
  box-shadow: 0 0.75rem 1.5rem
    color-mix(in srgb, var(--primary) 18%, transparent) !important; /* 12px 24px */
}

.wooplainly-cart__cross-sell-card img {
  inline-size: 100% !important;
  block-size: 8.75rem !important; /* 140px */
  object-fit: cover !important;
  border-radius: var(--radius-md) !important;
}

.wooplainly-cart__cross-sell-card a {
  color: var(--text) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* =========================================================
   NOTICES / TOASTS
   ========================================================= */
.wooplainly-cart__notices {
  position: fixed !important;
  inset: auto 1rem 1rem 1rem !important;
  display: grid !important;
  justify-items: center !important;
  gap: 0.75rem !important;
  z-index: 1000 !important;
  pointer-events: none !important;
}

.wooplainly-cart__notice {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.85rem 1.25rem !important;
  border-radius: 999px !important;
  background: var(--surface) !important;
  border: 1px solid var(--stroke) !important; /* 1px */
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
  pointer-events: auto !important;
}

.wooplainly-cart__notice--error {
  border-color: var(--danger) !important; /* 1px */
  color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 10%, transparent) !important;
}

.wooplainly-cart__notice button {
  border: none !important;
  background: transparent !important;
  color: inherit !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

/* =========================================================
   DARK MODE — doprecyzowania
   ========================================================= */
[data-theme="dark"] .wooplainly-cart,
[data-theme="dark"] .wooplainly-cart__title,
[data-theme="dark"] .wooplainly-cart__price,
[data-theme="dark"] .wooplainly-cart__summary-title,
[data-theme="dark"] .wooplainly-cart__totals-row--total {
  color: var(--text) !important;
}

[data-theme="dark"] .wooplainly-cart__summary-inner,
[data-theme="dark"] .wooplainly-cart__coupon-input,
[data-theme="dark"] .wooplainly-cart__coupon-chip,
[data-theme="dark"] .wooplainly-cart__cross-sell-card,
[data-theme="dark"] .wooplainly-cart__empty {
  background: var(--surface-2) !important;
  border-color: color-mix(
    in srgb,
    var(--stroke) 45%,
    transparent
  ) !important; /* 1px */
}

[data-theme="dark"] .wooplainly-cart__button-primary {
  color: var(--wooplainly-color-on-primary) !important;
}

/* =========================================================
   ACCESSIBILITY / FOCUS
   ========================================================= */
.wooplainly-cart *:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent) !important; /* 3px */
  outline-offset: 0.1875rem !important; /* 3px */
  border-radius: 0.625rem !important; /* 10px */
}