/* Remove default margin and padding from body and html */
html, body {
    margin: 0;
   
    /* padding: 10px; */
}
/* for mobile screen to see pagination*/
@media screen and (max-width: 900px) {
    html, body{padding-bottom: 70px;}
}

/* Ensure no margin or padding in navbar and its container */
/* Ensure navbar stays fixed at the top */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Make sure it's on top of other elements */
    background-color: #343a40; /* Or your desired color */
}

/* Container for categories with horizontal scroll */
.categories-container {
    display: flex;
    align-items: center;
    position: relative;
}

.categories-wrapper {
    display: flex;
    overflow: hidden; /* Hide scrollbar */
    scroll-behavior: smooth;
    padding: 10px 0;
    margin: 0 80px; /* Adds space for larger arrows */
    width: 1000px; /* Show only 7 categories at a time */
}

.category-item {
    flex: 0 0 auto;
    width: 100px;
    text-align: center;
    margin: 0 20px;
}

.category-item img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

/* Arrow buttons */
/* .arrow {
    font-size: 32px; Increase arrow size
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    border: none;
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.arrow-left {
    left: 10px;
}

.arrow-right {
    right: 10px;
} */
 /* Deal cards container for grid layout */
 .deals-container {
    display: grid;
    gap: 20px;
}


/* Grid layout for different screen sizes */
@media (min-width: 1200px) {
    .deals-container {
        grid-template-columns: repeat(6, 1fr); /* One product per row on larger screens */
    }
}

@media (max-width: 1199px) {
    .deals-container {
        grid-template-columns: repeat(5, 1fr); /* Two products per row on smaller screens */
    }
}
@media (max-width: 974px) {
    .deals-container {
        grid-template-columns: repeat(4, 1fr); /* Two products per row on smaller screens */
    }
}
@media (max-width: 779px) {
    .deals-container {
        grid-template-columns: repeat(3, 1fr); /* Two products per row on smaller screens */
    }
}
@media (max-width: 584px) {
    .deals-container {
        grid-template-columns: repeat(2, 1fr); /* Two products per row on smaller screens */
    }
}
@media (max-width: 350px) {
    .deals-container {
        grid-template-columns: repeat(2, 1fr); /* Two products per row on smaller screens */
    }
}
/* Fixed height for product cards */
.deal-card {
    border: 1px solid #367E18;
    border-radius: 10px;
    /* padding-left: 5px; */
    text-align: center;
   /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
    transition: transform 0.3s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 175PX;
}

.deal-card img {
    
        height:100px;
        display:block;
        margin-left:auto;margin-right:auto;
    
}

.deal-card:hover {
    /* transform: scale(1.05); */
}

.product-info {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 0;
    /* transition: background-color 0.3s; */
}


.deal-price {
    font-weight: bold;
    color: #CC3636;
    font-size: small;
    padding: 0;


}

.old-price {
    text-decoration: line-through;
    color: #367E18;
    padding: 0;

    margin-right: 3px;
    font-size: small;

}

.product-description {
    overflow: hidden;
    font-size: small;
    font-weight: bold;
    padding-top: 15px;
    color:black;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.add-to-cart-btn {
    margin-top: 0px;
    background-color: #28a745;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.add-to-cart-btn:hover {
    background-color: #218838;
}
 /* added by sreevidya */
        .sort-back{
            align-items: center;
            max-width: 1200px;
            display: flex;
            width: 100%; /* Make sure it spans the full width */
            margin: 0 auto; /* Center the container horizontally */
            padding: 15px 15px; /* Padding for better spacing */

            justify-content: space-between;
        }

        .sort-back .back-btn{
            background-color: #014222;
        }
        .sort-back .back-btn:hover{
            background-color: #014222;
            color: #e9e5e3;
        }
/* Custom style for the sort dropdown container */
/* .sort-options {

} */

/* Custom style for the dropdown */
.sort-options select {
background-color: #f8f9fa; /* Light background */
border: 1px solid #ccc; /* Light border */
border-radius: 5px; /* Rounded corners */
padding: 5px 10px; /* Smaller padding for compact size */
font-size: 14px; /* Smaller font size for compactness */
color: #333; /* Text color */
width: 150px; /* Short width to make it compact */
transition: border-color 0.3s ease; /* Smooth transition for border color */
}

/* Style for placeholder (Sort by) */
.sort-options select option:first-child {
color: #888; /* Light grey color for the placeholder */
font-style: italic; /* Make it italic */
}

/* Hover effect for the dropdown */
.sort-options select:hover {
border-color: #007bff; /* Change border color on hover */
cursor: pointer; /* Change cursor to pointer */
}

/* Focus effect to highlight when the dropdown is selected */
.sort-options select:focus {
border-color: #007bff; /* Blue border when focused */
outline: none; /* Remove default outline */
}

/* Remove underline from all links */
a {
    text-decoration: none;  /* Remove underline */
}

/* Add some styling for hover (optional) */
a:hover {
    text-decoration: none;  /* Ensure no underline on hover */
}

.back-btn {
    background-color: #6c757d; /* Secondary background */
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

.back-btn:hover {
    background-color: #5a6268; /* Darker shade on hover */
}
/* Highlight active category */
.category-item.active {
    background-color: #f0f8ff; /* Light blue background for active category */
    transform: scale(1.1); /* Slightly enlarge the active category item */
}

/* Optional: style the text of the active category */
.category-item.active p {
    font-weight: bold;
    color: #3234a6; /* Change text color to blue */
}
.category-item p {
    /* font-weight: bold; */
    color: #000000; /* Change text color to blue */
}

.quantity-cart-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 5px 4px 7px 3px;
}

.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 50px;
    overflow: hidden;
}

