/* instrcreate/manageCoursesSimple.php — reduced course cart (wizard step 3, ?simple).
   A review list, not a data grid: one line per course with its three facts and the single
   action that moves it forward. The classic sortable table lives in InstructionCreation.css
   and is untouched. Duplicate badges are reused from InstructionConflicts.css. */

/* The duplicate hint is rendered by manageCourses.php for both cart versions and otherwise
   spans the whole wizard form — align it with the reading width of the list below it.
   It is the standard yellow pc-infobar since 2026-09-18 (was .rd-dup-hint). */
.rd-cart-simple pc-infobar {
	display: block;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.rd-cart-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--rd-spacing-sm);
	max-width: 960px;
	margin: 0 auto var(--rd-spacing-md);
	/* .rd-instruction-wizard centers all wizard text; a reading list is left aligned. */
	text-align: left;
}

.rd-cart-summary-count {
	margin: 0;
	color: var(--rd-gray-600);
	font-size: var(--rd-fontsize-4);
}

.rd-cart-list {
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	text-align: left;
}

.rd-cart-item {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-md);
	padding: var(--rd-spacing-sm) var(--rd-spacing-md);
	margin-bottom: var(--rd-spacing-x-sm);
	border: 1px solid var(--rd-gray-200);
	border-radius: var(--rd-borderradius-border-lg);
	background: var(--rd-card-fg);
}

/* Same yellow the classic row uses for an already planned course. */
.rd-cart-item-duplicate {
	background-color: var(--rd-warning-inactive);
	border-color: var(--rd-warning-default);
}

.rd-cart-item-thumb {
	flex: 0 0 auto;
	width: 72px;
	height: 48px;
	border-radius: var(--rd-borderradius-border-big);
	background-color: var(--rd-gray-100);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.rd-cart-item-body {
	flex: 1 1 auto;
	min-width: 0;
}

.rd-cart-item-badges {
	margin-bottom: var(--rd-spacing-xx-sm);
}

.rd-cart-item-title {
	margin: 0;
	/* Legacy MobileStyle centers every h3 below 575px — a card title stays left. */
	text-align: left;
	font-size: var(--rd-fontsize-5);
	font-weight: var(--rd-fontweights-open-sans-1);
	color: var(--rd-font-dark);
	line-height: var(--rd-lineheights-0);
}

.rd-cart-item-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-spacing-xx-sm) var(--rd-spacing-md);
	margin: var(--rd-spacing-xx-sm) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--rd-fontsize-3);
	color: var(--rd-gray-600);
}

.rd-cart-item-facts > li {
	display: inline-flex;
	align-items: center;
	gap: var(--rd-spacing-xx-sm);
}

.rd-cart-item-facts > li::before {
	width: 14px;
	height: 14px;
	margin: 0;
	background-color: var(--rd-gray-500);
}

/* No participants yet is the one thing that blocks the wizard — it must read as an open
   task, not as another grey fact. */
.rd-cart-item-fact-open {
	color: var(--rd-warning-pressed);
	font-weight: var(--rd-fontweights-open-sans-1);
}

.rd-cart-item-fact-open::before {
	background-color: var(--rd-warning-pressed);
}

.rd-cart-item-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-md);
}

.rd-cart-item-remove {
	display: inline-flex;
	align-items: center;
	gap: var(--rd-spacing-xx-sm);
	border: 0;
	background: none;
	/* text-sized label, but a target you can actually hit (WCAG 2.5.5) */
	padding: var(--rd-spacing-x-sm) var(--rd-spacing-sm);
	margin: calc(-1 * var(--rd-spacing-x-sm)) calc(-1 * var(--rd-spacing-sm));
	cursor: pointer;
	font-size: var(--rd-fontsize-3);
	color: var(--rd-gray-600);
}

.rd-cart-item-remove::before {
	width: 16px;
	height: 16px;
	margin: 0;
	background-color: var(--rd-gray-600);
}

.rd-cart-item-remove:hover,
.rd-cart-item-remove:focus-visible {
	color: var(--rd-error-pressed);
}

.rd-cart-item-remove:hover::before,
.rd-cart-item-remove:focus-visible::before {
	background-color: var(--rd-error-pressed);
}

@media screen and (max-width: 640px) {
	.rd-cart-item {
		flex-wrap: wrap;
	}

	.rd-cart-item-body {
		flex-basis: calc(100% - 72px - var(--rd-spacing-md));
	}

	.rd-cart-item-actions {
		flex-basis: 100%;
		justify-content: flex-end;
	}
}