/* ===== DonasiPro Frontend Styles ===== */

.donasipro-campaign-wrapper {
	max-width: 600px;
	margin: 20px 0;
	font-family: inherit;
}

.donasipro-progress-bar {
	background: #e5e7eb;
	border-radius: 999px;
	height: 14px;
	overflow: hidden;
	margin-bottom: 8px;
}

.donasipro-progress-fill {
	background: var(--donasipro-primary-color, #16a34a);
	height: 100%;
	transition: width 0.4s ease;
}

.donasipro-progress-text {
	font-size: 14px;
	color: #374151;
	margin-bottom: 16px;
}

.donasipro-bank-accounts {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 16px;
}

.donasipro-bank-accounts h4 {
	margin-top: 0;
}

.donasipro-bank-account-item {
	padding: 8px 0;
	border-bottom: 1px dashed #bbf7d0;
	font-size: 14px;
}

.donasipro-bank-account-item:last-of-type {
	border-bottom: none;
}

.donasipro-bank-number {
	font-family: monospace;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.donasipro-bank-instructions {
	font-size: 13px;
	color: #4b5563;
	margin-top: 10px;
	margin-bottom: 0;
}

/* ===== Checkout Header (dipakai saat context=checkout / di dalam modal) ===== */
.donasipro-checkout-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 14px;
	margin-bottom: 16px;
	border-bottom: 1px solid #e5e7eb;
}

.donasipro-checkout-back-btn {
	background: none;
	border: none;
	cursor: pointer;
	color: #111827;
	display: flex;
	padding: 4px;
}

.donasipro-checkout-header-title {
	font-size: 15px;
	font-weight: 600;
	color: #111827;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.donasipro-checkout-campaign-mini {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #f9fafb;
	border-radius: 10px;
	padding: 10px;
	margin-bottom: 20px;
}

.donasipro-checkout-mini-thumb {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
}

.donasipro-checkout-campaign-mini small {
	display: block;
	font-size: 11px;
	color: #9ca3af;
	margin-bottom: 2px;
}

.donasipro-checkout-campaign-mini strong {
	font-size: 14px;
	color: #111827;
	line-height: 1.3;
}

/* ===== Nominal Grid ===== */
.donasipro-section-title {
	font-size: 14px;
	color: #374151;
	margin: 0 0 10px;
}

.donasipro-nominal-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 16px;
}

.donasipro-nominal-grid .donasipro-nominal-btn {
	position: relative;
	width: 100%;
	padding: 14px 8px !important;
	border: 1px solid #d1d5db !important;
	border-radius: 10px !important;
	background: #ffffff !important;
	cursor: pointer;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #111827 !important;
	text-align: center;
	opacity: 1 !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
}

.donasipro-nominal-grid .donasipro-nominal-btn.active {
	border-color: var(--donasipro-primary-color, #16a34a) !important;
	background: #f0fdf4 !important;
	color: var(--donasipro-primary-color, #16a34a) !important;
}

.donasipro-nominal-badge {
	display: block;
	font-size: 10px !important;
	font-weight: 400 !important;
	color: #9ca3af !important;
	margin-top: 2px;
}

.donasipro-nominal-custom-btn {
	border-style: dashed !important;
}

/* ===== Payment Method Box ===== */
.donasipro-payment-method-box {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 16px;
}

.donasipro-payment-method-icon {
	font-size: 20px;
}

.donasipro-payment-method-label {
	flex: 1;
	font-size: 13px;
	color: #374151;
}

.donasipro-payment-method-select {
	width: auto !important;
	padding: 6px 10px !important;
	font-size: 13px !important;
}

/* ===== Toggle Switch (Sembunyikan Nama / Orang Baik) ===== */
.donasipro-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	font-size: 13px;
	color: #374151;
}

.donasipro-switch {
	position: relative;
	display: inline-block;
	width: 42px;
	height: 24px;
	flex-shrink: 0;
}

.donasipro-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.donasipro-switch-slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background-color: #d1d5db;
	border-radius: 999px;
	transition: 0.2s;
}

.donasipro-switch-slider::before {
	content: "";
	position: absolute;
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background-color: #fff;
	border-radius: 50%;
	transition: 0.2s;
}

.donasipro-switch input:checked + .donasipro-switch-slider {
	background-color: var(--donasipro-primary-color, #16a34a);
}

.donasipro-switch input:checked + .donasipro-switch-slider::before {
	transform: translateX(18px);
}

/* ===== Submit Bar ===== */
.donasipro-checkout-submit-bar {
	margin-top: 16px;
}

.donasipro-checkout-submit-btn {
	width: 100%;
	text-align: center;
	padding: 14px;
	font-size: 15px;
}

/* ===== Modal Overlay Dasar (supaya modal jalan juga di Page biasa) ===== */
.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: 99999;
	padding: 40px 16px;
}

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

.donasipro-modal-box {
	background: #fff;
	border-radius: 14px;
	max-width: 460px;
	width: 100%;
	padding: 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;
}

/* ===== Field label generik ===== */
.donasipro-field-label {
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	margin: 0 0 6px;
}