.quantity-selector .qty-btn {
    background-color: #d25005;
    border: none;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    width: 25px;
    height: 25px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

.quantity-selector .qty-btn:hover {
    background-color: #f36615;
}

.quantity-input {
    border: none;
    text-align: center;
    width: 25px;
    font-size: 12px;
    font-weight: bold;
    color: #00712D;
    background-color: #fff;
}

.add-to-cart {
    background-color: #00712D; 
    color: #fff;
    border: 2px solid #00712D;

    padding: 4px 5px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.add-to-cart:hover {
    background-color: #00712D;
    color: #fff;
}
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Style for the loading overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Style for the content */
#content {
    display: none;
    padding: 20px;
}

/* CSS Spinner Animation */
.spinner {
    border: 16px solid #f3f3f3; /* Light gray background */
    border-top: 16px solid #3498db; /* Blue color for the top */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

/* Animation for the spinning effect */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/*side filter*/
/* Filter Container */
.filter-container {
    display: flex;
    max-width: 1200px;  /* Keeps the container from getting too wide */
    width: 100%;  /* Allows the container to take the full width available until max-width */
    justify-content: space-between;  /* Space between elements, pushing them to the edges */
    align-items: flex-start;  /* Aligns sidebar at the top */
    gap: 20px;  /* Space between sidebar and main content */
    margin: 0 auto;  /* Centers the container horizontally */
}

/* Sidebar Style */
.filter-sidebar {
    background: #ffffff;
    border: 1px solid #474040;
    border-radius: 8px;
    padding: 25px;  /* More padding for a cleaner look */
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); /* Slightly more prominent shadow */
    height: auto;  /* Height adjusts to content */
    width: 100%;  /* Width remains flexible */
    max-width: 320px;  /* Slightly wider sidebar */
    margin-top: 20px;  /* Adds some space from the top */
}

/* Title Style */
.filter-title {
    font-size: 20px;  /* Larger font size for title */
    font-weight: bold;
    margin-bottom: 20px;  /* More space under the title */
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Subtitle Style */
.filter-subtitle {
    font-size: 18px;  /* Slightly larger subtitle */
    margin: 20px 0 12px;  /* Adds more space around subtitle */
    color: #555;
    font-weight: 600;
}

/* Label Style */
.filter-label {
    font-size: 15px;  /* Slightly larger label */
    font-weight: 600;
    margin-bottom: 10px;  /* More space between label and input */
    color: #666;
    display: block;
}

/* Input Field Style */
.form-control {
    border-radius: 6px;  /* More rounded edges */
    border: 1px solid #ccc;
    padding: 10px;  /* More padding for better usability */
    font-size: 14px;
    width: 100%;
    margin-bottom: 15px;  /* Space between inputs */
}

/* Price Range Display */
.price-range-display {
    font-size: 15px;  /* Larger font for price range */
    font-weight: bold;
    margin-top: 15px;  /* Space above price range */
    color: #444;
}

/* Apply Button Style */
.apply-btn {
    background-color: #007bff;
    border: none;
    color: #fff;
    padding: 12px 18px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;  /* More rounded button */
    cursor: pointer;
    width: 100%;
    text-transform: uppercase;
    margin-top: 20px;
    letter-spacing: 1px;
}

.apply-btn:hover {
    background-color: #0056b3;
}

/*side filter*/
/* Filter Container */
.filter-container {
    display: flex;
    max-width: 1170px;  /* Keeps the container from getting too wide */
    width: 100%;  /* Allows the container to take the full width available until max-width */
    justify-content: space-between;  /* Space between elements, pushing them to the edges */
    align-items: flex-start;  /* Aligns sidebar at the top */
    gap: 20px;  /* Space between sidebar and main content */
    margin: 0 auto;  /* Centers the container horizontally */
}

/* Sidebar Style */
.filter-sidebar {
    background: #ffffff;
    border: 1px solid #e0dddd;
    border-radius: 8px;
    padding: 0px;  /* More padding for a cleaner look */
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); /* Slightly more prominent shadow */
    height: auto;  /* Height adjusts to content */
    width: 100%;  /* Width remains flexible */
    max-width: 220px;  /* Slightly wider sidebar */
    margin-top: 20px;  /* Adds some space from the top */
}

/* Title Style */
.filter-title {
    background-color: #014222; /* Light gray background */
    padding: 10px;              /* Padding around the text */
    margin: 0;                  /* Remove any margin */
    border-top-left-radius: 5px; /* Rounded top-left corner */
    border-top-right-radius: 5px; /* Rounded top-right corner */
    font-weight: bold;          /* Bold text */
    text-align: center;         /* Center the text */
    color:#fff;
}
.filter-content{
    padding:25px;
}
/* Subtitle Style */
.filter-subtitle {
    font-size: 18px;  /* Slightly larger subtitle */
    margin: 20px 0 12px;  /* Adds more space around subtitle */
    color: #555;
    font-weight: 600;
}

/* Label Style */
.filter-label {
    font-size: 15px;  /* Slightly larger label */
    font-weight: 600;
    margin-bottom: 10px;  /* More space between label and input */
    color: #666;
    display: block;
}

  /* Input Field Style */
  .form-control {
    border-radius: 6px;  /* More rounded edges */
    border: 1px solid #ccc;
    padding: 5px;  /* More padding for better usability */
    font-size: 14px;
    width: 100%;
    margin-bottom: 15px;  /* Space between inputs */
    background-color: #fff; /* White background */
}


/* Price Range Display */
.price-range-display {
    font-size: 15px;  /* Larger font for price range */
    font-weight: bold;
    margin-top: 15px;  /* Space above price range */
    color: #444;
}


/* Apply Button Style */
.apply-filter{
    background-color: #00712d;  /* Light background color */
    color: #ffffff;  /* Text color */
    border:1px solid #00712d;
   
    padding: 5px 20px;  /* Padding for a better button size */
    font-size: 16px;  /* Font size */
    font-weight: bold;  /* Make the text bold */
    border-radius: 5px;  /* Rounded corners */
    text-decoration: none;  /* Remove the underline */
    display: inline-block;  /* Make it behave like a button */
    transition: all 0.3s ease;  /* Smooth transition for hover effect */
}

.apply-filter:hover {
    background-color: #00712d;  /* Light background color */
    color: #ffffff;  /* Text color */
    border:1px solid #00712d;
  
}

.apply-filter:active {
    background-color: #00712d;  /* Light background color */
    color: #ffffff;  /* Text color */
    border:1px solid #00712d;
}
/*clear filter button*/
.clear-filters-btn {
    background-color: #ffffff;  /* Light background color */
    color: #000000;  /* Text color */
    border:1px solid black;
   
    padding: 5px 20px;  /* Padding for a better button size */
    font-size: 16px;  /* Font size */
    font-weight: bold;  /* Make the text bold */
    border-radius: 5px;  /* Rounded corners */
    text-decoration: none;  /* Remove the underline */
    display: inline-block;  /* Make it behave like a button */
    transition: all 0.3s ease;  /* Smooth transition for hover effect */
}

.clear-filters-btn:hover {
    background-color: #ffffff;  /* Light background color */
    color: #000000;  /* Text color */
    border:1px solid black;
  
}

.clear-filters-btn:active {
    background-color: #ffffff;  /* Light background color */
    color: #000000;  /* Text color */
    border:1px solid black;
}

/* Responsive Styling for Smaller Screens */
@media screen and (max-width: 900px) {
.filter-sidebar {
display: none;

}
}



.container {
    flex-grow: 1;  /* Ensures the container takes up the remaining space */
}
.filtered-content {
    @media screen and (min-width: 901px) {
    .deals-container {
        grid-template-columns: repeat(4, 1fr); /* One product per row on larger screens */
    }}
}
/*for pagination added by neha on 8-1-25*/
.pagination-link {
    display: inline-block;
    margin: 0 5px;
    padding: 8px 12px;
    text-decoration: none;
    color: #f4900d; /* Dark text color */
    font-size: 1rem;
    font-weight: normal;
    text-align: center; /* Align the icon and text */
}

.pagination-link:hover {
    color: #ec570b; /* Blue color on hover */
    text-decoration: none;
}

.pagination-link.active {
    font-weight: bold;
    color: #ec570b; /* Highlight the active page number with blue */
}

.pagination-ellipsis {
    display: inline-block;
    margin: 0 5px;
    color: #8d8a8a;
    font-size: 1rem;
}

.pagination-link:before {
    font-family: "Arial", sans-serif;
    font-size: 1.5rem;
}

.pagination-link[href]:hover {
    cursor: pointer;
}



/*pagination style ends*/
/*for price slider*/
/* Styling for the price slider container */


/*price slider style eNDS*/

.toast {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
  }

.product-image-wrapper {
    position: relative;
    width: 100%;
}

.out-of-stock-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: red;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 8px;
    border-radius: 4px;
    z-index: 10;
}