/**
 * ZFRICA Answer & Win Quiz Lifelines
 *
 * Compact lifeline card displayed after answer options.
 * Soft but visible colors to blend with QSM while still looking clickable.
 *
 * Current behaviour:
 * - 50-50 hides two visible wrong options.
 * - Ask ZFRICA reveals the correct answer.
 */

.qsm-question-wrapper .zfrica-lifelines,
.quiz_section .zfrica-lifelines,
.zfrica-lifelines {
	display: block !important;
	margin: 5px 0 10px !important;
	padding: 7px 8px !important;
	border: 1px solid #e5e7eb !important;
	border-left: 2px solid #d6d9de !important;
	border-radius: 9px !important;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
	box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05) !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	clear: both !important;
}

/**
 * Top row: title + buttons in one compact line.
 */
.qsm-question-wrapper .zfrica-lifelines-top,
.quiz_section .zfrica-lifelines-top,
.zfrica-lifelines-top {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

/**
 * Lifeline title.
 */
.qsm-question-wrapper .zfrica-lifelines-title,
.quiz_section .zfrica-lifelines-title,
.zfrica-lifelines-title {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 9.8px !important;
	font-weight: 500 !important;
	line-height: 1.15 !important;
	color: #475569 !important;
	background: transparent !important;
	border: 0 !important;
	white-space: nowrap !important;
}

.qsm-question-wrapper .zfrica-lifelines-title::before,
.quiz_section .zfrica-lifelines-title::before,
.zfrica-lifelines-title::before {
	content: "🎮" !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 15px !important;
	height: 15px !important;
	border-radius: 999px !important;
	background: #f1f5f9 !important;
	font-size: 8px !important;
	line-height: 1 !important;
	flex: 0 0 auto !important;
}

/**
 * Button wrapper.
 */
.qsm-question-wrapper .zfrica-lifelines-actions,
.quiz_section .zfrica-lifelines-actions,
.zfrica-lifelines-actions {
	display: inline-flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 5px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

/**
 * Base lifeline button.
 * Slightly brighter than the previous dull version, but still soft.
 */
.qsm-question-wrapper .zfrica-lifeline-btn,
.quiz_section .zfrica-lifeline-btn,
.zfrica-lifeline-btn {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 3px !important;
	width: auto !important;
	min-width: auto !important;
	max-width: none !important;
	min-height: 21px !important;
	margin: 0 !important;
	padding: 4px 7px !important;
	border: 0 !important;
	border-radius: 999px !important;
	outline: none !important;
	background: #4f9f93 !important;
	color: #ffffff !important;
	font-size: 9.5px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer !important;
	box-shadow: 0 2px 6px rgba(79, 159, 147, 0.18) !important;
	white-space: nowrap !important;
	transition: opacity .16s ease, transform .16s ease, filter .16s ease !important;
}

/**
 * 50-50 button icon.
 */
.qsm-question-wrapper .zfrica-lifeline-btn[data-lifeline="fifty"]::before,
.quiz_section .zfrica-lifeline-btn[data-lifeline="fifty"]::before,
.zfrica-lifeline-btn[data-lifeline="fifty"]::before {
	content: "◐" !important;
	display: inline-block !important;
	font-size: 9px !important;
	line-height: 1 !important;
	color: #ffffff !important;
}

/**
 * Ask ZFRICA button.
 * Warm but not harsh.
 */
.qsm-question-wrapper .zfrica-lifeline-btn[data-lifeline="ask"],
.quiz_section .zfrica-lifeline-btn[data-lifeline="ask"],
.zfrica-lifeline-btn[data-lifeline="ask"] {
	background: #d08355 !important;
	color: #ffffff !important;
	box-shadow: 0 2px 6px rgba(208, 131, 85, 0.18) !important;
}

.qsm-question-wrapper .zfrica-lifeline-btn[data-lifeline="ask"]::before,
.quiz_section .zfrica-lifeline-btn[data-lifeline="ask"]::before,
.zfrica-lifeline-btn[data-lifeline="ask"]::before {
	content: "✦" !important;
	display: inline-block !important;
	font-size: 9px !important;
	line-height: 1 !important;
	color: #ffffff !important;
}

.qsm-question-wrapper .zfrica-lifeline-btn:hover,
.quiz_section .zfrica-lifeline-btn:hover,
.zfrica-lifeline-btn:hover {
	filter: brightness(.98) !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
}

.qsm-question-wrapper .zfrica-lifeline-btn:active,
.quiz_section .zfrica-lifeline-btn:active,
.zfrica-lifeline-btn:active {
	transform: translateY(0) !important;
}

/**
 * Result message.
 * No border. No loud background. It should read like a small helper note.
 */
.qsm-question-wrapper .zfrica-lifeline-result,
.quiz_section .zfrica-lifeline-result,
.zfrica-lifeline-result {
	display: block !important;
	margin: 6px 0 0 !important;
	padding: 5px 0 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	color: #64748b !important;
	box-sizing: border-box !important;
}

.qsm-question-wrapper .zfrica-lifeline-result strong,
.quiz_section .zfrica-lifeline-result strong,
.zfrica-lifeline-result strong {
	font-weight: 500 !important;
}

/**
 * 50-50 result.
 * Since 50-50 now actually hides two wrong answers,
 * the result statement can be warm and clear.
 */
.qsm-question-wrapper .zfrica-lifeline-result.is-fifty,
.quiz_section .zfrica-lifeline-result.is-fifty,
.zfrica-lifeline-result.is-fifty {
	background: transparent !important;
	border: 0 !important;
	color: #64748b !important;
}

.qsm-question-wrapper .zfrica-lifeline-result.is-fifty strong,
.quiz_section .zfrica-lifeline-result.is-fifty strong,
.zfrica-lifeline-result.is-fifty strong {
	color: #b65f35 !important;
	font-weight: 500 !important;
}

/**
 * Ask ZFRICA result.
 * Only “Answer:” should be green.
 * The actual answer remains calm grey.
 */
.qsm-question-wrapper .zfrica-lifeline-result.is-ask,
.quiz_section .zfrica-lifeline-result.is-ask,
.zfrica-lifeline-result.is-ask {
	background: transparent !important;
	border: 0 !important;
	color: #64748b !important;
}

.qsm-question-wrapper .zfrica-lifeline-result.is-ask strong,
.quiz_section .zfrica-lifeline-result.is-ask strong,
.zfrica-lifeline-result.is-ask strong {
	color: #3f8f83 !important;
	font-weight: 500 !important;
}

/**
 * Any displayed option text inside result messages.
 * Keep it neutral so only the helper label carries color.
 */
.qsm-question-wrapper .zfrica-lifeline-result .zfrica-lifeline-options,
.quiz_section .zfrica-lifeline-result .zfrica-lifeline-options,
.zfrica-lifeline-result .zfrica-lifeline-options {
	color: #64748b !important;
	font-weight: 400 !important;
}

/**
 * Smooth removal state.
 * The JS should first add .zfrica-fifty-removing briefly,
 * then add data-zfrica-fifty-hidden="1".
 */
.qsm-question-wrapper .zfrica-fifty-removing,
.quiz_section .zfrica-fifty-removing {
	opacity: 0 !important;
	transform: translateX(6px) !important;
	transition: opacity .18s ease, transform .18s ease !important;
}

/**
 * 50-50 hidden options.
 *
 * The JS marks removed wrong options with data-zfrica-fifty-hidden="1".
 * This keeps them fully hidden even if QSM/theme styles try to override it.
 */
.qsm-question-wrapper [data-zfrica-fifty-hidden="1"],
.quiz_section [data-zfrica-fifty-hidden="1"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/**
 * General option transition support.
 */
.qsm-question-wrapper label,
.quiz_section label,
.qsm-question-wrapper li,
.quiz_section li,
.qsm-question-wrapper p,
.quiz_section p {
	transition: opacity .18s ease, transform .18s ease !important;
}

/**
 * Mobile adjustments.
 */
@media (max-width: 520px) {
	.qsm-question-wrapper .zfrica-lifelines,
	.quiz_section .zfrica-lifelines,
	.zfrica-lifelines {
		margin: 4px 0 9px !important;
		padding: 6px 7px !important;
		border-radius: 8px !important;
		border-left-width: 2px !important;
		box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05) !important;
	}

	.qsm-question-wrapper .zfrica-lifelines-top,
	.quiz_section .zfrica-lifelines-top,
	.zfrica-lifelines-top {
		gap: 5px !important;
	}

	.qsm-question-wrapper .zfrica-lifelines-title,
	.quiz_section .zfrica-lifelines-title,
	.zfrica-lifelines-title {
		font-size: 9.2px !important;
	}

	.qsm-question-wrapper .zfrica-lifelines-title::before,
	.quiz_section .zfrica-lifelines-title::before,
	.zfrica-lifelines-title::before {
		width: 14px !important;
		height: 14px !important;
		font-size: 7.5px !important;
	}

	.qsm-question-wrapper .zfrica-lifeline-btn,
	.quiz_section .zfrica-lifeline-btn,
	.zfrica-lifeline-btn {
		padding: 4px 6px !important;
		font-size: 9px !important;
		min-height: 20px !important;
	}

	.qsm-question-wrapper .zfrica-lifeline-result,
	.quiz_section .zfrica-lifeline-result,
	.zfrica-lifeline-result {
		font-size: 9.5px !important;
		padding-top: 5px !important;
	}
}