/**
 * Asesmen Kondisi Usaha — gaya tampilan quiz.
 *
 * Seluruh warna/radius mengambil token dari snippet-1-design-token.css
 * (dipasang di Customize > Additional CSS). Nilai kedua pada var() adalah
 * cadangan, supaya quiz tetap tampil benar bila token belum terpasang.
 *
 * Quiz sengaja TIDAK memakai amber. Bahasa warna biru=akuisisi / amber=produksi
 * berlaku di Result Page dan Production Fit Check — kalau dipakai di sini,
 * pengunjung bisa menebak bahwa A1-A3 dan B1-B3 mengukur dua sisi berbeda,
 * lalu menyesuaikan jawabannya.
 */

.cuq {
	max-width: 34rem;
	margin: 0 auto;
	padding: 8px 0 40px;
	color: var(--slp-text, #1F2937);
	font-size: 1rem;
	line-height: 1.6;
}

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

.cuq-noscript {
	background: #FEF3C7;
	border: 1px solid #FDE68A;
	border-radius: 10px;
	padding: 16px 18px;
	margin: 0 0 24px;
}

/* ---------- Progres ---------- */
.cuq-progres { margin: 0 0 28px; }

.cuq-progres-teks {
	margin: 0 0 8px;
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--slp-text-muted, #4B5563);
}

.cuq-progres-bar {
	height: 6px;
	border-radius: 999px;
	background: var(--slp-border, #E5E7EB);
	overflow: hidden;
}

.cuq-progres-bar span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--slp-primary, #2563EB);
	transition: width .25s ease;
}

/* ---------- Pertanyaan ---------- */
.cuq-langkah {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.cuq-tanya {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0 0 20px;
	font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--slp-text, #1F2937);
}

.cuq-tanya:focus { outline: none; }

/* ---------- Opsi jawaban sebagai kartu ---------- */
.cuq-opsi { display: block; }

.cuq-opsi-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 60px;
	padding: 15px 17px;
	margin: 0 0 12px;
	background: var(--slp-surface, #FFFFFF);
	border: 1px solid var(--slp-border, #E5E7EB);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .12s ease, background-color .12s ease;
}

.cuq-opsi-item:hover {
	border-color: var(--slp-primary, #2563EB);
	background: #EFF6FF;
}

.cuq-opsi-item input[type="radio"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--slp-primary, #2563EB);
}

.cuq-opsi-teks { flex: 1 1 auto; }

.cuq-opsi-item.is-terpilih {
	border-color: var(--slp-primary, #2563EB);
	border-width: 2px;
	padding: 14px 16px;
	background: #EFF6FF;
}

.cuq-opsi-item:focus-within {
	outline: 3px solid var(--slp-primary, #2563EB);
	outline-offset: 2px;
}

/* ---------- Tombol ---------- */
.cuq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 15px 22px;
	background: var(--slp-primary, #2563EB);
	color: #FFFFFF;
	border: 0;
	border-radius: 10px;
	font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(37, 99, 235, .26);
	transition: background-color .15s ease;
}

.cuq-btn:hover,
.cuq-btn:focus {
	background: var(--slp-primary-hover, #1D4ED8);
	color: #FFFFFF;
	text-decoration: none;
}

.cuq-btn:disabled {
	background: var(--slp-border, #E5E7EB);
	color: var(--slp-text-muted, #4B5563);
	box-shadow: none;
	cursor: not-allowed;
}

.cuq-btn:focus-visible {
	outline: 3px solid var(--slp-primary, #2563EB);
	outline-offset: 2px;
}

.cuq-lanjut { margin-top: 20px; }

.cuq-btn-netral {
	background: transparent;
	color: var(--slp-primary, #2563EB);
	border: 1px solid var(--slp-border, #E5E7EB);
	box-shadow: none;
}

.cuq-btn-netral:hover,
.cuq-btn-netral:focus {
	background: #EFF6FF;
	color: var(--slp-primary, #2563EB);
}

/* Atribut `hidden` bawaan HTML kalah oleh aturan display di bawahnya
   (.cuq-btn memakai inline-flex). Aturan ini mengembalikan perilakunya —
   tanpa ini, tombol yang ditandai hidden tetap terlihat. */
.cuq [hidden] { display: none !important; }

/* ---------- Navigasi antar pertanyaan ---------- */
.cuq-navigasi {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

/* Tombol "Kembali" sengaja dibuat jauh lebih tenang daripada "Lanjut":
   ia jalan keluar untuk salah tekan, bukan aksi yang dianjurkan. */
.cuq-kembali {
	min-height: 48px;
	padding: 12px 20px;
	background: transparent;
	color: var(--slp-text-muted, #4B5563);
	border: 1px solid var(--slp-border, #E5E7EB);
	box-shadow: none;
	font-size: 1rem;
	font-weight: 600;
}

.cuq-kembali:hover,
.cuq-kembali:focus {
	background: var(--slp-surface, #FFFFFF);
	border-color: var(--slp-primary, #2563EB);
	color: var(--slp-primary, #2563EB);
}

.cuq-lanjut { margin-top: 0; }

@media (min-width: 480px) {
	.cuq-navigasi {
		flex-direction: row-reverse;
		align-items: center;
		justify-content: flex-end;
		gap: 12px;
	}

	.cuq-navigasi .cuq-btn { width: auto; }
	.cuq-lanjut { min-width: 200px; }
	.cuq-kembali { min-width: 0; }
}

/* ---------- Pesan keluar P0 ---------- */
.cuq-keluar { padding: 8px 0 0; }
.cuq-keluar:focus { outline: none; }

.cuq-keluar-pesan {
	font-size: 1.0625rem;
	line-height: 1.65;
	margin: 0 0 24px;
}

.cuq-keluar-aksi { margin: 0; }

.cuq-menghitung {
	margin: 0;
	padding: 24px 0;
	text-align: center;
	color: var(--slp-text-muted, #4B5563);
}

/* ---------- Honeypot: tersembunyi dari mata dan pembaca layar ---------- */
.cuq-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (min-width: 480px) {
	.cuq-btn { width: auto; min-width: 260px; }
	.cuq-tanya { font-size: 1.375rem; }
}

@media (prefers-reduced-motion: reduce) {
	.cuq * { transition-duration: .01ms !important; }
}