/* FamilyShop Custom Styles */
@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
}

/* Smooth transitions */
.transition-all-fast {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-height {
  transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out;
}

/* Item strike-through and dimming animation */
.item-gathered {
  opacity: 0.65;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.item-gathered .item-name {
  text-decoration: line-through;
  color: #64748b;
}

/* Custom checkbox styling for mobile shopping */
.checkbox-custom {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.5rem;
  border: 2px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.checkbox-custom.checked {
  background-color: #10b981;
  border-color: #10b981;
  color: #ffffff;
}

/* Pulse animation for realtime active edits */
@keyframes highlight-fade {
  0% { background-color: rgba(16, 185, 129, 0.2); }
  100% { background-color: transparent; }
}

.row-highlight {
  animation: highlight-fade 1.5s ease-out;
}

/* Modal backdrop fade */
.modal-backdrop {
  background-color: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
}

/* Toast notifications container */
#toast-container {
  pointer-events: none;
}

.toast-item {
  pointer-events: auto;
  transform: translateY(1rem);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.toast-item.show {
  transform: translateY(0);
  opacity: 1;
}

/* Floating Action Button (FAB) on mobile */
.mobile-fab {
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4), 0 8px 10px -6px rgba(16, 185, 129, 0.4);
}

/* Modal and PWA animations */
@keyframes scale-up {
  0% { transform: scale(0.95); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-scale-up {
  animation: scale-up 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}