:root {
    --primary-color: #8bb7b9;     /* Retain original logo background */
    --secondary-color: #5c8a8d;   /* Darker, complementary blue-green */
    --accent-color: #f47a3c;      /* Warm, professional orange */
    --text-color: #2c3e50;        /* Deep charcoal for readability */
    --background-color: #f4f7f8;  /* Very light blue-gray */
    --subtle-gray: #e6eaed;       /* Soft gray for subtle separations */
    --font-primary: 'Inter', 'Open Sans', sans-serif; /* Font Stack */
    
    --navbar-height: 108px;
    --tabs-nav-height: 78px;
}

* {
    box-sizing: border-box;
    max-width: 100%;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    letter-spacing: 0.02em;
    font-weight: 400;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding: 0;
    margin: 0; /* Remove default body margin */
    min-height: 100vh;

    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;    /* hides scrollbar Chrome, Safari, Edge */
  scroll-behavior: smooth;
}

html{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Styles only for main content in about.html and privacy-policy.html */
main.content-page {
    margin: 160px auto;
    padding: 30px;
    max-width: 800px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
}

header {
    background-color: var(--primary-color);
    padding: 60px;
    text-align: center;
    color: var(--background-color);
}

h1, h2, h3 {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.8rem;
}

h1 { font-size: 2.4rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.2rem; }

.fixed-badge {
    color: #fff;
    background-color: #e53935;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-left: 5px;
    display: inline-block;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

#copy-button {
    background-color: var(--accent-color);
    color: var(--background-color); /* Ensure white text */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

#copy-button:hover {
    background-color: var(--secondary-color);
}

#category-filter-btn {
    background-color: var(--accent-color);
    color: var(--background-color); /* Ensure white text */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

/* Hover effect for an active (enabled) button */
#category-filter-btn:hover:not([disabled]) {
    background-color: var(--secondary-color);
}

/* Disabled state */
#category-filter-btn:disabled {
    background-color: #ccc; /* Gray background when disabled */
    cursor: not-allowed;    /* Not allowed cursor */
    color: #666;            /* Dimmed text color */
    border-color: #999;     /* Optionally change border color */
}

/* Override hover behavior when button is disabled */
#category-filter-btn:disabled:hover {
    background-color: #ccc; /* Ensure background remains gray */
}

#close-category-filter {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 10px 15px;
    margin-top: 10px;
    cursor: pointer;
    width: 100%;
}

/*
 * CSS for Deal Images in the table
 */

/* 1. Style the table cell containing the image and link */
.deal-description-cell {
    display: flex;         /* Aligns items horizontally */
    align-items: center;   /* Vertically centers the items */
    gap: 12px;             /* Adds space between the image and the text link */
    min-width: 0;
}

/* 2. Style the image itself */
.deal-image {
    width: 60px;           /* Set a fixed width for the thumbnail */
    height: 60px;          /* Set a fixed height */
    object-fit: contain;   /* Ensures the entire image fits without stretching or being cropped */
    flex-shrink: 0;        /* Prevents the image from shrinking if the cell gets narrow */
    border-radius: 4px;    /* Adds slightly rounded corners for a modern look */
    background-color: #f0f0f0; /* A light background color for images with transparency */
}

/* 3. Ensure the link can grow to fill the remaining space */
.deal-description-cell a {
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal; /* Ensures text can wrap to the second line */
}

/* Scroll to top button */
#scroll-to-top {
  position: fixed;
  top: 125px;
  right: 20px;
  background-color: rgba(244, 122, 60, 0.5); /* Semi-transparent orange */
  color: var(--background-color);
  border: none;
  border-radius: 50%;
  width: calc(40px + 1vw);
  height: calc(40px + 1vw);
  
  min-width: 40px;
  min-height: 40px;
  max-width: 100px;
  max-height: 100px;
  font-size: 24px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  

}
#scroll-to-top.show {
  opacity: 1;
  pointer-events: auto;
}
#scroll-to-top:hover {
  background-color: var(--secondary-color);
}

.sort-indicator {
  display: inline-block;
  width: 12px; /* Fixed width */
  text-align: center;
  vertical-align: middle;
  margin-left: 4px;
}

