.qs-dv2 {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
}

.qs-dv2.is-open { display: block; }

.qs-dv2__shade {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .54);
	backdrop-filter: blur(2px);
}

.qs-dv2__panel {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(480px, calc(100% - 32px));
	max-height: min(76dvh, 680px);
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
	background: #fff;
	border: 1px solid rgba(203, 213, 225, .9);
	border-radius: 16px;
	box-shadow: 0 18px 54px rgba(15, 23, 42, .22);
}

.qs-dv2__panel::-webkit-scrollbar { width: 6px; }
.qs-dv2__panel::-webkit-scrollbar-thumb { border-radius: 999px; background: #cbd5e1; }

.qs-dv2__panel header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	min-height: 54px;
	align-items: center;
	justify-content: space-between;
	padding: 5px 7px 5px 16px;
	border-bottom: 1px solid #e5e7eb;
	background: rgba(255, 255, 255, .98);
}

.qs-dv2__panel h2 {
	margin: 0;
	color: #12233f;
	font-size: 18px;
	line-height: 1.3;
}

.qs-dv2__close {
	display: inline-grid;
	min-width: 44px;
	min-height: 44px;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #64748b;
	cursor: pointer;
	font-size: 27px;
	line-height: 1;
}

/* Hover tidak lagi memunculkan ring — ring hanya milik keyboard. */
.qs-dv2__close:hover {
	background: #f1f5f9;
	color: #12233f;
}

/* Fokus mouse tidak menampilkan ring hitam bawaan peramban. */
.qs-dv2__close:focus {
	outline: none;
}

/* Fokus keyboard: ring hijau QS yang halus namun jelas. */
/* Ring fokus keyboard ditarik ke dalam tombol: halo luar yang besar membuat
   ikon tampak menonjol dan menyenggol tepi header. Offset negatif menjaga ring
   tetap sebidang dengan radius 10 tanpa menghilangkan indikator fokus. */
.qs-dv2__close:focus-visible {
	background: #f1f5f9;
	color: #12233f;
	/* !important beralasan: shop.css memasang button:focus-visible dengan
	   outline 3px !important, sehingga tanpa ini ring tombol close tetap 3px
	   meski specificity aturan ini lebih tinggi. Hanya properti outline yang
	   perlu; outline-offset pada aturan global tidak ber-!important. */
	outline: 2px solid #166534 !important;
	outline-offset: -3px;
	border-radius: 10px;
	box-shadow: none;
}

.qs-dv2__body { padding: 10px 14px 16px; }

.qs-dar-warning {
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid #bbf7d0;
	border-radius: 10px;
	background: #f0fdf4;
	color: #166534;
	font-size: 12px;
	line-height: 1.5;
}

.qs-dv2__group + .qs-dv2__group {
	margin-top: 9px;
	padding-top: 9px;
	border-top: 1px solid #e5e7eb;
}

