/**
 * Theme Name:     Neve Child
 * Author:         ThemeIsle
 * Template:       neve
 * Text Domain:	   neve-child
 * Description:    Neve is a super fast, easily customizable, multi-purpose theme. It’s perfect for blogs, small business, startups, agencies, firms, e-commerce shops (WooCommerce storefront) as well as personal portfolio sites and most types of projects. A fully AMP optimized and responsive theme, Neve will load in mere seconds and adapt perfectly on any viewing device. While it is lightweight and has a minimalist design, the theme is highly extendable, it has a highly SEO optimized code, resulting in top rankings in Google search results. Neve works perfectly with Gutenberg and the most popular page builders (Elementor, Brizy, Beaver Builder, Visual Composer, SiteOrigin, Divi). Neve is also WooCommerce ready, responsive, RTL & translation ready. Look no further. Neve is the perfect theme for you!
 */

/* Filter bar */
/* ==== Filter Form ==== */
.cm-course-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    background: #f9f9f9;
    padding: 15px 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
}

.cm-course-filter-form input,
.cm-course-filter-form select {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    min-width: 180px;
    flex: 1 1 180px;
    background: #fff;
}

.cm-course-filter-form .filter-btn {
    background: #50b000;
    color: #fff;
    padding: 8px 18px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}

.cm-course-filter-form .filter-btn:hover {
    background: #3a8200;
}

.cm-course-filter-form .reset-btn {
    color: #50b000;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.25s ease-in-out;
}

.cm-course-filter-form .reset-btn:hover {
    color: #3a8200;
}


/* ==== Courses Count ==== */
.courses-count {
    font-weight: 600;
    color: #333;
    padding-bottom: 40px;
}

/* ==== Course Grid ==== */
.cmcc-container-gird {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}
.cmcc_tiles_view_item{
    margin-bottom: 15px;
}

/* ==== Pagination ==== */
.cm-course-pagination {
    text-align: center;
    margin-top: 40px;
    font-family: inherit;
}

.cm-course-pagination .page-numbers {
    display: inline-block;
    margin: 0 6px;
    padding: 6px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #50b000;
    border: 2px solid #50b000;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.25s ease-in-out;
}

.cm-course-pagination .page-numbers:hover,
.cm-course-pagination .page-numbers.current {
    background-color: #50b000;
    color: #fff;
    border-color: #50b000;
}

.cm-course-pagination .page-numbers.dots {
    border: none;
    background: none;
    color: #999;
    cursor: default;
}

/* ==== Book Slot Button ==== */
.book-slot .book-btn {
    background: #50b000;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease-in-out;
}
.book-slot {
    margin-right: 8px;
}

.book-slot .book-btn:hover {
    background: #3a8200;
}

.course-dates {
    margin-top: 5px;
    margin-right: 5px;
    margin-left: 5px;
    font-size: 14px;
}
.cm-course-filter-form input{
	padding: 7px 12px !important;
}

/* ==== Load More Button ==== */
#loadMoreCourses {
    padding: 8px 24px;
    background: #50b000;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease-in-out;
}

#loadMoreCourses:hover {
    background: #3a8200;
}

/* ==== Responsive Breakpoints ==== */
@media (max-width: 900px) {
    .cmcc-container-gird {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .cm-course-filter-form {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .cmcc-container-gird {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cm-course-filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .cm-course-filter-form input,
    .cm-course-filter-form select,
    .cm-course-filter-form .filter-btn {
        width: 100%;
    }

    .cm-course-filter-form .reset-btn {
        display: block;
        text-align: center;
        margin-top: 5px;
    }
    .cm-course-filter-form input, .cm-course-filter-form select{
    	flex: unset;
    }
}