/*
 * Quiz Answers Extender & Bulk Import for LearnDash – results review.
 * The explanation lives inside the answer card (<label>), below the answer text,
 * separated by a hairline divider, with a heading that reflects the answer state
 * (LearnDash already shows its own correct/incorrect icons).
 */

.wpProQuiz_content {
	--ldae-text: #4b5563;
	--ldae-muted: #6b7280;
	--ldae-divider: rgba(17, 24, 39, 0.1);
	--ldae-neutral-fg: #475569;
	--ldae-correct-fg: #157f3b;
	--ldae-incorrect-fg: #b42318;
}

/* Let the card wrap so the explanation drops onto its own full-width row. */
.wpProQuiz_content .wpProQuiz_questionListItem label.ldae-has-explanation,
.wpProQuiz_content .wpProQuiz_questionListItem label.ldae-is-loading {
	flex-wrap: wrap;
	height: auto;
	min-height: 0;
	white-space: normal;
}

.wpProQuiz_content .ldae-explanation {
	order: 99;
	box-sizing: border-box;
	display: block;
	flex: 0 0 100%;
	width: 100%;
	margin: 14px 0 2px;
	padding: 12px 0 0;
	border-top: 1px solid var(--ldae-divider);
	color: var(--ldae-text);
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1.6;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	cursor: default;
	animation: ldae-reveal 0.25s ease-out both;
}



.wpProQuiz_content .ldae-explanation__body {
	flex: 1 1 auto;
	min-width: 0;
}

.wpProQuiz_content .ldae-explanation__label {
	display: block;
	margin-bottom: 2px;
	color: var(--ldae-neutral-fg);
	font-size: 0.72rem;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}

.wpProQuiz_content .ldae-explanation__text {
	color: var(--ldae-text);
	font-style: italic;
	overflow-wrap: anywhere;
}

.wpProQuiz_content .ldae-explanation__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Correct answer */
.wpProQuiz_content .ldae-explanation--correct {
	border-top-color: rgba(21, 127, 59, 0.22);
}
.wpProQuiz_content .ldae-explanation--correct .ldae-explanation__label {
	color: var(--ldae-correct-fg);
}

/* The student's wrong choice */
.wpProQuiz_content .ldae-explanation--incorrect {
	border-top-color: rgba(180, 35, 24, 0.2);
}
.wpProQuiz_content .ldae-explanation--incorrect .ldae-explanation__label {
	color: var(--ldae-incorrect-fg);
}

/* Loading placeholder shown while explanations are fetched */
.wpProQuiz_content .ldae-loading {
	order: 99;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 100%;
	width: 100%;
	margin: 14px 0 2px;
	padding: 12px 0 0;
	border-top: 1px solid var(--ldae-divider);
	color: var(--ldae-muted);
	font-size: 0.85em;
	font-style: italic;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	cursor: default;
}

.wpProQuiz_content .ldae-loading__spinner {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border: 2px solid var(--ldae-divider);
	border-top-color: var(--ldae-muted);
	border-radius: 50%;
	animation: ldae-spin 0.7s linear infinite;
}

@keyframes ldae-spin {
	to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
	.wpProQuiz_content .ldae-explanation {
		margin-top: 12px;
		padding-top: 10px;
		font-size: 0.88em;
	}
}

