/**
 * Gaya frontend korban.
 *
 * Nilai di sini disalin daripada gaya inline snippet asal (179, 314, 246,
 * 346, 183) supaya paparan kekal sama sebiji selepas peralihan ke plugin.
 */

/* Medan nama peserta pada halaman produk  (asal: snippet 179) */
.participant-fields-container {
	margin: 20px 0;
	width: 100%;
}

.participant-field {
	margin-bottom: 10px;
	width: 100%;
}

.participant-field label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
}

.participant-input {
	width: 100%;
	min-width: 300px;
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-sizing: border-box;
}

@media (max-width: 480px) {
	.participant-input {
		min-width: 0;
	}
}

/* Blok kenyataan checkout  (asal: snippet 314 / 246) */
.mqk-block {
	margin-top: 20px;
	margin-bottom: 30px;
	padding: 20px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	background-color: #f9f9f9;
}

.mqk-block__title {
	margin-top: 0;
	margin-bottom: 15px;
	font-family: 'Sinzel', serif;
}

.mqk-note {
	font-weight: normal;
	font-size: 0.9em;
	color: #666;
}

.mqk-block__intro {
	margin-bottom: 20px;
	font-family: 'Sinzel', serif;
}

.mqk-block__fields {
	margin-left: 5px;
}

.mqk-option {
	margin-bottom: 15px;
}

.mqk-option__label {
	display: block;
	font-weight: normal;
	line-height: 1.5;
	font-family: 'Sinzel', serif;
}

.mqk-option__label input[type="radio"],
.mqk-option__label input[type="checkbox"] {
	margin-right: 8px;
	vertical-align: top;
	margin-top: 3px;
}

.mqk-option__text {
	display: inline-block;
	width: 95%;
	vertical-align: top;
}

.mqk-option__detail {
	display: block;
	margin-top: 5px;
	line-height: 1.6;
	font-style: italic;
}

.mqk-field__intro {
	margin-bottom: 15px;
	font-family: 'Sinzel', serif;
}

.mqk-field__note {
	display: block;
	margin-bottom: 5px;
	font-size: 0.9em;
	color: #666;
	font-family: 'Sinzel', serif;
}

.mqk-field__label {
	display: block;
	margin-bottom: 5px;
	font-family: 'Sinzel', serif;
}

.mqk-textarea,
.mqk-text {
	width: 100%;
	padding: 8px;
	box-sizing: border-box;
	font-family: 'Sinzel', serif;
}

/* Medan bersyarat bersarang - beralun ke dalam pada setiap tingkat. */
.mqk-conditional {
	margin-left: 25px;
	margin-top: 20px;
	padding: 15px;
	background-color: #f5f5f5;
	border-radius: 5px;
}

.mqk-conditional .mqk-conditional {
	background-color: #efefef;
}

/* Kotak semak pengesahan pembayaran  (asal: snippet 314) */
.payment-confirmation-checkbox {
	margin: 15px 0;
}

.payment-confirmation-checkbox label {
	display: block;
}

/* Ayat Quran  (asal: snippet 346) */
.quran-verse-container {
	margin-top: 40px;
	padding: 20px;
	border-top: 1px solid #eee;
	text-align: center;
}

.quran-verse-container .arabic-verse {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
	direction: rtl;
	text-align: right;
	font-family: 'Traditional Arabic', serif;
}

.quran-verse-container .verse-reference {
	font-size: 16px;
	margin-bottom: 5px;
	text-align: right;
}

.quran-verse-container .verse-translation {
	font-size: 16px;
	font-style: italic;
	text-align: right;
}

.quran-verse-container .verse-translation__prefix {
	font-style: normal;
}

/* Butang tambah/kurang kuantiti di checkout  (asal: snippet 183) */
.quantity-controls {
	display: flex;
	align-items: center;
	margin-top: 5px;
	margin-bottom: 5px;
}

.quantity-controls .quantity-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background-color: #f0f0f0;
	border: 1px solid #ddd;
	border-radius: 3px;
	text-decoration: none;
	font-weight: bold;
	color: #333;
	cursor: pointer;
}

.quantity-controls .quantity-button:hover {
	background-color: #e0e0e0;
}

.quantity-controls .quantity-button.disabled {
	opacity: .4;
	cursor: default;
}

