/* ==========================================================================
   WooPlainly – Components – Mini Cart
   ========================================================================= */

.wooplainly-mini-cart {
  --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;

  --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;

  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  color: var(--text) !important;
  font-family: inherit !important;
  background: transparent !important;
}
/* =========================================================
   MINI CART — BACKDROP + DRAWER + LAYOUT (BLOK 2)
   ========================================================= */

/* Kontrola otwarcia */
.wooplainly-mini-cart.is-open {
  pointer-events: auto !important;
}

body.wooplainly-mini-cart-open {
  overflow: hidden !important;
}

/* Backdrop */
.wooplainly-mini-cart__backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.35) !important;
  opacity: 0.45 !important;
  pointer-events: auto !important;
  transition: opacity 0.3s ease !important;
}

.wooplainly-mini-cart.is-open .wooplainly-mini-cart__backdrop {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Drawer (prawy panel) */
.wooplainly-mini-cart__drawer {
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: min(26.25rem, 100%) !important; /* 420px */
  background: var(--bg) !important;
  box-shadow: -0.375rem 0 1.75rem rgba(0, 0, 0, 0.12) !important; /* -6px 0 28px */
  border-left: 1px solid color-mix(in srgb, var(--stroke) 60%, transparent) !important;
  transform: translateX(100%) !important;
  transition: transform 0.35s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

.wooplainly-mini-cart.is-open .wooplainly-mini-cart__drawer {
  transform: translateX(0) !important;
}

/* Shell */
.wooplainly-mini-cart__shell {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 1.5rem !important; /* 24px */
  gap: 1.25rem !important; /* 20px */
}

/* RESPONSYWNOŚĆ */
@media (max-width: 30rem) {
  /* 480px */
  .wooplainly-mini-cart__drawer {
    width: 100% !important;
  }
}
/* =========================================================
   MINI CART — HEADER + ITEMS + QTY + REMOVE (BLOK 3)
   ========================================================= */

/* Header */
.wooplainly-mini-cart__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 0.875rem !important; /* 14px */
  border-bottom: 1px solid var(--stroke) !important;
}

.wooplainly-mini-cart__title {
  font-size: 1.375rem !important; /* 22px */
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--text) !important;
}

/* Close button (jak mały button w product.css) */
.wooplainly-mini-cart__close {
  width: 2.375rem !important; /* 38px */
  height: 2.375rem !important; /* 38px */
  padding: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--stroke) !important; /* zachowujemy px */
  color: var(--text) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: 0.25s ease !important;
}

.wooplainly-mini-cart__close:is(:hover, :focus-visible, :active) {
  color: var(--primary-700) !important;
  background: color-mix(
    in srgb,
    var(--primary) 40%,
    var(--surface) 60%
  ) !important;
  outline: none !important;
}

/* Product list area */
.wooplainly-mini-cart__body {
  flex: 1 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important; /* 16px */
  scrollbar-width: thin !important;
}

.wooplainly-mini-cart__items {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important; /* 16px */
}

/* Single item */
.wooplainly-mini-cart__item {
  display: flex !important;
  gap: 0.875rem !important; /* 14px */
  padding: 0.875rem !important; /* 14px */
  border-radius: var(--radius-md) !important;
  background: var(--surface) !important;
  border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent) !important;
}

/* Thumbnail */
.wooplainly-mini-cart__thumb {
  width: 5.125rem !important; /* 82px */
  height: 5.125rem !important; /* 82px */
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
  background: var(--surface-2) !important;
  flex-shrink: 0 !important;
}

.wooplainly-mini-cart__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Item details */
.wooplainly-mini-cart__details {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.375rem !important; /* 6px */
}

.wooplainly-mini-cart__name {
  font-size: 0.9375rem !important; /* 15px */
  font-weight: 600 !important;
  color: var(--text) !important;
  text-decoration: none !important;
}

.wooplainly-mini-cart__price {
  font-size: 0.9375rem !important; /* 15px */
  font-weight: 700 !important;
  color: var(--text) !important;
}

.wooplainly-mini-cart__qty {
  display: flex !important;
  align-items: center !important;
  gap: 0.375rem !important; /* 6px */
  margin-top: auto !important;
}

