/*
 * Self-service profil & payout otomatis — tampilan peserta.
 * Menempel pada kelas .qs-rwd milik qs-reward-ledger.css; hanya menambah
 * elemen baru dan tidak mengubah gaya lama.
 */

/*
 * Notifikasi status self-service.
 *
 * Di-scope ke `.qs-rwd--ss .qs-ss-note` saja — kelas `qs-ss-note` hanya dipasang
 * pada notifikasi milik panel ini, sehingga notice global WooCommerce/tema dan
 * notice modul lain tidak tersentuh.
 *
 * Sebelumnya banner "Pembayaran otomatis Anda ditahan" mewarisi ukuran teks
 * konten (18px/29.7px) karena isinya berupa simpul teks langsung, bukan <p>,
 * sehingga aturan `.qs-rwd-note p` tidak berlaku. Hasilnya terlalu dominan
 * untuk pesan berstatus informasi. Ukuran diturunkan ke skala yang sama dengan
 * teks pendukung lain di panel, tanpa mengubah warna, kontras, atau isi pesan
 * fail-closed-nya.
 */
.qs-rwd--ss .qs-ss-note {
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.55;
}

.qs-rwd--ss .qs-ss-note p {
	font-size: 14px;
	line-height: 1.55;
}

.qs-rwd--ss .qs-ss-note strong {
	font-weight: 650;
	font-size: inherit;
	line-height: inherit;
}

.qs-rwd--ss .qs-ss-form {
	margin-top: 4px;
}

.qs-rwd--ss .qs-ss-step {
	margin: 0 0 18px;
	padding: 14px 14px 4px;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	background: #FFF;
	min-width: 0;
}

.qs-rwd--ss .qs-ss-step__legend {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 6px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	color: #0F172A;
}

.qs-rwd--ss .qs-ss-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	border-radius: 50%;
	background: #0F172A;
	color: #FFF;
	font-size: 13px;
	font-weight: 700;
}

.qs-rwd--ss .qs-ss-consent label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	line-height: 1.55;
}

.qs-rwd--ss .qs-ss-consent input[type="checkbox"] {
	margin-top: 3px;
	flex: 0 0 auto;
}

/* Badge status: mengikuti pola .qs-rwd-badge, warna per status. */
.qs-rwd--ss .qs-ss-badge--verified,
.qs-rwd--ss .qs-ss-badge--queued,
.qs-rwd--ss .qs-ss-badge--paid {
	background: #DCFCE7;
	color: #166534;
}

.qs-rwd--ss .qs-ss-badge--pending_review,
.qs-rwd--ss .qs-ss-badge--needs_verification,
.qs-rwd--ss .qs-ss-badge--pending_profile_verification {
	background: #FEF3C7;
	color: #92400E;
}

.qs-rwd--ss .qs-ss-badge--needs_correction,
.qs-rwd--ss .qs-ss-badge--held_correction {
	background: #FFEDD5;
	color: #9A3412;
}

.qs-rwd--ss .qs-ss-badge--rejected,
.qs-rwd--ss .qs-ss-badge--cancelled {
	background: #FEE2E2;
	color: #991B1B;
}

.qs-rwd--ss .qs-ss-badge--allocated {
	background: #DBEAFE;
	color: #1E40AF;
}

.qs-rwd--ss .qs-ss-badge--none,
.qs-rwd--ss .qs-ss-badge--incomplete {
	background: #F1F5F9;
	color: #475569;
}

/* Layar sempit: field tetap di dalam kartu, tidak ada overflow horizontal. */
.qs-rwd--ss input[type="text"],
.qs-rwd--ss select {
	max-width: 100%;
	box-sizing: border-box;
}

@media (max-width: 400px) {
	.qs-rwd--ss .qs-ss-step {
		padding: 12px 10px 2px;
	}

	.qs-rwd--ss .qs-ss-step__legend {
		font-size: 14px;
		padding: 0 2px;
	}
}