/* Custom CSS for wishlist and cart indicators */

/* Base styles for all icon indicators */
.icon-indicator {
  position: relative;
}

/* Common styles for all indicator numbers */
.icon-indicator-number {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1rem;
  width: 1rem;
  font-size: 0.7rem;
  border-radius: 50%;
  color: #fff;
  z-index: 1;
}

/* Style for the wishlist count */
.icon-indicator-primary .icon-indicator-number {
  background-color: var(--phoenix-primary);
}

/* Style for the cart count */
.icon-indicator-danger .icon-indicator-number {
  background-color: var(--phoenix-danger);
}

/* Ensure the icon indicators don't generate pseudo-elements */
.icon-indicator::before,
.icon-indicator::after,
.icon-indicator-primary::before,
.icon-indicator-primary::after,
.icon-indicator-danger::before,
.icon-indicator-danger::after {
  display: none !important;
}

/* Ensure counter is visible even when it's 0 */
.icon-indicator-number:empty::before {
  content: "0";
}

/* Wishlist button styling */
.btn-wish {
  background-color: transparent;
  border: 1px solid var(--phoenix-warning);
  color: var(--phoenix-warning);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
  padding: 0.75rem 1.25rem;
  line-height: 1.5;
  border-radius: 50rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.btn-wish:hover {
  background-color: var(--phoenix-warning);
  color: white;
}

/* Smaller wishlist button variant */
.btn-wish.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 50rem;
}

/* Cart button styling (mimics btn-wish visually, but sized for icon, using danger color) */
.btn-cart-icon {
  background-color: transparent; /* Initial background */
  border: 1px solid var(--phoenix-danger); /* RED border color */
  color: var(--phoenix-danger); /* RED text/icon color */
  /* Use padding similar to btn-sm for a compact icon button */
  padding: 0.25rem 0.5rem;
  line-height: 1.5; /* Match btn-sm line-height */
  /* Remove specific border-radius to use default from .btn */
  /* border-radius: 50%; */
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  /* Ensure it behaves like a flex container for icon centering */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-cart-icon:hover {
  background-color: var(--phoenix-danger); /* RED hover background */
  color: white; /* White hover text/icon color */
}

/* Sticky preview positioning for dashboard footer editor */
.sticky-preview {
  top: 1rem;
}