/* Meldo Quiz-Intro — eigener Namespace .mqi, BuddyBoss-sicher.
 * Gleiche Regel wie im Reset-Tab: Komponenten mit .mqi präfixieren,
 * damit Theme-Resets die Farben nicht überschreiben. */

.mqi {
	--mqi-teal: #3D7C85;
	--mqi-teal-soft: #E9EEEF;
	--mqi-teal-dark: #2D5E62;
	--mqi-green: #E8924F;
	--mqi-ink: #111416;
	--mqi-muted: #6B7480;
	--mqi-line: #E2E6EA;
	font-family: 'Akko', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--mqi-ink);
	background: #FAF8F3;
	border: 1px solid var(--mqi-line);
	border-radius: 18px;
	padding: 18px 20px;
	margin: 0 0 24px;
}

.mqi *,
.mqi *::before,
.mqi *::after { box-sizing: border-box; }

.mqi .mqi-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.mqi .mqi-head-icon {
	width: 26px; height: 26px; border-radius: 9px; flex: 0 0 auto;
	background: var(--mqi-teal); color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.mqi .mqi-head-icon svg { width: 15px; height: 15px; }
.mqi .mqi-head-title {
	font-family: 'Akko', sans-serif; font-weight: 600;
	font-size: 15px; color: var(--mqi-ink);
}

.mqi .mqi-facts {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px; margin-bottom: 14px;
}
.mqi .mqi-fact {
	display: flex; align-items: center; gap: 10px;
	background: #fff; border: 1px solid var(--mqi-line);
	border-radius: 12px; padding: 10px 12px;
}
.mqi .mqi-fact-icon {
	width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
	background: var(--mqi-teal-soft); color: var(--mqi-teal);
	display: flex; align-items: center; justify-content: center;
}
.mqi .mqi-fact-icon svg { width: 16px; height: 16px; }
.mqi .mqi-fact-body { display: flex; flex-direction: column; min-width: 0; }
.mqi .mqi-fact-value {
	font-family: 'Akko', sans-serif; font-weight: 600;
	font-size: 14px; color: var(--mqi-ink); line-height: 1.25;
}
.mqi .mqi-fact-label { font-size: 11.5px; color: var(--mqi-muted); }

.mqi ul.mqi-notes { margin: 0; padding: 0; list-style: none; }
.mqi ul.mqi-notes li {
	position: relative; padding-left: 18px; margin: 0 0 6px;
	font-size: 13px; line-height: 1.55; color: var(--mqi-muted); list-style: none;
}
.mqi ul.mqi-notes li:last-child { margin-bottom: 0; }
.mqi ul.mqi-notes li::before {
	content: ''; position: absolute; left: 3px; top: 8px;
	width: 6px; height: 6px; border-radius: 50%; background: var(--mqi-green);
}
.mqi ul.mqi-notes li strong { color: var(--mqi-ink); font-weight: 600; }

.mqi .mqi-leader {
	display: flex; align-items: flex-start; gap: 10px;
	margin-top: 14px; padding: 11px 13px;
	background: var(--mqi-teal-soft); border-radius: 12px;
	font-size: 12.5px; line-height: 1.5; color: var(--mqi-teal-dark);
}
.mqi .mqi-leader strong { color: var(--mqi-teal-dark); font-weight: 600; }
.mqi .mqi-leader-icon { flex: 0 0 auto; color: var(--mqi-teal); }
.mqi .mqi-leader-icon svg { width: 16px; height: 16px; display: block; margin-top: 1px; }
.mqi .mqi-leader-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.mqi .mqi-self { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mqi button.mqi-btn {
	display: inline-flex; align-items: center; gap: 7px;
	background: #fff; border: 1.5px solid var(--mqi-teal); color: var(--mqi-teal);
	border-radius: 999px; padding: 7px 15px;
	font-family: 'Akko', sans-serif; font-size: 12.5px; font-weight: 500;
	line-height: 1.3; cursor: pointer; box-shadow: none; text-transform: none;
	-webkit-appearance: none; appearance: none; margin: 0;
	transition: background .15s ease, transform .15s ease;
}
.mqi button.mqi-btn:hover { background: var(--mqi-teal); color: #fff; }
.mqi button.mqi-btn:active { transform: scale(.97); }
.mqi button.mqi-btn[disabled] { opacity: .5; cursor: not-allowed; }
.mqi button.mqi-btn svg { width: 15px; height: 15px; }
.mqi .mqi-self-msg { font-size: 12px; color: var(--mqi-teal-dark); }

@media (max-width: 560px) {
	.mqi { padding: 16px; border-radius: 14px; }
	.mqi .mqi-facts { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Startbildschirm der Überprüfung — eine zusammenhängende Karte
   ========================================================================== */

/* Doppelter Titel: Die Seite zeigt ihn bereits als H1. */
.learndash-wrapper .wpProQuiz_content > h2 { display: none; }

.learndash-wrapper .wpProQuiz_text.mqi-startbox {
	background: #fff;
	border: 1px solid #E2E6EA;
	border-radius: 20px;
	padding: 22px;
	margin: 0 0 24px;
	box-shadow: 0 2px 14px rgba(0,0,0,.04);
	overflow: hidden;
}

/* Info-Panel liegt jetzt IN der Karte — eigener Rahmen wäre doppelt gemoppelt. */
.learndash-wrapper .mqi.mqi-in-startbox {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

/* Beschreibung ebenfalls flach, nur mit Abstand nach unten. */
.learndash-wrapper .wpProQuiz_description.mqi-prestart {
	font-family: 'Akko', sans-serif;
	font-size: 14px;
	line-height: 1.65;
	color: #111416;
	margin: 0 0 18px;
	padding: 0;
	background: none;
	border: 0;
}
.learndash-wrapper .wpProQuiz_description.mqi-prestart > *:last-child { margin-bottom: 0; }

/* Aktionszone: durch Trennlinie abgesetzt, Inhalt zentriert. */
.learndash-wrapper .mqi-startbox .mqi-startbox-action {
	border-top: 1px solid #EDEFF2;
	margin-top: 20px;
	padding-top: 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.learndash-wrapper .mqi-startbox .mqi-startbox-action::before {
	content: 'Bereit?';
	font-family: 'Akko', sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: #111416;
	margin-bottom: 12px;
}

.learndash-wrapper .mqi-startbox .mqi-startbox-action::after {
	content: 'Deine Antworten werden nach dem Absenden ausgewertet.';
	font-family: 'Akko', sans-serif;
	font-size: 12.5px;
	color: #6B7480;
	margin-top: 12px;
}

/* LearnDash setzt float/display mit !important — hier muss gegengehalten werden,
   sonst klebt der Button links statt zentriert zu sitzen. */
.learndash-wrapper .mqi-startbox input.wpProQuiz_button[name="startQuiz"],
.learndash-wrapper .mqi-startbox .mqi-startbox-action input.wpProQuiz_button {
	display: inline-block !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	background: #E8924F !important;
	color: #111416 !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 14px 40px !important;
	font-family: 'Akko', sans-serif !important;
	font-size: 15.5px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: 0 4px 14px rgba(232,146,79,.30) !important;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.learndash-wrapper .mqi-startbox input.wpProQuiz_button[name="startQuiz"]:hover {
	background: #E58232 !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(232,146,79,.38) !important;
}
.learndash-wrapper .mqi-startbox input.wpProQuiz_button[name="startQuiz"]:active {
	transform: translateY(0) scale(.98);
}

/* Läuft die Prüfung, verschwindet alles Vorbereitende. */
body.mqi-quiz-running .mqi-prestart,
body.mqi-quiz-running .mqi { display: none !important; }

body.mqi-quiz-running .learndash-wrapper .wpProQuiz_text.mqi-startbox {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
}
body.mqi-quiz-running .learndash-wrapper .mqi-startbox .mqi-startbox-action {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}
body.mqi-quiz-running .learndash-wrapper .mqi-startbox .mqi-startbox-action::before,
body.mqi-quiz-running .learndash-wrapper .mqi-startbox .mqi-startbox-action::after {
	display: none;
}

@media (max-width: 560px) {
	.learndash-wrapper .wpProQuiz_text.mqi-startbox { padding: 18px; border-radius: 16px; }
	.learndash-wrapper .mqi-startbox input.wpProQuiz_button[name="startQuiz"] {
		width: 100% !important;
		padding: 14px 20px !important;
	}
}

/* ==========================================================================
   Während der Prüfung: Umgebung ausblenden
   --------------------------------------------------------------------------
   Läuft die Prüfung, lenkt alles Navigierende nur ab und lädt zum Wegklicken
   ein — was die Prüfung automatisch abgibt. Breadcrumbs und die Lektionsleiste
   "Dein Weg" (meldo-workbook-lessons) verschwinden darum, sobald gestartet ist.
   Die Warnung beim trotzdem-Klicken liefert der Note Writer.
   ========================================================================== */

body.mqi-quiz-running .ld-quiz-status,
body.mqi-quiz-running .ld-breadcrumbs,
body.mqi-quiz-running .mwl-weg {
	display: none !important;
}

/* Restzeit während der Überprüfung.
   Bewusst ruhig: fest oben rechts, keine Signalfarbe, kein Blinken. Wer unter
   Zeitdruck steht, braucht eine ablesbare Zahl, keine Alarmanlage. */
.mqi-timer {
	position: fixed; top: 14px; right: 14px; z-index: 99999;
	display: inline-flex; align-items: center; gap: 8px;
	background: #fff; border: 1.5px solid #E2E6EA; border-radius: 999px;
	padding: 8px 15px 8px 12px;
	font-family: 'Akko', sans-serif; font-weight: 600; font-size: 15px;
	color: #111416; box-shadow: 0 4px 16px rgba(0,0,0,.12);
	font-variant-numeric: tabular-nums;
}
.mqi-timer-icon { display: inline-flex; color: #3D7C85; }
.mqi-timer-icon svg { width: 17px; height: 17px; }
.mqi-timer.is-soon { border-color: #E0A030; color: #8A5B12; }
.mqi-timer.is-soon .mqi-timer-icon { color: #E0A030; }
.mqi-timer.is-over { border-color: #A3372C; color: #A3372C; }
.mqi-timer.is-over .mqi-timer-icon { color: #A3372C; }

@media (max-width: 640px) {
	.mqi-timer { top: auto; bottom: 84px; right: 12px; padding: 7px 13px 7px 10px; font-size: 14px; }
}