/* Hiding the search label and box */




/* Adjusts spacing above the 'Browse Listings' header */
#listings-heading {
    margin-top: 20px; 
    text-align: center;
}

/* Center the course cards */
#listings {
    margin-top: 20px; 
    padding-bottom: 40px; /* Adds space between cards and footer */
}

/* Adjust the course card sizing and prevent text from cutting off */
.col-md-3 {
    flex: 1 1 25%; 
    max-width: 300px;
}

/* Ensure text within cards does not get cut off */
.product-title {
    font-weight: 600;
    font-size: 1.25rem;
    text-align: center;
    white-space: normal; /* Allow wrapping */
    overflow: visible; /* Ensure text is fully visible */
    text-overflow: initial; /* Prevent ellipsis from cutting off text */
    word-wrap: break-word; /* Ensure long words break properly */
}



/* Hover effect for product cards */
.product-tile:hover {
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1); 
    transform: translateY(-5px); 
    transition: all 0.3s ease-in-out;
}

/* Mobile responsiveness - stack cards on smaller screens */
@media (max-width: 768px) {
    .col-md-3 {
        flex: 1 1 100%;
    }
}

/* Fix button styling */
.learn-more a {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    padding: 10px 0; 
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis; 
}

/* Fix button icon spacing */
.learn-more a .icon {
    margin-left: 10px;
}
/* Hide the "Categories" button */
#search-refine-button--categories[aria-haspopup="true"] {
    display: none !important;
}

/* Rename the "Search All Courses" button to "View All Courses" */
#search-refine-button--categories[aria-haspopup="false"] .search-refine-button__text::before {
    content: 'View All Courses';
    visibility: visible;
    position: absolute;
}

#search-refine-button--categories[aria-haspopup="false"] .search-refine-button__text {
    visibility: hidden; /* Hide original text */
    position: relative;
}

/* Ensure the "Refine" button is not displayed */
#search-refine-button--refine {
    display: none !important;
}