.htmx-fade-in {
  animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 1. מבנה בסיסי של בועת הצבע */
.color-swatch {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(0, 0, 0, 0.1); /* גבול עדין נגד צבעים בהירים כמו לבן */
  cursor: pointer;
  /* האנימציה הזו נותנת תחושה "קפיצית" (Bouncy) ורכה */
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. מצב ריחוף (Hover) כשהצבע לא מסומן */
.btn-check:not(:checked) + .color-swatch:hover {
  transform: scale(1.15); /* גדל קצת */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* מטיל צל עדין */
}

/* 3. מצב לחוץ (Checked) - אפקט הטבעת המרחפת */
.btn-check:checked + .color-swatch {
  transform: scale(0.9); /* שוקע טיפה פנימה לתחושת לחיצה */
  outline: 2px solid var(--bs-dark, #212529); /* טבעת חיצונית דקה ואלגנטית */
  outline-offset: 3px; /* המרחק של הטבעת מהבועה */
  border-color: transparent; /* מעלים את הגבול הפנימי כדי לשמור על ניקיון */
}

/* 4. עיצוב האייקון V עצמו להופעה חלקה */
.color-check-icon {
  opacity: 0;
  transform: scale(0.3); /* מתחיל קטן */
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 5. הקפצת ה-V החוצה כשהכפתור מסומן */
.btn-check:checked + .color-swatch .color-check-icon {
  opacity: 1;
  transform: scale(1); /* קופץ לגודל המקורי */
}
/* משכפלים כאן את ההגדרות מההום-פייג' למקרה שיש צורך */
.product-card-ui .quick-add-wrapper {
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.3s ease;
}
.product-card-ui:hover .quick-add-wrapper {
  transform: translateY(0);
  opacity: 1;
}
.product-card-ui .product-image-wrapper img {
  transition: transform 0.5s ease;
}
.product-card-ui:hover .product-image-wrapper img {
  transform: scale(1.05);
}

/* סגנון לגלריית התמונות */
.thumbnail-btn.active-thumb {
  border-color: #000 !important;
  border-width: 2px !important;
}

/* הסרת חצים מ-input type number */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* סגנונות לטאבים */
.nav-tabs .nav-item-link.active {
  border-bottom: 2px solid #000 !important;
  color: #000 !important;
}