.quantity-controls .quantity-number {
	margin: 0 8px;
	font-weight: bold;
}
/**
 * Gaya tambahan: medan nama peserta di checkout, dan penanda medan kosong.
 */

/* Medan kosong ditandakan supaya jelas mana yang belum diisi. */
.participant-input.mqk-kosong,
.mqk-peserta-input.mqk-kosong {
	border-color: #c9302c;
	background-color: #fdf3f3;
}

/* Nama peserta boleh disunting di halaman checkout. */
.mqk-checkout-peserta {
	margin: 10px 0 4px;
	padding: 10px 12px;
	background: #f7f7f7;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	transition: opacity .15s ease;
}

.mqk-checkout-peserta.mqk-menyimpan {
	opacity: .6;
}

.mqk-checkout-peserta__row {
	margin: 0 0 8px !important;
}

.mqk-checkout-peserta__row:last-child {
	margin-bottom: 0 !important;
}

.mqk-checkout-peserta__row label {
	display: block;
	margin-bottom: 3px;
	font-size: .85em;
	font-weight: 600;
	line-height: 1.3;
}

.mqk-peserta-input {
	width: 100%;
	padding: 7px 9px;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: .95em;
}
/* Senarai lembu korban [korban_senarai] */

.mqk-senarai {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 24px 0;
}

.mqk-senarai--1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.mqk-senarai--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mqk-senarai--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mqk-senarai--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mqk-senarai--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1024px) {
	.mqk-senarai { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.mqk-senarai { grid-template-columns: 1fr; }
}

.mqk-kad {
	display: flex;
	flex-direction: column;
	border: 1px solid #ececec;
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .18s ease, transform .18s ease;
}

.mqk-kad:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, .09);
	transform: translateY(-2px);
}

.mqk-kad--penuh {
	opacity: .72;
}

.mqk-kad--penuh:hover {
	transform: none;
	box-shadow: none;
}

.mqk-kad__imej {
	display: block;
	line-height: 0;
}

.mqk-kad__imej img {
	width: 100%;
	height: auto;
	display: block;
}

.mqk-kad__isi {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px 18px;
	flex: 1 1 auto;
}

.mqk-kad__nama {
	margin: 0;
	font-size: 1.05em;
	line-height: 1.35;
}

.mqk-kad__nama a {
	text-decoration: none;
	color: inherit;
}

.mqk-kad__harga {
	font-weight: 600;
}

.mqk-kad__stok {
	font-size: .92em;
}

.mqk-kad__stok.ada {
	color: #1e7a35;
}

.mqk-kad__stok.penuh {
	color: #a72d32;
	font-weight: 600;
}

.mqk-kad__bar {
	height: 7px;
	border-radius: 4px;
	background: #ececec;
	overflow: hidden;
}

.mqk-kad__bar span {
	display: block;
	height: 100%;
	background: #1e7a35;
	border-radius: 4px;
}

.mqk-kad--penuh .mqk-kad__bar span {
	background: #a72d32;
}

.mqk-kad__kira {
	font-size: .82em;
	color: #666;
	margin-top: -2px;
}

.mqk-kad__butang {
	margin-top: auto;
	display: block;
	text-align: center;
	padding: 12px 18px;
	border-radius: 9999px;
	text-decoration: none;
	font-weight: 600;
}

.mqk-kad__butang--penuh {
	background: #a72d32;
	color: #fff;
	cursor: default;
}
/* [korban_senarai gaya=baris] - salinan tepat kad Productbuilder asal. */

.mqk-senarai--baris {
	display: block;
	margin: 0;
	background: var(--mqk-latar, transparent);
}

