:root { --quiz-brand:#dd3333; }
/* Scope all quiz overrides under body (route) or .marriage-quiz-embed (shortcode) */
body .quiz-scope, .marriage-quiz-embed { font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif; }
body .quiz-scope h1, .marriage-quiz-embed h1 { letter-spacing:-.5px; }
/* Brand color substitutions */
body .quiz-scope .bg-indigo-600,
body .quiz-scope .bg-emerald-600,
body .quiz-scope .hover\:bg-indigo-700:hover,
body .quiz-scope .hover\:bg-emerald-700:hover,
.marriage-quiz-embed .bg-indigo-600,
.marriage-quiz-embed .bg-emerald-600,
.marriage-quiz-embed .hover\:bg-indigo-700:hover,
.marriage-quiz-embed .hover\:bg-emerald-700:hover { background-color:var(--quiz-brand)!important; }
body .quiz-scope .text-indigo-600,
.marriage-quiz-embed .text-indigo-600 { color:var(--quiz-brand)!important; }
body .quiz-scope .bg-indigo-50,
.marriage-quiz-embed .bg-indigo-50 { background:#fff5f5!important; }
body .quiz-scope .focus\:ring-indigo-500:focus,
.marriage-quiz-embed .focus\:ring-indigo-500:focus { --tw-ring-color:var(--quiz-brand)!important; }
body .quiz-scope .border-indigo-200,
.marriage-quiz-embed .border-indigo-200 { border-color:#f2c2c2!important; }
body .quiz-scope .hover\:border-indigo-400:hover,
.marriage-quiz-embed .hover\:border-indigo-400:hover { border-color:var(--quiz-brand)!important; }
/* Improve radio alignment */
.quiz-radio-fix input[type=radio] { transform:translateY(1px); }
/* Tighter button */
.quiz-btn-primary { box-shadow:0 1px 2px rgba(0,0,0,.05); }
.quiz-btn-primary:active { transform:translateY(1px); }
/* Card smoothing */
.quiz-card { background:#fff; border:1px solid #e2e8f0; }
/* (Removed footer version display) */

/* --- Explicit radio styling to ensure visibility (Tailwind forms plugin sometimes suppresses default dot) --- */
.quiz-scope input[type=radio],
.marriage-quiz-embed input[type=radio] {
	appearance:none;
	-webkit-appearance:none;
	width:16px;
	height:16px;
	border:2px solid #cbd5e1; /* slate-300 */
	border-radius:50%;
	background:#fff;
	display:inline-grid;
	place-content:center;
	cursor:pointer;
	transition:border-color .15s ease, box-shadow .15s ease;
	position:relative;
}
.quiz-scope input[type=radio]:focus-visible,
.marriage-quiz-embed input[type=radio]:focus-visible {
	outline:2px solid var(--quiz-brand);
	outline-offset:2px;
}
.quiz-scope input[type=radio]::after,
.marriage-quiz-embed input[type=radio]::after {
	content:"";
	width:8px;
	height:8px;
	border-radius:50%;
	background:var(--quiz-brand);
	transform:scale(0);
	transition:transform .15s ease;
}
.quiz-scope input[type=radio]:checked,
.marriage-quiz-embed input[type=radio]:checked {
	border-color:var(--quiz-brand);
}
.quiz-scope input[type=radio]:checked::after,
.marriage-quiz-embed input[type=radio]:checked::after {
	transform:scale(1);
}

/* Custom checkbox styling for visibility (kids age buckets) */
.quiz-scope input[type=checkbox],
.marriage-quiz-embed input[type=checkbox] {
	appearance:none;
	-webkit-appearance:none;
	width:16px;
	height:16px;
	border:2px solid #cbd5e1;
	border-radius:4px;
	background:#fff;
	display:inline-grid;
	place-content:center;
	cursor:pointer;
	transition:border-color .15s ease, background-color .15s ease;
	position:relative;
}
.quiz-scope input[type=checkbox]:focus-visible,
.marriage-quiz-embed input[type=checkbox]:focus-visible {
	outline:2px solid var(--quiz-brand);
	outline-offset:2px;
}
.quiz-scope input[type=checkbox]::after,
.marriage-quiz-embed input[type=checkbox]::after {
	content:"";
	width:8px;
	height:8px;
	border-radius:2px;
	background:var(--quiz-brand);
	transform:scale(0);
	transition:transform .15s ease;
}
.quiz-scope input[type=checkbox]:checked,
.marriage-quiz-embed input[type=checkbox]:checked {
	border-color:var(--quiz-brand);
	background:#fff;
}
.quiz-scope input[type=checkbox]:checked::after,
.marriage-quiz-embed input[type=checkbox]:checked::after {
	transform:scale(1);
}

/* Keep spacing consistent inside flex labels */
.quiz-scope label input[type=radio],
.marriage-quiz-embed label input[type=radio] { margin-right:2px; flex-shrink:0; }

/* --- Button-style radio inputs for better mobile UX --- */
.quiz-scope .radio-button-group,
.marriage-quiz-embed .radio-button-group {
	display: grid;
	gap: 0.5rem;
}

.quiz-scope .radio-button-label,
.marriage-quiz-embed .radio-button-label {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1rem;
	background: #fff;
	border: 2px solid #e2e8f0;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: all 0.15s ease;
	font-weight: 500;
	text-align: center;
	user-select: none;
}

.quiz-scope .radio-button-label:hover,
.marriage-quiz-embed .radio-button-label:hover {
	border-color: #dd3333;
	background: #fff5f5;
}

.quiz-scope .radio-button-label input[type="radio"],
.marriage-quiz-embed .radio-button-label input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

.quiz-scope .radio-button-label input[type="radio"]:checked ~ span,
.marriage-quiz-embed .radio-button-label input[type="radio"]:checked ~ span {
	color: #fff;
}

.quiz-scope .radio-button-label input[type="radio"]:checked,
.marriage-quiz-embed .radio-button-label input[type="radio"]:checked {
	& ~ * {
		color: #fff;
	}
}

.quiz-scope .radio-button-label:has(input[type="radio"]:checked),
.marriage-quiz-embed .radio-button-label:has(input[type="radio"]:checked) {
	background: #dd3333;
	border-color: #dd3333;
	color: #fff;
}

.quiz-scope .radio-button-label input[type="radio"]:focus-visible,
.marriage-quiz-embed .radio-button-label input[type="radio"]:focus-visible {
	outline: none;
}

.quiz-scope .radio-button-label:has(input[type="radio"]:focus-visible),
.marriage-quiz-embed .radio-button-label:has(input[type="radio"]:focus-visible) {
	outline: 2px solid #dd3333;
	outline-offset: 2px;
}