/*
 * Donasi dan kalkulator zakat (Hari 8 dan 9): kotak bertab, isi Tunaikan,
 * kalkulator, popup Donasi dan Konfirmasi. HP lebih dulu.
 * Tombol dan isian memakai kelas sistem desain. Tombol bawaan dalam kotak
 * diberi awalan kelas ganda supaya menang dari gaya tombol Kit Elementor.
 */

/* ---------- Kotak bertab ---------- */

.lz-donasi {
	scroll-margin-top: 100px; overflow: hidden; border: 1px solid var(--lz-garis); border-radius: var(--lz-sudut-besar);
	background: #fff; box-shadow: var(--lz-bayangan); font-family: var(--lz-fon); color: var(--lz-teks);
}
.lz-donasi__tab { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--lz-garis); }
.lz-donasi.lz-donasi .lz-donasi__tab button {
	min-height: 52px; padding: 0 12px; border: 0; border-radius: 0; background: var(--lz-latar-abu);
	font-family: var(--lz-fon); font-size: var(--lz-teks-dasar); font-weight: var(--lz-tebal-tebal); color: var(--lz-teks-redup); cursor: pointer;
}
.lz-donasi.lz-donasi .lz-donasi__tab button:hover, .lz-donasi.lz-donasi .lz-donasi__tab button:focus { background: var(--lz-hijau-muda); color: var(--lz-hijau-tua); }
.lz-donasi.lz-donasi .lz-donasi__tab button[aria-selected="true"] { background: #fff; color: var(--lz-hijau); box-shadow: inset 0 -3px 0 var(--lz-emas); }
.lz-donasi__tab button:focus-visible { outline: 3px solid var(--lz-fokus); outline-offset: -3px; }
.lz-donasi__isi { padding: var(--lz-jarak-5); }

/* ---------- Bagian bersama: pilihan, isian rupiah, catatan ---------- */

.lz-bayar fieldset, .lz-kalkulator fieldset { min-width: 0; margin: 0 0 var(--lz-jarak-4); padding: 0; border: 0; }
.lz-bayar legend, .lz-kalkulator legend { padding: 0; }
.lz-bayar .lz-pilihan button[type="button"], .lz-kalkulator .lz-pilihan button[type="button"] { line-height: 1.2; }

/* Isian dengan awalan "Rp" atau satuan (gram, jiwa) di dalamnya */
.lz-rp { position: relative; margin-bottom: var(--lz-jarak-4); }
.lz-rp span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: var(--lz-tebal-tebal); color: var(--lz-teks-redup); pointer-events: none; }
.lz-rp .lz-isian.lz-isian { padding-left: 44px; font-weight: var(--lz-tebal-tebal); }
.lz-rp--satuan span { left: auto; right: 14px; font-weight: var(--lz-tebal-sedang); }
.lz-rp--satuan .lz-isian.lz-isian { padding-left: 14px; padding-right: 64px; }

.lz-catatan { margin: var(--lz-jarak-3) 0 0; font-size: var(--lz-teks-mini); color: var(--lz-teks-redup); }

/* ---------- Isi Tunaikan ---------- */

.lz-bayar__rekening { margin-top: var(--lz-jarak-4); padding: var(--lz-jarak-4); border-radius: var(--lz-sudut); background: var(--lz-hijau-muda); }
.lz-bayar__rekening p { margin: 0; }
.lz-bayar__bank, .lz-bayar__an { font-size: var(--lz-teks-kecil); color: var(--lz-teks-redup); }
.lz-bayar__baris { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lz-jarak-3); margin: 4px 0; }
.lz-bayar__nomor { font-size: 22px; font-weight: var(--lz-tebal-judul); letter-spacing: .04em; color: var(--lz-hijau-tua); }
.lz-bayar__an b { color: var(--lz-teks); }
.lz-bayar__langkah { margin: var(--lz-jarak-3) 0; padding-left: 20px; font-size: 15px; color: var(--lz-teks-redup); }

/* ---------- Kalkulator ---------- */

.lz-kalkulator__opsi { font-weight: var(--lz-tebal-biasa); color: var(--lz-teks-redup); }
.lz-kalkulator__ket { margin: 0 0 var(--lz-jarak-4); font-size: var(--lz-teks-kecil); color: var(--lz-teks-redup); }
.lz-kalkulator__hasil { margin-bottom: var(--lz-jarak-4); padding: 14px 16px; border-radius: 12px; background: var(--lz-emas-muda); }
.lz-kalkulator__hasil p { margin: 0; }
.lz-kalkulator__judul-hasil { font-size: var(--lz-teks-kecil); font-weight: var(--lz-tebal-sedang); color: var(--lz-teks-redup); }
.lz-kalkulator__jumlah { font-size: 28px; font-weight: var(--lz-tebal-judul); line-height: 1.25; color: var(--lz-hijau-tua); }
.lz-kalkulator__rincian { font-size: var(--lz-teks-kecil); color: var(--lz-teks); }
.lz-kalkulator__hasil--bawah { background: var(--lz-latar-abu); }
.lz-kalkulator__hasil--bawah .lz-kalkulator__jumlah { color: var(--lz-teks-redup); }

/* ---------- Popup ---------- */

/* HP: muncul dari bawah selebar layar. Layar lebar: kotak di tengah. */
.lz-dialog {
	width: 100%; max-width: 100%; max-height: 92vh; max-height: 92dvh; margin: auto 0 0; padding: 0;
	border: 0; border-radius: var(--lz-sudut-besar) var(--lz-sudut-besar) 0 0; background: #fff;
	color: var(--lz-teks); font-family: var(--lz-fon); box-shadow: var(--lz-bayangan); overflow: auto; overscroll-behavior: contain;
}
.lz-dialog::backdrop { background: rgba(7, 63, 38, .45); }
.lz-dialog[open] { animation: lz-dialog-naik .2s ease-out; }
@keyframes lz-dialog-naik { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.lz-dialog[open] { animation: none; }
}
html.lz-dialog-terbuka { overflow: hidden; }

