body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dark body {
    background-color: #111827;
}

.logo-font {
    font-family: 'Poppins', sans-serif;
}

/* === CATEGORY LINK STYLES === */
.category-link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
    background-color: #ffffff;
    color: #111827;
    transition: all 0.2s ease-in-out;
}

.dark .category-link {
    background-color: #1f2937;
    color: #FFFFFF;
}

.category-link:hover,
.category-link.active {
    background-color: #f59e0b;
    color: #111827;
}

/* Restores the orange outline for the active category in dark mode */
.dark .category-link.active {
    outline: 2px solid #f59e0b;
}

/* === DEAL CARD STYLES === */
.deal-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #ffffff;
}

.dark .deal-card {
    background-color: #1f2937;
}

.deal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.dark .deal-card:hover {
    box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.05), 0 4px 6px -2px rgba(255, 255, 255, 0.05);
}

.expired-overlay {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

/* === REACTION BUTTONS === */
.reaction-btn {
    transition: transform 0.2s ease, color 0.2s ease;
}

.reaction-btn:hover {
    transform: scale(1.1);
}
.reaction-btn.reacted {
    transform: scale(1.2);
}

/* === UTILITIES === */
.category-scroll-container {
    overflow-x: auto;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.category-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}

/* Fix for uneven grid layout */
#deals-container {
    align-items: stretch;
}

/* Ensures deal card images fit correctly */
.deal-card img {
    object-fit: contain; /* Scales the image down to fit */
    background-color: #ffffff; /* Adds a white background for non-square images */
}

.dark .deal-card img {
    background-color: #ffffff; /* Match the dark deal card background */
}

/* Smooth transition for mobile search bar */
#mobile-search-container {
    transition: all 0.3s ease-in-out;
}