/*
 * Native Course catalogue styling.
 *
 * Reproduces the visual structure of migration/tmp/old-site/legacy-theme/evolution/style.css's
 * .react-course-filter / .react-sidebar / .single-studies / .back-pagination rules
 * (search widget, category/fee checkboxes, course card grid, pagination),
 * not a byte-for-byte copy of the full legacy stylesheet.
 */

.evolution-course-catalogue {
	background: #f5f5f5;
	padding: 60px 0;
}

.evolution-course-catalogue .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.evolution-course-catalogue .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}

.evolution-course-catalogue .col-lg-4,
.evolution-course-catalogue .col-lg-8,
.evolution-course-catalogue .col-lg-6,
.evolution-course-catalogue .col-md-6 {
	padding: 0 15px;
	box-sizing: border-box;
}

.evolution-course-catalogue .col-lg-4 {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
}

.evolution-course-catalogue .col-lg-8 {
	flex: 0 0 66.6667%;
	max-width: 66.6667%;
}

/* Course card grid (#courses-wrap .single-studies.col-lg-6) and the
   result-count/sort header row (.col-md-6 x2) - confirmed live: both were
   missing entirely, so every course card defaulted to the universal
   width:100% fallback below and stacked one per row instead of the
   intended 2-per-row grid. */
.evolution-course-catalogue .col-lg-6,
.evolution-course-catalogue .col-md-6 {
	flex: 0 0 50%;
	max-width: 50%;
}
/* .col-lg-6's own mobile collapse is handled by the pre-existing
   ".evolution-course-catalogue-results .single-studies" rule further down
   (same element, different selector) - only .col-md-6 (the result-count/
   sort header, not otherwise covered) needs one added here. */
@media (max-width: 767px) {
	.evolution-course-catalogue .col-md-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* Sidebar widgets. Legacy (style.css:12377-12385, confirmed live) puts the
   card treatment - background, rounded corners, shadow - on the OUTER
   .react-sidebar wrapper, not on each .widget: ".react-course-filter
   .react-sidebar .widget" (the course-filter-page-specific override that
   actually wins) sets radius:0, shadow:none, and a 1px border-bottom
   instead of a margin, so Search/Filter by category/Fee Type read as one
   continuous rounded panel with thin divider lines between sections, not
   three separate floating cards. */
.evolution-course-catalogue .react-sidebar {
	background: #f1f0fe;
	border-radius: 20px;
	box-shadow: 0 20px 40px rgba( 15, 18, 22, 0.08 );
}

.evolution-course-catalogue .react-sidebar .widget {
	background: #f1f0fe;
	padding: 30px 35px;
	border-radius: 0;
	box-shadow: none;
	border-bottom: 1px solid #E8ECF0;
}

.evolution-course-catalogue .widget-title {
	font-size: 18px;
	font-weight: 700;
	color: #1e1e1e;
	margin: 0 0 20px;
}

/* .back-search__field (not .back-search itself) is the positioning
   context for the search button, scoped to just the input's own box -
   .back-search also contains the "Search" heading above it, and a fixed
   pixel top offset measured from there drifted out of the input entirely
   once the sitewide line-height change (theme.json) grew the heading's
   rendered height. top:50% + translateY(-50%) here is relative only to
   the input wrapper, so it stays correctly centered regardless of
   whatever sits above it. */
.evolution-course-catalogue .back-search__field {
	position: relative;
}

.evolution-course-catalogue .back-search input[type='text'] {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #e8ecf0;
	border-radius: 8px;
	padding: 12px 45px 12px 15px;
	font-size: 15px;
	background: #fff;
}

.evolution-course-catalogue .back-search button {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background: none;
	color: #5b5f64;
	cursor: pointer;
	padding: 0;
	line-height: 0;
}

.evolution-course-catalogue ul.recent-category {
	margin: 0;
	padding: 0;
	list-style: none;
}

.evolution-course-catalogue ul.recent-category li {
	margin: 8px 0;
	position: relative;
}

.evolution-course-catalogue ul.recent-category input[type='checkbox'] {
	position: absolute;
	opacity: 0;
	width: 23px;
	height: 23px;
	margin: 0;
	cursor: pointer;
}

.evolution-course-catalogue ul.recent-category label {
	color: #5b5f64;
	font-size: 15px;
	font-weight: 400;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
}

.evolution-course-catalogue ul.recent-category label::before {
	content: '\2714';
	border: 0.1em solid #d9d8d8;
	border-radius: 4px;
	display: inline-block;
	width: 20px;
	height: 20px;
	line-height: 18px;
	text-align: center;
	margin-right: 12px;
	color: transparent;
	transition: 0.2s;
	background: #fff;
	font-size: 12px;
	flex: 0 0 auto;
}

.evolution-course-catalogue ul.recent-category input[type='checkbox']:checked + label::before {
	background-color: #6b5cf6;
	border-color: #6b5cf6;
	color: #fff;
}

.evolution-course-catalogue ul.recent-category input[type='checkbox']:focus-visible + label::before {
	outline: 2px solid #2d2d73;
	outline-offset: 2px;
}

/* label is inline-flex (checkbox ::before + this text as its two items).
   Term name and count used to be separate flex-row items - fine while the
   name fit on one line, but once a longer name wrapped to a second line,
   the count (a same-row sibling item, not part of that wrapped text)
   stayed pinned at the row's cross-axis center instead of trailing the
   name's actual last line. Wrapping both in one .category-label-text span
   makes them a single flex item whose own text wraps normally, so the
   count now always sits right after the name wherever it ends. flex:1 +
   min-width:0 let that item actually shrink/wrap within the row instead
   of overflowing past the checkbox. */
.evolution-course-catalogue ul.recent-category .category-label-text {
	flex: 1;
	min-width: 0;
}

