/* ===== DonasiPro Single Campaign Page ===== */

.donasipro-single-wrapper {
	background: #eef1f5;
	padding: 30px 0;
}

.donasipro-single-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 24px;
	align-items: start;
}

@media (max-width: 900px) {
	.donasipro-single-container {
		grid-template-columns: 1fr;
		padding: 0; /* full-bleed, tidak ada gap abu-abu di kiri-kanan */
	}
	/* Sidebar TIDAK disembunyikan seluruhnya.
	   Sebelumnya seluruh <aside> di-display:none dengan alasan "ringkasan
	   donasi sudah ada di .donasipro-mobile-summary". Yang terlewat:
	   mobile-summary HANYA menduplikasi ringkasan donasi & widget
	   fundraiser — dua kartu lain di sidebar (widget kustom dan "Aamiin
	   untuk Doa Terbaik Donatur") tidak punya penggantinya, jadi hilang
	   sama sekali di HP.

	   Sekarang sidebarnya tetap tampil, dan hanya DUA kartu yang memang
	   terduplikasi yang disembunyikan. */
	.donasipro-single-sidebar {
		display: block;
		position: static; /* batalkan sticky — tidak relevan di satu kolom */
		padding: 0 16px 8px;
	}

	.donasipro-single-sidebar .donasipro-donation-summary-card,
	.donasipro-single-sidebar .donasipro-fundraiser-widget {
		display: none; /* sudah tampil lewat .donasipro-mobile-summary di atas */
	}

	/* Padding sidebar dibuat nol saat semua kartunya tersembunyi, supaya
	   tidak menyisakan ruang kosong di dasar halaman.

	   Tidak memakai :has() — dukungannya baru merata di peramban 2023+,
	   dan halaman donasi ini banyak dibuka lewat in-app browser WhatsApp
	   yang sering tertinggal versinya. Cukup andalkan padding yang
	   mengempis sendiri karena semua anaknya display:none. */
	.donasipro-single-sidebar {
		padding-top: 0;
	}
	.donasipro-single-main {
		border-radius: 0;
		box-shadow: none; /* hilangkan bingkai/shadow kartu di mobile */
	}
	.donasipro-single-wrapper {
		background: #fff; /* samakan dengan warna card, biar tidak ada gap warna kelihatan */
		padding-top: 0;
	}
}

.donasipro-single-main,
.donasipro-sidebar-card {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.donasipro-single-main {
	padding: 0 0 24px;
	overflow: hidden;
}

.donasipro-hero-image {
	line-height: 0;
}

.donasipro-hero-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: top center;
	display: block;
}

.donasipro-hero-placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, var(--donasipro-primary-color, #16a34a) 0%, #15803d 100%);
}

.donasipro-title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin: 20px 24px 16px;
}

.donasipro-share-btn {
	background: #f3f4f6 !important;
	color: #374151 !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 8px 16px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	opacity: 1 !important;
	box-shadow: none !important;
}

.donasipro-share-btn:hover {
	background: #e5e7eb;
}

.donasipro-single-title {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 6px;
	line-height: 1.3;
}

.donasipro-single-location {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #6b7280;
	font-size: 14px;
	margin: 0;
}