.qs-dv2__toggle {
	display: flex;
	width: 100%;
	min-height: 44px;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 5px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #475569;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

.qs-dv2__toggle:focus-visible { outline: 2px solid #166534; outline-offset: 3px; border-radius: 4px; }
.qs-dv2__chev { color: #64748b; font-size: 18px; transition: transform .16s ease; }
.qs-dv2__toggle[aria-expanded="false"] .qs-dv2__chev { transform: rotate(-90deg); }
.qs-dv2__grid[hidden] { display: none; }

.qs-dv2__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
}

.qs-dv2__card {
	display: grid;
	min-height: 44px;
	align-items: center;
	justify-items: center;
	padding: 5px 8px;
	border: 1px solid #d8e0ea;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	text-align: center;
}

.qs-dv2__card:hover,
.qs-dv2__card:focus-visible {
	border-color: #16a34a;
	box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
	outline: 0;
}

.qs-dv2__card.is-selected {
	border-color: #16a34a;
	background: #f0fdf4;
	box-shadow: inset 0 0 0 1px #16a34a;
}

.qs-dv2__card:disabled { cursor: wait; opacity: .65; }

.qs-dv2__logo {
	display: inline-flex;
	width: 100%;
	height: 26px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.qs-dv2__logo img {
	display: block;
	width: 82px;
	max-width: 90px;
	height: 22px;
	max-height: 22px;
	object-fit: contain;
}

/* Logo provider punya kanvas intrinsik yang berbeda. Batas per kanal ini
   menyamakan bobot visual tanpa meregangkan atau memotong merek. */
.qs-dv2__logo[data-code="OV"] img { width: 66px; max-width: 66px; height: 23px; max-height: 23px; }
.qs-dv2__logo[data-code="BC"] img,
.qs-dv2__logo[data-code="I1"] img { width: 72px; max-width: 72px; height: 23px; max-height: 23px; }
.qs-dv2__logo[data-code="M2"] img { width: 70px; max-width: 70px; height: 20px; max-height: 20px; }
.qs-dv2__logo[data-code="BR"] img { width: 76px; max-width: 76px; height: 22px; max-height: 22px; }
.qs-dv2__logo[data-code="SA"] img { width: 84px; max-width: 84px; height: 21px; max-height: 21px; }
.qs-dv2__logo[data-code="LA"] img { width: 30px; max-width: 30px; height: 24px; max-height: 24px; }
.qs-dv2__logo[data-code="B1"] img,
.qs-dv2__logo[data-code="S1"] img { width: 88px; max-width: 88px; height: 19px; max-height: 19px; }
.qs-dv2__logo[data-code="AG"] img { width: 94px; max-width: 94px; height: 23px; max-height: 23px; }

/* Beberapa aset API memiliki ruang transparan besar di dalam kanvas. Skala
   optis mengoreksi isi logo, bukan ukuran kartu atau rasio gambarnya. */
.qs-dv2__logo[data-code="SA"] img { transform: scale(1.65); }
.qs-dv2__logo[data-code="M2"] img { transform: scale(1.78); }
.qs-dv2__logo[data-code="VA"] img { transform: scale(1.10); }
.qs-dv2__logo[data-code="BT"] img { transform: scale(1.20); }
.qs-dv2__logo[data-code="BV"] img { transform: scale(1.34); }
.qs-dv2__logo[data-code="B1"] img { transform: scale(1.62); }
.qs-dv2__logo[data-code="S1"] img { transform: scale(1.82); }
.qs-dv2__logo[data-code="DM"] img { transform: scale(1.30); }
.qs-dv2__logo[data-code="FT"] img { transform: scale(1.95); }
.qs-dv2__logo[data-code="IR"] img { transform: scale(1.72); }
.qs-dv2__logo[data-code="DN"] img { transform: scale(1.46); }
.qs-dv2__logo[data-code="VC"] img { transform: scale(1.88); }

/* Aset lokal: dimensi optis final tanpa transform/upscaling thumbnail. */
.qs-dv2__logo[data-code="SQ"] img { width: 62px; max-width: 62px; height: 24px; max-height: 24px; transform: none; }
.qs-dv2__logo[data-code="SP"] { height: 30px; }
.qs-dv2__logo[data-code="SP"] img { width: 92px; max-width: 92px; height: 30px; max-height: 30px; transform: none; }
.qs-dv2__logo[data-code="B1"] img { width: 124px; max-width: 124px; height: 28px; max-height: 28px; transform: none; }
.qs-dv2__logo[data-code="S1"] img { width: 118px; max-width: 118px; height: 26px; max-height: 26px; transform: none; }
.qs-dv2__logo[data-code="VA"] img { width: 104px; max-width: 104px; height: 28px; max-height: 28px; transform: none; }
.qs-dv2__logo[data-code="BV"] img { width: 112px; max-width: 112px; height: 27px; max-height: 27px; transform: none; }
.qs-dv2__logo[data-code="S1"] img { width: 128px; max-width: 128px; height: 28px; max-height: 28px; }
.qs-dv2__logo[data-code="A1"] img { width: 103.4px; max-width: 103.4px; height: 25px; max-height: 25px; transform: none; }
.qs-dv2__logo[data-code="DM"] img { width: 104px; max-width: 104px; height: 26px; max-height: 26px; transform: none; }
.qs-dv2__logo[data-code="FT"] img { width: 188px; max-width: 188px; height: 30px; max-height: 30px; transform: none; }
.qs-dv2__logo[data-code="IR"] img { width: 102px; max-width: 102px; height: 25px; max-height: 25px; transform: none; }
.qs-dv2__logo[data-code="VC"] img { width: 112px; max-width: 112px; height: 26px; max-height: 26px; transform: none; }

/* Ringkasan metode aktif: logo kanal menggantikan ikon gembok generik. */
.qs-paybtn .qs-paybtn__ico--channel {
	display: inline-flex;
	width: 62px;
	height: 30px;
	flex: 0 0 62px;
	align-items: center;
	justify-content: center;
	color: #111827;
}

.qs-paybtn.qs-paybtn--channel {
	display: grid !important;
	position: relative;
	grid-template-columns: 84px minmax(0, 1fr) 84px;
	align-items: center;
	gap: 0;
	padding-right: 8px;
	padding-left: 8px;
}

.qs-paybtn--channel .qs-paybtn__ico--channel {
	width: 84px;
	justify-self: start;
}

.qs-paybtn--channel .qs-paybtn__name,
.qs-paybtn--channel .qs-paybtn__t {
	width: 100%;
	min-width: 0;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.qs-paybtn--channel .qs-paybtn__ch {
	position: static;
	justify-self: end;
	transform: none;
}

.qs-dv2__selected-logo {
	display: inline-flex;
	width: 80px;
	height: 26px;
	min-width: 80px;
	flex: 0 0 80px;
	align-items: center;
	justify-content: flex-start;
}

.qs-dv2__selected-logo img {
	display: block;
	width: auto;
	max-width: 58px;
	height: auto;
	max-height: 26px;
	object-fit: contain;
}

.qs-dv2__selected-logo .qs-dv2__qris-mark { width: 30px; }
.qs-dv2__selected-logo[data-code="SA"] img { transform: scale(1.45); }
.qs-dv2__selected-logo[data-code="M2"] img { transform: scale(1.22); }
.qs-dv2__selected-logo[data-code="SQ"] img,
.qs-dv2__selected-logo[data-code="SP"] img,
.qs-dv2__selected-logo[data-code="B1"] img,
.qs-dv2__selected-logo[data-code="S1"] img,
.qs-dv2__selected-logo[data-code="A1"] img,
.qs-dv2__selected-logo[data-code="FT"] img,
.qs-dv2__selected-logo[data-code="IR"] img,
.qs-dv2__selected-logo[data-code="VC"] img { width: 56px; max-width: 56px; height: 26px; max-height: 26px; transform: none; }

.qs-dv2__selected-logo[data-code="SQ"] img { width: 50px; max-width: 50px; }
.qs-dv2__selected-logo[data-code="SP"] img { width: 78px; max-width: 78px; height: 28px; max-height: 28px; }
.qs-dv2__selected-logo[data-code="BV"] img { width: 58px; max-width: 58px; transform: none; }
.qs-dv2__selected-logo[data-code="FT"] img { width: 80px; max-width: 80px; height: auto; max-height: 24px; }

.qs-dv2__card[data-code="NC"] {
	display: flex;
	flex-direction: row;
	gap: 8px;
}

.qs-dv2__card[data-code="NC"] .qs-dv2__logo {
	width: auto;
	flex: 0 0 auto;
}

.qs-dv2__card .qs-dv2__brand-label {
	display: block;
	color: #12233f;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

.qs-payhint[hidden] { display: none !important; }

.qs-dv2__payment-card {
	margin: 0;
	overflow: hidden;
	border: 1px solid #16a34a;
	border-radius: 10px;
	background: #fff;
}

.qs-dv2__payment-card .qs-paybtn {
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.qs-dv2__payment-card.is-selected .qs-paybtn {
	border-bottom: 1px solid #d7eee0 !important;
}

.qs-dv2__payment-card .qs-payhint {
	margin: 0;
	padding: 0 12px 10px;
}

.qs-trust.qs-dv2__assurance {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	margin: 0;
	padding: 9px 12px;
	border: 0;
	border-radius: 0;
	background: #f4fbf7;
	color: #166534;
	font-size: 12px;
	line-height: 1.35;
	text-align: left;
}

.qs-trust.qs-dv2__assurance[hidden] { display: none; }

.qs-dv2__assurance-icon {
	display: inline-grid;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	place-items: center;
	border-radius: 10px;
	background: #dcfce7;
}

.qs-dv2__assurance > span:last-child {
	display: grid;
	gap: 1px;
}

.qs-dv2__assurance strong {
	color: #14532d;
	font-size: 12px;
	font-weight: 700;
}

.qs-dv2__assurance small {
	color: #4b6b58;
	font-size: 11px;
}

.qs-dv2__card span {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}

.qs-dv2__card strong {
	color: #12233f;
	font-size: 13px;
	line-height: 1.3;
}

.qs-dv2__fallback {
	display: block;
	color: #12233f;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

.qs-dv2__qris-mark {
	display: block;
	width: 62px;
	height: 24px;
	color: #111827;
}

.qs-dv2__qris-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: currentColor;
}

.qs-dv2__card small {
	color: #64748b;
	font-size: 11px;
	line-height: 1.35;
}

.qs-dv2__state { padding: 28px; color: #64748b; text-align: center; }
.qs-dv2__state.is-error { color: #b42318; }

@media (max-width: 480px) {
	.qs-dv2__panel {
		left: 8px;
		top: auto;
		bottom: max(8px, env(safe-area-inset-bottom));
		width: calc(100% - 16px);
		max-height: 86dvh;
		transform: none;
		border-radius: 16px;
	}

	.qs-dv2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qs-dv2__panel header { padding: 5px 7px 5px 14px; }
	.qs-dv2__body { padding: 12px 14px 18px; }
	.qs-dv2__card { min-height: 44px; padding: 5px 7px; }
	.qs-paybtn.qs-paybtn--channel {
		grid-template-columns: 68px minmax(0, 1fr) 68px;
		padding-right: 8px;
		padding-left: 8px;
	}
	.qs-paybtn .qs-paybtn__ico--channel { width: 68px; flex-basis: auto; }
	.qs-paybtn--channel .qs-paybtn__ch { right: auto; }
	.qs-dv2__selected-logo { width: 60px; min-width: 60px; flex-basis: 60px; }
	.qs-dv2__selected-logo img { max-width: 48px; }
	.qs-dv2__selected-logo[data-code="FT"] img { width: 64px; max-width: 64px; }
}

/* =========================================================================
   Refinement 2026-08-12 — ringkasan status, countdown, dan aksi.
   Panel menjadi kolom flex: header dan footer tetap terlihat, hanya isi yang
   menggulir, sehingga aksi tidak pernah tertimbun di layar pendek.
   ========================================================================= */
.qs-dv2__panel {
	display: flex;
	max-height: min(72dvh, 640px);
	flex-direction: column;
	overflow: hidden;
}

.qs-dv2__panel header { flex: 0 0 auto; }

.qs-dv2__summary {
	display: grid;
	flex: 0 0 auto;
	gap: 6px;
	padding: 12px 16px;
	border-bottom: 1px solid #eef2f7;
	background: #f8fafc;
	font-size: 13px;
}

.qs-dv2__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	color: #475569;
}

.qs-dv2__row strong { color: #12233f; }

.qs-dv2__left {
	color: #12233f;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.qs-dv2__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}

.qs-dv2__body::-webkit-scrollbar { width: 6px; }
.qs-dv2__body::-webkit-scrollbar-thumb { border-radius: 999px; background: #cbd5e1; }

.qs-dv2__foot {
	display: grid;
	flex: 0 0 auto;
	gap: 8px;
	padding: 12px 16px max(12px, env(safe-area-inset-bottom));
	border-top: 1px solid #eef2f7;
	background: #fff;
}

.qs-dv2__confirm { width: 100%; }

.qs-dv2__btn {
	display: inline-flex;
	min-height: 46px;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	border: 1px solid transparent;
	border-radius: 11px;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.qs-dv2__btn--primary {
	background: #16a34a;
	color: #fff;
}

/* Ikon dan label CTA selalu menjadi satu grup yang terpusat. */
#place_order:not(.qs-submit--off) {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

#place_order:not(.qs-submit--off) .qs-cta__ico {
	flex: none;
	margin: 0;
}

/* Hijau transaksi mengikuti CTA toko LIVE (#16a34a). */
#place_order:not(:disabled) {
	background-color: #16a34a !important;
}

/* Ikon perisai pada CTA modal: sejajar tepat di depan label. Aturan ini
   diulang di sini supaya modal tetap benar walau shop.css tidak dimuat
   pada konteks tertentu. */
.qs-dv2__btn {
	gap: 8px;
}

.qs-dv2__btn .qs-cta__ico {
	flex: none;
	width: 15px;
	height: 15px;
}

.qs-dv2__btn .qs-cta__ico-wrap {
	display: inline-flex;
	flex: none;
	align-items: center;
}

.qs-dv2__btn--primary:hover { filter: brightness(.96); }

.qs-dv2__btn--ghost {
	border-color: #cbd5e1;
	background: #fff;
	color: #12233f;
}

.qs-dv2__btn--ghost:hover {
	border-color: #16a34a;
	color: #16a34a;
}

.qs-dv2__btn:focus-visible {
	outline: 3px solid #166534;
	outline-offset: 2px;
}

/* Desktop lebih rapat: tiga kolom kanal supaya panel tidak memanjang. */
@media (min-width: 700px) {
	.qs-dv2__panel { width: min(480px, calc(100% - 32px)); }
	/* Maksimal dua kolom pada seluruh viewport di atas 480px. Tiga kolom
	   membuat kartu kanal terlalu sempit dan namanya terpotong. */
	.qs-dv2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qs-dv2__card { min-height: 44px; }
	.qs-dv2__foot { grid-auto-flow: column; grid-auto-columns: 1fr; }
}

@media (max-width: 480px) {
	.qs-dv2__summary { padding: 11px 14px; }
	.qs-dv2__foot { padding: 11px 14px max(11px, env(safe-area-inset-bottom)); }
}

/* =========================================================================
   Refinement R2 2026-08-12 — skeleton instan, status compact, poles modal.
   ========================================================================= */

/* Baris status di dalam modal dibuat ringkas; sebelumnya padding 28px membuat
   satu kalimat pendek tampak seperti blok kosong yang besar. */
.qs-dv2__state {
	padding: 16px 16px 18px;
	font-size: 13.5px;
	line-height: 1.55;
}

/* Teks pemuatan: kecil, tenang, tidak berteriak. */
.qs-dv2__loading {
	margin: 0;
	padding: 12px 16px 6px;
	color: #64748b;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
}

/* Rangka kartu yang tampil seketika saat daftar kanal masih dimuat. */
.qs-dv2__skel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	padding: 6px 16px 18px;
}

.qs-dv2__skel-card {
	display: block;
	height: 54px;
	border-radius: 11px;
	background: linear-gradient(90deg, #f1f5f9 25%, #e6edf5 37%, #f1f5f9 63%);
	background-size: 400% 100%;
	animation: qs-dv2-shimmer 1.2s ease-in-out infinite;
}

@keyframes qs-dv2-shimmer {
	0%   { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
	.qs-dv2__skel-card { animation: none; }
}

@media (min-width: 700px) {
	/* Rangka skeleton mengikuti grid nyata: dua kolom, bukan tiga. */
	.qs-dv2__skel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
	.qs-dv2__skel { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px 14px 18px; }
	.qs-dv2__loading { padding: 12px 14px 6px; }
	.qs-dv2__state { padding: 14px 14px 16px; }
}

/* Poles panel: sudut dan bayang lebih tenang, header sedikit lebih rapat. */
.qs-dv2__panel {
	border-radius: 18px;
	box-shadow: 0 20px 56px rgba(11, 41, 70, .20);
}

.qs-dv2__panel header {
	min-height: 52px;
	border-bottom-color: #eef2f7;
}

.qs-dv2__panel h2 {
	font-size: 17px;
	letter-spacing: -0.01em;
}

/* Kartu kanal: garis lebih lembut, state fokus keyboard konsisten hijau QS. */
.qs-dv2__card {
	border-color: #e3eaf3;
	transition: border-color .14s ease, box-shadow .14s ease;
}

.qs-dv2__card:focus-visible {
	border-color: #166534;
	outline: 3px solid #166534;
	outline-offset: 2px;
	box-shadow: none;
}

/* =========================================================================
   Refinement R3 2026-08-12 — state error dengan aksi nyata.
   Gagal-muat kini punya tombol "Coba Lagi" (hijau QS, tap target >=44px),
   dan kegagalan pemilihan kanal tampil sebagai notice inline di dalam modal,
   bukan window.alert.
   ========================================================================= */
.qs-dv2__notice {
	margin: 0 0 12px;
	padding: 9px 12px;
	border: 1px solid #fecaca;
	border-radius: 10px;
	background: #fef2f2;
	color: #b42318;
	font-size: 12.5px;
	line-height: 1.5;
}

.qs-dv2__actions {
	display: flex;
	justify-content: center;
	padding: 2px 0 8px;
}

.qs-dv2__retry { min-width: 180px; }

/* =========================================================================
   Refinement R4 2026-08-12 — state provider-unavailable & kunci interaksi.
   ========================================================================= */

/* [hidden] kalah dari display:grid milik stylesheet author (specificity setara,
   author menang atas UA), sehingga ringkasan/footer kosong tetap tampil sebagai
   strip ber-padding sebelum diisi. Aturan eksplisit ini mengembalikan makna
   atribut hidden untuk kedua wadah tersebut. */
.qs-dv2__summary[hidden],
.qs-dv2__foot[hidden] {
	display: none;
}

/* Catatan sekunder di bawah pesan status: kecil, tenang, tidak menyaingi
   pesan utama. Inset kiri-kanan mengikuti .qs-dv2__state (16px). */
.qs-dv2__note {
	margin: -8px 0 0;
	padding: 0 16px 16px;
	color: #64748b;
	font-size: 12.5px;
	line-height: 1.55;
	text-align: center;
}

/* Tombol yang sedang menunggu jawaban server: terlihat terkunci, kursor netral,
   tanpa efek hover yang menyiratkan masih bisa diklik. */
.qs-dv2__btn:disabled {
	cursor: default;
	opacity: .55;
	filter: none;
}

.qs-dv2__btn--ghost:disabled {
	border-color: #cbd5e1;
	color: #12233f;
}

/* Live region untuk pembaca layar: ada di DOM, tidak pernah terlihat. */
.qs-dv2__sr {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 480px) {
	.qs-dv2__note { padding: 0 14px 14px; }
}

/* Compact payment modal — 2026-09-01.
   Kartu dipadatkan tanpa mengubah ukuran optis logo; retail yang panjang
   menyusut hanya bila ruang kolom lebih sempit dari asetnya. */
.qs-dv2__panel { width: min(440px, calc(100% - 32px)); }
.qs-dv2__panel header { min-height: 50px; }
.qs-dv2__body { padding: 8px 12px 12px; }
.qs-dv2__group + .qs-dv2__group { margin-top: 7px; padding-top: 7px; }
.qs-dv2__toggle { min-height: 40px; margin-bottom: 4px; }
.qs-dv2__card { min-height: 40px; padding: 3px 6px; }
.qs-dv2__foot { padding: 10px 14px max(10px, env(safe-area-inset-bottom)); }
.qs-dv2__btn { min-height: 44px; padding: 10px 14px; }
.qs-dv2__logo[data-code="FT"] img {
	width: 188px;
	max-width: 100%;
	height: 100%;
	max-height: 26px;
	object-fit: contain;
}

@media (max-width: 480px) {
	.qs-dv2__panel { width: calc(100% - 16px); }
	.qs-dv2__body { padding: 10px 12px 14px; }
	.qs-dv2__toggle { min-height: 44px; }
	.qs-dv2__card { min-height: 44px; padding: 5px 6px; }
	.qs-dv2__foot { padding: 10px 12px max(10px, env(safe-area-inset-bottom)); }
}


/* QS Duitku anti-flash: selama selector kanal belum mengambil alih mode
   gateway tunggal, tampilkan status netral. Setelah 6 detik markup bawaan
   dipulihkan sebagai fail-safe bila JavaScript selector gagal. */
.qs-paybtn--single,
.woocommerce-checkout-payment:has(ul.wc_payment_methods > li.payment_method_duitku_pop:only-child) > .qs-paybtn {
	position: relative;
	min-height: 58px;
	pointer-events: none;
}
.qs-paybtn--single > *,
.woocommerce-checkout-payment:has(ul.wc_payment_methods > li.payment_method_duitku_pop:only-child) > .qs-paybtn > * {
	opacity: 0;
	animation: qs-dv2-failsafe-show 0s 6s forwards;
}
.qs-paybtn--single::after,
.woocommerce-checkout-payment:has(ul.wc_payment_methods > li.payment_method_duitku_pop:only-child) > .qs-paybtn::after {
	content: "Menyiapkan metode pembayaran…";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	color: #64748b;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	animation: qs-dv2-failsafe-hide 0s 6s forwards;
}
.qs-paybtn--single + .qs-payhint,
.qs-paybtn--single ~ .qs-trust,
.woocommerce-checkout-payment:has(ul.wc_payment_methods > li.payment_method_duitku_pop:only-child) > .qs-paybtn + .qs-payhint,
.woocommerce-checkout-payment:has(ul.wc_payment_methods > li.payment_method_duitku_pop:only-child) > .qs-paybtn ~ .qs-trust {
	opacity: 0;
	animation: qs-dv2-failsafe-show 0s 6s forwards;
}
@keyframes qs-dv2-failsafe-show { to { opacity: 1; } }
@keyframes qs-dv2-failsafe-hide { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.qs-paybtn--single > *,
	.woocommerce-checkout-payment:has(ul.wc_payment_methods > li.payment_method_duitku_pop:only-child) > .qs-paybtn > *,
	.qs-paybtn--single::after,
	.woocommerce-checkout-payment:has(ul.wc_payment_methods > li.payment_method_duitku_pop:only-child) > .qs-paybtn::after,
	.qs-paybtn--single + .qs-payhint,
	.qs-paybtn--single ~ .qs-trust,
	.woocommerce-checkout-payment:has(ul.wc_payment_methods > li.payment_method_duitku_pop:only-child) > .qs-paybtn + .qs-payhint,
	.woocommerce-checkout-payment:has(ul.wc_payment_methods > li.payment_method_duitku_pop:only-child) > .qs-paybtn ~ .qs-trust { animation-delay: 6s; }
}


/* QS Duitku ready handshake: tidak bergantung pada posisi DOM atau :only-child.
   Tombol lama ditutup sampai selector v2 selesai membentuk tampilan final. */
.woocommerce-checkout .woocommerce-checkout-payment .qs-paybtn:not(.qs-dv2-ready) {
	position: relative;
	min-height: 58px;
	pointer-events: none;
}
.woocommerce-checkout .woocommerce-checkout-payment .qs-paybtn:not(.qs-dv2-ready) > * {
	opacity: 0;
	animation: qs-dv2-failsafe-show 0s 6s forwards;
}
.woocommerce-checkout .woocommerce-checkout-payment .qs-paybtn:not(.qs-dv2-ready)::after {
	content: "Menyiapkan metode pembayaran…";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	color: #64748b;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	animation: qs-dv2-failsafe-hide 0s 6s forwards;
}
.woocommerce-checkout .woocommerce-checkout-payment .qs-paybtn:not(.qs-dv2-ready) + .qs-payhint,
.woocommerce-checkout .woocommerce-checkout-payment .qs-paybtn:not(.qs-dv2-ready) ~ .qs-trust {
	opacity: 0;
	animation: qs-dv2-failsafe-show 0s 6s forwards;
}


/* QS Duitku raw gateway guard: HTML awal WooCommerce berisi kartu gateway
   lengkap sebelum shop.js membuat .qs-paybtn. Tutup markup mentah sejak paint
   pertama; selector v2 membuka UI final lewat .qs-dv2-payment-ready. */
.woocommerce-checkout .woocommerce-checkout-payment:not(.qs-dv2-payment-ready) > ul.wc_payment_methods {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	opacity: 0;
	white-space: nowrap;
	animation: qs-dv2-raw-failsafe-show 0s 6s forwards;
}
.woocommerce-checkout .woocommerce-checkout-payment:not(.qs-dv2-payment-ready)::before {
	content: "Menyiapkan metode pembayaran…";
	display: flex;
	min-height: 58px;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #fff;
	color: #64748b;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	animation: qs-dv2-raw-failsafe-hide 0s 6s forwards;
}
.woocommerce-checkout .woocommerce-checkout-payment.qs-dv2-payment-ready::before {
	display: none;
}
@keyframes qs-dv2-raw-failsafe-show {
	to {
		position: static;
		overflow: visible;
		width: auto;
		height: auto;
		margin: 0;
		clip: auto;
		clip-path: none;
		opacity: 1;
		white-space: normal;
	}
}
@keyframes qs-dv2-raw-failsafe-hide { to { display: none; opacity: 0; min-height: 0; padding: 0; border-width: 0; } }