/* [17 Okt 2026] Gaya popup SweetAlert2 (v7.21) selaras desain v2 DEX, untuk SEMUA popup swal di situs.
   Dimuat dari layout.main / layout.main-dashboard(-en). Hanya tampilan: tidak mengubah perilaku tombol/promise.
   Aturan lama di layout.main (body.darkmode-page .swal2-*) tetap ada; selektor di sini sedikit lebih spesifik. */

html body .swal2-container { padding: 16px; }
html body .swal2-container.swal2-shown { background: rgba(8, 15, 35, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

html body .swal2-popup {
	--sd-kartu: #ffffff;
	--sd-teks: #0f172a;
	--sd-teks-2: #475569;
	--sd-garis: #e2e8f0;
	--sd-lembut: #f1f5f9;
	--sd-aksen: #2563eb;
	width: min(440px, 100%) !important;
	padding: 28px 26px 22px !important;
	border-radius: 20px !important;
	background: var(--sd-kartu) !important;
	color: var(--sd-teks);
	box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .35);
	font-family: 'Plus Jakarta Sans', 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
html body.darkmode-page .swal2-popup {
	--sd-kartu: #0f1b30;
	--sd-teks: #f1f5f9;
	--sd-teks-2: #94a3b8;
	--sd-garis: rgba(255, 255, 255, .1);
	--sd-lembut: rgba(255, 255, 255, .05);
	--sd-aksen: #60a5fa;
	background: var(--sd-kartu) !important;
	color: var(--sd-teks);
	border: 1px solid var(--sd-garis);
}

/* animasi masuk yang lebih halus (menggantikan pop bawaan) */
html body .swal2-popup.swal2-show { animation: sd-masuk .22s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes sd-masuk { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html body .swal2-popup.swal2-show { animation: none; } }

/* ikon: lingkaran lembut, lebih kecil */
html body .swal2-popup .swal2-icon {
	width: 64px !important; height: 64px !important; margin: 0 auto 14px !important;
	border-width: 3px !important; transform: scale(.9);
}
html body .swal2-popup .swal2-icon.swal2-warning { border-color: #fbbf24 !important; color: #f59e0b !important; background: #fffbeb; }
html body .swal2-popup .swal2-icon.swal2-info { border-color: #93c5fd !important; color: #2563eb !important; background: #eff6ff; }
html body .swal2-popup .swal2-icon.swal2-error { border-color: #fca5a5 !important; background: #fef2f2; }
html body .swal2-popup .swal2-icon.swal2-question { border-color: #c4b5fd !important; color: #7c3aed !important; background: #f5f3ff; }
html body.darkmode-page .swal2-popup .swal2-icon.swal2-warning { background: rgba(245, 158, 11, .12); }
html body.darkmode-page .swal2-popup .swal2-icon.swal2-info { background: rgba(37, 99, 235, .14); }
html body.darkmode-page .swal2-popup .swal2-icon.swal2-error { background: rgba(239, 68, 68, .12); }
html body .swal2-popup .swal2-icon .swal2-icon-text { font-size: 2.6em; }
html body .swal2-popup .swal2-icon.swal2-success [class^='swal2-success-circular-line'],
html body .swal2-popup .swal2-icon.swal2-success .swal2-success-fix { background: var(--sd-kartu) !important; }

html body .swal2-popup .swal2-title {
	font-size: 20px !important; font-weight: 800 !important; line-height: 1.3; letter-spacing: -.01em;
	color: var(--sd-teks) !important; margin: 0 0 8px !important;
}
html body .swal2-popup .swal2-content {
	font-size: 14.5px !important; line-height: 1.6; color: var(--sd-teks-2) !important; text-align: center;
}

/* tombol */
html body .swal2-popup .swal2-actions { margin-top: 20px !important; gap: 10px; flex-wrap: wrap; }
html body .swal2-popup .swal2-styled {
	margin: 0 !important; min-width: 120px; height: 44px; padding: 0 20px !important;
	border-radius: 12px !important; font-weight: 700 !important; font-size: 14.5px !important;
	box-shadow: none !important; transition: transform .12s ease, filter .12s ease;
}
html body .swal2-popup .swal2-styled:hover { transform: translateY(-1px); filter: brightness(1.05); }
html body .swal2-popup .swal2-styled:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, .3) !important; }
html body .swal2-popup .swal2-styled.swal2-confirm { background: #2563eb !important; border: 0 !important; color: #fff !important; }
html body .swal2-popup .swal2-styled.swal2-cancel {
	background: transparent !important; border: 1px solid var(--sd-garis) !important; color: var(--sd-teks) !important;
}
@media (max-width: 480px) {
	html body .swal2-popup { padding: 24px 18px 18px !important; }
	html body .swal2-popup .swal2-actions { flex-direction: column-reverse; align-items: stretch; }
	html body .swal2-popup .swal2-styled { width: 100%; }
}

/* ---------- isi kaya (dibuat assets/js/swal-dex.js), kelas sd-* ---------- */
html body .swal2-popup .sd-lencana {
	display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
	background: var(--sd-lembut); color: var(--sd-teks); font-size: 12.5px; font-weight: 700; margin-bottom: 12px;
}
html body .swal2-popup .sd-lencana img { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; }
html body .swal2-popup .sd-pesan { margin: 0 auto 14px; max-width: 360px; }
html body .swal2-popup .sd-server {
	display: block; margin: 0 auto 14px; max-width: 360px; padding: 8px 12px; border-radius: 10px;
	background: var(--sd-lembut); color: var(--sd-teks-2); font-size: 12.5px;
}
html body .swal2-popup .sd-langkah { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; }
html body .swal2-popup .sd-langkah li {
	display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px;
	border: 1px solid var(--sd-garis); font-size: 13.5px; line-height: 1.5; color: var(--sd-teks);
}
html body .swal2-popup .sd-langkah li b { display: block; }
html body .swal2-popup .sd-langkah li small { color: var(--sd-teks-2); font-size: 12.5px; }
html body .swal2-popup .sd-nomor {
	flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
	background: #eff6ff; color: #2563eb; font-size: 12px; font-weight: 800;
}
html body.darkmode-page .swal2-popup .sd-nomor { background: rgba(37, 99, 235, .18); color: #93c5fd; }
html body .swal2-popup .sd-batas { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0 12px; }
html body .swal2-popup .sd-batas span {
	display: inline-flex; flex-direction: column; align-items: center; min-width: 120px; padding: 8px 12px; border-radius: 12px;
	border: 1px solid var(--sd-garis); font-size: 12px; color: var(--sd-teks-2);
}
html body .swal2-popup .sd-batas b { font-size: 15px; color: var(--sd-teks); font-variant-numeric: tabular-nums; }
html body .swal2-popup .sd-bantuan { margin-top: 14px; font-size: 12.5px; color: var(--sd-teks-2); }
html body .swal2-popup .sd-bantuan a { color: var(--sd-aksen); font-weight: 700; }