/* Custom CSS for additional styling */
/* This file can be used for custom styles that go beyond Tailwind CSS */

/* Safety: Force hide any overlay backdrops that might get stuck */
.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Ensure modals are properly contained */
[id*="Modal"],
[id*="Overlay"] {
  z-index: 9999;
}

[id*="Modal"].hidden,
[id*="Overlay"].hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide scrollbars while keeping scroll functionality */
#mainContent {
  /* Hide scrollbar for Chrome, Safari and Opera */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer and Edge */
}

#mainContent::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

/* Hide scrollbars for all elements if needed */
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer and Edge */
}

*::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

/* Mobile-first custom styles */
@media (max-width: 768px) {
  /* Custom mobile styles go here */
}

/* Tablet styles */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Custom tablet styles go here */
}

/* Desktop styles */
@media (min-width: 1024px) {
  /* Custom desktop styles go here */
}

/* Utility classes */
.mobile-only {
  display: block;
}

.desktop-only {
  display: none;
}

@media (min-width: 1024px) {
  .mobile-only {
    display: none;
  }

  .desktop-only {
    display: block;
  }
}

/* Smooth transitions */
.smooth-transition {
  transition: all 0.3s ease-in-out;
}

/* Ensure navbar and its buttons remain clickable during animations */
#navbar {
  pointer-events: all !important;
  z-index: 40 !important;
}

#navbar button {
  pointer-events: all !important;
  position: relative;
  z-index: 41 !important;
}

/* Ensure search button is always clickable */
[data-search-btn] {
  pointer-events: all !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 50 !important;
}

/* Ensure footer buttons are always clickable */
[data-footer-btn] {
  pointer-events: all !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 60 !important;
}

/* WhatsApp button specific styling in footer */
[data-footer-btn="whatsapp"]:hover {
  color: #25d366 !important;
}

[data-footer-btn="whatsapp"]:hover i {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

footer {
  pointer-events: all !important;
  z-index: 50 !important;
}

/* Prevent overscroll bounce on iOS */
body {
  overscroll-behavior: none;
  -webkit-overscroll-behavior: none;
}

/* Like button styles */
.like-button {
  transition: all 0.2s ease-in-out;
}

.like-button:hover {
  transform: scale(1.1);
}

.like-button.liked {
  color: #ef4444 !important; /* red-500 */
}

.like-button.liked .like-icon {
  color: #ef4444 !important; /* red-500 */
}

.like-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Like count animation */
.like-count {
  transition: all 0.3s ease-in-out;
}

/* Heart icon animation */
.like-icon {
  transition: all 0.2s ease-in-out;
}

/* Feedback message styles */
.like-feedback {
  animation: slideInDown 0.3s ease-out;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}