.wooplainly-mini-cart__qty button {
  border-radius: 0.5rem !important; /* 8px */
  height: 2.375rem !important; /* 38px */
  width: 2.375rem !important; /* 38px */
  padding: 0 !important;
  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-mini-cart__qty button:is(:hover, :focus-visible, :active) {
  background: var(--surface-2) !important;
}

.wooplainly-mini-cart__qty-input {
  text-align: center !important;
  height: 2.375rem !important; /* 38px */
  width: 3rem !important; /* 48px */
  border: none !important;
  font-size: 1rem !important; /* 16px */
  font-weight: 700 !important;
  color: var(--text) !important;
  background: transparent !important;
}

.wooplainly-mini-cart__actions {
  display: flex !important;
  justify-content: space-between !important;
  gap: 0.75rem !important; /* 12px */
  margin-inline-start: auto !important;
  align-items: flex-end !important;
}

/* Usuń produkt */
.wooplainly-mini-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;
  align-self: flex-end !important;
  color: var(--muted-2) !important;
}

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

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

/* =========================================================
   MINI CART — SUMMARY + BUTTONS + COUPON + EMPTY
   ========================================================= */

/* Kupony */

.wooplainly-mini-cart__coupon {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem !important; /* 8px */
}

.wooplainly-mini-cart__coupon-input {
  flex: 1 !important;
  padding: 0.625rem 0.75rem !important; /* 10px 12px */
  border-radius: var(--radius-sm) !important;
  border: 1.5px solid var(--stroke) !important; /* px */
  background: var(--bg) !important;
  font-size: 0.875rem !important; /* 14px */
}

.wooplainly-mini-cart__coupon-apply {
  padding: 0.625rem 1rem !important; /* 10px 16px */
  border-radius: var(--radius-sm) !important;
  border: none !important;
  background: var(--primary) !important;
  color: var(--wooplainly-color-on-primary) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: 0.25s ease !important;
  font-size: 0.875rem !important; /* 14px */
}

.wooplainly-mini-cart__coupon-apply:is(:hover, :focus-visible, :active) {
  background: var(--primary-600) !important;
}

.wooplainly-mini-cart__coupons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.375rem !important; /* 6px */
  margin-top: 0.75rem !important; /* 12px */
}

.wooplainly-mini-cart__coupon-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important; /* 4px */
  padding: 0.3rem 0.6rem !important; /* ~5px 10px */
  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.75rem !important; /* 12px */
  font-weight: 600 !important;
  color: var(--muted-2) !important;
  line-height: 1 !important;
}

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

.wooplainly-mini-cart__coupon-remove {
  border: none !important;
  background: transparent !important;
  color: inherit !important;
  cursor: pointer !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;
  font-size: 0.875rem !important; /* 14px */
  font-weight: 700 !important;
  transition: background 0.2s ease !important;
}

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

/* Podsumowanie koszyka */
.wooplainly-mini-cart__summary {
  border: 1px solid var(--stroke) !important;
  background: var(--surface) !important;
  border-radius: var(--radius-md) !important;
  padding: 1rem !important; /* 16px */
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important; /* 12px */
}

.wooplainly-mini-cart__summary-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.375rem !important; /* 6px */
}

.wooplainly-mini-cart__summary-row {
  display: flex !important;
  justify-content: space-between !important;
  color: var(--muted) !important;
  font-size: 0.875rem !important; /* 14px */
}

/* Suma końcowa */
.wooplainly-mini-cart__summary-total {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 1.125rem !important; /* 18px */
  font-weight: 700 !important;
  color: var(--text) !important;
  margin-top: 0.375rem !important; /* 6px */
}

/* Przyciski CTA */
.wooplainly-mini-cart__summary-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.625rem !important; /* 10px */
  margin-top: 0.625rem !important; /* 10px */
}

.wooplainly-mini-cart__button {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0.875rem !important; /* 14px */
  border-radius: var(--radius-sm) !important;
  border: 1.5px solid var(--stroke) !important; /* px */
  background: var(--bg) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important; /* 15px */
  cursor: pointer !important;
  transition: 0.25s ease !important;
  text-decoration: none !important;
}

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

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

.wooplainly-mini-cart__button--primary:is(:hover, :focus-visible, :active) {
  background: var(--primary-600) !important;
}

/* Ghost */
.wooplainly-mini-cart__button--ghost {
  background: transparent !important;
  border: none !important;
  color: var(--muted) !important;
}