@keyframes ldae-reveal {
	from { opacity: 0; transform: translateY(-3px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.wpProQuiz_content .ldae-explanation { animation: none; }
	.wpProQuiz_content .ldae-loading__spinner { animation-duration: 1.5s; }
}

/* Conditional progression notices (results screen, lesson, quiz pages).
 * Colours follow the usual status meanings: red = failed, green = passed, amber = warning,
 * blue = information. Each kind also has its own icon, so colour is not the only signal.
 * All text and button colours meet WCAG AA contrast. */
.ldae-progress-notice {
	--ldae-notice-accent: #475467;
	--ldae-notice-bg: #f8fafc;
	--ldae-notice-border: #d0d5dd;
	--ldae-notice-button: #1f2937;
	--ldae-notice-button-hover: #374151;
	--ldae-notice-icon: none;
	box-sizing: border-box;
	position: relative;
	margin: 0 0 20px;
	padding: 14px 18px 14px 52px;
	border: 1px solid var(--ldae-notice-border);
	border-left: 4px solid var(--ldae-notice-accent);
	border-radius: 6px;
	background: var(--ldae-notice-bg);
	color: #101828;
	line-height: 1.5;
	text-align: left;
}
.ldae-progress-notice::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 18px;
	width: 22px;
	height: 22px;
	background: var(--ldae-notice-icon) center / contain no-repeat;
}
.ldae-progress-notice p { margin: 0; }
.ldae-progress-notice > p:first-child { font-weight: 500; white-space: pre-line; } /* Keeps line breaks of the custom locked message. */
.ldae-progress-notice p + p { margin-top: 10px; }

/* Failed: continue to the next quiz, or back to the lesson. */
.ldae-progress-notice--next,
.ldae-progress-notice--retry {
	--ldae-notice-accent: #d92d20;
	--ldae-notice-bg: #fef3f2;
	--ldae-notice-border: #fecdca;
	--ldae-notice-button: #b42318;
	--ldae-notice-button-hover: #912018;
	--ldae-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23d92d20'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ldae-progress-notice--next > p:first-child,
.ldae-progress-notice--retry > p:first-child { color: #912018; }

/* Passed: lesson complete, or other quizzes completed for the student. */
.ldae-progress-notice--lesson,
.ldae-progress-notice--skip {
	--ldae-notice-accent: #079455;
	--ldae-notice-bg: #ecfdf3;
	--ldae-notice-border: #abefc6;
	--ldae-notice-button: #067647;
	--ldae-notice-button-hover: #085d3a;
	--ldae-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23079455'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ldae-progress-notice--lesson > p:first-child,
.ldae-progress-notice--skip > p:first-child { color: #085d3a; }

/* Warning: an attempt on a quiz that is locked in this round. */
.ldae-progress-notice--locked {
	--ldae-notice-accent: #dc6803;
	--ldae-notice-bg: #fffaeb;
	--ldae-notice-border: #fedf89;
	--ldae-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23dc6803'/%3E%3Cpath d='M12 6.5v7' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.3' r='1.5' fill='%23fff'/%3E%3C/svg%3E");
}
.ldae-progress-notice--locked > p:first-child { color: #93370d; }

/* Information: "This is your current quiz". */
.ldae-progress-notice--info {
	--ldae-notice-accent: #1570ef;
	--ldae-notice-bg: #eff8ff;
	--ldae-notice-border: #b2ddff;
	--ldae-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%231570ef'/%3E%3Ccircle cx='12' cy='7.2' r='1.5' fill='%23fff'/%3E%3Cpath d='M12 10.8v6.5' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ldae-progress-notice--info > p:first-child { color: #1849a9; }

.ldae-progress-notice__button {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 6px;
	background: var(--ldae-notice-button);
	color: #fff !important;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}
.ldae-progress-notice__button:hover,
.ldae-progress-notice__button:focus { background: var(--ldae-notice-button-hover); }
.ldae-progress-notice__button:focus-visible { outline: 2px solid #1570ef; outline-offset: 2px; }
.ldae-progress-notice__countdown { color: #344054; font-size: 0.95em; }

@media (prefers-reduced-motion: reduce) {
	.ldae-progress-notice__button { transition: none; }
}
@media (max-width: 480px) {
	.ldae-progress-notice { padding: 12px 14px 12px 46px; }
	.ldae-progress-notice::before { top: 13px; left: 14px; width: 20px; height: 20px; }
	.ldae-progress-notice__button { display: block; text-align: center; }
}