/**
 * mycc-courses — streaming-style Courses archive styles.
 *
 * Ported from the approved mockup (~/Desktop/MyCC Site Designs/mycc-courses-mockup.html).
 * Page-chrome rules (header.nav / footer / body font) are intentionally OMITTED —
 * BuddyBoss provides the surrounding chrome. Everything else is scoped under
 * `.mycc-courses` so tokens/selectors cannot leak into or collide with the theme.
 * Design tokens mirror wdm-report-tabs: navy #205493, link #3267B2, accent #64B233.
 */

/* ===== Design tokens — shared with wdm-report-tabs + dashboard mockup ===== */
:root {
	--mycc-navy: #205493;          /* primary */
	--mycc-navy-dark: #163a6b;     /* hover */
	--mycc-link: #3267B2;          /* course / continue link */
	--mycc-accent: #64B233;        /* CC accent green */
	--mycc-ink: #222;
	--mycc-muted: #888;
	--mycc-faint: #bbb;
	--mycc-line: #e5e9f2;          /* borders */
	--mycc-row-line: #f0f0f0;
	--mycc-track: #e5e9f2;         /* progress track */
	--mycc-input: #f4f6f8;         /* input / filter bg */
	--mycc-tab-bg: #f0f2f3;        /* inactive tab */
	--mycc-panel-radius: 12px;
	--mycc-card-radius: 10px;
	/* grade palette (exact plugin values) */
	--mycc-g-a: #5ca226;
	--mycc-g-b: #2d5d99;
	--mycc-g-c: #d2b23a;
	--mycc-g-d: #b07a1a;
	--mycc-g-f: #7d1a13;
}

.mycc-courses * { box-sizing: border-box; }

.mycc-courses {
	font-family: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--mycc-ink);
	-webkit-font-smoothing: antialiased;
}
.mycc-courses a { color: var(--mycc-link); text-decoration: none; }
.mycc-courses a:hover { color: var(--mycc-navy-dark); }
.mycc-courses .serif { font-family: Georgia, "Times New Roman", serif; }

/* ---------- Page ---------- */
.mycc-courses .mycc-main { max-width: 1240px; margin: 0 auto; padding: 30px 40px 90px; }
.mycc-courses h1.title { font-family: Georgia, serif; font-size: 30px; margin: 8px 0 6px; font-weight: 700; }

