/* QMP Quiz Instructions Gate - front-end styles */

.qmp-instr-wrap {
	--qmp-instr-accent: #7b3f4f;
	--qmp-instr-border: #d7d7d7;
	--qmp-instr-bg: #faf7f8;

	/* Hidden until the registration step is "revealed" (see the reveal
	   rule below) - not simply absent, since it is injected up front and
	   only shown once the visitor has finished registration/OTP and
	   clicked Next. */
	display: none;

	margin: 16px 0;
	padding: 16px;
	border: 1px solid var(--qmp-instr-border);
	border-radius: 6px;
	background: var(--qmp-instr-bg);
	font-family: inherit;
	font-size: 14px;
	text-align: left;
}

.qmp-instr-title {
	font-weight: 600;
	margin-bottom: 10px;
	font-size: 15px;
}

.qmp-instr-content {
	margin-bottom: 14px;
}

.qmp-instr-content > *:last-child {
	margin-bottom: 0;
}

.qmp-instr-checkbox-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 14px;
	cursor: pointer;
	font-weight: 500;
}

.qmp-instr-checkbox-row input[type="checkbox"] {
	margin-top: 3px;
}

.qmp-instr-start-btn {
	display: inline-block;
	padding: 10px 24px;
	border: 1px solid var(--qmp-instr-accent);
	border-radius: 4px;
	background: var(--qmp-instr-accent);
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.qmp-instr-start-btn:hover:not(:disabled) {
	opacity: 0.9;
}

.qmp-instr-start-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.qmp-instr-message {
	margin-top: 8px;
	min-height: 18px;
	font-size: 13px;
	color: #c0392b;
}

/* The "reveal": once the visitor clicks Next on a fully filled-in
   registration form (see qmp-instr.js's capture-phase gate), every direct
   child of .information_form is hidden EXCEPT our own panel - a full
   takeover that reads as a distinct page, not an addition below the form.
   This never happens until content is confirmed configured, so a plugin
   that is active but not yet set up in Settings never alters the
   registration form at all (fail-open). */
.step[data-role="info-form"].qmp-instr-revealed .information_form > *:not(.qmp-instr-wrap) {
	display: none !important;
}

.step[data-role="info-form"].qmp-instr-revealed .qmp-instr-wrap {
	display: block;
}