.mqk-senarai--baris .mqk-brs {
	width: 100%;
	padding: 20px 30px 20px 30px;
	border-radius: 55px;
	box-shadow: 1px 1px 7px 0px #00000025;
	margin-bottom: 15px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	background-color: var(--mqk-kad, #FFF);
	box-sizing: border-box;
}

.mqk-senarai--baris .mqk-brs__kiri {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.mqk-senarai--baris .mqk-brs__nama {
	margin: 0;
	padding: 0;
	color: var(--mqk-warna, #913f4d);
	font-family: "Cinzel", serif;
	font-size: 24px;
}

.mqk-senarai--baris .mqk-brs__nama a {
	color: inherit;
	text-decoration: none;
}

.mqk-senarai--baris .mqk-brs__stok {
	color: #585858;
	font-family: "Cinzel", serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1px;
}

.mqk-senarai--baris .mqk-brs__kanan {
	width: auto;
	min-width: 37%;
	flex: 0 1 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
	gap: 15px;
	min-width: 0;
}

.mqk-senarai--baris .mqk-brs__hargawrap {
	width: auto;
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 25px;
	min-width: 0;
}

.mqk-senarai--baris .mqk-brs__harga {
	margin: 0;
	font-family: "Cinzel", serif;
	font-size: 22px;
}

.mqk-senarai--baris .mqk-brs__harga .woocommerce-Price-amount,
.mqk-senarai--baris .mqk-brs__harga bdi,
.mqk-senarai--baris .mqk-brs__harga span {
	color: inherit;
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
}

.mqk-senarai--baris .mqk-brs__butangwrap {
	width: auto;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	min-width: 0;
}

.mqk-senarai--baris .mqk-brs__butang {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 14px 24px;
	line-height: 1;
	font-weight: 500;
	border-radius: 9999px;
	border: 2px solid #FDFDFD;
	background-color: var(--mqk-btn-bg, #383838);
	color: var(--mqk-btn-teks, #FFF);
	font-family: "Cinzel", serif;
	letter-spacing: 1px;
	box-shadow: 1px 1px 7px 0px #00000025;
	text-decoration: none;
	text-align: center;
	box-sizing: border-box;
	white-space: nowrap;
}

.mqk-senarai--baris .mqk-brs__butang:hover {
	background-color: transparent;
	border-color: #383838;
	color: #020202;
}

.mqk-senarai--baris .mqk-brs__butang--penuh,
.mqk-senarai--baris .mqk-brs__butang--penuh:hover {
	background-color: var(--mqk-penuh-bg, #A72D32);
	border-color: var(--mqk-penuh-bg, #A72D32);
	color: var(--mqk-penuh-teks, #FFF);
	cursor: default;
}

@media (max-width: 1119px) {
	.mqk-senarai--baris .mqk-brs__nama { font-size: 22px; }
	.mqk-senarai--baris .mqk-brs__kanan { min-width: 46%; }
	.mqk-senarai--baris .mqk-brs__harga { font-size: 19px; }
	.mqk-senarai--baris .mqk-brs__butang { font-size: 15px; }
}

@media (max-width: 1023px) {
	.mqk-senarai--baris .mqk-brs__nama { font-size: 22px; }
	.mqk-senarai--baris .mqk-brs__kanan { min-width: 52%; gap: 5px; }
}

@media (max-width: 767px) {
	.mqk-senarai--baris .mqk-brs {
		padding: 30px 25px 30px 25px;
		border-radius: 8px;
		gap: 15px;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
	.mqk-senarai--baris .mqk-brs__kiri { align-items: center; text-align: center; }
	.mqk-senarai--baris .mqk-brs__nama { font-size: 17px; }
	.mqk-senarai--baris .mqk-brs__kanan { width: 64%; min-width: 0; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; }
	.mqk-senarai--baris .mqk-brs__harga { font-size: 15px; }
	.mqk-senarai--baris .mqk-brs__butangwrap { width: 100%; }
	.mqk-senarai--baris .mqk-brs__butang { font-size: 14px; letter-spacing: 0.5px; white-space: normal; }
}

@media (max-width: 479px) {
	.mqk-senarai--baris .mqk-brs__kanan { width: 85%; min-width: 0; }
}

/* ---------------------------------------------------------------
 * Gaya grid: warna mengikut tetapan
 * ------------------------------------------------------------- */
.mqk-senarai--grid { background: var(--mqk-latar, transparent); }

.mqk-kad { background: var(--mqk-kad, #fff); }

.mqk-kad__nama a { color: var(--mqk-warna, inherit); }

.mqk-kad__butang {
	background: var(--mqk-btn-bg, #383838);
	color: var(--mqk-btn-teks, #fff);
}

.mqk-kad__butang--penuh,
.mqk-kad__butang--penuh:hover {
	background: var(--mqk-penuh-bg, #a72d32);
	color: var(--mqk-penuh-teks, #fff);
}

.mqk-kad__bar span { background: var(--mqk-warna, #1e7a35); }

.mqk-kad--penuh .mqk-kad__bar span { background: var(--mqk-penuh-bg, #a72d32); }

/* =====================================================================
 * REVAMP UI - senarai lembu
 *
 * Geometri dan tipografi dari pakej reka bentuk "Smart Korban - Revamp
 * UI". Warna TIDAK ditetapkan di sini: setiap satu datang dari var yang
 * ditulis inline oleh PHP daripada option senarai_* pemilik tapak, jadi
 * tetapan warna mereka kekal berkuasa.
 *
 * Tiga gaya, dua bentuk: gaya1 dan gaya2 ialah baris pil melintang
 * (gaya2 menyembunyikan yang sudah penuh - itu kerja PHP), gaya3 ialah
 * grid berkad bergambar.
 * ================================================================== */

@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-400.woff2) format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-500.woff2) format("woff2");}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-600.woff2) format("woff2");}

.mqk-senarai {
	--mqk-head: "Barlow Condensed", "Segoe UI", system-ui, sans-serif;
	--mqk-body: "Barlow", "Segoe UI", system-ui, sans-serif;
	--mqk-teks-lembut: #6B7770;
}

/* ------------------------------------------------- gaya 1 & 2: baris */

.mqk-senarai--baris {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	padding: 22px;
	border-radius: 22px;
	background: var(--mqk-latar, transparent);
}

.mqk-senarai--baris .mqk-brs {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 16px 20px 16px 26px;
	border: 0;
	border-radius: 40px;
	background: var(--mqk-kad, #FFFFFF);
	box-shadow: none;
}

.mqk-senarai--baris .mqk-brs__kiri {
	flex: 1 1 220px;
	min-width: 0;
}

.mqk-senarai--baris .mqk-brs__nama {
	margin: 0;
	padding: 0;
	font-family: var(--mqk-head);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: .03em;
	line-height: 1.2;
}

.mqk-senarai--baris .mqk-brs__stok {
	margin-top: 2px;
	font-family: var(--mqk-body);
	font-size: 12.5px;
	color: var(--mqk-teks-lembut);
}

.mqk-senarai--baris .mqk-brs__kanan {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	min-width: 0;
}

.mqk-senarai--baris .mqk-brs__hargawrap { min-width: 0; }

.mqk-senarai--baris .mqk-brs__harga,
.mqk-senarai--baris .mqk-brs__harga .woocommerce-Price-amount,
.mqk-senarai--baris .mqk-brs__harga bdi,
.mqk-senarai--baris .mqk-brs__harga span {
	font-family: var(--mqk-head);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
}

.mqk-senarai--baris .mqk-brs__butang {
	display: inline-block;
	padding: 12px 26px;
	border: 0;
	border-radius: 30px;
	font-family: var(--mqk-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .03em;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: none;
}

/* ------------------------------------------------ gaya 3: grid berkad */

.mqk-senarai--grid {
	gap: 16px;
	padding: 22px;
	border-radius: 22px;
}

.mqk-senarai--grid .mqk-kad {
	border: 0;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: none;
}

.mqk-senarai--grid .mqk-kad:hover {
	box-shadow: none;
	transform: none;
}

.mqk-senarai--grid .mqk-kad__imej { height: 140px; }

.mqk-senarai--grid .mqk-kad__imej img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mqk-senarai--grid .mqk-kad__isi { padding: 16px 18px 18px; }

.mqk-senarai--grid .mqk-kad__nama {
	margin: 0;
	padding: 0;
	font-family: var(--mqk-head);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
}

.mqk-senarai--grid .mqk-kad__stok {
	margin: 2px 0 10px;
	font-family: var(--mqk-body);
	font-size: 12.5px;
	color: var(--mqk-teks-lembut);
}

.mqk-senarai--grid .mqk-kad__harga,
.mqk-senarai--grid .mqk-kad__harga .woocommerce-Price-amount,
.mqk-senarai--grid .mqk-kad__harga bdi,
.mqk-senarai--grid .mqk-kad__harga span {
	font-family: var(--mqk-head);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
}

.mqk-senarai--grid .mqk-kad__harga { margin-bottom: 12px; }

.mqk-senarai--grid .mqk-kad__butang {
	display: block;
	width: 100%;
	padding: 12px;
	border: 0;
	border-radius: 26px;
	font-family: var(--mqk-body);
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
}

@media (max-width: 600px) {

	.mqk-senarai--baris,
	.mqk-senarai--grid { padding: 14px; }

	.mqk-senarai--baris .mqk-brs {
		border-radius: 26px;
		padding: 16px 18px;
	}

	.mqk-senarai--baris .mqk-brs__butang { width: 100%; text-align: center; }
}

/* =====================================================================
 * REVAMP UI - borang korban
 *
 * Blok kenyataan pada halaman produk dan di checkout: kad putih, pilihan
 * sebagai kad boleh tekan, radio dan kotak semak dilukis semula.
 *
 * Radio dan kotak semak SEBENAR dikekalkan - ia cuma dilukis semula
 * dengan appearance:none. Tiada satu pun pilihan di sini bergantung pada
 * JavaScript, jadi borang tetap berfungsi kalau skrip gagal dimuatkan.
 *
 * Keadaan terpilih ditandakan dua kali: pada bulatan itu sendiri (semua
 * pelayar) dan pada bingkai kad melalui :has() (pelayar yang menyokong).
 * Kalau :has() tidak disokong, pilihan masih jelas kelihatan.
 * ================================================================== */

.mqk-block,
.mqk-checkout-peserta,
.participant-fields-container,
.quran-verse-container,
.payment-confirmation-checkbox {
	--mqk-head: "Barlow Condensed", "Segoe UI", system-ui, sans-serif;
	--mqk-body: "Barlow", "Segoe UI", system-ui, sans-serif;
	--mqk-ink: #22302A;
	--mqk-ink-label: #55625B;
	--mqk-ink-muted: #6B7770;
	--mqk-ink-faint: #8A9690;
	--mqk-line: #E5E0D3;
	--mqk-line-soft: #EFEBE0;
	--mqk-field: #FCFBF7;
	--mqk-pilih: #2C3E37;
	--mqk-pilih-bg: #F5F8F5;
	--mqk-dot: #C9D0CA;
	--mqk-amaran: #A0754F;
	--mqk-danger: #A72D32;
}

.mqk-block {
	margin: 20px 0 30px;
	padding: 22px 24px;
	border: 1px solid var(--mqk-line);
	border-radius: 22px;
	background: #FFFFFF;
	font-family: var(--mqk-body);
	color: var(--mqk-ink);
	box-shadow: none;
}

.mqk-block__title {
	margin: 0 0 2px;
	font-family: var(--mqk-head);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mqk-ink);
}

.mqk-block .mqk-note {
	font-family: var(--mqk-body);
	font-size: 14px;
	font-weight: 400;
	color: var(--mqk-amaran);
}

.mqk-block__intro {
	margin: 6px 0 12px;
	font-family: var(--mqk-body);
	font-size: 13px;
	line-height: 1.55;
	color: var(--mqk-ink-muted);
}

.mqk-block__fields {
	margin-left: 0;
	display: grid;
	gap: 9px;
}

.mqk-option { margin-bottom: 0; }

/* Setiap pilihan ialah kad yang boleh ditekan di mana-mana. */
.mqk-option__label {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 13px 15px;
	border: 1px solid var(--mqk-line-soft);
	border-radius: 14px;
	background: var(--mqk-field);
	font-family: var(--mqk-body);
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.mqk-option__label:hover { border-color: var(--mqk-dot); }

.mqk-option__label:has(input:checked) {
	border-color: var(--mqk-pilih);
	background: var(--mqk-pilih-bg);
}

.mqk-option__label input[type="radio"],
.mqk-option__label input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	flex: none;
	margin: 2px 0 0;
	padding: 0;
	border: 2px solid var(--mqk-dot);
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

.mqk-option__label input[type="checkbox"] { border-radius: 6px; }

.mqk-option__label input[type="radio"]:checked,
.mqk-option__label input[type="checkbox"]:checked {
	border-color: var(--mqk-pilih);
	background-color: var(--mqk-pilih);
}

.mqk-option__label input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-9'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 11px;
}

.mqk-option__label input[type="radio"]:focus-visible,
.mqk-option__label input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--mqk-pilih);
	outline-offset: 2px;
}

.mqk-option__text {
	display: block;
	width: auto;
	min-width: 0;
	font-size: 13px;
	font-weight: 500;
}

.mqk-option__detail {
	display: block;
	margin-top: 7px;
	font-size: 12.5px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.7;
	color: var(--mqk-ink-label);
}

/* Medan bersyarat: garis nipis di kiri, bukan kotak kelabu di dalam kotak. */
.mqk-conditional {
	margin: 14px 0 0;
	padding: 0 0 0 14px;
	border-left: 2px solid var(--mqk-line-soft);
	border-radius: 0;
	background: transparent;
}

.mqk-conditional .mqk-conditional { background: transparent; }

.mqk-field__intro {
	margin-bottom: 10px;
	font-family: var(--mqk-body);
	font-size: 13px;
	color: var(--mqk-ink);
}

.mqk-field__note {
	display: block;
	margin-bottom: 6px;
	font-family: var(--mqk-body);
	font-size: 11.5px;
	color: var(--mqk-ink-faint);
}

.mqk-field__label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--mqk-body);
	font-size: 12.5px;
	color: var(--mqk-ink-label);
}

.mqk-textarea,
.mqk-text,
.mqk-peserta-input,
.participant-input {
	width: 100%;
	padding: 10px 13px;
	border: 1px solid var(--mqk-line);
	border-radius: 12px;
	background: var(--mqk-field);
	font-family: var(--mqk-body);
	font-size: 14px;
	line-height: 1.4;
	color: var(--mqk-ink);
	box-sizing: border-box;
	box-shadow: none;
}

.mqk-textarea:focus,
.mqk-text:focus,
.mqk-peserta-input:focus,
.participant-input:focus {
	border-color: var(--mqk-pilih);
	outline: none;
}

.participant-input.mqk-kosong,
.mqk-peserta-input.mqk-kosong {
	border-color: var(--mqk-danger);
	background-color: #FBF1F1;
}

/* Kotak semak pengesahan pembayaran */
.payment-confirmation-checkbox {
	margin: 20px 0 16px;
	font-family: var(--mqk-body);
}

.payment-confirmation-checkbox label {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 13px;
	line-height: 1.5;
	cursor: pointer;
}

.payment-confirmation-checkbox input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 19px;
	height: 19px;
	flex: none;
	margin: 0;
	border: 2px solid var(--mqk-dot);
	border-radius: 6px;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

.payment-confirmation-checkbox input[type="checkbox"]:checked {
	border-color: var(--mqk-pilih);
	background-color: var(--mqk-pilih);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-9'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 12px;
}

.payment-confirmation-checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--mqk-pilih);
	outline-offset: 2px;
}

/* Kuantiti: satu pil dengan tiga bahagian, bukan tiga kotak berasingan. */
.quantity-controls {
	display: inline-flex;
	align-items: center;
	margin: 12px 0 5px;
	border: 1px solid var(--mqk-line);
	border-radius: 20px;
	overflow: hidden;
	font-family: var(--mqk-body);
}

.quantity-controls .quantity-button {
	width: auto;
	height: auto;
	padding: 7px 12px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-weight: 500;
	color: var(--mqk-ink);
}

.quantity-controls .quantity-button:hover { background: var(--mqk-field); }

.quantity-controls .quantity-number {
	min-width: 24px;
	margin: 0;
	text-align: center;
	font-size: 13px;
	font-weight: 500;
}

/* Nama peserta di checkout */
.mqk-checkout-peserta {
	margin: 10px 0 4px;
	padding: 14px 16px;
	border: 1px solid var(--mqk-line);
	border-radius: 16px;
	background: var(--mqk-field);
	font-family: var(--mqk-body);
}

.mqk-checkout-peserta__row label {
	font-size: 12.5px;
	font-weight: 400;
	color: var(--mqk-ink-label);
}

/* Ayat Quran */
.quran-verse-container {
	margin-top: 28px;
	padding: 20px 0 0;
	border-top: 1px solid var(--mqk-line-soft);
	text-align: right;
	font-family: var(--mqk-body);
}

.quran-verse-container .verse-reference,
.quran-verse-container .verse-translation {
	font-size: 13px;
	color: var(--mqk-ink-muted);
}