.navbar, main, footer {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    padding: 10px 20px;
    z-index: 1000;
    width: 100%;
    
    height: var(--navbar-height);
    box-sizing: border-box;
}

.navbar .logo-container {
    display: flex;
    align-items: center;
    flex-shrink: 1; /* Allows container to shrink */
    min-width: 0; /* Allows text to shrink below its content size */
    transition: all 0.3s ease; /* Smooth transition for responsive changes */
    aspect-ratio: auto; /* This preserves the original aspect ratio */
}

.navbar .logo-container img {
    width: auto;
    height: auto;
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
}

.navbar .logo {
    width: 80px;
    height: 80px;
}

.navbar .site-title {
    margin-left: 10px;
    font-size: clamp(0.75rem, 3vw, 1.5rem);
    white-space: nowrap; /* Prevents text wrapping */
    color: var(--background-color);
}

.site-title-link {
  text-decoration: none;
  color: inherit;
  display: inline-block; /* ensures block-level styles inside h1 */
}

.site-title-link:hover {
  text-decoration: underline;
  color: var(--secondary-color);
}

.logo-link {
  display: inline-block; /* keep inline-block for proper spacing */
  text-decoration: none; /* just in case */
}

.navbar .nav-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;  /* Allow wrapping */
    justify-content: center;  /* Center the links */
    align-items: center;  /* Vertically center the links */
    gap: 20px;  /* Space between links */
    margin-left: auto;
}

.navbar .nav-links li {
    margin: 5px;  /* Add margin for spacing when wrapped */
    flex-shrink: 0;  /* Prevent links from shrinking */
}

.navbar .nav-links a {
    text-decoration: none;
    font-size: 1rem;
    color: var(--background-color);
    padding: 10px 15px;
    transition: background-color 0.3s ease;
    display: inline-block;  /* Ensures proper spacing */
}

.navbar .nav-links a:hover {
    background-color: var(--secondary-color);
    border-radius: 5px;
}

/* Hero Section */
.hero-section {
    margin: 100px 0 0 0; /* top right bottom left */
    background-color: var(--primary-color);
    color: var(--background-color);
    text-align: center;
    padding: 3rem 1rem;
    z-index: 900; /* hero-section */
    padding: 10px 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.hero-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-section h1 {
    font-size: clamp(1.5rem, 4vw, 3rem);
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.hero-section p {
    font-size: clamp(0.875rem, 2vw, 1.25rem);
    line-height: 1.5;
    max-width: 60ch; /* Optional: limits line length for better readability */
}

.cta-button {
    background-color: var(--accent-color);
    color: var(--background-color);
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: var(--primary-color);
}


/* Form Styles */
.vertical-form {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: 40px auto;
    padding: 30px;
    background-color: var(--background-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    border: 1px solid #ccc;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.form-group label {
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--text-color);
    font-size: 1.1rem;
}

.vertical-form input,
.vertical-form textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.vertical-form input:focus,
.vertical-form textarea:focus {
    border-color: var(--primary-color);
    outline: none;
}

.vertical-form textarea {
    height: 120px;
    resize: none;
}

.vertical-form .cta-button {
    background-color: var(--accent-color);
    color: var(--background-color);
    border: none;
    padding: 12px 20px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
    text-align: center;
}

.vertical-form .cta-button:hover {
    background-color: var(--primary-color);
}

/* Message Styling */
.error-msg {
    color: red;
    font-size: 0.9rem;
    margin-top: 5px;
    font-weight: bold;
}

.success-msg {
    color: green;
    font-size: 1.1rem;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
}
.form-group input.error, .form-group textarea.error {
    border-color: red;
}

.tabs-nav {
    background-color: var(--background-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: sticky;
    z-index: 800;
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
    
    top: var(--navbar-height);
}

.tabs-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;  /* Add this to allow wrapping */
    justify-content: center;
    align-items: center;  /* Vertically center wrapped items */
    padding: 0;
    margin: 0;
    gap: 10px;  /* Add space between wrapped items */

}

.tabs-nav ul li {
    flex: 1; /* This makes all list items equal width */
    margin: 5px;
    text-align: center; /* Center the text within each tab */
}

.tabs-nav ul li a {
    display: block; /* Changed from inline-block to block */
    width: 100%; /* Ensure link takes full width of parent li */
    padding: 10px 20px;
    white-space: nowrap;  /* Prevent text from breaking */
    text-decoration: none; /* Disable underlining */
    color: inherit; /* Use the current color from the parent */
    border-bottom: 3px solid transparent; /* Initial transparent border */
    transition: border-color 0.3s ease; /* Smooth transition for the border color */
    box-sizing: border-box; /* Include padding in width calculation */
}

.tabs-nav ul li a.active {
    border-bottom: 3px solid var(--secondary-color);
    color: var(--primary-color);
}

.tabs-nav ul li a:hover {
    border-bottom: 3px solid var(--primary-color);
    color: var(--secondary-color);
}

.tabs-nav ul li a:visited {
    color: inherit; /* Prevent the color from changing after click */
}

.filter-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    background-color: var(--background-color);
    border-bottom: 2px solid #ddd;
    position: sticky;
    z-index: 700;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;

    top: calc(var(--navbar-height) + var(--tabs-nav-height));
}

.filter-container input,
.filter-container select,
.filter-container button {
    flex: 1; /* This makes all elements equal width */
    width: 0; /* Ensures equal distribution */
    padding: 10px 20px;  /* Match the copy button's padding */
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 44px;  /* Explicitly set the height to match the copy button */
    box-sizing: border-box;  /* Ensure padding doesn't increase the total height */
    font-size: 1rem;  /* Match the button's font size */
    margin: 5px;  /* Maintain spacing when wrapped */
    white-space: nowrap;  /* Prevent text from breaking */
}

/* Deals Table */

.deals-container {
    width: 100%;
    max-width: 100%;
}

.deals-container table {
    border-collapse: collapse;
    table-layout: auto; /* Ensures that column widths are respected */
    width: 100%;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}

.deals-container thead {
    background-color: var(--primary-color);
    position: sticky; /* thead */
    z-index: 600; /* thead th */
}

.deals-container th {
    white-space: nowrap; /* Prevent header text from wrapping */
}

.deals-container td {
    white-space: normal;
}

.deals-container th,
.deals-container td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}