.evolution-course-catalogue .category-count {
	color: #9a9ea3;
	font-size: 13px;
	margin-left: 4px;
	white-space: nowrap;
}

/* Result header / sort */

.evolution-course-catalogue-results .shorting__courses3 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 25px;
}

.evolution-course-catalogue-results .shorting__courses3 .col-md-6 {
	box-sizing: border-box;
	max-width: 50%;
}

.evolution-course-catalogue-results .shorting__courses3 .text-right {
	text-align: right;
}

.evolution-course-catalogue-results .result-count {
	color: #5b5f64;
	font-size: 15px;
}

.evolution-course-catalogue-results #course-counter {
	font-weight: 700;
	color: #1e1e1e;
}

.evolution-course-catalogue-results select.from-control {
	width: 420px;
	max-width: 100%;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	border-radius: 6px;
	padding: 14px 40px 14px 18px;
	background-color: #F1F3F8;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B5F64' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	font-size: 15px;
	color: #333333;
	cursor: pointer;
	transition: background-color 0.3s ease 0s;
}
.evolution-course-catalogue-results select.from-control:hover,
.evolution-course-catalogue-results select.from-control:focus {
	background-color: #E8EAF3;
	outline: none;
}

/* Course card grid */

.evolution-course-catalogue-results #courses-wrap {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -12px;
}

.evolution-course-catalogue-results .single-studies {
	flex: 0 0 50%;
	max-width: 50%;
	box-sizing: border-box;
	padding: 0 12px;
	margin-bottom: 25px;
}

.evolution-course-catalogue-results .inner-course {
	box-shadow: 0 1px 2px rgba( 15, 18, 22, 0.1 );
	background: #f1f0fe;
	border-radius: 20px;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.evolution-course-catalogue-results .case-img {
	position: relative;
}

.evolution-course-catalogue-results .case-img img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}

.evolution-course-catalogue-results .case-img .cate-w {
	font-size: 13px;
	line-height: 17px;
	font-weight: 600;
	background: #2d2d73;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	border-radius: 4px;
	position: absolute;
	right: 16px;
	top: 16px;
	text-decoration: none;
}

.evolution-course-catalogue-results .case-content {
	padding: 25px 20px 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1;
}

.evolution-course-catalogue-results .case-title {
	margin: 0 0 14px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

.evolution-course-catalogue-results .case-title a {
	color: #1e1e1e;
	text-decoration: none;
}

.evolution-course-catalogue-results .case-title a:hover {
	color: #2d2d73;
}

.evolution-course-catalogue-results ul.meta-course {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0 0 15px;
	padding: 0;
	list-style: none;
}

.evolution-course-catalogue-results ul.meta-course li {
	display: flex;
	align-items: center;
	font-size: 13px;
	color: #5b5f64;
}

.evolution-course-catalogue-results ul.meta-course svg {
	width: 15px;
	margin-right: 8px;
	flex: 0 0 auto;
}

.evolution-course-catalogue-results ul.react-ratings {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border-top: 1px solid #eee;
	margin: auto 0 0;
	padding: 14px 0 0;
	list-style: none;
}

/* flex:1 here used to stretch a lone "Learn More" button (courses with a
   price, which sits in a separate, non-flex-grow .price li) across
   whatever space was left over - full card width, since it was the only
   item competing for that space. Courses with two real buttons (Learn
   More + Enquire Now, no price) never showed this since both split the
   growth evenly. flex:0 0 auto sizes every button to its own content
   instead, so a lone button matches the same compact size as either
   button in the two-button layout, left-aligned via the ul's own
   justify-content instead of being pushed wide by leftover flex-grow. */
.evolution-course-catalogue-results ul.react-ratings .view-details {
	flex: 0 0 auto;
}

.evolution-course-catalogue-results ul.react-ratings a {
	background: #6B5CF6;
	color: #fff;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 600;
	transition: background 0.3s ease 0s;
}

.evolution-course-catalogue-results ul.react-ratings a:hover {
	background: #2D2D73;
	color: #fff;
}

.evolution-course-catalogue-results ul.react-ratings a svg {
	width: 15px;
}

.evolution-course-catalogue-results li.price {
	color: #d62b7b;
	font-size: 19px;
	font-weight: 700;
}

.evolution-course-catalogue-results .no-course-found {
	font-size: 18px;
	color: #5b5f64;
	text-align: center;
	padding: 40px 0;
}

/* Pagination */

.evolution-course-catalogue-results .back-pagination {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
}

.evolution-course-catalogue-results .back-pagination a,
.evolution-course-catalogue-results .back-pagination span {
	min-width: 40px;
	height: 40px;
	background: #fff;
	box-shadow: 0 1px 2px rgba( 15, 18, 22, 0.1 );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	border-radius: 50%;
	color: #5b5f64;
	text-decoration: none;
}

.evolution-course-catalogue-results .back-pagination a:hover,
.evolution-course-catalogue-results .back-pagination span.current {
	background: #2d2d73;
	color: #fff;
}

.evolution-course-catalogue.is-loading .evolution-course-catalogue-results {
	opacity: 0.6;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* Responsive */

@media ( max-width: 991px ) {
	.evolution-course-catalogue .col-lg-4,
	.evolution-course-catalogue .col-lg-8 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.evolution-course-catalogue .col-lg-4 {
		margin-bottom: 30px;
	}
}

@media ( max-width: 767px ) {
	.evolution-course-catalogue-results .single-studies {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.evolution-course-catalogue-results .shorting__courses3 {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.evolution-course-catalogue-results .shorting__courses3 .col-md-6 {
		max-width: 100%;
	}

	.evolution-course-catalogue-results .shorting__courses3 .text-right {
		text-align: left;
	}
}