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

/* 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);
    }
}