.wooplainly-mini-cart__button--ghost:is(:hover, :focus-visible, :active) {
  color: var(--text) !important;
}

/* Pusty koszyk */
.wooplainly-mini-cart__empty {
  text-align: center !important;
  padding: 1.75rem 0 !important; /* 28px 0 */
  color: var(--muted) !important;
}

.wooplainly-mini-cart__empty-title {
  font-size: 1.0625rem !important; /* 17px */
  font-weight: 700 !important;
  color: var(--text) !important;
}

.wooplainly-mini-cart__empty-link {
  display: inline-block !important;
  margin-top: 0.625rem !important; /* 10px */
  padding: 0.625rem 0.875rem !important; /* 10px 14px */
  border: 1.5px solid var(--stroke) !important; /* px */
  border-radius: var(--radius-sm) !important;
  text-decoration: none !important;
  color: var(--text) !important;
  transition: 0.25s ease !important;
}

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

/* =========================================================
   MINI CART — PROGRESS + NOTICES (BLOK 4)
   ========================================================= */

/* Progress Bar Wrapper */
.wooplainly-mini-cart__progress {
  background: var(--surface) !important;
  border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent) !important;
  border-radius: var(--radius-md) !important;
  padding: 1rem !important;
  display: grid !important;
  gap: 0.5rem !important;
}

/* Progress Bar Track */
.wooplainly-mini-cart__progress-bar {
  inline-size: 100% !important;
  block-size: 0.5rem !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--stroke) 70%, transparent) !important;
  position: relative !important;
  overflow: hidden !important;
}

.wooplainly-mini-cart__progress-bar::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    135deg,
    var(--primary) 0%,
    var(--primary-700) 100%
  ) !important;
  transform-origin: left center !important;
  transform: scaleX(var(--wooplainly-progress-scale, 0)) !important;
  transition: transform 0.35s ease !important;
}

/* Progress Text */
.wooplainly-mini-cart__progress-text {
  margin: 0 !important;
  font-size: 0.9rem !important;
  color: var(--muted) !important;
}

/* Notices Wrapper */
.wooplainly-mini-cart__notices {
  display: grid !important;
  gap: 0.75rem !important;
}

/* Single Notice */
.wooplainly-mini-cart__notice {
  background: var(--surface) !important;
  border: 1px solid color-mix(in srgb, var(--stroke) 75%, transparent) !important;
  border-radius: var(--radius-md) !important;
  padding: 0.85rem 1rem !important;
  color: var(--text) !important;
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wooplainly-mini-cart__notice.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Notice Close Button */
.wooplainly-mini-cart__notice button {
  margin-left: auto !important;
  border: none !important;
  background: transparent !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

/* Error Notice Variant */
.wooplainly-mini-cart__notice--error {
  border-color: color-mix(
    in srgb,
    var(--wooplainly-color-danger) 70%,
    transparent
  ) !important;
}

/* =========================================================
   DARK MODE
   ========================================================= */
[data-theme="dark"] .wooplainly-mini-cart__drawer,
[data-theme="dark"] .wooplainly-mini-cart__item,
[data-theme="dark"] .wooplainly-mini-cart__summary,
[data-theme="dark"] .wooplainly-mini-cart__notice,
[data-theme="dark"] .wooplainly-mini-cart__progress,
[data-theme="dark"] .wooplainly-mini-cart__coupon-input,
[data-theme="dark"] .wooplainly-mini-cart__coupon-pill {
  background: var(--surface-2) !important;
  border-color: color-mix(in srgb, var(--stroke) 40%, transparent) !important;
}
/* =========================================================
   MINI CART — CLEANUP + UX (BLOK 5)
   ========================================================= */

/* Scrollbar estetyczny */
.wooplainly-mini-cart__body::-webkit-scrollbar {
  width: 0.375rem !important; /* 6px */
}

.wooplainly-mini-cart__body::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--stroke) 50%, transparent) !important;
  border-radius: 0.625rem !important; /* 10px */
}

.wooplainly-mini-cart *:focus-visible {
  outline: 0.1875rem solid color-mix(in srgb, var(--primary) 35%, transparent) !important; /* 3px */
  outline-offset: 0.0625rem !important; /* 1px */
  border-radius: 0.375rem !important; /* 6px */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wooplainly-mini-cart__drawer,
  .wooplainly-mini-cart__backdrop {
    transition: none !important;
  }
}