/**
 * Narcissistic Behaviour Assessment — public UI
 * Scoped like marriage-compatibility-assessment so theme CSS cannot break layout.
 */

:root {
	--nba-font-heading: "Lora", Georgia, serif;
	--nba-font-body: "Poppins", system-ui, -apple-system, sans-serif;
	--nba-muted: #5b5b5b;
	--nba-gold: #c0a55c;
	--nba-gold-soft: rgba(192, 165, 92, 0.22);
	--nba-ink: #2c3338;
	--nba-border: #e9e4d6;
}

/* Main shell — matches #mc-assessment-container */
#nba-assessment-container {
	max-width: 800px;
	margin: 48px auto;
	padding: 56px 64px;
	background: #ffffff;
	border: 1px solid var(--nba-border);
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
	font-family: var(--nba-font-body) !important;
	text-align: left;
	color: #333333 !important;
	box-sizing: border-box;
}

#nba-assessment-container *,
#nba-assessment-container *::before,
#nba-assessment-container *::after {
	box-sizing: border-box;
}

#nba-assessment-container h1,
#nba-assessment-container h2,
#nba-assessment-container h3 {
	text-align: center !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	font-family: var(--nba-font-heading) !important;
	color: var(--nba-gold) !important;
	font-weight: 700 !important;
}

#nba-assessment-container .nba-title {
	font-size: 1.75rem !important;
	margin: 0 0 1.75rem !important;
	line-height: 1.3 !important;
}

#nba-assessment-container .nba-steps {
	margin-top: 0.5rem !important;
}

#nba-assessment-container .nba-steps:not([hidden]) {
	margin-bottom: 0.5rem !important;
}

#nba-assessment-container p {
	text-align: left !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	font-family: var(--nba-font-body) !important;
	color: #333333 !important;
}

#nba-assessment-container .nba-privacy {
	font-size: 1rem !important;
	line-height: 1.65 !important;
	color: var(--nba-muted) !important;
	margin: 0 0 1.5rem !important;
}

/* Section badge (step label) */
#nba-assessment-container .nba-section-badge {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #999999 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	margin-bottom: 16px !important;
	display: block !important;
}

#nba-assessment-container .nba-mode-prompt {
	display: block !important;
	font-size: 1.05rem !important;
	color: var(--nba-ink) !important;
	margin-bottom: 1.25rem !important;
	text-align: left !important;
	font-family: var(--nba-font-body) !important;
}

/* Form groups */
#nba-assessment-container .nba-form-group {
	margin-bottom: 20px !important;
}

#nba-assessment-container .nba-form-group label.nba-label,
#nba-assessment-container label.nba-label {
	display: block !important;
	margin-bottom: 8px !important;
	font-weight: 600 !important;
	color: #444444 !important;
	font-family: var(--nba-font-body) !important;
	font-size: 1rem !important;
	text-align: left !important;
}

#nba-assessment-container .nba-help {
	display: block !important;
	font-size: 0.875rem !important;
	color: #666666 !important;
	margin-bottom: 6px !important;
}

#nba-assessment-container .nba-input,
#nba-assessment-container input.nba-input[type="text"],
#nba-assessment-container input.nba-input[type="email"] {
	width: 100% !important;
	padding: 12px 14px !important;
	border: 1px solid #dddddd !important;
	border-radius: 4px !important;
	font-size: 16px !important;
	font-family: var(--nba-font-body) !important;
	background: #fafafa !important;
	transition: border-color 0.2s, background 0.2s !important;
	line-height: 1.4 !important;
	max-width: 100% !important;
}

#nba-assessment-container .nba-input:focus {
	border-color: var(--nba-gold) !important;
	background: #ffffff !important;
	outline: none !important;
	box-shadow: 0 0 0 2px var(--nba-gold-soft) !important;
}

/* Progress — gold fill aligned with heading / primary buttons */
#nba-assessment-container .nba-assess-progress,
#nba-assessment-container .nba-progress {
	height: 8px !important;
	background: #eeeeee !important;
	border-radius: 4px !important;
	margin-bottom: 14px !important;
	overflow: hidden !important;
}

#nba-assessment-container .nba-assess-progress-fill,
#nba-assessment-container .nba-progress-fill {
	height: 100% !important;
	background: var(--nba-gold) !important;
	transition: width 0.3s ease !important;
	border-radius: 4px !important;
}

#nba-assessment-container .nba-progress-wrap {
	margin-bottom: 20px !important;
}

#nba-assessment-container .nba-progress-label {
	font-size: 0.875rem !important;
	color: #666666 !important;
	margin: 0 !important;
	font-family: var(--nba-font-body) !important;
}

/* Question stem */
#nba-assessment-container .nba-question {
	padding: 1.5rem 0 !important;
	border-bottom: 1px solid #eee !important;
}

#nba-assessment-container .nba-question:last-of-type {
	border-bottom: none !important;
}

#nba-assessment-container .nba-question-text {
	font-size: 1.125rem !important;
	font-weight: 600 !important;
	margin: 0 0 1.25rem !important;
	color: var(--nba-ink) !important;
	line-height: 1.5 !important;
	font-family: var(--nba-font-body) !important;
	text-align: left !important;
}