.lz-dialog__kepala {
	position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--lz-jarak-3);
	padding: var(--lz-jarak-3) var(--lz-jarak-3) var(--lz-jarak-3) var(--lz-jarak-5); border-bottom: 1px solid var(--lz-garis); background: #fff;
}
.lz-dialog__judul.lz-dialog__judul { margin: 0; font-family: var(--lz-fon); font-size: var(--lz-teks-h3); font-weight: var(--lz-tebal-tebal); line-height: 1.3; color: var(--lz-teks); }
.lz-dialog .lz-dialog__tutup.lz-dialog__tutup {
	display: grid; place-items: center; flex: none; width: var(--lz-sentuh); height: var(--lz-sentuh); padding: 0;
	border: 0; border-radius: var(--lz-sudut-kecil); background: var(--lz-latar-abu); color: var(--lz-teks); cursor: pointer;
}
.lz-dialog .lz-dialog__tutup.lz-dialog__tutup:hover, .lz-dialog .lz-dialog__tutup.lz-dialog__tutup:focus { background: var(--lz-hijau-muda); color: var(--lz-hijau-tua); }
.lz-dialog__tutup:focus-visible { outline: 3px solid var(--lz-fokus); outline-offset: 2px; }
.lz-dialog__tutup svg { width: 22px; height: 22px; }
.lz-dialog__isi { padding: var(--lz-jarak-5) var(--lz-jarak-5) calc(var(--lz-jarak-6) + env(safe-area-inset-bottom)); }
.lz-dialog__alih { margin: var(--lz-jarak-4) 0 0; font-size: 15px; text-align: center; color: var(--lz-teks-redup); }
.lz-dialog__alih a { display: inline-flex; align-items: center; min-height: var(--lz-sentuh); font-weight: var(--lz-tebal-tebal); color: var(--lz-hijau); }

.lz-konfirmasi__pengantar { margin: 0 0 var(--lz-jarak-4); font-size: 15px; color: var(--lz-teks-redup); }
.lz-konfirmasi .lz-isian { margin-bottom: var(--lz-jarak-4); font-size: var(--lz-teks-dasar); }
.lz-konfirmasi .lz-rp .lz-isian { margin-bottom: 0; }
.lz-konfirmasi select.lz-isian { appearance: auto; }

@media (min-width: 768px) {
	.lz-dialog {
		width: calc(100% - 48px); max-width: 520px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
		margin: auto; border-radius: var(--lz-sudut-besar);
	}
}

/* ---------- Daftar rekening [laznas_daftar_rekening] ---------- */

/* Mengikuti poster rekening lembaga: pita hijau berisi nama dana, ruang putih
   berisi logo bank dan nomor. */
.lz-rekening { display: grid; gap: var(--lz-jarak-4); margin: 0; padding: 0; list-style: none; font-family: var(--lz-fon); }
.lz-rekening__kartu { display: flex; flex-direction: column; padding: var(--lz-jarak-2); border: 1px solid var(--lz-garis); border-radius: var(--lz-sudut-besar); background: #fff; box-shadow: var(--lz-bayangan-kecil); }
.lz-rekening__nama.lz-rekening__nama { margin: 0; padding: var(--lz-jarak-3) var(--lz-jarak-4); border-radius: var(--lz-sudut-bulat); background: linear-gradient(90deg, var(--lz-hijau-tua), var(--lz-hijau)); font-family: var(--lz-fon); font-size: 17px; font-weight: var(--lz-tebal-tebal); line-height: 1.3; text-align: center; color: #fff; }
.lz-rekening__isi { display: flex; flex: 1; flex-direction: column; padding: var(--lz-jarak-3) var(--lz-jarak-2) 0; }
.lz-rekening__baris { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lz-jarak-2); padding: var(--lz-jarak-2) 0; }
.lz-rekening__baris + .lz-rekening__baris { border-top: 1px solid var(--lz-garis); }
.lz-rekening__logo { flex: none; display: block; width: 72px; height: auto; }
.lz-rekening__bank { flex: none; font-size: var(--lz-teks-kecil); font-weight: var(--lz-tebal-tebal); color: var(--lz-teks-redup); }
.lz-rekening__info { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.lz-rekening__nomor { font-size: 20px; font-weight: var(--lz-tebal-judul); line-height: 1.25; letter-spacing: .02em; color: var(--lz-teks); font-variant-numeric: tabular-nums; }
.lz-rekening__an { font-size: var(--lz-teks-mini); color: var(--lz-teks-redup); }
.lz-rekening__salin.lz-rekening__salin { flex: none; margin-left: auto; padding: 0 12px; }
.lz-rekening__tunaikan { display: inline-flex; align-self: flex-start; align-items: center; min-height: var(--lz-sentuh); margin-top: auto; font-size: var(--lz-teks-kecil); font-weight: var(--lz-tebal-tebal); color: var(--lz-hijau); text-decoration: none; }
.lz-rekening__tunaikan:hover { color: var(--lz-hijau-tua); text-decoration: underline; }

@media (min-width: 768px) {
	.lz-rekening { grid-template-columns: repeat(2, 1fr); gap: var(--lz-jarak-6); }
	.lz-rekening__nama.lz-rekening__nama { font-size: var(--lz-teks-h3); }
	.lz-rekening__logo { width: 96px; }
	.lz-rekening__nomor { font-size: 24px; }
}