/* ===== Payment Method Selector (tombol di form) ===== */
.donasipro-payment-method-selector,
button.donasipro-payment-method-selector {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #eff6ff !important; /* fallback browser lama tanpa color-mix() */
	background: color-mix(in srgb, var(--donasipro-primary-color, #16a34a) 8%, #fff) !important;
	border: 1px solid #bfdbfe !important; /* fallback browser lama */
	border: 1px solid color-mix(in srgb, var(--donasipro-primary-color, #16a34a) 30%, #fff) !important;
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 16px;
	cursor: pointer;
	text-align: left;
	text-shadow: none !important;
	box-shadow: none !important;
}

.donasipro-payment-method-selector.has-selection,
button.donasipro-payment-method-selector.has-selection {
	background: #f0fdf4 !important; /* fallback browser lama */
	background: color-mix(in srgb, var(--donasipro-primary-color, #16a34a) 14%, #fff) !important;
	border-color: #86efac !important; /* fallback browser lama */
	border-color: color-mix(in srgb, var(--donasipro-primary-color, #16a34a) 45%, #fff) !important;
}

.donasipro-payment-method-icon {
	font-size: 18px;
}

.donasipro-payment-method-selector .donasipro-payment-method-selected-label,
button.donasipro-payment-method-selector span.donasipro-payment-method-selected-label {
	flex: 1;
	font-size: 13px;
	color: #374151 !important;
	font-weight: 600;
}

.donasipro-payment-method-chevron {
	color: #9ca3af !important;
	font-size: 18px;
}

/* ===== Modal Pilih Metode Pembayaran ===== */
.donasipro-payment-modal-box {
	max-width: 420px;
	padding: 0 0 16px;
	overflow: hidden;
}

.donasipro-payment-modal-header {
	background: var(--donasipro-primary-color, #16a34a) !important;
	color: #fff !important;
	padding: 20px 24px;
	text-align: center;
	position: relative;
}

.donasipro-payment-modal-header h3 {
	margin: 0;
	font-size: 17px;
	color: #fff !important;
	text-shadow: none !important;
}

.donasipro-payment-modal-header .donasipro-modal-close {
	color: #fff !important;
	top: 14px;
}

.donasipro-payment-section-label {
	font-size: 12px;
	font-weight: 600;
	color: #6b7280;
	background: #f9fafb;
	padding: 10px 24px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.donasipro-payment-option {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 14px;
	background: none;
	border: none;
	border-bottom: 1px solid #f3f4f6;
	padding: 14px 24px;
	cursor: pointer;
	text-align: left;
}

.donasipro-payment-option:hover {
	background: #f9fafb;
}

.donasipro-payment-option-icon {
	width: 40px;
	height: 28px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	flex-shrink: 0;
}

.donasipro-payment-option-logo {
	width: 44px;
	height: 30px;
	object-fit: contain;
	flex-shrink: 0;
}

.donasipro-payment-icon-qris {
	background: #111827;
	color: #fff;
}

.donasipro-payment-icon-bank {
	background: #dbeafe;
	color: #1d4ed8;
	font-size: 14px;
}

.donasipro-payment-option-text {
	font-size: 14px;
	color: #111827;
	font-weight: 500;
}

/* ===== Step 2: Konfirmasi Transfer Manual ===== */
.donasipro-step2-panel {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 24px;
	margin-top: 16px;
}

.donasipro-step2-thanks,
.donasipro-step2-done {
	text-align: center;
	margin-bottom: 20px;
}

.donasipro-step2-check {
	width: 48px;
	height: 48px;
	background: var(--donasipro-primary-color, #16a34a);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin: 0 auto 12px;
}

.donasipro-step2-thanks h4,
.donasipro-step2-done h4 {
	margin: 0 0 6px;
	font-size: 17px;
}

.donasipro-step2-thanks p,
.donasipro-step2-done p {
	font-size: 14px;
	color: #6b7280;
	margin: 0;
}

.donasipro-step2-bank-box {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 12px;
}

.donasipro-step2-bank-box h5 {
	margin: 0 0 8px;
	font-size: 13px;
	color: #374151;
}

.donasipro-step2-bank-detail {
	font-size: 15px;
	color: #111827;
}

.donasipro-step2-amount {
	font-size: 14px;
	font-weight: 700;
	color: var(--donasipro-primary-color, #16a34a);
	margin: 10px 0 0;
}

.donasipro-step2-submit-btn {
	width: 100%;
	text-align: center;
}

.donasipro-step2-submit-btn {
	width: 100%;
	text-align: center;
}

/* ===== Step 2 (varian): QRIS Manual ===== */
.donasipro-qris-step2-panel {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 24px;
	margin-top: 16px;
	text-align: center;
}

.donasipro-qris-image-box {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 14px;
}

.donasipro-qris-image {
	max-width: 220px;
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.donasipro-qris-merchant-name {
	font-size: 13px;
	font-weight: 700;
	color: #374151;
	margin: 10px 0 0;
}

.donasipro-qris-steps-hint {
	font-size: 12px;
	color: #9ca3af;
	margin-bottom: 16px;
}

.donasipro-qris-amount-box {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 10px;
	padding: 14px;
	margin-bottom: 8px;
}

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

.donasipro-qris-copy-btn {
	background: var(--donasipro-primary-color, #16a34a);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.donasipro-qris-unique-hint {
	font-size: 12px;
	color: #ea580c;
	margin-bottom: 16px;
}

.donasipro-qris-expiry {
	font-size: 12px;
	color: #6b7280;
	background: #fef3c7;
	border-radius: 8px;
	padding: 8px 12px;
	margin-bottom: 16px;
	display: inline-block;
}

.donasipro-qris-confirm-admin-btn {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--donasipro-primary-color, #16a34a);
	margin-bottom: 10px;
	box-sizing: border-box;
}

.donasipro-qris-confirm-payment-btn {
	width: 100%;
	background: #111827;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 12px;
	font-weight: 600;
	cursor: pointer;
	font-size: 14px;
}

.donasipro-qris-confirm-message {
	margin-top: 10px;
	font-size: 13px;
}

.donasipro-qris-confirm-message.error { color: #dc2626; }
.donasipro-qris-confirm-message.success { color: var(--donasipro-primary-color, #16a34a); }

.donasipro-qris-confirmed-done {
	margin-top: 16px;
}

/* Context full (shortcode ditempel manual di Page) tetap pakai style form lama */
.donasipro-context-full .donasipro-donation-form {
	border: 1px solid #e5e7eb;
	padding: 20px;
}

.donasipro-context-checkout .donasipro-donation-form {
	border: none;
	padding: 0;
}

.donasipro-donation-form {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 20px;
	background: #fff;
}

.donasipro-donation-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	font-size: 14px;
}

.donasipro-donation-form input,
.donasipro-donation-form textarea,
.donasipro-donation-form select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
	box-sizing: border-box;
	outline: none;
}
/* Timpa validasi merah bawaan browser (:invalid/:required) di field kosong —
   beberapa browser otomatis kasih border merah ke field required yang masih
   kosong, itu bukan warna brand kita. */
.donasipro-donation-form input:required,
.donasipro-donation-form input:invalid,
.donasipro-donation-form input:-moz-ui-invalid,
.donasipro-donation-form select:invalid {
	border-color: #d1d5db !important;
	box-shadow: none !important;
}
.donasipro-donation-form input:focus,
.donasipro-donation-form input:focus:invalid,
.donasipro-donation-form textarea:focus,
.donasipro-donation-form select:focus {
	outline: none !important;
	border-color: var(--donasipro-primary-color, #16a34a) !important;
	box-shadow: 0 0 0 1px var(--donasipro-primary-color, #16a34a) !important;
}

.donasipro-nominal-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.donasipro-nominal-btn {
	padding: 8px 14px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #f9fafb;
	cursor: pointer;
	font-size: 13px;
}

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

.donasipro-btn,
.donasipro-submit-btn {
	display: inline-block;
	background: var(--donasipro-primary-color, #16a34a);
	color: #fff !important;
	border: none;
	padding: 12px 20px;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none !important;
	font-size: 14px;
}

.donasipro-submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.donasipro-form-message {
	margin-top: 10px;
	font-size: 14px;
}

.donasipro-form-message.error { color: #dc2626; }
.donasipro-form-message.success { color: var(--donasipro-primary-color, #16a34a); }

.donasipro-donor-list {
	margin-top: 20px;
	border-top: 1px solid #e5e7eb;
	padding-top: 16px;
}

.donasipro-donor-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.donasipro-donor-list li {
	padding: 8px 0;
	border-bottom: 1px dashed #e5e7eb;
	font-size: 14px;
}

/* ===== Campaign List Heading ===== */
.donasipro-list-heading {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 30px;
}

.donasipro-list-heading h2 {
	font-size: 24px;
	font-weight: 700;
	color: #111827;
	margin: 0 0 8px;
}

.donasipro-list-heading p {
	color: #6b7280;
	font-size: 14px;
	margin: 0;
}

/* ===== Grid (desktop) — otomatis berubah jadi list horizontal di HP =====
   Pakai flexbox (bukan CSS grid auto-fill) supaya kalau jumlah campaign
   belum penuh 1 baris, card-nya rata tengah (bukan nempel kiri dengan
   sisa ruang kosong di kanan). */
.donasipro-campaign-list.donasipro-style-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

.donasipro-campaign-list.donasipro-style-grid .donasipro-campaign-card {
	flex: 1 1 260px;
	max-width: 320px;
}

.donasipro-campaign-list.donasipro-style-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.donasipro-campaign-card {
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.donasipro-campaign-card:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
	transform: translateY(-2px);
}

.donasipro-card-image {
	position: relative;
	line-height: 0;
	background: #f3f4f6;
	overflow: hidden;
}

.donasipro-card-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: top center; /* crop dari bawah, bukan tengah — logo/judul poster biasanya di atas */
	display: block;
}

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

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

.donasipro-card-org-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	object-fit: cover;
}

.donasipro-card-body {
	padding: 14px 16px 16px;
}

.donasipro-campaign-card h3 {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 6px;
	line-height: 1.35;
	text-align: center;
}

.donasipro-campaign-card h3 a {
	color: #111827 !important;
	text-decoration: none !important;
}

.donasipro-card-org-name {
	font-size: 12px;
	color: #6b7280;
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.donasipro-card-verified-badge {
	color: #2563eb;
	font-size: 11px;
}

.donasipro-card-collected {
	font-size: 14px;
	font-weight: 700;
	color: var(--donasipro-primary-color, #16a34a);
	margin: 0 0 6px;
}

.donasipro-card-collected span {
	font-weight: 400;
	color: #9ca3af;
	font-size: 12px;
}

.donasipro-card-progress {
	margin-bottom: 6px;
	height: 6px;
}

.donasipro-card-target {
	font-size: 11px;
	color: #9ca3af;
	margin: 0 0 10px;
}

.donasipro-card-donor-avatars {
	display: flex;
	align-items: center;
	margin-bottom: 14px;
}

.donasipro-mini-avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--donasipro-primary-color, #16a34a);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff;
	margin-right: -8px;
}

.donasipro-card-donor-avatars small {
	margin-left: 12px;
	font-size: 11px;
	color: #9ca3af;
}

.donasipro-card-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

/* ===== Mobile: kartu grid otomatis jadi horizontal (gambar kiri, info kanan) ===== */
@media (max-width: 640px) {
	.donasipro-campaign-list.donasipro-style-grid {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	/* Kartu horizontal (gambar persegi di kiri, info di kanan). Pakai
	   align-items:center (bukan flex-start/stretch) supaya gambar persegi
	   sejajar rapi di tengah tinggi konten teks, bukan nempel di atas
	   dengan sisa ruang kosong menganga di bawahnya. */
	.donasipro-campaign-list.donasipro-style-grid .donasipro-campaign-card {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 14px;
	}

	/* Lebarkan kartu penuh (bukan max-width 320px seperti di desktop) —
	   supaya tidak ada ruang kosong menganga di kanan pada layar HP. */
	.donasipro-campaign-list.donasipro-style-grid .donasipro-campaign-card {
		max-width: 100%;
		width: 100%;
	}

	.donasipro-campaign-list.donasipro-style-grid .donasipro-card-image {
		width: 50%;
		flex-shrink: 0;
		align-self: center;
	}

	.donasipro-campaign-list.donasipro-style-grid .donasipro-card-image img,
	.donasipro-campaign-list.donasipro-style-grid .donasipro-card-image-placeholder {
		width: 100%;
		aspect-ratio: 1 / 1;
		border-radius: 10px;
	}

	.donasipro-campaign-list.donasipro-style-grid .donasipro-card-body {
		flex: 1;
		padding: 12px 12px 12px 0;
		min-width: 0; /* supaya judul panjang tetap wrap, tidak dorong lebar kartu */
	}

	.donasipro-campaign-list.donasipro-style-grid .donasipro-card-category-tag {
		margin-bottom: 4px;
	}

	.donasipro-campaign-list.donasipro-style-grid .donasipro-campaign-card h3 {
		font-size: 14px;
		text-align: left;
		margin-bottom: 4px;
	}

	.donasipro-campaign-list.donasipro-style-grid .donasipro-card-org-name,
	.donasipro-campaign-list.donasipro-style-grid .donasipro-card-donor-avatars {
		display: none; /* ringkas di mobile, fokus ke judul + progress + tombol */
	}

	.donasipro-campaign-list.donasipro-style-grid .donasipro-card-collected {
		font-size: 12px;
		margin-bottom: 4px;
	}

	.donasipro-campaign-list.donasipro-style-grid .donasipro-card-progress {
		margin-bottom: 4px;
	}

	.donasipro-campaign-list.donasipro-style-grid .donasipro-card-target {
		margin-bottom: 8px;
		font-size: 11px;
	}

	.donasipro-campaign-list.donasipro-style-grid .donasipro-card-btn {
		padding: 8px 14px;
		font-size: 12px;
	}

	/* ===== Varian: mobile_style="grid" — grid 2 kolom (gambar di atas,
	   teks di bawah), dipakai lewat [donasipro_list mobile_style="grid"].
	   Selector 2-class ini otomatis menang dari rule horizontal di atas
	   karena spesifisitasnya lebih tinggi. ===== */
	.donasipro-campaign-list.donasipro-style-grid.donasipro-mobile-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.donasipro-campaign-list.donasipro-mobile-grid .donasipro-campaign-card {
		display: block;
		max-width: 100%;
	}

	.donasipro-campaign-list.donasipro-mobile-grid .donasipro-card-image {
		width: 100%;
	}

	.donasipro-campaign-list.donasipro-mobile-grid .donasipro-card-image img,
	.donasipro-campaign-list.donasipro-mobile-grid .donasipro-card-image-placeholder {
		width: 100%;
		aspect-ratio: 1 / 1;
		border-radius: 0;
	}

	.donasipro-campaign-list.donasipro-mobile-grid .donasipro-card-body {
		padding: 10px 10px 12px;
	}

	.donasipro-campaign-list.donasipro-mobile-grid .donasipro-card-category-tag {
		font-size: 9px;
		padding: 2px 8px;
	}

	.donasipro-campaign-list.donasipro-mobile-grid .donasipro-campaign-card h3 {
		font-size: 13px;
		text-align: left;
		margin-bottom: 4px;
	}

	.donasipro-campaign-list.donasipro-mobile-grid .donasipro-card-org-name {
		display: block; /* tampil lagi khusus varian ini, ruangnya cukup karena full width */
		font-size: 11px;
	}

	.donasipro-campaign-list.donasipro-mobile-grid .donasipro-card-collected {
		font-size: 12px;
	}

	.donasipro-campaign-list.donasipro-mobile-grid .donasipro-card-target {
		font-size: 10px;
	}

	.donasipro-campaign-list.donasipro-mobile-grid .donasipro-card-donor-avatars {
		display: none;
	}

	.donasipro-campaign-list.donasipro-mobile-grid .donasipro-card-btn {
		width: 100%;
		box-sizing: border-box;
		padding: 8px;
		font-size: 12px;
	}
}

/* style="list" -> horizontal di SEMUA ukuran layar (bukan cuma mobile) */
.donasipro-campaign-list.donasipro-style-list .donasipro-campaign-card {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.donasipro-campaign-list.donasipro-style-list .donasipro-card-image {
	width: 160px;
	flex-shrink: 0;
}

.donasipro-campaign-list.donasipro-style-list .donasipro-card-image img,
.donasipro-campaign-list.donasipro-style-list .donasipro-card-image-placeholder {
	height: 100%;
	aspect-ratio: auto;
}

.donasipro-campaign-list.donasipro-style-list .donasipro-card-body {
	flex: 1;
}

/* ===== Fundraiser: Register / Login / Dashboard ===== */
.donasipro-fr-wrapper {
	max-width: 980px;
	margin: 20px auto;
}

.donasipro-fr-auth-card {
	max-width: 420px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 30px;
}

.donasipro-fr-auth-card h2 {
	margin: 0 0 6px;
	font-size: 22px;
}

.donasipro-fr-subtitle {
	color: #6b7280;
	font-size: 14px;
	margin: 0 0 20px;
}

.donasipro-fr-auth-card label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 4px;
}

.donasipro-fr-auth-card input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
	box-sizing: border-box;
	outline: none;
}
/* Timpa validasi merah bawaan browser (:invalid/:required) di field kosong —
   beberapa browser otomatis kasih border merah ke field required yang masih
   kosong, itu bukan warna brand kita. */
.donasipro-fr-auth-card input:required,
.donasipro-fr-auth-card input:invalid,
.donasipro-fr-auth-card input:-moz-ui-invalid {
	border-color: #d1d5db !important;
	box-shadow: none !important;
}
.donasipro-fr-auth-card input:focus,
.donasipro-fr-auth-card input:focus:invalid {
	outline: none !important;
	border-color: var(--donasipro-primary-color, #16a34a) !important;
	box-shadow: 0 0 0 1px var(--donasipro-primary-color, #16a34a) !important;
}

.donasipro-fr-submit-btn {
	width: 100%;
	text-align: center;
	margin-top: 6px;
}

.donasipro-fr-message {
	font-size: 13px;
	margin: 8px 0;
}
.donasipro-fr-message.error { color: #dc2626; }
.donasipro-fr-message.success { color: #16a34a; }

.donasipro-fr-switch {
	text-align: center;
	font-size: 13px;
	color: #6b7280;
	margin-top: 16px;
}

/* --- Dashboard --- */
.donasipro-fr-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	flex-wrap: wrap;
	gap: 10px;
}

.donasipro-fr-header-left {
	display: flex;
	align-items: center;
	gap: 14px;
}

img.donasipro-fr-avatar-img,
.donasipro-fr-wrapper img.donasipro-fr-avatar-img {
	width: 56px !important;
	height: 56px !important;
	max-width: 56px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	flex-shrink: 0;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	display: block;
}

div.donasipro-fr-avatar-placeholder {
	width: 56px !important;
	height: 56px !important;
	border-radius: 50% !important;
	background: var(--donasipro-primary-color, #16a34a);
	color: #fff !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 700;
	flex-shrink: 0;
}

.donasipro-fr-photo-preview-wrap img.donasipro-fr-photo-preview {
	width: 80px !important;
	height: 80px !important;
	max-width: 80px !important;
	font-size: 30px;
}

.donasipro-fr-photo-preview-wrap div.donasipro-fr-photo-preview {
	width: 80px !important;
	height: 80px !important;
	font-size: 30px;
}

.donasipro-fr-header h2 {
	margin: 0 0 4px;
}

.donasipro-fr-subtitle-title {
	font-size: 16px;
	font-weight: 700;
	color: #111827;
}

.donasipro-fr-logout-btn {
	background: #f3f4f6 !important;
	border: 1px solid #d1d5db !important;
	color: #374151 !important;
	padding: 8px 16px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	text-shadow: none !important;
}

.donasipro-fr-stat-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 20px;
}

/* Kartu statistik dashboard fundraiser & donatur memakai gaya yang SAMA
   dengan dashboard admin: warna aksen jadi latar pastel (bukan sekadar
   garis atas), sudut 18px, angka besar.

   Aksennya diturunkan dari --donasipro-primary-color (warna brand
   lembaga), jadi tiap lembaga otomatis dapat nuansa warnanya sendiri
   tanpa menyetel apa pun. Tiap kartu boleh menimpanya lewat --accent
   agar bisa berbeda-beda seperti di dashboard admin. */
.donasipro-fr-stat-card {
	--accent: var(--donasipro-primary-color, #16a34a);
	position: relative;
	overflow: hidden;
	background: color-mix(in srgb, var(--accent) 13%, #fff);
	border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff);
	border-radius: 18px;
	padding: 18px;
}

.donasipro-fr-stat-card::after {
	content: '';
	position: absolute;
	right: -34px;
	bottom: -46px;
	width: 116px;
	height: 116px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent) 9%, transparent);
	pointer-events: none;
}

.donasipro-fr-stat-card > * { position: relative; z-index: 1; }

.donasipro-fr-stat-label {
	font-size: 12px;
	color: #6b7280;
	font-weight: 600;
	margin-bottom: 6px;
}

.donasipro-fr-stat-value {
	/* Ukuran menyesuaikan lebar layar, bukan angka tetap.
	   Empat kartu berjajar membuat tiap kartu hanya ~200px; nominal
	   seperti "Rp5.235.000" pada 26px tidak muat dan terpaksa turun
	   baris. clamp() mengecilkannya di layar sempit dan membesarkannya
	   di layar lebar, tanpa perlu breakpoint terpisah. */
	/* Batas atas 21px, BUKAN 26px.
	   Perhitungan: kartu 4-kolom hanya menyisakan ~156px di dalamnya,
	   sedangkan "Rp5.235.000" pada 26px butuh ~166px — tidak akan pernah
	   muat berapa pun lebar layarnya, karena lebar kartu ditentukan
	   jumlah kolom, bukan lebar viewport. */
	font-size: clamp( 16px, 1.1vw + 6px, 21px );
	font-weight: 800;
	color: #111827;
	line-height: 1.2;
	letter-spacing: -.02em;

	/* JANGAN memotong di tengah angka.
	   `overflow-wrap: anywhere` sebelumnya memecah "Rp5.235.000" jadi
	   "Rp5.235.0" + "00" — nominal yang terbelah begitu sulit dibaca dan
	   sekilas terlihat seperti dua angka berbeda. Nominal lebih baik
	   mengecil daripada terpenggal. */
	overflow-wrap: normal;
	word-break: keep-all;

	/* Jaring pengaman kalau nominalnya benar-benar ekstrem: lebih baik
	   sedikit terpotong di tepi daripada merusak lebar kartu. */
	overflow: hidden;
	text-overflow: ellipsis;
}

.donasipro-fr-stat-sub {
	font-size: 11px;
	color: #9ca3af;
	margin-top: 8px;
	/* line-height dirapatkan: teks keterangan seperti "Sudah dibayar: Rp0
	   (5% dari donasi)" hampir selalu turun ke baris kedua di kartu
	   sempit, dan jarak baris longgar membuatnya terlihat renggang
	   dibanding kartu lain yang keterangannya cuma satu baris. */
	line-height: 1.4;
	overflow-wrap: break-word;
}

.donasipro-fr-panel {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 16px;
}

.donasipro-fr-panel h3 {
	margin: 0 0 4px;
	font-size: 16px;
}

.donasipro-fr-code-box {
	background: #f0fdf4;
	border: 1px dashed #86efac;
	border-radius: 8px;
	padding: 12px 16px;
	margin-top: 10px;
	text-align: center;
	/* URL biolink (mis. situs.com/kode-referral-panjang) tidak punya titik
	   putus alami, jadi tanpa ini dia mendorong lebar seluruh panel dan
	   memunculkan scroll horizontal di HP. */
	overflow-wrap: anywhere;
	word-break: break-word;
}

.donasipro-fr-code-box code {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.donasipro-fr-code-box code {
	font-size: 16px;
	font-weight: 700;
	color: #16a34a;
	letter-spacing: 1px;
}

.donasipro-fr-campaign-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 16px;
}

.donasipro-fr-campaign-item {
	display: grid;
	grid-template-columns: 110px 1fr 200px; /* kiri: gambar | tengah: judul program | kanan: tombol aksi */
	align-items: center;
	gap: 16px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 14px;
}

.donasipro-fr-campaign-thumb {
	width: 110px;
	height: 110px;
	border-radius: 10px;
	object-fit: cover;
	flex-shrink: 0;
}

.donasipro-fr-campaign-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 200px;
}

.donasipro-fr-campaign-actions .donasipro-fr-share-btn,
.donasipro-fr-campaign-actions .donasipro-fr-qr-btn,
.donasipro-fr-campaign-actions .donasipro-fr-copy-link-btn-labeled {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	justify-content: center;
	white-space: nowrap;
}

.donasipro-fr-copy-link-btn-labeled {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.donasipro-fr-campaign-thumb-placeholder {
	background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}

.donasipro-fr-campaign-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0; /* penting di grid: cegah teks judul panjang bikin kolom melebar/overflow */
}

.donasipro-fr-campaign-collected {
	font-size: 12px;
	color: #6b7280;
}

.donasipro-fr-campaign-link-row {
	display: flex;
	gap: 6px;
	margin-top: 4px;
}

.donasipro-fr-link-input {
	flex: 1;
	font-size: 12px;
	padding: 6px 8px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #f9fafb;
	color: #6b7280;
}

.donasipro-fr-copy-link-btn {
	background: #f3f4f6 !important;
	border: 1px solid #d1d5db !important;
	border-radius: 6px;
	padding: 6px 10px;
	cursor: pointer;
	font-size: 13px;
	color: #111827 !important;
	font-weight: 600;
	text-shadow: none !important;
}

.donasipro-fr-copy-link-btn:hover {
	background: #e5e7eb !important;
	color: #111827 !important;
}

.donasipro-fr-qr-btn {
	background: color-mix(in srgb, var(--donasipro-primary-color, #16a34a) 12%, white);
	border: 1px solid var(--donasipro-primary-color, #16a34a);
	color: var(--donasipro-primary-color, #16a34a);
	border-radius: 6px;
	padding: 6px 12px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.donasipro-fr-qr-btn:hover {
	background: var(--donasipro-primary-color, #16a34a);
	color: #fff;
}

.donasipro-fr-category-count {
	font-size: 12px;
	font-weight: 400;
	color: #9ca3af;
}

.donasipro-fr-search-input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
}

.donasipro-fr-search-input:focus {
	outline: none;
	border-color: var(--donasipro-primary-color, #16a34a);
	box-shadow: 0 0 0 1px var(--donasipro-primary-color, #16a34a);
}

/* ===== Checklist program biolink (tab Edit Profil) ===== */
.donasipro-fr-biolink-checklist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 8px;
	max-height: 280px;
	overflow-y: auto;
	padding: 4px;
	border: 1px solid #f3f4f6;
	border-radius: 8px;
}

.donasipro-fr-biolink-checkitem {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	color: #374151;
	cursor: pointer;
	transition: background 0.1s ease;
}

.donasipro-fr-biolink-checkitem:hover {
	background: #f9fafb;
}

.donasipro-fr-biolink-checkitem input[type="checkbox"] {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	accent-color: var(--donasipro-primary-color, #16a34a);
}

/* ===== Modal Preview & Edit Pesan WA sebelum Share ===== */
.donasipro-fr-wa-preview-overlay {
	position: fixed;
	inset: 0;
	background: rgba(17, 24, 39, 0.55);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.donasipro-fr-wa-preview-modal {
	background: #fff;
	border-radius: 12px;
	padding: 24px;
	max-width: 480px;
	width: 100%;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.donasipro-fr-wa-preview-modal h3 {
	margin: 0 0 4px;
	font-size: 16px;
}

.donasipro-fr-wa-preview-campaign-title {
	font-weight: 400;
	color: #6b7280;
	font-size: 13px;
}

.donasipro-fr-wa-preview-textarea {
	width: 100%;
	box-sizing: border-box;
	margin-top: 14px;
	padding: 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	resize: vertical;
}

.donasipro-fr-wa-preview-textarea:focus {
	outline: none;
	border-color: var(--donasipro-primary-color, #16a34a);
	box-shadow: 0 0 0 1px var(--donasipro-primary-color, #16a34a);
}

.donasipro-fr-wa-preview-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 16px;
}

.donasipro-fr-wa-preview-cancel {
	background: #f3f4f6 !important;
	color: #374151 !important;
}

.donasipro-fr-wa-preview-copy {
	background: #eff6ff !important;
	color: #1d4ed8 !important;
	border: 1px solid #bfdbfe !important;
}

.donasipro-fr-wa-preview-send {
	background: #25d366 !important;
	color: #fff !important;
}

.donasipro-fr-qr-canvas-wrap {
	margin-top: 10px;
	padding: 12px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	display: inline-block;
}

/* ===== Tabel ringkas (riwayat komisi, riwayat donasi, breakdown program) ===== */
.donasipro-fr-simple-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 12px;
	font-size: 13px;
}

.donasipro-fr-simple-table th {
	text-align: left;
	color: #6b7280;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 8px 10px;
	border-bottom: 2px solid #f3f4f6;
}

.donasipro-fr-simple-table td {
	padding: 10px;
	border-bottom: 1px solid #f3f4f6;
	vertical-align: top;
}

.donasipro-fr-simple-table tr:last-child td {
	border-bottom: none;
}

/* Mode kartu di HP — tabel "Donasi yang Saya Bawa" punya 5 kolom di font
   13px; dipaksa muat di layar 360px hasilnya tiap kolom cuma ~60px dan
   nominal rupiah pasti terpotong. Jadi tiap BARIS diubah jadi kartu, tiap
   SEL jadi baris "label — nilai". Labelnya diambil dari atribut
   data-colname yang disuntikkan donasipro-fundraiser.js dengan membaca
   <thead>, pola yang sama persis dengan tabel di sisi admin. */
@media (max-width: 640px) {
	.donasipro-fr-simple-table,
	.donasipro-fr-simple-table tbody,
	.donasipro-fr-simple-table tr,
	.donasipro-fr-simple-table td {
		display: block;
		width: auto;
	}

	.donasipro-fr-simple-table thead {
		display: none;
	}

	.donasipro-fr-simple-table tr {
		border: 1px solid #e5e7eb;
		border-radius: 10px;
		margin-bottom: 10px;
		padding: 4px 0;
	}

	.donasipro-fr-simple-table tr:last-child {
		margin-bottom: 0;
	}

	/* Label kolom DI ATAS nilainya, memakai lebar penuh — memberi nilai
	   seluruh lebar kartu, bukan menyisakan gutter kiri yang menganggur.
	   Ditulis sebagai ::before pada <td> yang display-nya BUKAN flex,
	   supaya sel berisi beberapa anak tetap mengalir normal. */
	.donasipro-fr-simple-table td {
		padding: 9px 12px;
		border-bottom: 1px solid #f3f4f6;
		text-align: left;
		line-height: 1.45;
		overflow-wrap: anywhere;
	}

	.donasipro-fr-simple-table tr td:last-child {
		border-bottom: none;
	}

	.donasipro-fr-simple-table td[data-colname]::before {
		content: attr(data-colname);
		display: block;
		margin-bottom: 3px;
		color: #9ca3af;
		font-size: 10.5px;
		font-weight: 600;
		line-height: 1.3;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

}

/* ===== Target pribadi (progress bar) ===== */
.donasipro-fr-target-progress {
	margin-top: 12px;
}

.donasipro-fr-target-bar-track {
	background: #f3f4f6;
	border-radius: 99px;
	height: 10px;
	overflow: hidden;
}

.donasipro-fr-target-bar-fill {
	height: 100%;
	border-radius: 99px;
	background: var(--donasipro-primary-color, #16a34a);
	transition: width 0.3s ease;
}

.donasipro-fr-target-label {
	font-size: 12px;
	color: #6b7280;
	margin: 8px 0 0;
}

/* ===== Form generik di dalam panel dashboard (Edit Profil, Target Pribadi) ===== */
.donasipro-fr-panel form p {
	margin: 0 0 14px;
}

.donasipro-fr-panel form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	margin-bottom: 6px;
}

.donasipro-fr-panel form input[type="text"],
.donasipro-fr-panel form input[type="number"] {
	width: 100%;
	max-width: 360px;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
	box-sizing: border-box;
}

.donasipro-fr-panel form input:focus {
	outline: none;
	border-color: var(--donasipro-primary-color, #16a34a);
	box-shadow: 0 0 0 1px var(--donasipro-primary-color, #16a34a);
}

.donasipro-fr-share-btn {
	display: inline-block;
	background: #25d366;
	color: #fff !important;
	padding: 10px 18px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
	flex-shrink: 0;
}

.donasipro-fr-share-btn:hover {
	background: #1ebe5b;
}

/* ===== Layout Sidebar + Tab (Dashboard Fundraiser) ===== */
.donasipro-fr-layout {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.donasipro-fr-sidebar {
	flex: 0 0 220px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 10px;
	position: sticky;
	top: 20px;
}

.donasipro-fr-sidebar-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	background: transparent;
	border: none;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 13px;
	font-weight: 600;
	color: #4b5563 !important;
	cursor: pointer;
	text-align: left;
	text-shadow: none !important;
	box-shadow: none !important;
	transition: background 0.15s ease, color 0.15s ease;
}

.donasipro-fr-sidebar-item:hover,
.donasipro-fr-sidebar-item:focus {
	background: #f3f4f6 !important;
	color: #111827 !important;
}

.donasipro-fr-sidebar-item.is-active,
.donasipro-fr-sidebar-item.is-active:hover {
	background: color-mix(in srgb, var(--donasipro-primary-color, #16a34a) 12%, white) !important;
	color: var(--donasipro-primary-color, #16a34a) !important;
}

.donasipro-fr-sidebar-icon {
	font-size: 16px;
	flex-shrink: 0;
}

.donasipro-fr-content-area {
	flex: 1;
	min-width: 0;
}

.donasipro-fr-tab-panel {
	display: none;
}

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

/* Default (desktop/tablet): tampilkan label lengkap, sembunyikan versi
   singkat. HARUS ditulis SEBELUM media query di bawah -- urutan kebalik
   pernah bikin bug (label singkat tidak pernah muncul di manapun),
   lihat catatan lebih lengkap di CSS tab halaman campaign. */
.donasipro-fr-sidebar-label-short {
	display: none !important;
}

@media (max-width: 900px) {
	.donasipro-fr-layout { flex-direction: column; }
	.donasipro-fr-sidebar {
		flex: none;
		display: grid; /* GRID (bukan scroll horizontal lagi) -- semua 6 menu langsung terlihat sekaligus, turun ke baris berikutnya kalau tidak muat, tidak perlu digeser. */
		grid-template-columns: repeat(3, 1fr);
		align-items: stretch;
		position: static;
		width: 100%;
		box-sizing: border-box;
		gap: 6px;
		padding: 8px;
	}
	.donasipro-fr-sidebar-item {
		flex-direction: column; /* ikon di atas, teks di bawah -- lebih pas untuk kotak persegi di layout grid. */
		justify-content: center;
		white-space: normal;
		text-align: center;
		padding: 10px 4px;
		font-size: 11px;
		gap: 4px;
	}
	.donasipro-fr-sidebar-icon {
		font-size: 18px;
	}
	.donasipro-fr-sidebar-label-full {
		display: none !important;
	}
	.donasipro-fr-sidebar-label-short {
		display: inline !important;
	}
}

@media (max-width: 782px) {
	.donasipro-fr-stat-cards { grid-template-columns: repeat(2, 1fr); }
	.donasipro-fr-campaign-item {
		grid-template-columns: 1fr; /* di mobile, 3 kolom collapse jadi numpuk vertikal -- flex-direction TIDAK berlaku untuk grid, harus ganti grid-template-columns. */
		justify-items: center;
		text-align: center;
	}
	.donasipro-fr-campaign-actions {
		width: 100%;
	}
}

/* Layar sangat sempit (HP kecil, ~360px ke bawah). Di lebar ini kartu
   statistik 2 kolom hanya menyisakan ~128px ruang teks per kartu,
   sementara nilai seperti "Rp1.250.000" di font 20px butuh sekitar
   120px — terlalu mepet dan mudah terpotong begitu nominalnya naik satu
   digit. Nilainya dikecilkan & diizinkan patah. */
@media (max-width: 480px) {
	.donasipro-fr-stat-value {
		/* Di layar sempit kartu sudah menumpuk (1-2 kolom), jadi ruangnya
		   justru lega — clamp() di atas sudah menanganinya. Yang perlu
		   dipastikan di sini hanya: tetap tidak memotong angka. */
		overflow-wrap: normal;
		word-break: keep-all;
	}

	.donasipro-fr-stat-card {
		padding: 12px;
	}

	.donasipro-fr-stat-label,
	.donasipro-fr-stat-sub {
		overflow-wrap: anywhere;
	}

	/* Thumbnail program: 110px terlalu kecil saat kartu sudah menumpuk
	   penuh selebar layar — dibesarkan supaya gambar program terbaca. */
	.donasipro-fr-campaign-thumb,
	.donasipro-fr-campaign-thumb-placeholder {
		width: 100%;
		max-width: 220px;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	/* Input link referral + tombol copy: di 360px keduanya berdesakan,
	   jadi dibiarkan turun baris. */
	.donasipro-fr-campaign-link-row {
		flex-wrap: wrap;
	}

	.donasipro-fr-link-input {
		flex: 1 1 100%;
	}

	/* Header dashboard: nama fundraiser panjang + tombol Keluar. */
	.donasipro-fr-header-left {
		gap: 10px;
	}

	.donasipro-fr-header h2 {
		font-size: 18px;
		overflow-wrap: anywhere;
	}

	/* 6 menu dalam grid 3 kolom jadi sangat sempit di bawah 360px —
	   turun ke 2 kolom supaya label pendek tetap terbaca utuh. */
	.donasipro-fr-sidebar {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ===== Opsi Donasi Rutin di form donasi ===== */
.donasipro-recurring-row {
	align-items: flex-start;
}

.donasipro-recurring-row > label:first-child {
	flex: 1;
	min-width: 0;
	padding-right: 12px;
}

.donasipro-recurring-hint {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	line-height: 1.45;
	color: #6b7280;
	font-weight: 400;
}

/* ===== Ajakan Berdonasi Kembali (Dashboard Donatur) ===== */
.donasipro-donor-suggest-intro {
	margin: 0 0 14px;
	font-size: 13.5px;
	color: #4b5563;
	line-height: 1.55;
}

.donasipro-donor-suggest-grid {
	display: grid;
	/* Dikunci 2 kolom, bukan auto-fit.
	   Dengan auto-fit, 4 program tampil 3 di baris pertama lalu 1 sendirian
	   di baris kedua — terlihat seperti ada kartu yang gagal dimuat.
	   2 kolom membuat 4 program jadi 2x2 yang rapi, dan 2 atau 3 program
	   pun tetap seimbang. */
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.donasipro-donor-suggest-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .18s ease, transform .18s ease;
}

.donasipro-donor-suggest-card:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, .09);
	transform: translateY(-2px);
}

.donasipro-donor-suggest-thumb {
	/* Banner program dibuat 1:1 (persegi). Gambar campaign aslinya
	   bermacam-macam rasio, jadi object-fit: cover pada <img> di bawah
	   yang memangkasnya dari tengah — bukan menggepengkan gambarnya. */
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f3f4f6;
}

.donasipro-donor-suggest-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.donasipro-donor-suggest-body {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.donasipro-donor-suggest-body strong {
	font-size: 13.5px;
	line-height: 1.4;
	color: #111827;
	overflow-wrap: anywhere;
}

.donasipro-donor-suggest-bar {
	height: 5px;
	border-radius: 4px;
	background: #e5e7eb;
	overflow: hidden;
}

.donasipro-donor-suggest-bar span {
	display: block;
	height: 100%;
	background: var(--donasipro-primary-color, #16a34a);
}

.donasipro-donor-suggest-meta {
	font-size: 11.5px;
	color: #6b7280;
}

.donasipro-donor-suggest-btn {
	margin-top: auto;
	text-align: center;
	padding: 8px 10px;
	border-radius: 7px;
	background: var(--donasipro-primary-color, #16a34a);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
}

/* Di layar sempit, 2 kolom menyisakan ~160px per kartu. Padding & ukuran
   teks dirapatkan supaya judul program yang panjang tetap terbaca dan
   tombolnya tidak terpotong. */
@media (max-width: 480px) {
	.donasipro-donor-suggest-grid {
		gap: 10px;
	}

	.donasipro-donor-suggest-body {
		padding: 10px;
		gap: 6px;
	}

	.donasipro-donor-suggest-body strong {
		font-size: 12.5px;
	}

	.donasipro-donor-suggest-btn {
		padding: 8px 6px;
		font-size: 11.5px;
	}

	.donasipro-donor-suggest-meta {
		font-size: 11px;
	}
}

/* ===== Berita Terbaru (Dashboard Donatur) ===== */

/* Tema (Astra dkk) memasang garis bawah pada tautan di area konten dengan
   selector yang lebih spesifik daripada class kartu kita, dan garis itu
   ikut turun ke <strong>, tanggal, serta ringkasan di dalamnya —
   membuat kartunya terlihat seperti blok tautan mentah.
   Karena yang dilawan adalah stylesheet tema (bukan style inline),
   !important di sini memang diperlukan; tanpa itu aturan kita kalah. */
.donasipro-donor-news-item,
.donasipro-donor-news-item:hover,
.donasipro-donor-news-item:focus,
.donasipro-donor-news-item *,
.donasipro-donor-suggest-card,
.donasipro-donor-suggest-card:hover,
.donasipro-donor-suggest-card:focus,
.donasipro-donor-suggest-card * {
	text-decoration: none !important;
}

/* Sebagian tema menggambar garis bawah tautan memakai box-shadow, bukan
   text-decoration. Reset ini SENGAJA hanya menyasar elemen di DALAM kartu
   — kalau kartunya sendiri ikut disertakan, efek bayangan saat hover yang
   kita buat sendiri ikut mati. */
.donasipro-donor-news-item *,
.donasipro-donor-suggest-card * {
	box-shadow: none;
}

.donasipro-donor-news-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.donasipro-donor-news-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .18s ease, border-color .18s ease;
}

.donasipro-donor-news-item:hover {
	border-color: #d1d5db;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
}

.donasipro-donor-news-thumb {
	flex: 0 0 92px;
	width: 92px;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: #f3f4f6;
}

.donasipro-donor-news-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.donasipro-donor-news-body {
	/* min-width:0 wajib di flex item yang isinya teks panjang — tanpa ini
	   judul tanpa spasi bisa memaksa kartunya melebar melebihi layar. */
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.donasipro-donor-news-body strong {
	font-size: 13.5px;
	line-height: 1.4;
	color: #111827;
	overflow-wrap: anywhere;
}

.donasipro-donor-news-date {
	font-size: 11.5px;
	color: #9ca3af;
}

.donasipro-donor-news-body p {
	margin: 2px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #6b7280;
	overflow-wrap: anywhere;
}

@media (max-width: 420px) {
	.donasipro-donor-news-thumb {
		flex-basis: 68px;
		width: 68px;
	}
}

/* ===== Tombol Copy (nomor rekening & nominal di step konfirmasi transfer) ===== */
.donasipro-copy-btn {
	display: inline-block;
	background: #f3f4f6;
	border: 1px solid #d1d5db;
	color: #374151;
	padding: 3px 8px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	vertical-align: middle;
	margin-left: 4px;
}

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

/* ===== Shortcode [donasipro_stat] — angka statistik ===== */
.donasipro-stat-shortcode {
	font-weight: 700;
	color: var(--donasipro-primary-color, #16a34a);
}

/* ===== Shortcode [donasipro_social_proof] — feed donasi terbaru ===== */
.donasipro-sp-list {
	max-width: 600px !important;
	margin: 0 auto !important;
	list-style: none !important;
}

.donasipro-sp-list-title {
	font-size: 18px !important;
	font-weight: 700 !important;
	margin: 0 0 16px !important;
	color: #111827 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
}

.donasipro-sp-item {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 12px !important;
	padding: 12px 0 !important;
	margin: 0 !important;
	border-bottom: 1px solid #e5e7eb !important;
	list-style: none !important;
	background: transparent !important;
}

.donasipro-sp-item:last-child {
	border-bottom: none !important;
}

.donasipro-sp-avatar {
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	max-width: 38px !important;
	border-radius: 50% !important;
	background: var(--donasipro-primary-color, #16a34a) !important;
	color: #fff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	line-height: 1 !important;
	flex-shrink: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

.donasipro-sp-info {
	flex: 1 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #374151 !important;
	padding: 0 !important;
	margin: 0 !important;
}

.donasipro-sp-info strong {
	color: #111827 !important;
	font-weight: 700 !important;
}

.donasipro-sp-time {
	font-size: 12px !important;
	color: #9ca3af !important;
	margin-top: 2px !important;
	padding: 0 !important;
}

/* ===== CAPTCHA Anti-Spam (Cloudflare Turnstile) ===== */
.donasipro-captcha-wrap {
	margin: 4px 0 14px !important;
	display: flex !important;
	justify-content: center !important;
}
.donasipro-captcha-widget {
	display: inline-block !important;
}

/* ===== Link "Kirim Ulang Verifikasi" (Fundraiser) ===== */
.donasipro-fr-resend-link {
	display: inline-block !important;
	margin-top: 8px !important;
	font-size: 13px !important;
	color: var(--donasipro-primary-color, #16a34a) !important;
	text-decoration: underline !important;
	cursor: pointer !important;
}

/* ===== Logo Lembaga (halaman Fundraiser) ===== */
.donasipro-fr-logo-wrap {
	text-align: center !important;
	margin-bottom: 16px !important;
}
.donasipro-fr-logo {
	max-height: 92px !important;
	max-width: 280px !important;
	width: auto !important;
	height: auto !important;
	display: inline-block !important;
}

/* ===== Toggle Lihat Password (halaman Fundraiser) ===== */
.donasipro-fr-auth-card .donasipro-fr-password-wrap {
	position: relative !important;
	display: block !important;
	width: 100% !important;
}
.donasipro-fr-auth-card .donasipro-fr-password-wrap input {
	width: 100% !important;
	padding-right: 44px !important;
	box-sizing: border-box !important;
}
/* Selector dibuat SANGAT spesifik + reset total, supaya menang lawan style
   default tombol dari tema/page builder (banyak tema styling semua <button>
   jadi full-width & berwarna solid — makanya perlu di-override paksa semua
   propertinya satu per satu, bukan cuma posisi/warnanya saja). */
.donasipro-fr-auth-card .donasipro-fr-password-wrap button.donasipro-fr-password-toggle {
	position: absolute !important;
	top: 50% !important;
	right: 6px !important;
	left: auto !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	max-width: 32px !important;
	min-height: 32px !important;
	max-height: 32px !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	color: #6b7280 !important;
	font-size: 0 !important;
	line-height: 1 !important;
	text-transform: none !important;
	text-shadow: none !important;
	z-index: 5 !important;
}
.donasipro-fr-auth-card .donasipro-fr-password-wrap button.donasipro-fr-password-toggle:hover,
.donasipro-fr-auth-card .donasipro-fr-password-wrap button.donasipro-fr-password-toggle:focus {
	background: rgba(107, 114, 128, 0.08) !important;
	color: #374151 !important;
}
.donasipro-fr-eye-icon {
	display: block !important;
	pointer-events: none !important;
	width: 18px !important;
	height: 18px !important;
}
.donasipro-fr-eye-closed {
	display: none !important;
}
.donasipro-fr-password-toggle.is-visible .donasipro-fr-eye-open {
	display: none !important;
}
.donasipro-fr-password-toggle.is-visible .donasipro-fr-eye-closed {
	display: block !important;
}

/* ===== Link & Panel "Lupa Password" ===== */
.donasipro-fr-forgot-row {
	text-align: right !important;
	margin: -8px 0 14px !important;
}
.donasipro-fr-forgot-link,
.donasipro-fr-forgot-cancel {
	font-size: 13px !important;
	color: var(--donasipro-primary-color, #16a34a) !important;
	text-decoration: underline !important;
	cursor: pointer !important;
}
.donasipro-fr-forgot-panel h3 {
	margin-top: 0 !important;
}

/* ===== Tab & Panel "Lupa Password via WhatsApp" ===== */
.donasipro-fr-forgot-tabs {
	display: flex !important;
	gap: 6px !important;
	margin-bottom: 16px !important;
	border-bottom: 1px solid #e5e7eb !important;
}
.donasipro-fr-forgot-tab {
	background: none !important;
	border: none !important;
	border-bottom: 2px solid transparent !important;
	padding: 8px 4px !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #9ca3af !important;
	cursor: pointer !important;
}
.donasipro-fr-forgot-tab.is-active {
	color: var(--donasipro-primary-color, #16a34a) !important;
	border-bottom-color: var(--donasipro-primary-color, #16a34a) !important;
}
.donasipro-fr-wa-message,
.donasipro-fr-wa-reset-message {
	font-size: 13px !important;
	margin: 8px 0 !important;
}
.donasipro-fr-wa-message.error,
.donasipro-fr-wa-reset-message.error { color: #dc2626 !important; }
.donasipro-fr-wa-message.success,
.donasipro-fr-wa-reset-message.success { color: #16a34a !important; }

/* ===== Layout Split-Screen Login/Daftar Fundraiser ===== */
.donasipro-fr-split {
	display: flex !important;
	min-height: 600px !important;
	border-radius: 28px !important;
	overflow: hidden !important;
	background: #fff !important;
	box-shadow: 0 24px 60px -24px rgba(11, 85, 64, 0.45), 0 4px 24px rgba(15, 23, 42, 0.06) !important;
}

/* --- Kolom kiri: ilustrasi & headline --- */
.donasipro-fr-split-hero {
	position: relative !important;
	flex: 0 0 44% !important;
	max-width: 44% !important;
	padding: 44px 40px !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	background: linear-gradient(160deg, var(--donasipro-primary-color, #16a34a) 0%, var(--donasipro-primary-dark, #0f6b4f) 45%, var(--donasipro-primary-darker, #0b5540) 80%, var(--donasipro-primary-darker, #0b5540) 100%) !important;
	color: #fff !important;
	box-sizing: border-box !important;
}
.donasipro-fr-split-pattern {
	position: absolute !important;
	inset: 0 !important;
	background-image: url('../images/fundraiser-pattern.svg') !important;
	background-size: 130px 130px !important;
	opacity: 0.14 !important;
	pointer-events: none !important;
}
/* --- Varian: foto background (opsional, admin upload sendiri) --- */
.donasipro-fr-split-hero.has-bg-photo {
	background-image:
		linear-gradient(160deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%),
		var(--donasipro-hero-bg-image) !important;
	background-image:
		linear-gradient(160deg, color-mix(in srgb, var(--donasipro-primary-color, #16a34a) 55%, transparent) 0%, color-mix(in srgb, var(--donasipro-primary-darker, #0b5540) 78%, transparent) 100%),
		var(--donasipro-hero-bg-image) !important;
	background-size: cover, cover !important;
	background-position: center, center !important;
	background-repeat: no-repeat, no-repeat !important;
}
.donasipro-fr-split-hero.has-bg-photo .donasipro-fr-split-pattern {
	display: none !important;
}
.donasipro-fr-split-hero-inner {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
}
.donasipro-fr-split-eyebrow {
	font-size: 11px !important;
	letter-spacing: 0.09em !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	color: var(--donasipro-primary-light, #fcd34d) !important;
	margin: 0 0 16px !important;
}
.donasipro-fr-split-headline {
	font-size: 26px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	margin: 0 0 20px !important;
	color: #fff !important;
}
.donasipro-fr-split-headline span {
	color: var(--donasipro-primary-light, #fcd34d) !important;
}
.donasipro-fr-split-quote {
	font-size: 13px !important;
	font-style: italic !important;
	color: rgba(255, 255, 255, 0.8) !important;
	border-left: 3px solid var(--donasipro-primary-light, #fcd34d) !important;
	padding-left: 12px !important;
	margin: auto 0 0 !important;
	line-height: 1.5 !important;
}
.donasipro-fr-split-dot {
	position: absolute !important;
	bottom: -34px !important;
	right: -34px !important;
	width: 130px !important;
	height: 130px !important;
	border-radius: 50% !important;
	background: rgba(252, 211, 77, 0.14) !important; /* fallback untuk browser lama tanpa color-mix() */
	background: color-mix(in srgb, var(--donasipro-primary-light, #fcd34d) 16%, transparent) !important;
	pointer-events: none !important;
}

/* --- Kolom kanan: form (override style default .donasipro-fr-auth-card) --- */
.donasipro-fr-split-form {
	flex: 1 1 auto !important;
	max-width: none !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 48px 56px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	box-sizing: border-box !important;
}
.donasipro-fr-split-form .donasipro-fr-logo-wrap {
	text-align: left !important;
	margin-bottom: 28px !important;
}
.donasipro-fr-split-form h2 {
	font-size: 26px !important;
	margin: 0 0 6px !important;
}
.donasipro-fr-split-form .donasipro-fr-subtitle {
	margin-bottom: 26px !important;
}

/* --- Responsif: tumpuk 1 kolom di layar sempit --- */
@media (max-width: 860px) {
	.donasipro-fr-split {
		flex-direction: column !important;
		border-radius: 20px !important;
		min-height: auto !important;
	}
	.donasipro-fr-split-hero {
		flex: none !important;
		max-width: 100% !important;
		padding: 32px 28px 26px !important;
	}
	.donasipro-fr-split-headline {
		font-size: 21px !important;
	}
	.donasipro-fr-split-quote {
		display: none !important;
	}
	.donasipro-fr-split-form {
		padding: 32px 24px !important;
	}
}

/* ===== Footer "Supported by DonasiPro.com" — WAJIB tampil di semua
   halaman frontend plugin (campaign, dashboard fundraiser, biolink,
   login/daftar), rata tengah paling bawah. Teks-nya hardcode di PHP,
   BUKAN dari Settings — lihat Donasipro_Settings::render_supported_by_footer(). ===== */
.donasipro-supported-by-footer {
	text-align: center !important;
	font-size: 11px !important;
	color: #9ca3af !important;
	letter-spacing: 0.02em !important;
	margin: 32px 0 0 !important;
	padding-top: 16px !important;
	border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* ===== Dashboard Donatur (akses tanpa login lewat token unik) ===== */
.donasipro-donor-dashboard-wrap {
	max-width: 640px;
	margin: 0 auto;
	padding: 24px 16px 40px;
	font-family: inherit;
}

.donasipro-donor-dashboard-header h2 {
	margin: 0 0 6px !important;
	color: #111827 !important;
	font-size: 22px !important;
}

.donasipro-donor-dashboard-subtitle {
	color: #6b7280 !important;
	font-size: 14px !important;
	margin: 0 0 20px !important;
}

.donasipro-donor-dashboard-empty {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 32px 20px;
	text-align: center;
}

.donasipro-donor-dashboard-empty p {
	color: #374151 !important;
	font-size: 15px !important;
	margin: 0 0 8px !important;
}

.donasipro-donor-dashboard-empty-sub {
	color: #9ca3af !important;
	font-size: 13px !important;
}

.donasipro-donor-dashboard-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}

.donasipro-donor-dashboard-stat-card {
	--accent: var(--donasipro-primary-color, #16a34a);
	position: relative;
	overflow: hidden;
	/* !important dipertahankan: sebagian tema memberi gaya sendiri pada
	   elemen di dalam konten, dan tanpa ini latar kartu bisa tertimpa. */
	background: color-mix(in srgb, var(--accent) 13%, #fff) !important;
	border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff) !important;
	border-radius: 16px;
	padding: 16px 12px;
	text-align: center;
}

.donasipro-donor-dashboard-stat-card::after {
	content: '';
	position: absolute;
	right: -30px;
	bottom: -42px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent) 9%, transparent);
	pointer-events: none;
}

.donasipro-donor-dashboard-stat-card > * { position: relative; z-index: 1; }

.donasipro-donor-dashboard-stat-label {
	font-size: 11px !important;
	color: #6b7280 !important;
	font-weight: 600 !important;
	margin-bottom: 4px !important;
}

.donasipro-donor-dashboard-stat-value {
	/* Perlakuan sama dengan kartu fundraiser: nominal boleh mengecil,
	   tapi tidak boleh terpenggal di tengah angka. */
	font-size: clamp( 15px, 1.1vw + 5px, 21px ) !important;
	font-weight: 800 !important;
	color: #111827 !important;
	line-height: 1.2 !important;
	letter-spacing: -.02em;
	overflow-wrap: normal;
	word-break: keep-all;
}

/* Nominal TIDAK PERNAH dipenggal, apa pun CSS tema. Kalau tema/Elementor
   membesarkan hurufnya sampai tidak muat, ukurannya dikecilkan otomatis
   oleh donasipro.js (data-dp-fit) — bukan dipotong. Selektor dibuat lebih
   spesifik supaya menang melawan aturan tipografi global tema. */
.donasipro-donor-dashboard-wrap .donasipro-donor-dashboard-stats .donasipro-donor-dashboard-stat-value,
[data-dp-fit] {
	white-space: nowrap !important;
	overflow-wrap: normal !important;
	word-break: keep-all !important;
	max-width: 100%;
}

.donasipro-donor-dashboard-panel {
	background: #fff !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 12px;
	padding: 18px;
	margin-bottom: 16px;
}

.donasipro-donor-dashboard-panel h3 {
	margin: 0 0 12px !important;
	font-size: 15px !important;
	color: #111827 !important;
}

.donasipro-donor-dashboard-empty-note {
	color: #9ca3af !important;
	font-size: 13px !important;
}

.donasipro-donor-dashboard-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.donasipro-donor-dashboard-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	border-bottom: 1px solid #f3f4f6;
	flex-wrap: wrap;
}

.donasipro-donor-dashboard-item:last-child {
	border-bottom: none;
}

.donasipro-donor-dashboard-item-main {
	flex: 1;
	min-width: 140px;
	display: flex;
	flex-direction: column;
}

.donasipro-donor-dashboard-item-main strong {
	color: #111827 !important;
	font-size: 13px !important;
}

.donasipro-donor-dashboard-item-date {
	color: #9ca3af !important;
	font-size: 11px !important;
}

.donasipro-donor-dashboard-item-amount {
	font-weight: 700 !important;
	color: var(--donasipro-primary-color, #16a34a) !important;
	font-size: 14px !important;
}

.donasipro-donor-dashboard-item-cert {
	font-size: 12px !important;
	color: #2563eb !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.donasipro-donor-dashboard-footer-note {
	text-align: center !important;
	color: #9ca3af !important;
	font-size: 11px !important;
	margin: 20px 0 0 !important;
}

@media (max-width: 600px) {
	.donasipro-donor-dashboard-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.donasipro-donor-dashboard-stat-value { font-size: 15px !important; }
	.donasipro-donor-dashboard-stat-card { padding: 12px 8px; }
	/* Hanya LABEL yang boleh dipenggal. Dulu nominal juga diberi
	   overflow-wrap:anywhere — "Rp12.405.000" bisa terpenggal menjadi
	   "Rp12" + sisa yang terlempar ke baris berikutnya/terpotong kartu,
	   sehingga donatur membaca total donasinya "Rp12". */
	.donasipro-donor-dashboard-stat-label { overflow-wrap: anywhere; }
}

/* Di bawah ~420px, 3 kolom menyisakan cuma ~100px per kartu — cukup untuk
   "Rp150.000" tapi tidak untuk "Rp12.500.000" yang pasti terpotong. Turun
   ke 2 kolom (kartu ke-3 melebar penuh di baris kedua) supaya nominal
   sebesar apa pun tetap terbaca utuh. */
@media (max-width: 420px) {
	.donasipro-donor-dashboard-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.donasipro-donor-dashboard-stats > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.donasipro-donor-dashboard-item {
		gap: 6px;
	}

	.donasipro-donor-dashboard-item-main {
		min-width: 0;
		flex: 1 1 100%;
	}
}

/* ===== Badge / Label Penghargaan Donatur ===== */
.donasipro-donor-dashboard-badge {
	display: flex !important;
	align-items: center;
	gap: 14px;
	background: color-mix(in srgb, var(--donasipro-primary-color, #16a34a) 8%, #fff) !important;
	border: 1px solid color-mix(in srgb, var(--donasipro-primary-color, #16a34a) 30%, #fff) !important;
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 20px;
}

.donasipro-donor-dashboard-badge-icon {
	font-size: 32px;
	line-height: 1;
	flex-shrink: 0;
}

.donasipro-donor-dashboard-badge strong {
	display: block !important;
	color: #111827 !important;
	font-size: 14px !important;
	margin-bottom: 2px !important;
}

.donasipro-donor-dashboard-badge p {
	margin: 0 !important;
	color: #4b5563 !important;
	font-size: 13px !important;
}

/* ===== Update / Laporan Penyaluran ===== */
.donasipro-donor-dashboard-update-item {
	padding: 12px 0;
	border-bottom: 1px solid #f3f4f6;
}

.donasipro-donor-dashboard-update-image {
	display: block;
	max-width: 100%;
	max-height: 220px;
	border-radius: 8px;
	margin-bottom: 8px;
	object-fit: cover;
}

/* ===== Grid 2 kolom - kartu ringkas (gambar + judul saja) ===== */
.donasipro-donor-dashboard-update-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.donasipro-donor-dashboard-update-card {
	display: flex !important;
	flex-direction: column;
	background: #f9fafb !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 10px;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
}

.donasipro-donor-dashboard-update-card-image {
	width: 100%;
	height: 90px;
	object-fit: cover;
	display: block;
}

.donasipro-donor-dashboard-update-card-image-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: 28px;
}

.donasipro-donor-dashboard-update-card-title {
	display: block !important;
	color: #111827 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	padding: 8px 10px;
	line-height: 1.4;
}

@media (max-width: 480px) {
	.donasipro-donor-dashboard-update-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
	.donasipro-donor-dashboard-update-card-image,
	.donasipro-donor-dashboard-update-card-image-placeholder { height: 70px; }
	.donasipro-donor-dashboard-update-card-title { font-size: 11px !important; padding: 6px 8px; }
}

/* ===== Modal detail update (dibuka saat kartu diklik) ===== */
.donasipro-donor-dashboard-update-modal-overlay {
	position: fixed !important;
	inset: 0;
	background: rgba(0, 0, 0, 0.55) !important;
	z-index: 99999;
	align-items: center;
	justify-content: center;
	padding: 20px;
	/* PENTING: display TIDAK di-!important di sini (sengaja) — modal ini
	   default disembunyikan lewat inline style="display:none" dari
	   template, dan dibuka/ditutup lewat JS (element.style.display).
	   Kalau display dikunci !important di sini, akan MENGALAHKAN inline
	   style="display:none" dari template (aturan CSS: !important di
	   stylesheet selalu menang atas inline style yang TIDAK !important),
	   bikin modal-nya selalu tampil menghalangi seluruh halaman — bug
	   nyata yang sempat ketahuan lewat pengujian sebelum dirilis. */
}

.donasipro-donor-dashboard-update-modal-box {
	background: #fff !important;
	border-radius: 12px;
	padding: 20px;
	max-width: 480px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	position: relative;
}

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

.donasipro-donor-dashboard-update-modal-box strong {
	display: block !important;
	color: #111827 !important;
	font-size: 15px !important;
	margin: 6px 0 8px !important;
}

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

.donasipro-donor-dashboard-update-item:last-child {
	border-bottom: none;
}

.donasipro-donor-dashboard-update-item strong {
	display: block !important;
	color: #111827 !important;
	font-size: 13px !important;
	margin: 4px 0 !important;
}

.donasipro-donor-dashboard-update-item p {
	margin: 0 !important;
	color: #6b7280 !important;
	font-size: 13px !important;
	line-height: 1.5;
}

/* ===== Info Terbaru (Pengumuman) ===== */
.donasipro-donor-dashboard-announcement {
	background: #eff6ff !important;
	border: 1px solid #bfdbfe !important;
}

.donasipro-donor-dashboard-announcement h3 {
	color: #1e40af !important;
}

.donasipro-donor-dashboard-announcement div,
.donasipro-donor-dashboard-announcement p {
	color: #1e3a8a !important;
	font-size: 13px !important;
	line-height: 1.6;
	margin: 0 0 6px !important;
}

/* ===== Hadiah Ebook ===== */
.donasipro-donor-dashboard-ebook {
	background: #fefce8 !important;
	border: 1px solid #fde68a !important;
	text-align: center;
}

.donasipro-donor-dashboard-ebook p {
	color: #78350f !important;
	font-size: 13px !important;
	margin: 0 0 12px !important;
}

.donasipro-donor-dashboard-ebook-btn {
	display: inline-block !important;
	background: #f59e0b !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	text-decoration: none !important;
	padding: 12px 22px;
	border-radius: 8px;
}

/* ===== Kontak Admin Official ===== */
.donasipro-donor-dashboard-contact {
	text-align: center;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #e5e7eb;
}

.donasipro-donor-dashboard-contact p {
	color: #6b7280 !important;
	font-size: 13px !important;
	margin: 0 0 10px !important;
}

.donasipro-donor-dashboard-contact-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: #25d366 !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	text-decoration: none !important;
	padding: 10px 20px;
	border-radius: 8px;
}

/* ===== Paginasi Riwayat Donasi ===== */
.donasipro-donor-dashboard-pagination {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #f3f4f6;
}

.donasipro-donor-dashboard-page-btn {
	background: #f3f4f6 !important;
	color: #374151 !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 6px;
	padding: 7px 14px;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer;
}

.donasipro-donor-dashboard-page-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.donasipro-donor-dashboard-page-info {
	color: #6b7280 !important;
	font-size: 12px !important;
}

/* ===== Lead Magnet ("Dapatkan Ebook Gratis") ===== */
.donasipro-leadmagnet-wrap {
	max-width: 500px; /* diperbesar dari 420px -- supaya banner (dan seluruh kartu) tampil lebih besar/menonjol. */
	margin: 0 auto;
}

.donasipro-leadmagnet-card {
	background: #fff !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 14px;
	padding: 24px;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	overflow: hidden; /* supaya gambar cover full-bleed tidak "poke out" melewati sudut membulat kartu. */
}

.donasipro-leadmagnet-cover {
	width: calc(100% + 48px); /* 48px = padding kartu 24px x 2 sisi -- supaya gambar "menembus" sampai tepi kartu, bukan ikut ke-inset padding. */
	max-width: calc(100% + 48px);
	aspect-ratio: 1 / 1; /* persegi (1:1) -- sebelumnya max-height:260px bikin gambar cover ebook (yang aslinya portrait/tinggi) kepotong parah di bagian bawah. Rasio 1:1 kasih ruang vertikal jauh lebih banyak. */
	margin: -24px -24px 16px -24px; /* tarik ke atas & samping sejauh padding kartu, supaya rata dengan tepi. */
	border-radius: 14px 14px 0 0; /* cuma sudut ATAS ikut melengkung mengikuti kartu -- sudut bawah lurus karena masih ada konten di bawahnya. */
	display: block;
	object-fit: cover;
}

.donasipro-leadmagnet-title {
	color: #111827 !important;
	font-size: 18px !important;
	margin: 0 0 8px !important;
}

.donasipro-leadmagnet-desc {
	color: #6b7280 !important;
	font-size: 13px !important;
	line-height: 1.6;
	margin: 0 0 18px !important;
}

.donasipro-leadmagnet-input {
	width: 100% !important;
	padding: 12px 14px !important;
	border: 1px solid #d1d5db !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	color: #111827 !important;
	background: #fff !important;
	box-sizing: border-box;
	margin-bottom: 4px;
}

.donasipro-leadmagnet-submit-btn {
	width: 100%;
	margin-top: 10px;
	font-size: 15px !important;
	padding: 13px 20px !important;
}

.donasipro-leadmagnet-message {
	font-size: 12px !important;
	margin: 10px 0 0 !important;
	min-height: 14px;
}

.donasipro-leadmagnet-message-error {
	color: #dc2626 !important;
}

.donasipro-leadmagnet-success-icon {
	font-size: 42px;
	line-height: 1;
	margin-bottom: 10px;
}

.donasipro-leadmagnet-download-btn {
	display: inline-block !important;
	background: var(--donasipro-primary-color, #16a34a) !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	text-decoration: none !important;
	padding: 13px 26px;
	border-radius: 8px;
	margin-top: 6px;
}


/* ===== Program Event & Produk Digital ===== */
.donasipro-ev-wrapper {
	max-width: 720px;
	margin: 32px auto;
	padding: 0 16px;
}

.donasipro-ev-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, .07);
	overflow: hidden;
}

.donasipro-ev-banner img {
	width: 100%;
	height: auto;
	display: block;
}

.donasipro-ev-body { padding: 24px 20px 28px; }

.donasipro-ev-title {
	margin: 0 0 14px;
	font-size: 24px;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.donasipro-ev-copy {
	font-size: 15px;
	line-height: 1.7;
	color: #374151;
	margin-bottom: 20px;
}

.donasipro-ev-price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-radius: 10px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	margin-bottom: 20px;
}

.donasipro-ev-price span { font-size: 13px; color: #6b7280; }
.donasipro-ev-price strong { font-size: 20px; color: var(--dp-ev-brand, #16a34a); }
.donasipro-ev-price-free strong { letter-spacing: .04em; }

.donasipro-ev-field { margin-bottom: 14px; }

.donasipro-ev-label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}

.donasipro-ev-form input[type="text"],
.donasipro-ev-form select {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #d1d5db;
	border-radius: 9px;
	font-size: 15px;
}

.donasipro-ev-form input:focus,
.donasipro-ev-form select:focus {
	outline: none;
	border-color: var(--dp-ev-brand, #16a34a);
}

.donasipro-ev-hint {
	display: block;
	margin-top: 4px;
	font-size: 11.5px;
	color: #6b7280;
}

.donasipro-ev-amounts {
	display: grid;
	/* 2 kolom: nominal rupiah butuh ruang, dan 3-4 kolom membuat angka
	   seperti "Rp1.000.000" terpotong di layar HP. */
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	margin-bottom: 14px;
}

.donasipro-ev-amount-btn {
	padding: 12px 8px;
	border: 1.5px solid #e5e7eb;
	background: #fff;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 600;
	color: #374151;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.donasipro-ev-amount-btn:hover { border-color: var(--dp-ev-brand, #16a34a); }

.donasipro-ev-amount-btn.active {
	border-color: var(--dp-ev-brand, #16a34a);
	color: var(--dp-ev-brand, #16a34a);
	background: color-mix(in srgb, var(--dp-ev-brand, #16a34a) 8%, white);
}

.donasipro-ev-submit {
	width: 100%;
	margin-top: 8px;
	padding: 15px;
	border: none;
	border-radius: 10px;
	background: var(--dp-ev-brand, #16a34a);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.donasipro-ev-submit:disabled { opacity: .6; cursor: not-allowed; }

.donasipro-ev-message { margin-top: 10px; font-size: 13.5px; }
.donasipro-ev-message.error { color: #b91c1c; }

.donasipro-ev-success { text-align: center; padding: 24px 0; }

.donasipro-ev-success-icon {
	width: 62px;
	height: 62px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--dp-ev-brand, #16a34a) 12%, white);
	color: var(--dp-ev-brand, #16a34a);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
}

.donasipro-ev-success h2 { margin: 0 0 8px; font-size: 19px; }
.donasipro-ev-success p { color: #4b5563; font-size: 14.5px; line-height: 1.6; }

.donasipro-ev-footer {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid #f3f4f6;
	text-align: center;
}

.donasipro-ev-footer img { max-height: 42px; width: auto; opacity: .8; }

@media (max-width: 480px) {
	.donasipro-ev-wrapper { margin: 16px auto; padding: 0 10px; }
	.donasipro-ev-body { padding: 18px 14px 22px; }
	.donasipro-ev-title { font-size: 20px; }
}

/* Rincian transfer manual di halaman Event / Produk Digital */
.donasipro-ev-bank-box {
	margin-top: 18px;
	padding: 16px;
	border: 1px dashed #d1d5db;
	border-radius: 10px;
	background: #f9fafb;
	text-align: left;
}

.donasipro-ev-bank-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid #f3f4f6;
	font-size: 14px;
}

.donasipro-ev-bank-row:last-of-type { border-bottom: none; }
.donasipro-ev-bank-row span { color: #6b7280; font-size: 12.5px; }
.donasipro-ev-bank-row strong { color: #111827; overflow-wrap: anywhere; text-align: right; }

.donasipro-ev-bank-note {
	margin: 12px 0 0;
	font-size: 12px;
	color: #6b7280;
	text-align: center;
}

/* Pemilih metode pembayaran & rekening berbentuk kartu berlogo */
.donasipro-ev-channels {
	display: grid;
	/* auto-fill dengan lebar minimum: 3 kolom di layar lebar, turun
	   sendiri jadi 2 di HP tanpa breakpoint terpisah. Logo bank butuh
	   ruang horizontal, jadi minimumnya tidak boleh terlalu kecil. */
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 8px;
}

.donasipro-ev-channel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 84px;
	padding: 10px 8px;
	border: 1.5px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	text-align: center;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.donasipro-ev-channel:hover { border-color: var(--dp-ev-brand, #16a34a); }

.donasipro-ev-channel.active {
	border-color: var(--dp-ev-brand, #16a34a);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--dp-ev-brand, #16a34a) 22%, transparent);
}

.donasipro-ev-channel img {
	max-height: 26px;
	max-width: 74px;
	width: auto;
	/* object-fit menjaga proporsi logo yang rasionya bermacam-macam —
	   tanpa ini logo memanjang seperti "LinkAja" akan gepeng. */
	object-fit: contain;
}

.donasipro-ev-channel-fallback { font-size: 22px; line-height: 1; }

.donasipro-ev-channel-name {
	font-size: 11.5px;
	font-weight: 600;
	color: #374151;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.donasipro-ev-channel-note {
	font-size: 10px;
	color: #9ca3af;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

@media (max-width: 380px) {
	.donasipro-ev-channels { grid-template-columns: repeat(2, 1fr); }
}

/* Logo lembaga di kepala Dashboard Donatur & Fundraiser.

   !important WAJIB di sini. Percobaan pertama memakai `height: 46px`
   biasa, dan logonya tetap tampil raksasa: tema (Astra dkk) memberi
   aturan seperti `.entry-content img { width:100%; height:auto }` dengan
   spesifisitas lebih tinggi daripada satu nama kelas, sehingga tinggi
   yang kita set diabaikan sepenuhnya.

   Ukuran juga dikecilkan dari 46px ke 38px: logo di sini hanya penanda
   identitas lembaga, bukan elemen utama halaman — yang utama tetap
   sapaan & riwayat donasi di bawahnya. */
.donasipro-donor-dashboard-logo,
.donasipro-fr-org-logo {
	display: block !important;

	/* Dibatasi lewat max-height + max-width, BUKAN height tetap.
	   Alasannya: bentuk logo lembaga bermacam-macam. Logo yang ikonnya
	   ditumpuk di atas teks (hampir persegi, seperti Wakaf Mulia) akan
	   ikut menyusut lebarnya kalau tingginya dipatok kecil — itu yang
	   membuatnya sempat tampil terlalu mungil. Logo memanjang justru
	   sebaliknya: dibatasi tinggi saja membuatnya melebar berlebihan.

	   Dengan dua batas ini, tiap bentuk mengambil batas yang relevan
	   baginya dan proporsinya tetap terjaga:
	     - logo persegi  -> mentok di tinggi 88px
	     - logo memanjang -> mentok di lebar 260px */
	height: auto !important;
	width: auto !important;
	max-height: 88px !important;
	max-width: min(100%, 260px) !important;

	object-fit: contain;
	/* Di tengah — margin auto kiri-kanan. */
	margin: 0 auto 18px !important;
}

@media (max-width: 480px) {
	.donasipro-donor-dashboard-logo,
	.donasipro-fr-org-logo {
		max-height: 68px !important;
		max-width: min(100%, 210px) !important;
		margin: 0 auto 14px !important;
	}
}


/* Latar halaman checkout Event / Produk Digital dalam mode bersih.

   Tanpa header & footer tema, tidak ada satu pun aturan yang memberi warna
   pada <body> — kartu checkout yang putih akan menyatu dengan halaman yang
   juga putih, dan batas kartunya hilang sama sekali.

   SENGAJA dibatasi ke dua jenis konten ini lewat kelas bawaan WordPress
   (single-donasipro_event / single-donasipro_digital). Kalau ditulis ke
   `.donasipro-clean-page` saja, halaman Campaign & Lead Magnet yang juga
   memakai kelas itu ikut berubah latarnya — padahal keduanya selama ini
   mengandalkan warna dari tema. */
body.donasipro-clean-page.single-donasipro_event,
body.donasipro-clean-page.single-donasipro_digital,
body.donasipro-clean-page.single-donasipro_qurban {
	margin: 0;
	background: #f3f4f6;
}

/* Beri jarak aman di atas kartu, menggantikan ruang yang dulu diisi
   header tema. */
body.donasipro-clean-page.single-donasipro_event .donasipro-ev-wrapper,
body.donasipro-clean-page.single-donasipro_digital .donasipro-ev-wrapper,
body.donasipro-clean-page.single-donasipro_qurban .donasipro-ev-wrapper {
	margin-top: 24px;
	margin-bottom: 40px;
}

/* ===== Pemilih Qurban ===== */
.donasipro-qb-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.donasipro-qb-item {
	border: 1.5px solid #e5e7eb;
	border-radius: 12px;
	padding: 12px;
	background: #fff;
	transition: border-color .15s ease;
}

.donasipro-qb-item.selected { border-color: var(--dp-ev-brand, #16a34a); }

.donasipro-qb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* min-width:0 wajib — tanpa ini nama hewan yang panjang mendorong
   tombol/stepper keluar dari kartu di layar sempit. */
.donasipro-qb-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.donasipro-qb-info strong { font-size: 14px; color: #111827; overflow-wrap: anywhere; }
.donasipro-qb-info small { font-size: 11.5px; color: #9ca3af; }
.donasipro-qb-price { font-size: 13.5px; font-weight: 700; color: var(--dp-ev-brand, #16a34a); margin-top: 2px; }

.donasipro-qb-control { flex-shrink: 0; }

.donasipro-qb-add {
	padding: 9px 16px;
	border: none;
	border-radius: 8px;
	background: var(--dp-ev-brand, #16a34a);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.donasipro-qb-stepper { display: flex; align-items: center; gap: 6px; }

.donasipro-qb-stepper button {
	width: 32px;
	height: 32px;
	border: 1px solid #d1d5db;
	background: #fff;
	border-radius: 8px;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	color: #374151;
}

.donasipro-qb-qty {
	width: 40px;
	text-align: center;
	border: none;
	background: transparent;
	font-size: 15px;
	font-weight: 700;
	color: #111827;
	/* Panah spinner bawaan browser disembunyikan — nilainya hanya boleh
	   diubah lewat tombol, supaya tidak bisa melewati batas maksimum. */
	-moz-appearance: textfield;
	appearance: textfield;
}

.donasipro-qb-qty::-webkit-outer-spin-button,
.donasipro-qb-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.donasipro-qb-names { display: flex; flex-direction: column; gap: 6px; }
.donasipro-qb-names:not(:empty) { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e5e7eb; }

.donasipro-qb-name-row input {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 13.5px;
}

.donasipro-qb-total { opacity: .95; }

@media (max-width: 420px) {
	.donasipro-qb-row { flex-wrap: wrap; }
	.donasipro-qb-control { width: 100%; }
	.donasipro-qb-add { width: 100%; }
	.donasipro-qb-stepper { justify-content: flex-end; }
}

/* Thumbnail hewan qurban */
.donasipro-qb-thumb {
	flex: 0 0 66px;
	width: 66px;
	height: 66px;
	border-radius: 10px;
	object-fit: cover;
	background: #f3f4f6;
}

.donasipro-qb-thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
}

@media (max-width: 420px) {
	.donasipro-qb-thumb { flex-basis: 54px; width: 54px; height: 54px; }
}

/* Pemilih konten biolink, dikelompokkan per jenis */
.donasipro-fr-biolink-group { margin-bottom: 14px; }

.donasipro-fr-biolink-group-title {
	font-size: 12px;
	font-weight: 700;
	color: #6b7280;
	margin-bottom: 6px;
	letter-spacing: .02em;
}

/* Opsi pembayaran yang sedang terpilih di modal */
.donasipro-payment-option.is-selected {
	border-color: var(--donasipro-primary-color, #16a34a);
	background: color-mix(in srgb, var(--donasipro-primary-color, #16a34a) 8%, #fff);
}

/* ===== Disclaimer Kepatuhan di Checkout ===== */
/* Sengaja bernada tenang (abu-abu, bukan merah/kuning peringatan):
   ini pernyataan kepatuhan yang menenangkan donatur, bukan peringatan
   bahaya. Warna waspada di detik-detik terakhir sebelum tombol donasi
   justru menimbulkan ragu yang tidak perlu. */
.donasipro-checkout-disclaimer {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: #f8f9fb;
	border: 1px solid #e6e8ec;
	border-radius: 10px;
	padding: 12px 14px;
	margin: 14px 0 4px;
}
.donasipro-checkout-disclaimer-icon {
	flex: 0 0 auto;
	color: #9aa3af;
	margin-top: 1px;
}
.donasipro-checkout-disclaimer p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.65;
	color: #5b6472;
}
.donasipro-checkout-disclaimer p strong {
	color: #333b47;
}

/* ===== Infak Operasional Syiar (opsional) ===== */
.donasipro-opsyiar {
	border: 1px dashed #d8dbe0;
	border-radius: 10px;
	padding: 14px;
	margin: 16px 0 4px;
	background: #fcfcfd;
}
.donasipro-opsyiar-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
	font-size: 14px;
}
.donasipro-opsyiar-badge {
	font-size: 10.5px;
	font-weight: 600;
	color: #6b7280;
	background: #eef0f3;
	border-radius: 20px;
	padding: 2px 8px;
	letter-spacing: .3px;
}
.donasipro-opsyiar-desc {
	margin: 0 0 10px;
	font-size: 12.5px;
	line-height: 1.6;
	color: #6b7280;
}
.donasipro-opsyiar-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.donasipro-opsyiar-btn {
	flex: 0 0 auto;
	padding: 8px 14px;
	border: 1px solid #d8dbe0;
	border-radius: 20px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	color: #4b5563;
	cursor: pointer;
	transition: all .15s ease;
}
.donasipro-opsyiar-btn:hover { border-color: #9aa3af; }
.donasipro-opsyiar-btn.active {
	background: #111827;
	border-color: #111827;
	color: #fff;
}

/* =====================================================================
   Daftar Program — gaya RINGKAS  [donasipro_list style="compact"]
   =====================================================================
   Kartu memanjang: foto persegi kecil di kiri, judul + bar tipis +
   nominal di kanan. Dipakai di tempat orang MEMINDAI beberapa program
   berturut-turut (beranda, bio-link), bukan membaca satu per satu.

   Warna brand TIDAK ditulis di sini — disuntikkan lewat atribut style
   dari PHP, dihitung dari setting lembaga.
   ===================================================================== */
.donasipro-compact-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 560px;
	margin: 0 auto;
}

.donasipro-compact-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 2px;
}

.donasipro-compact-heading {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: #171717;
	margin: 0;
}

.donasipro-compact-seeall {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	flex: none;
	transition: opacity .15s ease;
}

.donasipro-compact-seeall:hover,
.donasipro-compact-seeall:focus {
	opacity: .7;
}

/* Garis bawah tautan — DIMATIKAN PAKSA, termasuk untuk seluruh isi kartu.
   =======================================================================
   Kartu di gaya ini adalah satu <a> utuh, jadi setiap tema yang memberi
   `text-decoration: underline` pada <a> akan menggarisbawahi SEMUANYA di
   dalamnya: judul, nominal, sampai baris persentase. Hasilnya terbaca
   seperti daftar tautan biasa, bukan kartu.

   `!important` dipakai di sini dengan sengaja. Aturan tema biasanya
   ditulis dengan pemilih yang lebih spesifik (mis. `.entry-content a`),
   jadi menaikkan spesifisitas di pihak plugin berarti perlombaan yang
   tidak ada ujungnya — dan tetap kalah di tema berikutnya. Ini satu dari
   sedikit tempat di mana pemaksaan memang jawaban yang benar.

   `text-decoration-line` ditulis terpisah karena sebagian tema memakai
   properti ringkas `text-decoration` dan sebagian lagi properti
   panjangnya; mematikan salah satu saja menyisakan yang lain. */
.donasipro-compact-list a,
.donasipro-compact-card,
.donasipro-compact-card:hover,
.donasipro-compact-card:focus,
.donasipro-compact-card *,
.donasipro-compact-seeall,
.donasipro-compact-seeall:hover,
.donasipro-compact-seeall:focus {
	text-decoration: none !important;
	text-decoration-line: none !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

/* Tepi & bayangan kartu DIKEMBALIKAN setelah aturan di atas.
   Dua properti di aturan sebelumnya dipakai untuk mematikan cara lain
   tema menggambar garis bawah — `border-bottom` dan `box-shadow` —
   tapi keduanya juga milik kartu ini sendiri. Tanpa pengembalian di
   sini, kartunya kehilangan bayangan dan tepinya tinggal tiga sisi. */
.donasipro-compact-list .donasipro-compact-card {
	border: 1px solid #ececec !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04) !important;
}

.donasipro-compact-list .donasipro-compact-card:hover {
	border-color: #e0e0e0 !important;
}

.donasipro-compact-list .donasipro-compact-card:hover,
.donasipro-compact-list .donasipro-compact-card:focus-visible {
	box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .22) !important;
}

.donasipro-compact-sub {
	margin: -4px 0 4px;
	font-size: 13.5px;
	color: #6b7280;
	line-height: 1.5;
}

/* --- Kartu --- */
.donasipro-compact-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	text-decoration: none;
	color: inherit;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.donasipro-compact-card:hover,
.donasipro-compact-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .22);
	border-color: #e0e0e0;
	color: inherit;
	text-decoration: none;
}

/* --- Foto --- */
.donasipro-compact-thumb {
	position: relative;
	flex: none;
	width: 96px;
	height: 96px;
	border-radius: 14px;
	overflow: hidden;
	background: #efefef;
	display: block;
}

.donasipro-compact-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 14px;
}

.donasipro-compact-thumb-kosong {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 10px;
	font-size: 11px;
	color: #fff;
	background: linear-gradient(145deg, #4a3a3a, #2e2424);
	line-height: 1.2;
}

/* --- Isi --- */
.donasipro-compact-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
	gap: 9px;
}

.donasipro-compact-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.32;
	color: #171717;

	/* Judul panjang dipotong di baris kedua. Tanpa batas ini, satu
	   program berjudul panjang membuat kartunya jauh lebih tinggi dari
	   yang lain, dan daftar yang tingginya tidak rata jauh lebih lelah
	   dipindai. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.donasipro-compact-bar {
	display: block;
	height: 5px;
	border-radius: 999px;
	overflow: hidden;
	width: 100%;
}

.donasipro-compact-fill {
	display: block;
	height: 100%;
	border-radius: 999px;

	/* Lebar minimum dijaga di PHP (1,5%), bukan di sini: program yang
	   baru terkumpul 0,05% tetap harus menunjukkan secuil warna, karena
	   bar yang benar-benar kosong terbaca sebagai "belum ada yang
	   menyumbang sama sekali". */
}

.donasipro-compact-amount {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}

.donasipro-compact-meta {
	font-size: 13px;
	color: #8b8b8b;
	line-height: 1.35;
}

/* --- Layar sempit --- */
@media screen and (max-width: 480px) {
	.donasipro-compact-card {
		gap: 13px;
		padding: 12px;
		border-radius: 16px;
	}

	.donasipro-compact-thumb {
		width: 84px;
		height: 84px;
		border-radius: 12px;
	}

	.donasipro-compact-thumb img {
		border-radius: 12px;
	}

	.donasipro-compact-title {
		font-size: 15px;
	}

	.donasipro-compact-amount {
		font-size: 15px;
	}

	.donasipro-compact-meta {
		font-size: 12.5px;
	}
}

/* =====================================================================
   Daftar Program — gaya SLIDER  [donasipro_list style="slider"]
   =====================================================================
   Carousel geser: kartu tegak, foto di atas. Yang menggeser adalah
   mesin gulir browser (overflow-x + scroll-snap), bukan JavaScript —
   jadi geser sentuh di ponsel tetap bekerja meski skripnya gagal dimuat.

   Warna brand TIDAK ditulis di sini; disuntikkan dari PHP.
   ===================================================================== */
.donasipro-slider {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
}

.donasipro-slider-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
}

.donasipro-slider-heading {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #171717;
	margin: 0;
}

.donasipro-slider-head-right {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

.donasipro-slider-seeall {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: opacity .15s ease;
}

.donasipro-slider-seeall:hover,
.donasipro-slider-seeall:focus {
	opacity: .7;
}

.donasipro-slider-sub {
	margin: -8px 0 14px;
	font-size: 13.5px;
	color: #6b7280;
	line-height: 1.5;
}

/* --- Tombol panah ---
   Disembunyikan sampai JavaScript menandai slidernya siap. Tombol yang
   tampil padahal skripnya gagal dimuat hanya akan ditekan lalu tidak
   melakukan apa-apa — lebih buruk daripada tidak ada tombol. */
.donasipro-slider-nav {
	display: none;
	gap: 8px;
}

.donasipro-slider-siap .donasipro-slider-nav {
	display: flex;
}

.donasipro-slider-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid #e4e4e4;
	border-radius: 50%;
	background: #fff;
	color: #333;
	cursor: pointer;
	transition: border-color .15s, color .15s, opacity .15s;
}

.donasipro-slider-arrow:hover:not(:disabled) {
	border-color: #c9c9c9;
	color: #000;
}

/* Di ujung, tombolnya dinonaktifkan — bukan disembunyikan. Tombol yang
   hilang-muncul membuat tata letak bergeser tiap kali slider digerakkan. */
.donasipro-slider-arrow:disabled {
	opacity: .35;
	cursor: default;
}

/* --- Rel kartu --- */
.donasipro-slider-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;

	/* Ruang untuk bayangan kartu saat disorot, supaya tidak terpotong
	   oleh tepi wadah yang menggulir. */
	padding: 4px 4px 10px;
	margin: -4px -4px -10px;

	/* Batang gulir disembunyikan: penanda posisinya sudah diambil alih
	   titik di bawah, dan batang gulir horizontal di tengah halaman
	   terlihat seperti kerusakan tata letak. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.donasipro-slider-track::-webkit-scrollbar {
	display: none;
}

.donasipro-slider-track:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 18px;
}

/* --- Kartu ---
   Lebarnya sengaja tidak bulat (78%, 46%, 31%) supaya kartu berikutnya
   selalu mengintip di tepi. Deretan yang pas memenuhi layar terlihat
   seperti daftar yang sudah habis, dan orang tidak akan mencoba
   menggesernya. */
.donasipro-slide {
	flex: 0 0 78%;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 18px;
	overflow: hidden;
	color: inherit;
	transition: transform .16s ease, box-shadow .16s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.donasipro-slide:hover,
.donasipro-slide:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .25);
	color: inherit;
}

.donasipro-slide-thumb {
	position: relative;
	display: block;
	width: 100%;
	/* Persegi 1:1 — mengikuti ukuran poster program yang umum dipakai
	   lembaga (feed Instagram/Facebook 1080×1080), jadi poster tampil utuh
	   tanpa terpotong atas-bawah seperti pada rasio 16:10 sebelumnya. */
	aspect-ratio: 1 / 1;
	background: #efefef;
	overflow: hidden;
}

/* Cadangan untuk peramban lama yang belum mengenal aspect-ratio —
   tanpa ini fotonya setinggi 0 dan kartunya terlihat rusak. Padding
   persen dihitung dari LEBAR, jadi 100% = persegi. */
@supports not (aspect-ratio: 1 / 1) {
	.donasipro-slide-thumb {
		height: 0;
		padding-top: 100%;
	}
	.donasipro-slide-thumb img {
		position: absolute;
		top: 0;
		left: 0;
	}
}

.donasipro-slide-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.donasipro-slide-thumb-kosong {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 12px;
	font-size: 12px;
	color: #fff;
	background: linear-gradient(145deg, #4a3a3a, #2e2424);
}

.donasipro-slide-body {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 14px 15px 16px;
	flex: 1;
}

.donasipro-slide-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.34;
	color: #171717;

	/* Dipotong dua baris supaya tinggi semua kartu sama. Kartu yang
	   tingginya berbeda-beda membuat baris nominal tidak sejajar, dan
	   angka yang tidak sejajar jauh lebih sulit dibandingkan. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;

	/* Menahan tinggi dua baris walau judulnya hanya satu baris. */
	min-height: 2.68em;
}

.donasipro-slide-bar {
	display: block;
	height: 5px;
	border-radius: 999px;
	overflow: hidden;
	width: 100%;
	margin-top: auto;
}

.donasipro-slide-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
}

.donasipro-slide-amount {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}

.donasipro-slide-meta {
	font-size: 13px;
	color: #8b8b8b;
	line-height: 1.35;
}

/* --- Titik penanda --- */
.donasipro-slider-dots {
	display: flex;
	justify-content: center;
	gap: 7px;
	margin-top: 14px;
}

.donasipro-slider-dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #d4d4d4;
	cursor: pointer;
	transition: width .2s ease, background .2s ease;
}

.donasipro-slider-dot.aktif {
	width: 22px;
	background: #9a9a9a;
}

/* --- Garis bawah tautan: dimatikan paksa ---
   Alasan & cara kerjanya sama persis dengan gaya ringkas di atas —
   kartunya satu <a> utuh, jadi tema yang menggarisbawahi tautan akan
   menggarisbawahi seluruh isinya. */
.donasipro-slider a,
.donasipro-slide,
.donasipro-slide:hover,
.donasipro-slide:focus,
.donasipro-slide *,
.donasipro-slider-seeall,
.donasipro-slider-seeall:hover,
.donasipro-slider-seeall:focus {
	text-decoration: none !important;
	text-decoration-line: none !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

/* Tepi & bayangan kartu dikembalikan setelah pemaksaan di atas. */
.donasipro-slider .donasipro-slide {
	border: 1px solid #ececec !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04) !important;
}

.donasipro-slider .donasipro-slide:hover,
.donasipro-slider .donasipro-slide:focus-visible {
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .25) !important;
}

/* --- Layar sedang & lebar --- */
@media screen and (min-width: 600px) {
	.donasipro-slide {
		flex-basis: 46%;
	}
}

@media screen and (min-width: 900px) {
	.donasipro-slide {
		flex-basis: 31%;
	}

	.donasipro-slider-heading {
		font-size: 22px;
	}
}

/* Pengguna yang meminta animasi dikurangi tidak mendapat gulir beranimasi
   maupun efek angkat saat disorot. */
@media (prefers-reduced-motion: reduce) {
	.donasipro-slider-track {
		scroll-behavior: auto;
	}

	.donasipro-slide,
	.donasipro-slider-dot {
		transition: none;
	}

	.donasipro-slide:hover,
	.donasipro-slide:focus-visible {
		transform: none;
	}
}

/* ==========================================================================
   ORANG TUA ASUH
   Semua warna aksen memakai --donasipro-primary-color (Settings > Warna
   Utama), jadi halaman ini otomatis ikut brand lembaga.
   ========================================================================== */
/* Variabel dipasang juga di panel Dashboard Donatur (.donasipro-ota-dash),
   yang TIDAK berada di dalam .donasipro-ota — tanpa ini tombol "Bayar
   Santunan" di dashboard tampil tanpa warna latar. */
.donasipro-ota,
.donasipro-ota-dash {
	--ota-primary: var(--donasipro-primary-color, #16a34a);
	--ota-primary-dark: var(--donasipro-primary-dark, #0f6b31);
	--ota-soft: #f0fdf4;
	--ota-soft: color-mix(in srgb, var(--ota-primary) 10%, #fff);
}
.donasipro-ota {
	max-width: 1100px;
	margin: 0 auto;
	color: #1f2937;
	font-size: 15px;
	line-height: 1.55;
}
.donasipro-ota *, .donasipro-ota *::before, .donasipro-ota *::after { box-sizing: border-box; }

.donasipro-ota-hero {
	background: linear-gradient(135deg, var(--ota-soft), #fff 70%);
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 20px;
}
.donasipro-ota-hero-title { margin: 0 0 10px !important; font-size: 24px !important; line-height: 1.25 !important; color: #111827; }
.donasipro-ota-hero-intro p { margin: 0 0 10px; color: #4b5563; }

.donasipro-ota-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.donasipro-ota-stat { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; text-align: center; }
.donasipro-ota-stat-value { display: block; font-size: 22px; font-weight: 800; color: var(--ota-primary); line-height: 1.2; }
.donasipro-ota-stat-label { display: block; font-size: 12.5px; color: #6b7280; margin-top: 4px; }

.donasipro-ota-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: ota-step; }
.donasipro-ota-steps li { counter-increment: ota-step; position: relative; padding: 10px 12px 10px 44px; background: #fff; border-radius: 10px; font-size: 13.5px; color: #374151; border: 1px dashed #d1d5db; }
.donasipro-ota-steps li::before { content: counter(ota-step); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--ota-primary); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }

.donasipro-ota-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.donasipro-ota-filter-btn { border: 1px solid #d1d5db !important; background: #fff !important; color: #374151 !important; border-radius: 999px !important; padding: 7px 16px !important; font-size: 13.5px !important; cursor: pointer; line-height: 1.3 !important; }
.donasipro-ota-filter-btn.active { background: var(--ota-primary) !important; border-color: var(--ota-primary) !important; color: #fff !important; }

.donasipro-ota-grid { display: grid; grid-template-columns: repeat(var(--ota-cols, 3), minmax(0, 1fr)); gap: 18px; }
.donasipro-ota-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s ease, transform .15s ease; }
.donasipro-ota-card:hover { box-shadow: 0 8px 24px rgba(17,24,39,.08); transform: translateY(-2px); }
.donasipro-ota-card-photo { position: relative; aspect-ratio: 4 / 3.4; background: var(--ota-soft); }
.donasipro-ota-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.donasipro-ota-card-photo-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 56px; background: var(--ota-soft); border-radius: inherit; }
.donasipro-ota-state-taken .donasipro-ota-card-photo img { filter: grayscale(.55); }

.donasipro-ota-badge { position: absolute; left: 10px; top: 10px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #fff; color: #111827; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.donasipro-ota-badge-free { background: var(--ota-primary); color: #fff; }
.donasipro-ota-badge-held { background: #fef3c7; color: #92400e; }
.donasipro-ota-badge-taken { background: #fff; color: #15803d; }

.donasipro-ota-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.donasipro-ota-card-name { font-size: 17px; color: #111827; }
.donasipro-ota-card-meta { font-size: 13px; color: #6b7280; }
.donasipro-ota-card-dream { font-size: 13px; color: #374151; margin-top: 4px; }
.donasipro-ota-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }

.donasipro-ota-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--ota-primary) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; padding: 10px 16px !important; font-weight: 700 !important; font-size: 14px !important; text-decoration: none !important; cursor: pointer; line-height: 1.25 !important; text-align: center; }
.donasipro-ota-btn:hover { background: var(--ota-primary-dark) !important; color: #fff !important; }
.donasipro-ota-btn-disabled, .donasipro-ota-btn-disabled:hover { background: #e5e7eb !important; color: #6b7280 !important; cursor: default; }
.donasipro-ota-btn-block { display: flex; width: 100%; margin-top: 16px; }
.donasipro-ota-link-btn { background: none !important; border: 0 !important; padding: 0 !important; color: var(--ota-primary) !important; font-weight: 600 !important; font-size: 13.5px !important; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.donasipro-ota-profile-box { max-width: 480px; margin: 40px 16px; }
.donasipro-ota-profile-photo { width: 100%; max-height: 320px; object-fit: cover; border-radius: 12px; margin-bottom: 14px; display: block; }
.donasipro-ota-profile-box h3 { margin: 0 0 10px !important; font-size: 20px !important; }
.donasipro-ota-profile-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 12px; font-size: 14px; }
.donasipro-ota-profile-facts dt { color: #6b7280; margin: 0; }
.donasipro-ota-profile-facts dd { margin: 0; font-weight: 600; color: #111827; }
.donasipro-ota-profile-story { font-size: 14px; color: #374151; border-top: 1px solid #f3f4f6; padding-top: 12px; }

.donasipro-ota-empty, .donasipro-ota-notice, .donasipro-ota-filter-empty { background: #f9fafb; border: 1px dashed #d1d5db; border-radius: 12px; padding: 20px; text-align: center; color: #4b5563; }
.donasipro-ota-notice p { margin: 0 0 14px; }

.donasipro-ota-thanks { background: var(--ota-soft); border: 1px solid color-mix(in srgb, var(--ota-primary) 35%, #fff); border-radius: 14px; padding: 20px; text-align: center; margin-bottom: 20px; }
.donasipro-ota-thanks-icon { font-size: 36px; }
.donasipro-ota-thanks strong { display: block; font-size: 18px; margin: 4px 0 6px; color: #111827; }
.donasipro-ota-thanks p { margin: 0; color: #374151; }

/* --- Checkout --- */
.donasipro-ota-checkout { max-width: 560px; margin: 0 auto; }
.donasipro-ota-back { display: inline-block; font-size: 14px; color: #4b5563 !important; text-decoration: none !important; margin-bottom: 10px; }
.donasipro-ota-checkout-title { margin: 0 0 14px !important; font-size: 22px !important; }
.donasipro-ota-child-summary { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px; margin-bottom: 14px; }
.donasipro-ota-child-summary img, .donasipro-ota-child-summary .donasipro-ota-card-photo-placeholder { width: 76px; height: 76px; min-width: 76px; object-fit: cover; border-radius: 12px; font-size: 34px; }
.donasipro-ota-child-summary small { display: block; color: #6b7280; font-size: 12.5px; }
.donasipro-ota-child-summary strong { display: block; font-size: 18px; color: #111827; }
.donasipro-ota-child-summary span { display: block; font-size: 13px; color: #6b7280; }

.donasipro-ota-benefits { list-style: none; margin: 0 0 16px; padding: 12px 14px; background: var(--ota-soft); border-radius: 12px; font-size: 13.5px; }
.donasipro-ota-benefits li { margin: 4px 0; }

.donasipro-ota-progress-box { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.donasipro-ota-progress-head { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 6px; }
.donasipro-ota-progress { height: 8px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.donasipro-ota-progress span { display: block; height: 100%; background: var(--ota-primary); border-radius: 999px; }
.donasipro-ota-progress-box small { display: block; margin-top: 6px; color: #6b7280; font-size: 12.5px; }

.donasipro-ota-plans { display: grid; gap: 10px; margin-bottom: 16px; }
.donasipro-ota-plan { display: flex !important; gap: 12px; align-items: flex-start; text-align: left !important; width: 100%; background: #fff !important; border: 2px solid #e5e7eb !important; border-radius: 12px !important; padding: 12px 14px !important; cursor: pointer; color: #111827 !important; font-weight: 400 !important; line-height: 1.4 !important; }
.donasipro-ota-plan.active { border-color: var(--donasipro-primary-color, #16a34a) !important; background: color-mix(in srgb, var(--donasipro-primary-color, #16a34a) 6%, #fff) !important; }
.donasipro-ota-plan-radio { width: 18px; height: 18px; min-width: 18px; border-radius: 50%; border: 2px solid #9ca3af; margin-top: 2px; position: relative; }
.donasipro-ota-plan.active .donasipro-ota-plan-radio { border-color: var(--donasipro-primary-color, #16a34a); }
.donasipro-ota-plan.active .donasipro-ota-plan-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--donasipro-primary-color, #16a34a); }
.donasipro-ota-plan-body strong { display: block; font-size: 15px; }
.donasipro-ota-plan-price { display: block; font-weight: 800; color: var(--donasipro-primary-color, #16a34a); font-size: 16px; }
.donasipro-ota-plan-body small { display: block; color: #6b7280; font-size: 12.5px; margin-top: 2px; }
.donasipro-ota-plan-split { display: block; font-size: 12.5px; color: #374151; margin-top: 1px; }

/* --- Dashboard Donatur: Anak Asuh Saya --- */
.donasipro-ota-dash-item { border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; margin-bottom: 12px; background: #fff; }
.donasipro-ota-dash-item:last-child { margin-bottom: 0; }
.donasipro-ota-dash-head { display: flex; gap: 12px; align-items: center; }
.donasipro-ota-dash-head img, .donasipro-ota-dash-head .donasipro-ota-dash-ph { width: 64px; height: 64px; min-width: 64px; border-radius: 12px; object-fit: cover; background: #f3f4f6; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.donasipro-ota-dash-head strong { display: block; font-size: 16px; color: #111827; }
.donasipro-ota-dash-head span { display: block; font-size: 12.5px; color: #6b7280; }
.donasipro-ota-dash-status { display: inline-block !important; font-size: 11.5px !important; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #dcfce7; color: #166534 !important; margin-top: 3px; }
.donasipro-ota-dash-status.is-warn { background: #fef3c7; color: #92400e !important; }
.donasipro-ota-dash-status.is-muted { background: #f3f4f6; color: #4b5563 !important; }
.donasipro-ota-dash-pay { margin: 12px 0 0; }
.donasipro-ota-dash-pay p { margin: 0 0 8px; font-size: 13.5px; }
.donasipro-ota-dash-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.donasipro-ota-dash-reports { margin-top: 12px; border-top: 1px solid #f3f4f6; padding-top: 10px; }
.donasipro-ota-dash-reports h4 { margin: 0 0 8px !important; font-size: 13.5px !important; }
.donasipro-ota-report { border: 1px solid #f3f4f6; border-radius: 10px; margin-bottom: 8px; background: #fafafa; }
.donasipro-ota-report summary { cursor: pointer; padding: 10px 12px; font-size: 13.5px; list-style: none; display: flex; justify-content: space-between; gap: 8px; }
.donasipro-ota-report summary::-webkit-details-marker { display: none; }
.donasipro-ota-report summary::after { content: '▾'; color: #9ca3af; }
.donasipro-ota-report[open] summary::after { content: '▴'; }
.donasipro-ota-report-body { padding: 0 12px 12px; font-size: 13.5px; color: #374151; }
.donasipro-ota-report-body img { width: 100%; max-height: 280px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; display: block; }
.donasipro-ota-report-body dl { margin: 0; }
.donasipro-ota-report-body dt { font-weight: 700; margin-top: 8px; color: #111827; }
.donasipro-ota-report-body dd { margin: 2px 0 0; }
.donasipro-ota-dash-empty { font-size: 13px; color: #6b7280; margin: 0; }

/* --- Info fundraiser pengajak di checkout (sengaja kecil & lembut) --- */
.donasipro-referrer-slot { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; padding: 6px 10px 6px 6px; border-radius: 999px; background: #f9fafb; border: 1px solid #f0f0f0; font-size: 12.5px; line-height: 1.35; color: #6b7280; width: fit-content; max-width: 100%; }
.donasipro-referrer-slot[hidden] { display: none !important; }
.donasipro-referrer-slot strong { color: #374151; font-weight: 600; }
.donasipro-referrer-avatar { width: 24px; height: 24px; min-width: 24px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--donasipro-primary-color, #16a34a); color: #fff; font-size: 11px; font-weight: 700; }
.donasipro-referrer-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Video perkenalan anak --- */
.donasipro-ota-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #111827; border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.donasipro-ota-video.is-vertical { aspect-ratio: 9 / 16; max-height: 70vh; max-width: calc(70vh * 9 / 16); margin-left: auto; margin-right: auto; }
.donasipro-ota-video iframe, .donasipro-ota-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.donasipro-ota-video-facade { position: absolute !important; inset: 0; width: 100%; height: 100%; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: linear-gradient(160deg, #1f2937, #111827) !important; cursor: pointer; display: flex !important; align-items: center; justify-content: center; }
.donasipro-ota-video-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.donasipro-ota-video-play { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--donasipro-primary-color, #16a34a); color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center; padding-left: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform .15s ease; }
.donasipro-ota-video-facade:hover .donasipro-ota-video-play { transform: scale(1.08); }
.donasipro-ota-video-label { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; color: #fff; font-size: 13px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.6); padding: 0 10px; }
.donasipro-ota-video-badge { position: absolute !important; left: 10px; bottom: 10px; font-size: 11.5px !important; font-weight: 700 !important; padding: 4px 10px !important; border-radius: 999px !important; border: 0 !important; background: rgba(17,24,39,.72) !important; color: #fff !important; cursor: pointer; line-height: 1.3 !important; }
.donasipro-ota-video-details { margin: 0 0 14px; }
.donasipro-ota-video-details summary { cursor: pointer; font-size: 14px; font-weight: 600; color: #374151; padding: 6px 0; }
.donasipro-ota-video-details .donasipro-ota-video { margin-top: 8px; }

/* --- Privasi foto --- */
.donasipro-ota-privacy-tag { position: absolute; right: 10px; bottom: 10px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(17,24,39,.62); color: #fff; backdrop-filter: blur(2px); }
.donasipro-ota-privacy-note { font-size: 12.5px !important; color: #4b5563; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 12px; margin: 0 0 14px !important; }
.donasipro-ota-gender-P { background: linear-gradient(135deg, #fce7f3, #fdf2f8) !important; }
.donasipro-ota-gender-L { background: linear-gradient(135deg, #dbeafe, #eff6ff) !important; }
.donasipro-ota-card-photo-placeholder { font-size: 72px; }

@media (max-width: 900px) {
	.donasipro-ota-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.donasipro-ota-hero { padding: 18px; }
	.donasipro-ota-hero-title { font-size: 20px !important; }
	.donasipro-ota-stats, .donasipro-ota-steps { grid-template-columns: 1fr; }
	.donasipro-ota-stats { gap: 8px; }
	.donasipro-ota-stat { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; }
	.donasipro-ota-stat-value { font-size: 18px; min-width: 70px; }
	.donasipro-ota-stat-label { margin: 0; }
	.donasipro-ota-grid { grid-template-columns: 1fr; gap: 14px; }
	.donasipro-ota-card-actions { flex-direction: column-reverse; align-items: stretch; }
	.donasipro-ota-card-actions .donasipro-ota-btn { width: 100%; }
	.donasipro-ota-card-actions .donasipro-ota-link-btn { align-self: center; }
}