/* CFCC LearnDash Activities — shared styles
   Brand palette (do not introduce new hex values):
   Blue #385E9D | Gold #F2A900 | Magenta #B0008E | Green #43B02A
*/

.cfcc-activity {
	font-family: 'DM Sans', sans-serif;
	max-width: 900px;
	margin: 32px auto;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Defensive reset, scoped only to our widgets: prevents padding/border
 * on any inner element from silently pushing the total rendered width
 * past what its parent actually has room for — the kind of thing that
 * causes a stray horizontal scrollbar on a normal laptop screen without
 * any obvious cause in the editor preview. */
.cfcc-activity,
.cfcc-activity *,
.cfcc-activity *::before,
.cfcc-activity *::after {
	box-sizing: border-box;
}

/* Long unbroken text (a long URL, a long single word, a run-on answer
 * typed with no spaces) can force a container wider than its parent on
 * a normal laptop width. Let it wrap instead of pushing the layout out. */
.cfcc-activity p,
.cfcc-activity span,
.cfcc-activity div,
.cfcc-activity button,
.cfcc-activity input,
.cfcc-activity textarea {
	overflow-wrap: break-word;
	word-break: break-word;
}

.cfcc-activity__eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffffff !important;
	background: #B0008E;
	border-radius: 20px;
	padding: 4px 12px;
	margin-bottom: 14px;
}

.cfcc-activity__title {
	font-family: 'Playfair Display', serif;
	font-size: 26px;
	color: #385E9D !important;
	-webkit-text-fill-color: #385E9D !important;
	margin: 0 0 8px 0;
}

.cfcc-activity__instructions {
	font-size: 15px;
	color: #444444;
	margin-bottom: 24px;
	line-height: 1.5;
}

.cfcc-activity__btn {
	display: inline-block;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #ffffff !important;
	background: #385E9D !important;
	border: none;
	border-radius: 6px !important;
	padding: 12px 28px;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.1s ease;
}
.cfcc-activity__btn:hover { filter: brightness(0.9); }
.cfcc-activity__btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cfcc-activity__btn--secondary {
	background: #ffffff !important;
	color: #385E9D !important;
	border: 2px solid #385E9D !important;
	padding: 10px 26px;
}

.cfcc-activity__feedback {
	margin-top: 20px;
	padding: 16px 20px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	display: none;
}
.cfcc-activity__feedback.is-visible { display: block; }
.cfcc-activity__feedback.is-pass {
	background: rgba(67,176,42,0.1);
	color: #2f7d1e;
	border: 1px solid #43B02A;
}
.cfcc-activity__feedback.is-fail {
	background: rgba(176,0,142,0.06);
	color: #B0008E;
	border: 1px solid #B0008E;
}

.cfcc-activity__score-pill {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: #ffffff !important;
	background: #F2A900;
	border-radius: 20px;
	padding: 4px 12px;
	margin-left: 8px;
}