/* ---------- Tabs ---------- */
.mycc-courses .tabs-nav { display: flex; align-items: center; gap: 8px; margin: 22px 0 0 4px; position: relative; z-index: 2; border-bottom: 2px solid var(--mycc-line); }
.mycc-courses .tab { display: flex; align-items: center; gap: 9px; text-align: center; background: none; color: #5b6573; font-weight: 700; font-size: 16px; padding: 12px 6px; margin-right: 26px; border: none; border-bottom: 3px solid transparent; cursor: pointer; position: relative; top: 2px; font-family: inherit; }
.mycc-courses .tab .pill { background: var(--mycc-tab-bg); color: #5b6573; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.mycc-courses .tab.active { color: var(--mycc-navy); border-bottom-color: var(--mycc-navy); }
.mycc-courses .tab.active .pill { background: var(--mycc-navy); color: #fff; }
.mycc-courses .tab:hover:not(.active) { color: var(--mycc-navy); }

.mycc-courses .tabpane { display: none; padding-top: 26px; }
.mycc-courses .tabpane.active { display: block; }

/* ---------- Featured spotlight ---------- */
.mycc-courses .spotlight { position: relative; border-radius: var(--mycc-panel-radius); overflow: hidden; margin-bottom: 30px; min-height: 230px; display: flex; align-items: flex-end; color: #fff; background: linear-gradient(105deg, #10243f 0%, #205493 55%, #2f74b8 100%); }
.mycc-courses .spotlight::after { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 300px at 88% -20%, rgba(255, 255, 255, .18), transparent 60%); pointer-events: none; }
.mycc-courses .sp-inner { position: relative; z-index: 1; padding: 30px 34px; max-width: 640px; }
.mycc-courses .sp-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #bcd6f1; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.mycc-courses .sp-title { font-family: Georgia, serif; font-size: 30px; font-weight: 700; line-height: 1.12; margin: 0 0 8px; }
.mycc-courses .sp-meta { font-size: 14px; color: #dce8f6; margin-bottom: 16px; }
.mycc-courses .sp-bar { height: 7px; width: 260px; max-width: 60vw; background: rgba(255, 255, 255, .25); border-radius: 5px; overflow: hidden; margin-bottom: 18px; }
.mycc-courses .sp-bar > i { display: block; height: 100%; background: #fff; border-radius: 5px; }
.mycc-courses .sp-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.mycc-courses .btn-light { display: inline-flex; align-items: center; gap: 9px; background: #fff; color: var(--mycc-navy); font-weight: 700; font-size: 15px; padding: 11px 22px; border-radius: 8px; border: none; cursor: pointer; font-family: inherit; }
.mycc-courses .btn-light:hover { background: #eef4fb; }
.mycc-courses .btn-ghost { display: inline-flex; align-items: center; gap: 9px; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: 8px; border: 1.5px solid rgba(255, 255, 255, .55); cursor: pointer; font-family: inherit; }
.mycc-courses .btn-ghost:hover { background: rgba(255, 255, 255, .24); }
.mycc-courses .btn-ghost svg,
.mycc-courses .btn-light svg { width: 16px; height: 16px; }

/* ---------- Sliders (Netflix rows) ---------- */
.mycc-courses .row { margin-bottom: 32px; }
.mycc-courses .row-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 4px 12px; }
.mycc-courses .row-title { font-family: Georgia, serif; font-size: 20px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 11px; }
.mycc-courses .row-title::before { content: ""; width: 4px; height: 20px; background: var(--mycc-navy); border-radius: 2px; display: inline-block; }
.mycc-courses .row-title .count { font-family: "Source Sans 3", sans-serif; font-size: 13px; font-weight: 600; color: var(--mycc-muted); }
.mycc-courses .row-see { font-size: 13px; font-weight: 700; letter-spacing: .3px; color: var(--mycc-link); background: none; border: none; cursor: pointer; font-family: inherit; }
.mycc-courses .row-see:hover { text-decoration: underline; }

.mycc-courses .slider-wrap { position: relative; }
/* No CSS scroll-behavior: a programmatic scrollLeft restore (after a bookmark
   re-render) must be instant. The arrow buttons still animate — they pass
   behavior:'smooth' explicitly to scrollBy(). scroll-snap keeps a card aligned
   to the left edge at rest so the peek is a consistent, intentional sliver
   rather than a randomly-chopped card. */
.mycc-courses .slider { display: flex; gap: 16px; overflow-x: auto; padding: 6px 2px 14px; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-left: 2px; }
.mycc-courses .slider::-webkit-scrollbar { display: none; }
/* Scroll arrows: circular, bordered, persistently visible so they read against
   the white page/cards. Outset into the page gutter (inside .mycc-main's 40px
   padding box — no page overflow) so they don't sit on top of card content and
   the last card stays fully visible. */
.mycc-courses .sbtn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 1px solid #d4dcea; background: #fff; box-shadow: 0 3px 12px rgba(20, 40, 80, .20); color: var(--mycc-navy); cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 0; opacity: 1; transition: background .15s, color .15s, border-color .15s, box-shadow .15s, opacity .15s; border-radius: 50%; }
.mycc-courses .sbtn svg { width: 20px !important; height: 20px !important; display: block; }
.mycc-courses .sbtn:hover { background: var(--mycc-navy); color: #fff; border-color: var(--mycc-navy); box-shadow: 0 5px 16px rgba(20, 40, 80, .30); }
.mycc-courses .sbtn.left { left: -34px; }
.mycc-courses .sbtn.right { right: -34px; }
.mycc-courses .sbtn[disabled] { opacity: 0 !important; pointer-events: none; }
@media (max-width: 680px) { .mycc-courses .sbtn { display: none; } }

/* ---------- Course card (streaming poster) ---------- */
.mycc-courses .card { flex: 0 0 268px; width: 268px; scroll-snap-align: start; background: #fff; border: 1px solid var(--mycc-line); border-radius: var(--mycc-card-radius); overflow: hidden; cursor: pointer; transition: box-shadow .16s, transform .16s; display: flex; flex-direction: column; }
.mycc-courses .card:hover { box-shadow: 0 10px 26px rgba(32, 84, 147, .18); transform: translateY(-3px); }
.mycc-courses .poster { position: relative; aspect-ratio: 16/9; color: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mycc-courses .poster .glyph { font-size: 46px; opacity: .92; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); }
.mycc-courses .poster .pt { position: absolute; left: 12px; right: 46px; bottom: 10px; font-family: Georgia, serif; font-size: 15px; font-weight: 700; line-height: 1.15; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.mycc-courses .poster::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .0) 35%, rgba(0, 0, 0, .42) 100%); }
/* status ribbon */
.mycc-courses .ribbon { position: absolute; top: 0; left: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .8px; color: #fff; padding: 5px 11px; border-bottom-right-radius: 8px; z-index: 2; text-transform: uppercase; }
.mycc-courses .ribbon.live { background: var(--mycc-accent); }
.mycc-courses .ribbon.prog { background: var(--mycc-navy); }
.mycc-courses .ribbon.new { background: #b07a1a; }
/* save (My List) button */
.mycc-courses .save { position: absolute; top: 8px; right: 8px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(16, 28, 45, .55); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); transition: background .15s, transform .12s; }
.mycc-courses .save:hover { background: rgba(16, 28, 45, .8); transform: scale(1.08); }
.mycc-courses .save svg { width: 17px; height: 17px; }
.mycc-courses .save.on { background: #fff; color: var(--mycc-navy); }
.mycc-courses .save.on svg { fill: var(--mycc-navy); stroke: var(--mycc-navy); }
/* progress strip on poster bottom */
.mycc-courses .poster .pbar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255, 255, 255, .32); z-index: 2; }
.mycc-courses .poster .pbar > i { display: block; height: 100%; background: var(--mycc-accent); }
/* hover play */
.mycc-courses .poster .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; z-index: 2; }
.mycc-courses .card:hover .poster .play { opacity: 1; }
.mycc-courses .poster .play span { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--mycc-navy); display: flex; align-items: center; justify-content: center; font-size: 22px; padding-left: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }

.mycc-courses .card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.mycc-courses .ctitle { font-family: Georgia, serif; font-size: 16px; font-weight: 700; color: var(--mycc-ink); line-height: 1.2; }
.mycc-courses .cinstr { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--mycc-muted); }
.mycc-courses .cinstr .ia { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #9bb4cf, #4f7aa8); flex-shrink: 0; }
.mycc-courses .cfoot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--mycc-muted); padding-top: 3px; }
.mycc-courses .cfoot .pct { font-weight: 700; color: var(--mycc-navy); }
.mycc-courses .cfoot .pct.done { color: var(--mycc-accent); }

/* ---------- Filter bar (All Courses) ---------- */
.mycc-courses .filterbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; padding: 16px 18px; background: var(--mycc-input); border: 1px solid var(--mycc-line); border-radius: var(--mycc-panel-radius); }
.mycc-courses .fsearch { position: relative; flex: 1; min-width: 220px; }
.mycc-courses .fsearch input { width: 100%; height: 42px; padding: 7px 14px 7px 40px; border: 1px solid var(--mycc-navy); border-radius: 8px; font-size: 15px; color: var(--mycc-navy); background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23205493' stroke-width='2' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 13px center; font-family: inherit; }
.mycc-courses .fsearch input::placeholder { color: #7fa0c4; }
.mycc-courses .fsearch input:focus { outline: none; border-color: var(--mycc-navy-dark); box-shadow: 0 0 0 2px #20549322; }
.mycc-courses .select-nav { appearance: none; -webkit-appearance: none; height: 42px; min-width: 172px; border: 1px solid var(--mycc-navy); border-radius: 8px; background: #fff url("data:image/svg+xml;utf8,<svg fill='none' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M6 8L10 12L14 8' stroke='%23205493' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 12px center/18px 18px; color: var(--mycc-navy); font-size: 15px; padding: 7px 36px 7px 13px; font-family: inherit; cursor: pointer; font-weight: 600; }
.mycc-courses .layout-toggle { display: flex; border: 1px solid var(--mycc-navy); border-radius: 8px; overflow: hidden; height: 42px; }
.mycc-courses .layout-toggle button { border: none; background: #fff; color: var(--mycc-navy); width: 46px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.mycc-courses .layout-toggle button.active { background: var(--mycc-navy); color: #fff; }
.mycc-courses .clear-link { font-size: 13px; font-weight: 700; color: var(--mycc-link); background: none; border: none; cursor: pointer; font-family: inherit; }
.mycc-courses .clear-link:hover { text-decoration: underline; }
.mycc-courses .result-line { font-size: 13px; color: var(--mycc-muted); margin: 14px 4px 6px; font-weight: 600; }

/* grid view */
.mycc-courses .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 18px; margin-top: 6px; }
.mycc-courses .grid .card { flex: none; width: auto; }
.mycc-courses .empty { padding: 60px 20px; text-align: center; color: var(--mycc-muted); }
.mycc-courses .empty .big { font-size: 34px; margin-bottom: 10px; }

.mycc-courses .note { margin-top: 46px; padding-top: 18px; border-top: 1px solid var(--mycc-line); font-size: 12px; color: var(--mycc-faint); line-height: 1.6; }

@media (max-width: 680px) {
	.mycc-courses .card { flex-basis: 220px; width: 220px; }
	.mycc-courses .mycc-main { padding: 24px 18px 80px; }
}

/* ===== BuddyBoss theme button-bleed reset =====================================
   The host theme styles every <button> globally (border-radius:100px, navy
   outline, appearance:button, padding, svg width collapse). Scoped overrides
   below restore the component's intended look. !important is deliberate — we
   are overriding an opinionated parent theme inside our own namespace only. */
.mycc-courses button {
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
	text-transform: none;
	letter-spacing: normal;
	min-height: 0;
	line-height: normal;
}
.mycc-courses .tab {
	border-radius: 0 !important;
	background: none !important;
}
.mycc-courses .tab:focus,
.mycc-courses .tab:focus-visible { outline: none; }
.mycc-courses .pill { border-radius: 999px !important; }
/* Bookmark button + icon: theme padded it to 40px and collapsed the svg to 0. */
.mycc-courses .save {
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
}
.mycc-courses .save svg { width: 17px !important; height: 17px !important; flex: 0 0 17px; }
/* The global button reset above sets box-shadow:none !important and the theme
   forces square radii — re-assert the round, shadowed scroll-arrow look. */
.mycc-courses .sbtn { border-radius: 50% !important; box-shadow: 0 3px 12px rgba(20, 40, 80, .20) !important; min-width: 40px !important; width: 40px !important; height: 40px !important; padding: 0 !important; }
.mycc-courses .sbtn:hover { box-shadow: 0 5px 16px rgba(20, 40, 80, .30) !important; }
.mycc-courses .btn-light,
.mycc-courses .btn-ghost { border-radius: 8px !important; }
.mycc-courses .layout-toggle button { border-radius: 0 !important; }
/* Text buttons must stay chrome-free under the theme. */
.mycc-courses .row-see,
.mycc-courses .clear-link {
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0;
	min-width: 0;
}

/* ===== Author avatar photo (real profile image) ===== */
.mycc-courses .cinstr img.ia {
	width: 28px !important;
	height: 28px !important;
	object-fit: cover;
	display: block;
}

/* ===== Modern play button (clean, centred SVG triangle) ===== */
.mycc-courses .poster .play span {
	width: 58px;
	height: 58px;
	padding-left: 0;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
	transition: transform .18s ease;
}
.mycc-courses .card:hover .poster .play span { transform: scale(1.08); }
.mycc-courses .poster .play svg { width: 22px !important; height: 22px !important; }

/* Spotlight play icons (theme collapses svg width otherwise). */
.mycc-courses .sp-eyebrow svg { width: 11px !important; height: 11px !important; vertical-align: -1px; margin-right: 2px; }
.mycc-courses .btn-light svg { width: 15px !important; height: 15px !important; }
.mycc-courses .btn-ghost svg { width: 16px !important; height: 16px !important; }

/* Empty-state icon uses the same bookmark as the cards. */
.mycc-courses .empty .big svg { width: 32px !important; height: 32px !important; color: var(--mycc-faint); }

/* Subtler card hover: neutral (not blue) shadow + smaller lift. */
.mycc-courses .card:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}

/* ===== Row-title count pill — subtle light blue-grey, not bold navy ===== */
.mycc-courses .row-title .count {
	background: var(--mycc-line) !important;
	color: #5b6573 !important;
	border-radius: 999px;
	padding: 2px 11px;
	font-weight: 700;
	box-shadow: none !important;
}
.mycc-courses .tab .pill { box-shadow: none !important; }

/* ===== Typography: Lato (headings/titles/badges) + Lora (author names) ===== */
.mycc-courses h1.title { font-family: 'Lato', sans-serif !important; font-weight: 700; }
.mycc-courses .row-title { font-family: 'Lato', sans-serif !important; }
.mycc-courses .sp-title { font-family: 'Lato', sans-serif !important; }
.mycc-courses .ctitle { font-family: 'Lato', sans-serif !important; font-size: 22px; line-height: 1.2; }
.mycc-courses .ribbon { font-family: 'Lato', sans-serif !important; }
.mycc-courses .cinstr { font-family: 'Lora', Georgia, serif !important; font-size: 13px; color: #222 !important; }

/* "Last activity on …" line on each active card */
.mycc-courses .clast { font-family: 'Lato', sans-serif; font-size: 12px; color: var(--mycc-muted); margin-top: 2px; }

/* Complete badge (100% progress) */
.mycc-courses .ribbon.done { background: #3e8e54; }

/* Avatar: no gradient fallback behind the photo, so re-renders (filtering)
   never flash a colour before the cached image repaints. */
.mycc-courses .cinstr img.ia { background: transparent !important; }

/* ---------- "Share course access to your students" banner (Option B) ---------- */
.mycc-courses a.assign-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--mycc-line);
	border-left: 5px solid var(--mycc-accent);
	border-radius: var(--mycc-panel-radius);
	padding: 14px 20px;
	margin: 18px 0 4px;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.mycc-courses a.assign-banner:hover,
.mycc-courses a.assign-banner:focus-visible {
	border-color: var(--mycc-accent);
	background: #fbfdf9;
	box-shadow: 0 1px 6px rgba(20, 60, 20, .08);
}
.mycc-courses a.assign-banner:focus-visible {
	outline: 2px solid var(--mycc-accent);
	outline-offset: 2px;
}
.mycc-courses a.assign-banner:hover .ab-link { text-decoration: underline; }
.mycc-courses .assign-banner .ab-ico {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: #eef7e6;
	color: #4f9a2e;
	display: grid;
	place-items: center;
}
.mycc-courses .assign-banner .ab-body { min-width: 0; }
.mycc-courses .assign-banner .ab-body strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--mycc-navy);
}
.mycc-courses .assign-banner .ab-body span {
	font-size: 14px;
	color: var(--mycc-muted);
}
.mycc-courses .assign-banner .ab-link {
	margin-left: auto;
	flex: none;
	font-size: 14px;
	font-weight: 700;
	color: var(--mycc-link);
	text-decoration: none;
	white-space: nowrap;
}
.mycc-courses .assign-banner .ab-link:hover { text-decoration: underline; }
@media (max-width: 600px) {
	.mycc-courses .assign-banner { flex-wrap: wrap; }
	.mycc-courses .assign-banner .ab-link { margin-left: 0; }
}

/* ---------- My Courses: no enrolled courses empty state ---------- */
.mycc-courses .mine-empty { padding: 54px 20px; }
.mycc-courses .mine-empty-title {
	font-family: "Lato", sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--mycc-navy);
	margin: 4px 0 6px;
}
.mycc-courses .mine-empty p {
	font-size: 14px;
	color: var(--mycc-muted);
	margin: 0 0 18px;
}
.mycc-courses .mine-empty-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	background: var(--mycc-navy);
	border: none;
	border-radius: 8px;
	padding: 11px 20px;
	cursor: pointer;
}
.mycc-courses .mine-empty-cta:hover { background: var(--mycc-navy-dark); }