/* ===== Akuža Sun-Ray Cart Counter ===== */

/* Base state: keep Woodmart's original blue. This is the DEFAULT —
   the badge is blue unless JS explicitly confirms the cart has items. */
.wd-header-cart.cart-widget-opener .wd-cart-number.wd-tools-count {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: visible !important;
  background-color: #007fc2;   /* original blue */
  color: #fff;
  transition: background-color .3s ease, color .3s ease;
}

/* Yellow ONLY when JS has added .has-items (cart count > 0). */
.wd-header-cart.cart-widget-opener .wd-cart-number.wd-tools-count.has-items {
  background-color: #eed44a;   /* yellow — items present */
  color: #2a2a2a;
}

/* Empty state: stay blue and suppress any animation pseudo-elements. */
.wd-header-cart.cart-widget-opener .wd-cart-number.wd-cart-number-empty {
  background-color: #007fc2;   /* original blue — empty state */
  color: #fff;
}
.wd-header-cart.cart-widget-opener .wd-cart-number.wd-cart-number-empty::before,
.wd-header-cart.cart-widget-opener .wd-cart-number.wd-cart-number-empty::after {
  display: none !important;
}

/* Animation gated by .cart-animate (added via JS) */
.wd-header-cart.cart-widget-opener .wd-cart-number.cart-animate::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(238, 212, 74, 0.9) 0deg 6deg,   transparent 6deg 30deg,
    rgba(238, 212, 74, 0.9) 30deg 36deg, transparent 36deg 60deg,
    rgba(238, 212, 74, 0.9) 60deg 66deg, transparent 66deg 90deg,
    rgba(238, 212, 74, 0.9) 90deg 96deg, transparent 96deg 120deg,
    rgba(238, 212, 74, 0.9) 120deg 126deg, transparent 126deg 150deg,
    rgba(238, 212, 74, 0.9) 150deg 156deg, transparent 156deg 180deg,
    rgba(238, 212, 74, 0.9) 180deg 186deg, transparent 186deg 210deg,
    rgba(238, 212, 74, 0.9) 210deg 216deg, transparent 216deg 240deg,
    rgba(238, 212, 74, 0.9) 240deg 246deg, transparent 246deg 270deg,
    rgba(238, 212, 74, 0.9) 270deg 276deg, transparent 276deg 300deg,
    rgba(238, 212, 74, 0.9) 300deg 306deg, transparent 306deg 330deg,
    rgba(238, 212, 74, 0.9) 330deg 336deg, transparent 336deg 360deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 28%, #000 40%, #000 70%, transparent 95%);
          mask-image: radial-gradient(circle, transparent 28%, #000 40%, #000 70%, transparent 95%);
  opacity: 0;
  animation:
    akuza-cart-rays-spin 6s linear 3,
    akuza-cart-rays-fade 2.4s ease-in-out 3;
  animation-fill-mode: both;
}

.wd-header-cart.cart-widget-opener .wd-cart-number.cart-animate::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(238, 212, 74, 0.6) 0%, rgba(238, 212, 74, 0) 70%);
  opacity: 0;
  animation: akuza-cart-halo-pulse 2.4s ease-in-out 3;
  animation-fill-mode: both;
}

@keyframes akuza-cart-rays-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes akuza-cart-rays-fade {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 0.85; }
  50%      { opacity: 1; }
}
@keyframes akuza-cart-halo-pulse {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .wd-header-cart.cart-widget-opener .wd-cart-number.cart-animate::before,
  .wd-header-cart.cart-widget-opener .wd-cart-number.cart-animate::after {
    animation: none !important;
    opacity: 0 !important;
  }
}