.navbar-actions .action-btn--wishlist,
.navbar-actions .action-btn--cart,
.navbar-actions .action-btn--account {
  position: relative;
  overflow: visible !important;
  isolation: isolate;
}

/* The badge is deliberately a sibling of the button, so no button animation
   or legacy overflow rule can clip it into the circular control. */
.navbar-actions .nav-action-slot {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  overflow: visible !important;
}

.action-btn--cart i,
.action-btn--account i {
  position: relative;
  z-index: 2;
}

.wishlist-nav-icon {
  position: relative;
  z-index: 2;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: currentColor;
  transition: color 0.2s ease, transform 0.2s ease;
}

.wishlist-nav-icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wishlist-nav-icon path {
  fill: transparent;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  transition: fill 0.2s ease, stroke 0.2s ease;
}

.action-btn--wishlist.is-populated .wishlist-nav-icon {
  color: #d83d4f;
}

.action-btn--wishlist.is-populated .wishlist-nav-icon path {
  fill: currentColor;
}

.action-btn--cart.is-populated i {
  color: #d83d4f;
}

.action-btn--wishlist:hover .wishlist-nav-icon,
.action-btn--wishlist:focus-visible .wishlist-nav-icon {
  color: #fff;
  transform: scale(1.1);
}

.navbar-actions .nav-action-slot > .nav-count-badge,
.navbar-actions .nav-action-slot > .wishlist-badge,
.navbar-actions .nav-action-slot > .cart-badge {
  position: absolute;
  z-index: 5;
  /* Keep the count beside the control, inside the navbar's safe vertical area. */
  top: 2px !important;
  left: -8px !important;
  right: auto !important;
  min-width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #0d4737;
  border-radius: 999px;
  background: linear-gradient(145deg, #ff6676, #d82645);
  box-shadow:
    0 4px 10px rgba(116, 18, 37, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transform: none !important;
  letter-spacing: 0;
  animation: none;
}

.navbar-actions .nav-count-badge[hidden],
.navbar-actions .wishlist-badge[hidden],
.navbar-actions .cart-badge[hidden] {
  display: none !important;
}

.action-btn--cart.is-cart-running i {
  animation: navCartRun 1s cubic-bezier(0.18, 0.9, 0.24, 1);
}

.nav-action-slot--cart.is-cart-running .cart-badge {
  animation: navBadgePop 0.62s cubic-bezier(0.2, 0.9, 0.3, 1.35);
}

[data-wishlist-toggle] {
  position: relative;
}

[data-wishlist-toggle].is-loading {
  cursor: wait;
  pointer-events: none;
  opacity: 0.72;
}

[data-wishlist-toggle].is-loading > i {
  animation: wishlistWaiting 0.72s ease-in-out infinite alternate;
}

[data-wishlist-toggle].is-just-saved > i {
  animation: wishlistPop 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.35);
}

[data-wishlist-toggle].is-active > i,
[data-wishlist-toggle].active > i {
  color: #cf405d;
}

.wishlist-feedback {
  position: fixed;
  z-index: 2147483000;
  inset-inline-start: 50%;
  bottom: 28px;
  width: max-content;
  max-width: min(430px, calc(100vw - 28px));
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: linear-gradient(135deg, #174c3c, #0c3428);
  box-shadow: 0 18px 50px rgba(4, 29, 22, 0.32);
  color: #fff;
  direction: rtl;
  font-family: 'Cairo', 'Tajawal', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translateX(50%) translateY(16px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.wishlist-feedback i {
  color: #f2c36d;
  font-size: 1rem;
}

.wishlist-feedback.is-error {
  background: linear-gradient(135deg, #9b2f43, #6e1c2d);
}

.wishlist-feedback.is-visible {
  opacity: 1;
  transform: translateX(50%) translateY(0);
}

html[data-theme='dark'] .wishlist-badge {
  border-color: #08231a;
  color: #102f26;
}

html[data-theme='dark'] .action-btn--wishlist.is-populated .wishlist-nav-icon {
  color: #ff5b6c;
}

html[data-theme='dark'] .action-btn--cart.is-populated i {
  color: #ff5b6c;
}

html[data-theme='dark'] .nav-count-badge,
html[data-theme='dark'] .wishlist-badge,
html[data-theme='dark'] .cart-badge {
  border-color: #0a261e;
  color: #fff;
}

@keyframes wishlistWaiting {
  to { transform: scale(0.78); opacity: 0.55; }
}

@keyframes wishlistPop {
  0% { transform: scale(0.75); }
  55% { transform: scale(1.38) rotate(-8deg); }
  100% { transform: scale(1); }
}

@keyframes navCartRun {
  0% { transform: translateX(0) rotate(0deg) scale(1); }
  22% { transform: translateX(-10px) rotate(-10deg) scale(1.04); }
  48% { transform: translateX(14px) rotate(12deg) scale(1.08); }
  72% { transform: translateX(-4px) rotate(-4deg) scale(1.02); }
  100% { transform: translateX(0) rotate(0deg) scale(1); }
}

@keyframes navBadgePop {
  0% { transform: scale(0.72); }
  55% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

@media (max-width: 575.98px) {
  .navbar-actions .nav-action-slot > .nav-count-badge,
  .navbar-actions .nav-action-slot > .wishlist-badge,
  .navbar-actions .nav-action-slot > .cart-badge {
    top: 1px !important;
    left: -7px !important;
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    font-size: 0.58rem;
  }

  .wishlist-feedback {
    bottom: 88px;
    min-height: 44px;
    padding: 10px 13px;
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-wishlist-toggle] > i,
  .wishlist-feedback,
  .action-btn--cart.is-cart-running i,
  .nav-action-slot--cart.is-cart-running .cart-badge {
    animation: none !important;
    transition: none !important;
  }
}