.deals-container th:nth-child(2),
.deals-container td:nth-child(2) {
    max-width: 341px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deals-container thead th {
    background-color: var(--primary-color);
    color: var(--background-color);
    cursor: pointer;
}

.deals-container th:hover {
    background-color: var(--secondary-color);
}

.deals-container tr:nth-child(even) {
    background-color: #f8f8f8;
}

.deals-container tr:hover {
    background-color: #f0f0f0;
}


/* Pop-out form container (initially hidden) */
.category-popout {
    display: none; /* Hidden by default */
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    padding: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 9999; /* Ensure it's above other elements */
    width: 300px; /* Adjust width as needed */
}

/* Show the form when it's active */
.category-popout.show {
    display: block;
}

/* Styles for select element inside .category-popout */
.category-popout select {
    width: 100%;            /* Make the select box take 100% width of the parent */
    box-sizing: border-box; /* Include padding and border in the element's total width */
    padding: 10px;          /* Add padding to match other inputs */
    border: 1px solid #ccc; /* Add border to match other inputs */
    border-radius: 5px;     /* Add border-radius for consistency */
    margin-top: 10px;       /* Optional: Add some space above the select box */
    height: 144px;
}



/* Footer content */
.footer-links {
    display: flex;
    flex-wrap: wrap;  /* Enable wrapping for links */
    justify-content: center;  /* Center the links */
    align-items: center;
    gap: 10px;  /* Space between links */
    margin-bottom: 10px;
}

.footer-links a {
    color: #333;
    text-decoration: none;
    margin: 5px;  /* Additional margin for wrapped links */
    white-space: nowrap;  /* Prevent link text from breaking */
}

.social-links {
    display: flex;
    flex-wrap: wrap;  /* Allow social icons to wrap */
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.social-links img {
    width: 24px;
    height: 24px;
    margin: 5px;  /* Additional margin for wrapped icons */
}



footer {
    padding: 20px; /* Adjust the padding as needed */
    background-color: #f8f8f8; /* Optional: A subtle background color */
    text-align: center; /* Center-align the content */
    border-top: 1px solid #ddd; /* Optional: Add a border to separate the footer from the content */
    margin-top: 40px; /* Add space between the main content and the footer */
}

.footer-links {
    margin-bottom: 10px; /* Space between footer links and other content */
}

.footer-links a {
    color: #333; /* Footer link color */
    text-decoration: none; /* Remove underline from links */
    margin: 0 10px; /* Add space between links */
}

.footer-links a:hover {
    text-decoration: underline; /* Add underline on hover */
}

.social-links {
    margin-bottom: 10px; /* Add space between social icons and text */
}

.social-links img {
    width: 24px; /* Size for the social media icons */
    height: 24px;
    margin: 0 5px; /* Add space between icons */
}

footer p {
    color: #666; /* Optional: Lighter color for footer text */
    font-size: 0.9rem; /* Optional: Slightly smaller font size */
}



/* Blog Posts Container */
.blog-posts {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Individual Blog Post */
.blog-post {
    border-bottom: 1px solid #ddd;
    padding-bottom: 40px;
}

.blog-post h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.post-date {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* Adjusted .post-image class */
.blog-post .post-image {
    max-width: 600px;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
}

.blog-post p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.blog-post h3, 
.blog-post h4 {
    margin-top: 20px;
    margin-bottom: 10px;
}

.blog-post a {
    color: var(--secondary-color);
    text-decoration: none;
}

.blog-post a:hover {
    text-decoration: underline;
}


/* Loading Indicator Styles */
.loading-indicator {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    z-index: 2000; /* Ensure it appears above other elements */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loading-indicator .spinner {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid var(--primary-color); /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

.loading-indicator p {
    font-size: 1.2rem;
    color: #333;
}

/* CSS for the dropdown */
.store-dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background-color: var(--primary-color);
    color: var(--background-color);
    padding: 10px 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--background-color);
    min-width: 240px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    color: var(--text-color); /* This will set the text color to a dark charcoal */
}
}


.store-dropdown:hover .dropdown-content {
    display: block;
}

.store-dropdown:hover .dropbtn {
    background-color: var(--secondary-color);
    color: var(--background-color);
}

/* Spinner Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.hamburger-menu {
    display: none;
}


/* Responsive column hiding */
@media (max-width: 1440px) {
    .deals-container th:nth-child(6),
    .deals-container td:nth-child(6) {
        display: none; /* Hide Hours Ago column first */
    }
    
    .deals-container th:nth-child(7),
    .deals-container td:nth-child(7) {
        display: none; /* Hide extra column first */
    }
}

/* Hamburger Menu Styles */
@media (max-width: 1024px) {
    :root {
        --navbar-height: 60px;
    }
    
    .navbar {
        height: var(--navbar-height);
    }

    .navbar .nav-links {
        display: none; /* Hide original menu */
        position: fixed;
        top: 0;
        right: 0;
        width: 200px; /* Reduced from 250px */
        height: 100%;
        background-color: var(--primary-color);
        flex-direction: column;
        padding: 60px 15px; /* Slightly reduced padding */
        z-index: 1000;
        transition: transform 0.3s ease;
        transform: translateX(100%);
    }

    .navbar .nav-links.active {
        display: flex;
        transform: translateX(0);
    }

    .navbar .nav-links li {
        margin: 15px 0;
        width: 100%;
        text-align: right;
    }
    
    .navbar .logo-container {
        height: 30px; /* Match hamburger icon height */
        display: flex;
        align-items: center;
    }

    .navbar .logo-container img {
        height: 30px; /* Set logo height to match */
        width: auto; /* Maintain aspect ratio */
        max-height: 30px;
    }

    .navbar .site-title {
        font-size: 1rem; /* Slightly smaller on mobile */
        margin-left: 10px;
    }

    .hamburger-menu {
        display: block;
        cursor: pointer;
        z-index: 1100;
        position: fixed;
        top: 25px;
        right: 20px;
        height: 30px;
    }

    .hamburger-icon {
        width: 30px;
        height: 4px;
        background-color: var(--background-color);
        position: relative;
        transition: background-color 0.3s ease;
    }

    .hamburger-icon::before,
    .hamburger-icon::after {
        content: '';
        width: 30px;
        height: 4px;
        background-color: var(--background-color);
        position: absolute;
        transition: all 0.3s ease;
    }

    .hamburger-icon::before {
        top: -10px;
    }

    .hamburger-icon::after {
        top: 10px;
    }

    /* Hamburger icon transform when active */
    .hamburger-menu.active .hamburger-icon {
        background-color: transparent;
    }

    .hamburger-menu.active .hamburger-icon::before {
        transform: rotate(45deg);
        top: 0;
    }

    .hamburger-menu.active .hamburger-icon::after {
        transform: rotate(-45deg);
        top: 0;
    }
    
    .deals-container th:nth-child(4),
    .deals-container td:nth-child(4) {
        display: none; /* Hide Original Price column */
    }
    
    /* Hero Section */
    .hero-section {
        margin: 50px 0 0 0; /* top right bottom left */
    }
    
    .tabs-nav {
        top: 60px;  /* Reset top positioning */
    }
    
    .filter-container {
        /* top: 206px; /* Position it below the navbar */
        top: 138px; 
    }
    
}


@media (max-width: 768px) {
    .deals-container th:nth-child(2),
    .deals-container td:nth-child(2) {
        display: none; /* Hide Category column */
    }
    main.content-page {
        margin: 40px auto;
    }
    
    .filter-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 5px; /* Reduced gap */
        padding: 5px;
    }

    .filter-container input,
    .filter-container select,
    .filter-container button {
        flex: 1; /* Equal width */
        min-width: 45%; /* Forces wrap to two lines */
        max-width: 48%; /* Prevents overflow */
        margin: 3px;
        padding: 8px 12px;
        height: 40px;
        font-size: 0.85rem;
        box-sizing: border-box;
    }

    /* Optional: Specific adjustments */
    #search-input {
        min-width: 100%; /* Full width search */
        max-width: 100%;
        flex: 1 0 100%; /* Takes full width */
        order: -1; /* Moves to top */
    }
    
    .tabs-nav {
        position: relative;  /* Change to relative to disable sticky behavior */
        top: auto;  /* Reset top positioning */
    }
    
    .filter-container {
        position: relative; /* Change to relative to disable sticky behavior */
        top: auto; /* Reset top positioning */
    }
    

}

@media (max-width: 576px) {

    .deals-container table {
        border-collapse: collapse;
        width: 100%; /* Keep this */
        table-layout: fixed; /* Change from auto to fixed */
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
        margin-bottom: 40px;
        
      overflow: hidden; /* Handle content overflow */
      text-overflow: ellipsis; /* Add ellipsis for clipped text */
      white-space: nowrap; /* Prevent text wrapping if desired, but use with care */
    }
    
    .deal-description-cell {
        min-width: 0;
    }
    .deal-description-cell a {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal; /* Allows text to wrap again */
    }
    
    .deals-container th:nth-child(1),
    .deals-container td:nth-child(1) {
        max-width: 85%;
        min-width: 65%;
        width: 75%;
    }
    
    .deals-container th:nth-child(5) {
        text-indent: -9999px; /* Hide original text */
        position: relative;
    }

    .deals-container th:nth-child(5)::before {
        content: '%';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-indent: 0;
        white-space: nowrap;
    }
    
    .deals-container th:nth-child(3),
    .deals-container td:nth-child(3) {
        max-width: 15%;
    }
    
    .deals-container th:nth-child(5),
    .deals-container td:nth-child(5) {
        max-width: 15%;
    }
    
    .tabs-nav ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
        gap: 5px; /* Reduced gap */
    }

    .tabs-nav ul li {
        flex: none; /* Override previous flex settings */
        width: 100%; /* Ensure full width of grid cell */
        margin: 0; /* Remove previous margins */
    }

    .tabs-nav ul li a {
        padding: 8px 12px; /* Slightly reduced padding */
        font-size: 0.9rem; /* Smaller font size */
        text-align: center;
    }
    
    .filter-container {
        gap: 3px;
    }

    .filter-container input,
    .filter-container select,
    .filter-container button {
        padding: 6px 10px;
        font-size: 0.8rem;
        height: 36px;
    }
    
    .category-popout {
        width: 95%;
        padding: 15px;
    }

    .category-popout select {
        font-size: 0.9rem;
        padding: 10px;
    }

    .close-button {
        font-size: 1.2rem;
    }
    
    .deals-container th {
        white-space: normal; /* Allow header text to wrap */
    }
    
}