/*
 * [combined_course_dates] — matched to how the old Dynamic Posts date rows
 * actually render on the live site (compact, single-line deadline), not to
 * the older Elementor custom CSS they were built from, which is mostly
 * overridden there. Border/left accent are deliberately not set here: a
 * site-wide `.date-row` rule already provides them, so both stay identical.
 * Everything is scoped under .wbs-course-dates.
 */

.wbs-course-dates {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Must out-rank `.wbs-course-dates .date-icon { display: flex }` below (desktop and mobile). */
.wbs-course-dates .date-icon.hide {
	display: none;
}

.wbs-course-dates .date-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	align-items: center;
	padding: 10px 24px;
}

/* Flag + date range on one line. */
.wbs-course-dates .date-row > span:first-child {
	display: flex;
	align-items: center;
	gap: 10px;
}

.wbs-course-dates .date-row .course-flag {
	margin: 0 !important; /* beats the inline margin from [print_course_flag_icon] */
	flex-shrink: 0;
}

.wbs-course-dates .date-icon {
	display: flex;
	align-items: center;
}

.wbs-course-dates .date-icon .fa-check-circle {
	color: #6054e8;
	font-size: 20px !important;
}

.wbs-course-dates .date-icon .fa-sharp,
.wbs-course-dates .date-icon .fa-regular,
.wbs-course-dates .date-icon .fa-circle-xmark {
	font-size: 20px !important;
}

/* "Apply until" + date on one line, wrapping only if it has to. */
.wbs-course-dates .date-deadline {
	display: flex;
	flex-wrap: wrap;
	margin-left: 8px;
}

/* Mobile: stacked (date on top, divider, deadline below), kept compact. */
@media only screen and (max-width: 767px) {
	.wbs-course-dates .date-row {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		padding: 10px 16px;
	}

	.wbs-course-dates .date-row > span:first-child {
		justify-content: center;
	}

	.wbs-course-dates .date-icon {
		border-top: 1px solid rgba( 0, 0, 0, 0.12 );
		width: 100%;
		justify-content: center;
		padding-top: 6px;
	}
}