/* ---------- Drag & Drop ---------- */
.cfcc-dd__board {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 8px;
}
.cfcc-dd__bank {
	flex: 1 1 260px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-content: flex-start;
	min-height: 60px;
	padding: 16px;
	background: #f5f6f8;
	border-radius: 12px;
}
.cfcc-dd__item {
	background: #ffffff;
	border: 2px solid #385E9D;
	color: #385E9D !important;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 16px;
	border-radius: 8px;
	cursor: grab;
	user-select: none;
	touch-action: none;
}
.cfcc-dd__item.is-placed { opacity: 0.35; cursor: default; }
.cfcc-dd__targets {
	flex: 1 1 260px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cfcc-dd__target {
	min-height: 48px;
	border: 2px dashed #cbd5e1;
	border-radius: 8px;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #444;
	background: #fafafa;
}
.cfcc-dd__target.is-over { border-color: #F2A900; background: #fff8e8; }
.cfcc-dd__target.is-correct { border-color: #43B02A; background: rgba(67,176,42,0.08); border-style: solid; }
.cfcc-dd__target.is-incorrect { border-color: #B0008E; background: rgba(176,0,142,0.06); border-style: solid; }
.cfcc-dd__target-label { font-weight: 700; color: #385E9D; min-width: 120px; }
.cfcc-dd__target-slot { flex: 1; }

/* ---------- Scenario Branching ---------- */
.cfcc-sc__step { display: none; }
.cfcc-sc__step.is-active { display: block; }
.cfcc-sc__prompt {
	font-size: 16px;
	color: #222;
	margin-bottom: 18px;
	line-height: 1.5;
}
.cfcc-sc__choices { display: flex; flex-direction: column; gap: 10px; }
.cfcc-sc__choice {
	display: block;
	width: 100%;
	text-align: left;
	background: #ffffff !important;
	color: #333333 !important;
	border: 2px solid #cbd5e1 !important;
	border-radius: 10px;
	padding: 14px 18px;
	font-size: 14px;
	font-family: 'DM Sans', sans-serif;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.cfcc-sc__choice:hover { border-color: #385E9D !important; }
.cfcc-sc__choice.is-selected.is-correct { border-color: #43B02A !important; background: rgba(67,176,42,0.08) !important; }
.cfcc-sc__choice.is-selected.is-incorrect { border-color: #B0008E !important; background: rgba(176,0,142,0.06) !important; }
.cfcc-sc__choice-feedback {
	margin-top: 12px;
	font-size: 13px;
	color: #444;
	background: #f5f6f8;
	border-radius: 8px;
	padding: 10px 14px;
}
.cfcc-sc__progress {
	font-size: 12px;
	font-weight: 700;
	color: #385E9D;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 10px;
}

/* ---------- Sorting ---------- */
/* Side-by-side layout: item pool on the left, category buckets stacked
 * vertically down the right. This keeps every category within reach of
 * a short drag from the pool, rather than needing to drag all the way
 * down to a row of buckets below. Falls back to the original
 * stacked (pool-above, buckets-below) layout on narrow screens, where
 * side-by-side columns get too cramped to use. */
.cfcc-srt__layout {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}
.cfcc-srt__pool {
	flex: 0 0 280px;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 12px;
	padding: 16px;
	background: #f5f6f8;
	border-radius: 12px;
	min-height: 56px;
	max-height: 520px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.cfcc-srt__item {
	background: #ffffff;
	border: 2px solid #385E9D;
	color: #385E9D !important;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 16px;
	border-radius: 8px;
	cursor: grab;
	user-select: none;
	touch-action: none;
}
.cfcc-srt__item.is-placed { opacity: 0.35; cursor: default; }
.cfcc-srt__buckets {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cfcc-srt__bucket {
	min-height: 90px;
	border: 2px dashed #cbd5e1;
	border-radius: 12px;
	padding: 14px;
}
.cfcc-srt__bucket.is-over { border-color: #F2A900; background: #fff8e8; }
.cfcc-srt__bucket-title {
	font-weight: 700;
	color: #385E9D;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 10px;
}
.cfcc-srt__bucket-drop {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-height: 220px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.cfcc-srt__bucket-item { margin-bottom: 0; }
.cfcc-srt__bucket-item.is-correct { border-color: #43B02A !important; }
.cfcc-srt__bucket-item.is-incorrect { border-color: #B0008E !important; }

@media (max-width: 700px) {
	.cfcc-srt__layout { flex-direction: column; }
	.cfcc-srt__pool { flex: 0 0 auto; width: 100%; }
}

@media (max-width: 960px) {
	.cfcc-activity { padding: 24px; }
	.cfcc-dd__board { gap: 16px; }
	.cfcc-srt__buckets { gap: 12px; }
}

@media (max-width: 640px) {
	.cfcc-activity { padding: 20px; margin: 20px 12px; }
	.cfcc-dd__board { flex-direction: column; }
	.cfcc-iw--horizontal .cfcc-iw__grid { flex-direction: column; flex-wrap: wrap; overflow-x: visible; }
	.cfcc-iw--horizontal .cfcc-iw__card { flex: 1 1 auto; width: 100%; }
}

/* ================= Tier A additions ================= */

/* ---------- Question widgets (Single/Multiple Choice, True-False) ---------- */
.cfcc-q__choices { display: flex; flex-direction: column; gap: 10px; }
.cfcc-q__choice {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	background: #ffffff !important;
	color: #333333 !important;
	border: 2px solid #cbd5e1 !important;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 14px;
	font-family: 'DM Sans', sans-serif;
	cursor: pointer;
}
.cfcc-q__choice:hover:not(:disabled) { border-color: #385E9D !important; }
.cfcc-q__choice-mark {
	width: 18px; height: 18px; flex: 0 0 18px;
	border: 2px solid #cbd5e1; border-radius: 4px;
}
.cfcc-q__choice.is-selected .cfcc-q__choice-mark { background: #385E9D; border-color: #385E9D; }
.cfcc-q__choice.is-correct { border-color: #43B02A !important; background: rgba(67,176,42,0.08) !important; }
.cfcc-q__choice.is-incorrect-answer.is-selected { border-color: #B0008E !important; background: rgba(176,0,142,0.06) !important; }
.cfcc-q__choice:disabled { cursor: default; }

/* ---------- Mark the Words ---------- */
.cfcc-mw__passage { font-size: 16px; line-height: 1.9; color: #222; }
.cfcc-mw__word { cursor: pointer; border-radius: 4px; padding: 2px 3px; }
.cfcc-mw__word:hover { background: #f5f6f8; }
.cfcc-mw__word.is-marked { background: #fff8e8; box-shadow: 0 0 0 2px #F2A900 inset; }
.cfcc-mw__word.is-checked.is-correct { background: rgba(67,176,42,0.15); box-shadow: 0 0 0 2px #43B02A inset; }
.cfcc-mw__word.is-checked.is-incorrect { background: rgba(176,0,142,0.1); box-shadow: 0 0 0 2px #B0008E inset; }
.cfcc-mw__word.is-checked.is-missed { box-shadow: 0 0 0 2px #F2A900 inset; }

/* ---------- Drag the Words ---------- */
.cfcc-dw__passage { font-size: 16px; line-height: 2.2; color: #222; }
.cfcc-dw__blank {
	display: inline-block;
	min-width: 90px;
	border-bottom: 2px solid #385E9D;
	padding: 2px 8px;
	margin: 0 2px;
	font-weight: 600;
	color: #385E9D;
	text-align: center;
}
.cfcc-dw__blank.is-over { background: #fff8e8; }
.cfcc-dw__blank.is-correct { color: #2f7d1e; border-color: #43B02A; }
.cfcc-dw__blank.is-incorrect { color: #B0008E; border-color: #B0008E; }
.cfcc-dw__bank { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; padding: 14px; background: #f5f6f8; border-radius: 12px; }
.cfcc-dw__token {
	background: #ffffff; border: 2px solid #385E9D; color: #385E9D !important;
	font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 8px;
	cursor: grab; user-select: none; touch-action: none;
}
.cfcc-dw__token.is-placed { opacity: 0.35; cursor: default; }

/* ---------- Fill in the Blank ---------- */
.cfcc-fb__passage { font-size: 16px; line-height: 2.2; color: #222; }
.cfcc-fb__input {
	border: none; border-bottom: 2px solid #385E9D; background: #f5f6f8;
	font-family: 'DM Sans', sans-serif; font-size: 14px; padding: 4px 8px;
	margin: 0 3px; border-radius: 4px 4px 0 0; text-align: center;
}
.cfcc-fb__input.is-correct { border-color: #43B02A; background: rgba(67,176,42,0.1); }
.cfcc-fb__input.is-incorrect { border-color: #B0008E; background: rgba(176,0,142,0.08); }

/* ---------- Sort the Paragraphs ---------- */
.cfcc-sp__list { display: flex; flex-direction: column; gap: 10px; }
.cfcc-sp__item {
	display: flex; align-items: center; gap: 12px;
	background: #ffffff; border: 2px solid #cbd5e1; border-radius: 10px;
	padding: 12px 16px; cursor: grab;
}
.cfcc-sp__item.is-dragging { opacity: 0.4; }
.cfcc-sp__item.is-correct { border-color: #43B02A; background: rgba(67,176,42,0.08); }
.cfcc-sp__item.is-incorrect { border-color: #B0008E; background: rgba(176,0,142,0.06); }
.cfcc-sp__handle { color: #385E9D; font-size: 16px; flex: 0 0 auto; }
.cfcc-sp__text { font-size: 14px; color: #333; }

/* ---------- Image Sequencing ---------- */
.cfcc-is__list { display: flex; flex-direction: column; gap: 10px; }
.cfcc-is__item {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #ffffff;
	border: 2px solid #cbd5e1;
	border-radius: 10px;
	padding: 10px 16px;
	cursor: grab;
}
.cfcc-is__item.is-dragging { opacity: 0.4; }
.cfcc-is__item.is-correct { border-color: #43B02A; background: rgba(67,176,42,0.08); }
.cfcc-is__item.is-incorrect { border-color: #B0008E; background: rgba(176,0,142,0.06); }
.cfcc-is__handle { color: #385E9D; font-size: 16px; flex: 0 0 auto; }
.cfcc-is__image { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.cfcc-is__desc { font-size: 14px; color: #333; }

/* ---------- Confidence Rating ---------- */
.cfcc-cr__list { display: flex; flex-direction: column; gap: 24px; }
.cfcc-cr__row { padding-bottom: 20px; border-bottom: 1px solid #e5e7eb; }
.cfcc-cr__row:last-child { border-bottom: none; }
.cfcc-cr__statement { font-size: 15px; color: #222; margin-bottom: 12px; font-weight: 600; }
.cfcc-cr__scale { display: flex; gap: 8px; }
.cfcc-cr__point {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 2px solid #cbd5e1;
	background: #ffffff !important;
	color: #385E9D !important;
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}
.cfcc-cr__point:hover { border-color: #385E9D !important; }
.cfcc-cr__point.is-selected { background: #385E9D !important; color: #ffffff !important; border-color: #385E9D !important; }
.cfcc-cr__scale-labels { display: flex; justify-content: space-between; font-size: 12px; color: #666; margin-top: 6px; max-width: 320px; }
.cfcc-cr__summary { margin-top: 16px; padding: 14px 18px; background: #f5f6f8; border-radius: 10px; color: #385E9D; font-weight: 600; font-size: 14px; }

/* ---------- Results Summary / Certificate ---------- */
.cfcc-rs__loading { color: #666; font-style: italic; }
.cfcc-rs__stat-grid { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.cfcc-rs__stat {
	flex: 1 1 160px;
	background: #f5f6f8;
	border-radius: 12px;
	padding: 20px;
	text-align: center;
}
.cfcc-rs__stat-value { font-family: 'Playfair Display', serif; font-size: 30px; color: #385E9D; }
.cfcc-rs__stat-label { font-size: 12px; color: #666; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 4px; }
.cfcc-rs__table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.cfcc-rs__table th {
	text-align: left;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #ffffff;
	background: #385E9D;
	padding: 10px 14px;
}
.cfcc-rs__table td { padding: 10px 14px; border-bottom: 1px solid #e5e7eb; font-size: 14px; color: #333; }
.cfcc-rs__certificate {
	border: 3px solid #F2A900;
	border-radius: 16px;
	padding: 32px;
	text-align: center;
	background: #fffaf0;
}
.cfcc-rs__certificate-heading { font-family: 'Playfair Display', serif; font-size: 24px; color: #385E9D; margin-bottom: 12px; }
.cfcc-rs__certificate-body { font-size: 15px; color: #444; margin-bottom: 20px; line-height: 1.6; }

/* ---------- Image Pairing (extends .cfcc-dd__*) ---------- */
.cfcc-dd__item--image { padding: 6px; }
.cfcc-dd__item--image img { max-width: 100px; max-height: 100px; display: block; border-radius: 6px; }
.cfcc-dd__target--image { flex-direction: column; align-items: flex-start; }
.cfcc-dd__target--image .cfcc-dd__target-label { max-width: 100px; max-height: 100px; border-radius: 6px; margin-bottom: 8px; }

/* ---------- Memory Game ---------- */
.cfcc-mg__board { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; margin-top: 12px; }
.cfcc-mg__card {
	position: relative; aspect-ratio: 1; border: none; border-radius: 10px;
	background: none; cursor: pointer; perspective: 600px;
}
.cfcc-mg__card-face {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	border-radius: 10px; backface-visibility: hidden; transition: transform 0.35s ease;
	font-size: 22px; font-weight: 700; color: #ffffff;
}
.cfcc-mg__card-front { background: #385E9D; }
.cfcc-mg__card-back { background: #ffffff; border: 2px solid #385E9D; transform: rotateY(180deg); overflow: hidden; }
.cfcc-mg__card-back img { width: 100%; height: 100%; object-fit: cover; }
.cfcc-mg__card.is-flipped .cfcc-mg__card-front { transform: rotateY(180deg); }
.cfcc-mg__card.is-flipped .cfcc-mg__card-back { transform: rotateY(0deg); }
.cfcc-mg__card.is-matched { opacity: 0.55; cursor: default; }

/* ---------- Guess the Answer ---------- */
.cfcc-ga__image { max-width: 100%; border-radius: 12px; margin-bottom: 16px; display: block; }
.cfcc-ga__question { font-weight: 600; }
.cfcc-ga__answer { margin-top: 16px; padding: 14px 18px; background: #f5f6f8; border-radius: 10px; color: #333; }

/* ================= Tier B additions ================= */

/* ---------- Flashcards ---------- */
.cfcc-fc__deck { position: relative; min-height: 260px; }
.cfcc-fc__card { display: none; text-align: center; }
.cfcc-fc__card.is-active { display: block; }
.cfcc-fc__image { max-width: 260px; max-height: 220px; border-radius: 12px; margin: 0 auto 16px; display: block; }
.cfcc-fc__term { margin-top: 14px; font-size: 18px; font-weight: 700; color: #385E9D; }
.cfcc-fc__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.cfcc-fc__counter { font-size: 13px; color: #666; font-weight: 600; }
.cfcc-fc__answer-input {
	display: block;
	margin: 0 auto 12px;
	width: 240px;
	max-width: 100%;
	text-align: center;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	border: 2px solid #cbd5e1;
	border-radius: 8px;
	padding: 10px 14px;
}
.cfcc-fc__answer-input.is-correct { border-color: #43B02A; background: rgba(67,176,42,0.08); }
.cfcc-fc__answer-input.is-incorrect { border-color: #B0008E; background: rgba(176,0,142,0.06); }

/* ---------- Dialog Cards ---------- */
.cfcc-dc__deck { min-height: 160px; }
.cfcc-dc__card { display: none; text-align: center; }
.cfcc-dc__card.is-active { display: block; }
.cfcc-dc__flip { position: relative; min-height: 120px; perspective: 800px; margin-bottom: 16px; }
.cfcc-dc__face {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	padding: 20px; border-radius: 12px; backface-visibility: hidden; transition: transform 0.35s ease;
	font-size: 15px; text-align: center;
}
.cfcc-dc__front { background: #f5f6f8; color: #222; }
.cfcc-dc__back { background: #385E9D; color: #ffffff; transform: rotateY(180deg); }
.cfcc-dc__flip.is-flipped .cfcc-dc__front { transform: rotateY(180deg); }
.cfcc-dc__flip.is-flipped .cfcc-dc__back { transform: rotateY(0deg); }
.cfcc-dc__nav { display: flex; align-items: center; justify-content: center; gap: 16px; }
.cfcc-dc__counter { font-size: 13px; color: #666; font-weight: 600; }

/* ---------- Accordion ---------- */
.cfcc-ac__list { display: flex; flex-direction: column; gap: 10px; }
.cfcc-ac__panel { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.cfcc-ac__header {
	width: 100%; display: flex; align-items: center; justify-content: space-between;
	background: #f5f6f8 !important; color: #385E9D !important; border: none;
	padding: 14px 18px; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 15px; cursor: pointer;
}
.cfcc-ac__caret { transition: transform 0.2s ease; }
.cfcc-ac__panel.is-open .cfcc-ac__caret { transform: rotate(180deg); }
.cfcc-ac__body { display: none; padding: 16px 18px; font-size: 14px; color: #444; line-height: 1.6; }
.cfcc-ac__panel.is-open .cfcc-ac__body { display: block; }

/* ---------- Information Wall ---------- */
.cfcc-iw__search {
	width: 100%; padding: 10px 14px; margin-bottom: 18px; border: 2px solid #cbd5e1;
	border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 14px;
}
.cfcc-iw__grid { display: flex; gap: 16px; }
.cfcc-iw__card { background: #f5f6f8; border-radius: 12px; padding: 16px; }
.cfcc-iw__card-title { font-weight: 700; color: #385E9D; margin-bottom: 6px; font-size: 15px; }
.cfcc-iw__card-content { font-size: 13px; color: #444; }
.cfcc-iw__empty { color: #666; font-style: italic; }

/* Horizontal: single row, fixed-ish card width, scrolls sideways if it overflows */
.cfcc-iw--horizontal .cfcc-iw__grid {
	flex-wrap: nowrap;
	overflow-x: auto;
	padding-bottom: 8px;
	-webkit-overflow-scrolling: touch;
}
.cfcc-iw--horizontal .cfcc-iw__card { flex: 0 0 240px; }

/* Vertical: stacked full-width list, one card per row */
.cfcc-iw--vertical .cfcc-iw__grid { flex-direction: column; }
.cfcc-iw--vertical .cfcc-iw__card { flex: 1 1 auto; width: 100%; }

/* ---------- Timeline ---------- */
.cfcc-tl__list { position: relative; padding-left: 28px; border-left: 3px solid #385E9D; }
.cfcc-tl__event { position: relative; margin-bottom: 28px; }
.cfcc-tl__marker { position: absolute; left: -37px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #F2A900; border: 3px solid #ffffff; box-shadow: 0 0 0 2px #385E9D; }
.cfcc-tl__label { display: inline-block; font-size: 11px; font-weight: 700; color: #ffffff !important; background: #B0008E; border-radius: 20px; padding: 3px 10px; margin-bottom: 6px; }
.cfcc-tl__event-title { font-family: 'Playfair Display', serif; font-size: 18px; color: #385E9D; margin: 0 0 8px 0; }
.cfcc-tl__image { max-width: 220px; border-radius: 8px; margin-bottom: 8px; display: block; }
.cfcc-tl__desc { font-size: 14px; color: #444; }

/* Stepped mode: only one event visible at a time, click-through nav */
.cfcc-tl__progress {
	font-size: 12px;
	font-weight: 700;
	color: #385E9D;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 14px;
}
.cfcc-tl--stepped .cfcc-tl__event { display: none; margin-bottom: 0; }
.cfcc-tl--stepped .cfcc-tl__event.is-active { display: block; }
.cfcc-tl--stepped .cfcc-tl__list { min-height: 120px; }
.cfcc-tl__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #e5e7eb;
}

/* ---------- Image Hotspots ---------- */
.cfcc-ih__wrap { position: relative; display: inline-block; max-width: 100%; }
.cfcc-ih__image { max-width: 100%; border-radius: 12px; display: block; }
.cfcc-ih__marker {
	position: absolute; transform: translate(-50%, -50%);
	width: 30px; height: 30px; border-radius: 50%;
	background: #F2A900 !important; color: #ffffff !important; border: 3px solid #ffffff;
	font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer;
	box-shadow: 0 0 0 3px rgba(242,169,0,0.35);
}
.cfcc-ih__popup {
	position: absolute; transform: translate(-50%, 10px);
	width: 240px;
	max-width: calc(100% - 16px);
	background: #ffffff; border-radius: 10px; padding: 14px 16px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.18); z-index: 5;
}
.cfcc-ih__popup-close { position: absolute; top: 6px; right: 8px; background: none; border: none; font-size: 16px; cursor: pointer; color: #666; }
.cfcc-ih__popup-title { font-weight: 700; color: #385E9D; margin-bottom: 6px; font-size: 14px; }
.cfcc-ih__popup-text { font-size: 13px; color: #444; }

/* ---------- Documentation Tool ---------- */
.cfcc-dt__progress { font-size: 12px; font-weight: 700; color: #385E9D; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 14px; }
.cfcc-dt__step { display: none; }
.cfcc-dt__step.is-active { display: block; }
.cfcc-dt__step-title { font-family: 'Playfair Display', serif; color: #385E9D; font-size: 19px; margin: 0 0 8px 0; }
.cfcc-dt__prompt { font-size: 14px; color: #444; margin-bottom: 14px; }
.cfcc-dt__input,
.cfcc-dt__textarea {
	width: 100%;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	border: 2px solid #cbd5e1;
	border-radius: 8px;
	padding: 10px 14px;
	box-sizing: border-box;
}
.cfcc-dt__textarea { resize: vertical; }
.cfcc-dt__checklist { display: flex; flex-direction: column; gap: 8px; }
.cfcc-dt__checklist-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #333; cursor: pointer; }
.cfcc-dt__nav { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.cfcc-dt__export { margin-top: 24px; padding-top: 20px; border-top: 1px solid #e5e7eb; }
.cfcc-dt__export-label { font-weight: 600; color: #385E9D; margin-bottom: 12px; }
.cfcc-dt__export button { margin-right: 10px; }

/* ---------- Checkbox Statement ---------- */
.cfcc-cs__statement {
	background: #f5f6f8;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	padding: 18px 20px;
	font-size: 15px;
	color: #222;
	line-height: 1.6;
	margin-bottom: 20px;
}
.cfcc-cs__options {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.cfcc-cs__option {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 10px 16px;
	border: 2px solid #cbd5e1;
	border-radius: 10px;
	background: #ffffff;
}
.cfcc-cs__option:hover { border-color: #385E9D; }
.cfcc-cs__option-label {
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	text-align: center;
}
.cfcc-cs__checkbox {
	width: 22px;
	height: 22px;
	accent-color: #385E9D;
	cursor: pointer;
}
.cfcc-cs__option.is-correct { border-color: #43B02A; background: rgba(67,176,42,0.08); }
.cfcc-cs__option.is-incorrect { border-color: #B0008E; background: rgba(176,0,142,0.06); }

/* ---------- Checkbox Grid ---------- */
.cfcc-cg__table {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.cfcc-cg__header,
.cfcc-cg__row {
	display: grid;
	grid-template-columns: 90px 90px 1fr;
	align-items: center;
	gap: 16px;
}
.cfcc-cg__header-cell {
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: #385E9D;
	text-align: center;
	line-height: 1.3;
}
.cfcc-cg__cell--checkbox { display: flex; justify-content: center; }
.cfcc-cg__checkbox {
	width: 24px;
	height: 24px;
	accent-color: #385E9D;
	cursor: pointer;
}
.cfcc-cg__statement {
	background: #f5f6f8;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	padding: 14px 18px;
	font-size: 14px;
	color: #222;
	line-height: 1.55;
}
.cfcc-cg__row.is-correct .cfcc-cg__statement { border-color: #43B02A; background: rgba(67,176,42,0.06); }
.cfcc-cg__row.is-incorrect .cfcc-cg__statement { border-color: #B0008E; background: rgba(176,0,142,0.05); }
.cfcc-cg__row.is-unanswered .cfcc-cg__statement { border-color: #F2A900; background: rgba(242,169,0,0.06); }

@media (max-width: 640px) {
	.cfcc-cg__header,
	.cfcc-cg__row {
		grid-template-columns: 60px 60px 1fr;
		gap: 10px;
	}
	.cfcc-cg__header-cell { font-size: 11px; }
}

/* ---------- Breakout helper ---------- */
/* Opt-in only: add the CSS class "cfcc-breakout" to a widget in
 * Elementor's Advanced > CSS Classes field when its actual max-width
 * (set via the widget's own Activity Width control, or the 900px
 * default) is being silently capped by a narrower ancestor — most
 * commonly LearnDash's own lesson/topic content wrapper, which is
 * often capped around 960px regardless of what any child sets.
 *
 * This uses the standard full-bleed technique: the element renders at
 * 100% of the viewport width and re-centers itself with a negative
 * margin, which escapes the parent's max-width entirely. The activity's
 * own max-width (inline style from Activity Width, or 900px by default)
 * still governs how wide it visually grows — this class only removes
 * the parent's ceiling, it doesn't change the target width itself.
 *
 * Note: on some browsers this can introduce a few pixels of horizontal
 * scroll if the page has a vertical scrollbar (100vw includes scrollbar
 * width in some browsers). Usually not noticeable; flag it if it is.
 */
.cfcc-activity.cfcc-breakout {
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
}