/* Radio lists — same defensive rules as .mca-radio-vertical */
#nba-assessment-container .nba-options.nba-radio-vertical label,
#nba-assessment-container .nba-radio-vertical label {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 14px 16px !important;
	min-height: 52px !important;
	border: 1px solid #eeeeee !important;
	margin-bottom: 12px !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	background: #ffffff !important;
	font-family: var(--nba-font-body) !important;
	color: #333333 !important;
	text-align: left !important;
}

#nba-assessment-container .nba-radio-vertical label:hover {
	background: #f9f9f9 !important;
}

#nba-assessment-container .nba-radio-vertical input[type="radio"],
#nba-assessment-container .nba-options input[type="radio"] {
	margin: 0 !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	accent-color: var(--nba-gold) !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	align-self: center !important;
}

/* Mode step: simpler row radios */
#nba-assessment-container .nba-options.nba-mode-options label {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 14px 16px !important;
	min-height: 52px !important;
	border: 1px solid #eeeeee !important;
	margin-bottom: 12px !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	font-family: var(--nba-font-body) !important;
	color: #333333 !important;
}

#nba-assessment-container .nba-mode-options input[type="radio"] {
	margin: 0 !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	accent-color: var(--nba-gold) !important;
	flex-shrink: 0 !important;
	align-self: center !important;
}

/* Actions */
#nba-assessment-container .nba-actions {
	margin-top: 32px !important;
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 15px !important;
	align-items: center !important;
}

#nba-assessment-container .nba-actions .nba-btn-primary,
#nba-assessment-container button.nba-btn-primary {
	background: var(--nba-gold) !important;
	color: #ffffff !important;
	border: none !important;
	padding: 12px 28px !important;
	border-radius: 4px !important;
	font-size: 16px !important;
	cursor: pointer !important;
	font-weight: 500 !important;
	font-family: var(--nba-font-body) !important;
	text-decoration: none !important;
	min-height: 44px !important;
	line-height: 1.3 !important;
	transition: background 0.3s !important;
}

#nba-assessment-container .nba-actions .nba-btn-primary:hover:not(:disabled),
#nba-assessment-container button.nba-btn-primary:hover:not(:disabled) {
	background: #8b7340 !important;
	color: #ffffff !important;
}

#nba-assessment-container .nba-actions .nba-btn-secondary,
#nba-assessment-container button.nba-btn-secondary {
	background: transparent !important;
	color: #666666 !important;
	border: 1px solid #cccccc !important;
	padding: 12px 28px !important;
	border-radius: 4px !important;
	font-size: 16px !important;
	cursor: pointer !important;
	font-weight: 500 !important;
	font-family: var(--nba-font-body) !important;
	text-decoration: none !important;
	min-height: 44px !important;
	transition: background 0.2s, border-color 0.2s !important;
}

#nba-assessment-container .nba-actions .nba-btn-secondary:hover,
#nba-assessment-container button.nba-btn-secondary:hover {
	background: #f9f9f9 !important;
	color: #333333 !important;
	border-color: #bbbbbb !important;
}

#nba-assessment-container .nba-btn-primary:disabled,
#nba-assessment-container .nba-btn-secondary:disabled {
	opacity: 0.55 !important;
	cursor: not-allowed !important;
}

/* Success / error messages */
#nba-assessment-container .nba-message {
	padding: 1.35rem 1.75rem !important;
	border-radius: 8px !important;
	line-height: 1.6 !important;
	font-family: var(--nba-font-body) !important;
	font-size: 1.05rem !important;
	max-width: 36rem !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 2rem !important;
	text-align: center !important;
}

#nba-assessment-container .nba-message--ok {
	background: #faf8f3 !important;
	border: 1px solid #e5dac4 !important;
	color: var(--nba-ink) !important;
}

#nba-assessment-container .nba-message--err {
	background: #fdf2f2 !important;
	border: 1px solid #e8c5c5 !important;
	color: #5c1f1f !important;
}

#nba-assessment-container .nba-message--warn {
	background: #fdfaf0 !important;
	border: 1px solid #e8dcc5 !important;
	color: #4a3d1f !important;
}

@media (max-width: 768px) {
	#nba-assessment-container {
		padding: 45px 24px !important;
		margin: 30px auto !important;
		width: 92% !important;
	}
}

@media (max-width: 480px) {
	#nba-assessment-container {
		padding: 25px 18px !important;
		margin: 20px auto !important;
		width: 95% !important;
	}

	#nba-assessment-container .nba-actions {
		flex-direction: column !important;
	}

	#nba-assessment-container .nba-actions .nba-btn-primary,
	#nba-assessment-container .nba-actions .nba-btn-secondary {
		width: 100% !important;
		max-width: none !important;
	}
}

/* Preserve light “premium” look when OS / theme prefers dark */
@media (prefers-color-scheme: dark) {
	#nba-assessment-container {
		background-color: #ffffff !important;
		color: #333333 !important;
		border: 1px solid #dddddd !important;
	}

	#nba-assessment-container h1,
	#nba-assessment-container h2,
	#nba-assessment-container h3,
	#nba-assessment-container .nba-title {
		color: var(--nba-gold) !important;
	}

	#nba-assessment-container p,
	#nba-assessment-container .nba-question-text,
	#nba-assessment-container .nba-radio-vertical label {
		color: #333333 !important;
	}
}