.donasipro-single-categories {
	margin-bottom: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.donasipro-category-tag {
	display: inline-block;
	background: #f0fdf4;
	color: var(--donasipro-primary-color, #16a34a);
	border: 1px solid #bbf7d0;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.donasipro-mobile-summary {
	display: none;
	margin: 0 0 20px;
	padding: 0 24px;
}

@media (max-width: 900px) {
	.donasipro-mobile-summary { display: block; }
}

.donasipro-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid #e5e7eb;
	margin: 0 24px;
	overflow-x: auto;
}

.donasipro-tab-btn {
	flex: 1 1 0; /* tiap tombol dapat porsi SAMA RATA, memenuhi lebar penuh kiri-kanan (bukan cuma numpuk rapat di kiri). */
	text-align: center;
}

.donasipro-tab-btn {
	background: none !important;
	border: none;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 600;
	color: #6b7280 !important;
	cursor: pointer;
	border-bottom: 3px solid transparent;
	white-space: nowrap;
	text-shadow: none !important;
	border-radius: 6px 6px 0 0;
	transition: background 0.15s ease, color 0.15s ease;
}

.donasipro-tab-btn:hover {
	background: var(--donasipro-primary-color, #16a34a) !important;
	color: #ffffff !important;
}

.donasipro-tab-btn.active {
	color: var(--donasipro-primary-color, #16a34a) !important;
	border-bottom-color: var(--donasipro-primary-color, #16a34a);
}

.donasipro-tab-btn.active:hover {
	background: var(--donasipro-primary-color, #16a34a) !important;
	color: #ffffff !important;
}

.donasipro-tab-panel {
	display: none;
	padding: 20px 24px 0;
}

.donasipro-tab-panel.active {
	display: block;
}

.donasipro-single-content {
	font-size: 15px;
	line-height: 1.7;
	color: #374151;
}

.donasipro-single-content img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

.donasipro-empty-state {
	color: #9ca3af;
	font-size: 14px;
	padding: 20px 0;
}

/* Kabar Terbaru — gaya timeline RINGKAS (garis vertikal + titik penanda),
   tiap item cuma thumbnail kecil + judul + tanggal, klik untuk buka
   modal berisi detail lengkap (gambar besar + isi teks penuh). */
.donasipro-update-timeline {
	position: relative;
	padding-left: 28px;
}

.donasipro-update-timeline::before {
	content: '';
	position: absolute;
	left: 5px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: color-mix(in srgb, var(--donasipro-primary-color, #16a34a) 30%, #fff);
}

.donasipro-update-timeline-item {
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 10px;
	padding: 0;
	background: none !important;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
}

.donasipro-update-timeline-item:last-child {
	margin-bottom: 0;
}

.donasipro-update-timeline-dot {
	position: absolute;
	left: -28px;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--donasipro-primary-color, #16a34a) !important;
	border: 3px solid color-mix(in srgb, var(--donasipro-primary-color, #16a34a) 20%, #fff);
}

.donasipro-update-timeline-content {
	display: flex !important;
	align-items: center;
	gap: 14px;
	background: #fff !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 10px;
	padding: 10px;
	transition: background 0.15s ease;
}

.donasipro-update-timeline-item:hover .donasipro-update-timeline-content {
	background: color-mix(in srgb, var(--donasipro-primary-color, #16a34a) 6%, #fff) !important;
}

.donasipro-update-timeline-thumb {
	flex: 0 0 45%; /* minimal separuh lebar kartu, sesuai permintaan -- bukan lagi ikon kecil. */
	width: 45%;
	height: 90px;
	border-radius: 8px;
	object-fit: cover;
	display: block;
}

.donasipro-update-timeline-thumb-placeholder {
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--donasipro-primary-color, #16a34a) 10%, #fff) !important;
	font-size: 32px;
}

.donasipro-update-timeline-heading {
	flex: 1;
	min-width: 0;
}

.donasipro-update-timeline-heading h4 {
	margin: 0 !important;
	font-size: 14px !important;
	color: #111827 !important;
	white-space: normal; /* judul boleh turun ke baris berikutnya kalau panjang, TIDAK dipotong "..." lagi. */
	line-height: 1.3;
}

.donasipro-update-date {
	color: #9ca3af !important;
	font-size: 12px !important;
	white-space: nowrap;
}

.donasipro-update-timeline-arrow {
	color: #9ca3af !important;
	font-size: 20px !important;
	flex-shrink: 0;
}

/* Modal detail Kabar Terbaru — reuse .donasipro-modal-overlay/.donasipro-modal-box
   yang sudah ada (form donasi), cuma override khusus supaya gambar bisa
   full-bleed di bagian atas modal (padding bawaan .donasipro-modal-box
   dilewati khusus untuk gambar, sama seperti pola di halaman Lead Magnet). */
.donasipro-update-modal-box {
	padding: 0 0 24px !important;
	overflow: hidden;
	max-width: 480px !important;
}

.donasipro-update-modal-box .donasipro-modal-close {
	background: rgba(0, 0, 0, 0.5) !important;
	color: #fff !important;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 12px !important;
	right: 12px !important;
}

.donasipro-update-modal-image {
	width: 100%;
	max-height: 280px;
	object-fit: cover;
	display: block;
}

.donasipro-update-modal-body {
	padding: 18px 24px 0;
}

.donasipro-update-modal-body h3 {
	margin: 4px 0 10px !important;
	font-size: 17px !important;
	color: #111827 !important;
}

.donasipro-update-modal-body p {
	margin: 0 !important;
	font-size: 14px !important;
	color: #4b5563 !important;
	line-height: 1.6;
}

.donasipro-update-timeline-body p {
	margin: 0 !important;
	font-size: 14px !important;
	color: #4b5563 !important;
	line-height: 1.6;
}

/* Donatur full list */
.donasipro-donor-full-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.donasipro-donor-full-list li {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px dashed #e5e7eb;
}

.donasipro-donor-avatar {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--donasipro-primary-color, #16a34a);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
}

.donasipro-donor-info {
	font-size: 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.donasipro-donor-info span {
	color: #9ca3af;
	font-size: 12px;
}

.donasipro-donor-info em {
	color: #6b7280;
	font-size: 13px;
}

/* ===== Sidebar ===== */
.donasipro-sidebar-sticky {
	position: sticky;
	top: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.donasipro-sidebar-card {
	padding: 20px;
}

.donasipro-sidebar-heading {
	margin: 0 0 12px;
	font-size: 14px;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.donasipro-summary-amount {
	font-size: 20px;
	font-weight: 700;
	color: #111827;
}

.donasipro-summary-amount-label {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: #9ca3af;
	margin-top: 2px;
}

.donasipro-summary-target {
	font-size: 13px;
	color: #6b7280;
	margin-top: 6px;
}

.donasipro-summary-meta {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: #6b7280;
	margin: 10px 0 16px;
}

.donasipro-open-modal-btn {
	width: 100%;
	text-align: center;
}

.donasipro-fundraiser-info {
	display: flex;
	align-items: center;
	gap: 12px;
}

.donasipro-fundraiser-logo {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}

.donasipro-fundraiser-logo-placeholder {
	background: var(--donasipro-primary-color, #16a34a);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

.donasipro-verified-badge {
	display: block;
	font-size: 12px;
	color: #2563eb;
	margin-top: 2px;
}

.donasipro-widget-card {
	text-align: center;
	background: #f0fdf4;
}

.donasipro-widget-icon {
	color: var(--donasipro-primary-color, #16a34a);
	margin-bottom: 8px;
}

.donasipro-widget-card h4 {
	font-size: 14px;
	margin: 0 0 6px;
}

.donasipro-widget-card p {
	font-size: 13px;
	color: #6b7280;
	margin: 0;
}

/* ===== Widget Aamiin untuk Doa Terbaik Donatur ===== */
.donasipro-aamiin-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.donasipro-aamiin-list li {
	padding: 12px 0;
	border-bottom: 1px dashed #e5e7eb;
}

.donasipro-aamiin-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.donasipro-aamiin-donor strong {
	font-size: 13px;
	color: #111827;
}

.donasipro-aamiin-donor p {
	font-size: 13px;
	color: #6b7280;
	margin: 4px 0 8px;
	font-style: italic;
	line-height: 1.4;
}

.donasipro-aamiin-btn {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: var(--donasipro-primary-color, #16a34a);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.donasipro-aamiin-btn:hover {
	background: #dcfce7;
}

.donasipro-aamiin-btn:disabled {
	opacity: 0.7;
	cursor: default;
}

.donasipro-aamiin-btn.clicked {
	background: var(--donasipro-primary-color, #16a34a);
	color: #fff;
	border-color: var(--donasipro-primary-color, #16a34a);
}

/* ===== Popup Social Proof ===== */
.donasipro-social-proof-popup {
	position: fixed;
	left: 16px;
	top: 16px;
	max-width: 320px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.15);
	padding: 12px 26px 12px 12px;
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 9998;
	animation: donasipro-social-proof-slide-in 0.4s ease;
}
.donasipro-social-proof-link {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
	text-decoration: none !important;
	color: inherit !important;
}
.donasipro-social-proof-popup.hiding {
	animation: donasipro-social-proof-slide-out 0.4s ease forwards;
}

@keyframes donasipro-social-proof-slide-in {
	from { transform: translateY(-20px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

@keyframes donasipro-social-proof-slide-out {
	from { transform: translateY(0); opacity: 1; }
	to   { transform: translateY(-20px); opacity: 0; }
}

.donasipro-social-proof-thumb {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
}

.donasipro-social-proof-text {
	font-size: 12.5px;
	line-height: 1.4;
	color: #374151;
}

.donasipro-social-proof-text strong {
	color: #111827;
}

.donasipro-social-proof-text .donasipro-social-proof-campaign {
	font-weight: 600;
	color: var(--donasipro-primary-color, #16a34a);
}

.donasipro-social-proof-time {
	display: block;
	color: #9ca3af;
	font-size: 11px;
	margin-top: 2px;
}

.donasipro-social-proof-close {
	position: absolute;
	top: 6px;
	right: 8px;
	background: none;
	border: none;
	color: #9ca3af;
	font-size: 16px;
	cursor: pointer;
	line-height: 1;
}

/* Default (desktop/tablet): tampilkan label lengkap, sembunyikan versi
   singkat. HARUS ditulis SEBELUM media query di bawah -- kalau setelah,
   aturan "default" ini (karena sama-sama !important & spesifisitas
   sama) akan MENANG melawan override di dalam media query akibat
   urutan sumber (source order), bikin label singkat tidak pernah
   kelihatan sama sekali walau layarnya sempit. Ini bug nyata yang
   sempat ketahuan lewat pengujian sebelum rilis.*/
.donasipro-tab-label-short {
	display: none !important;
}

@media (max-width: 480px) {
	.donasipro-social-proof-popup {
		left: 10px;
		right: 10px;
		top: 10px;
		max-width: none;
	}

	/* Tab jadi lebih rapat di layar sempit supaya SEMUA tab (termasuk
	   Fundraiser yang baru ditambahkan) muat tanpa donatur perlu sadar
	   harus geser horizontal dulu -- sebelumnya tab ke-4 bisa
	   ke-scroll-off-screen tanpa indikasi apapun kalau masih ada tab
	   lain di sebelah kanan. */
	.donasipro-tabs {
		margin: 0 12px;
		gap: 0;
	}
	.donasipro-tab-btn {
		padding: 10px 6px;
		font-size: 11.5px;
	}
	.donasipro-tab-label-full {
		display: none !important;
	}
	.donasipro-tab-label-short {
		display: inline !important;
	}
}

/* ===== Modal Form Donasi ===== */
.donasipro-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(17, 24, 39, 0.6);
	display: none;
	align-items: flex-start;
	justify-content: center;
	overflow-y: auto;
	z-index: 9999;
	padding: 40px 16px;
}

.donasipro-modal-overlay.open {
	display: flex;
}

.donasipro-modal-box {
	background: #fff;
	border-radius: 14px;
	max-width: 500px;
	width: 100%;
	padding: 30px 24px 24px;
	position: relative;
}

.donasipro-modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #9ca3af;
}

.donasipro-modal-box .donasipro-campaign-wrapper {
	margin: 0;
}

.donasipro-modal-box .donasipro-donation-form {
	border: none;
	padding: 0;
}

/* ===== Sticky CTA (muncul saat scroll ke bawah, hilang saat scroll ke atas) ===== */
.donasipro-sticky-cta {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	top: auto !important;
	background: #fff;
	box-shadow: 0 -2px 12px rgba(0,0,0,0.12);
	padding: 12px 16px;
	z-index: 999999 !important;
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

/* Di desktop, sidebar donasi selalu kelihatan (sticky di kanan), jadi
   tombol sticky bottom ini cuma perlu tampil di mobile (sidebar disembunyikan). */
@media (min-width: 901px) {
	.donasipro-sticky-cta {
		display: none !important;
	}
}

.donasipro-sticky-cta.show {
	transform: translateY(0);
}

/* Tombol sticky ini position:fixed, jadi dia MELAYANG di atas konten dan
   tidak ikut menambah tinggi halaman. Akibatnya elemen paling bawah
   (footer "Supported by", tombol terakhir di tab Fundraiser) tertutup
   permanen saat tombol muncul. Ruang di dasar halaman disediakan lewat
   padding-bottom di wrapper — hanya di mobile, karena di desktop tombol
   ini memang disembunyikan. */
@media (max-width: 900px) {
	.donasipro-single-wrapper {
		padding-bottom: 90px;
	}
}

.donasipro-sticky-cta .donasipro-btn {
	display: block;
	width: 100%;
	text-align: center;
	max-width: 500px;
	margin: 0 auto;
}

/* Tombol "Daftar Jadi Fundraiser" di atas daftar fundraiser (tab Fundraiser halaman campaign) */
.donasipro-fundraiser-register-cta {
	display: block !important;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	background: var(--donasipro-primary-color, #16a34a) !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	text-decoration: none !important;
	padding: 12px 20px;
	border-radius: 8px;
	margin-bottom: 16px;
}