/* Sedekah Subuh Haramain — shared public and admin visual system.
   Loaded last so existing behavior and component selectors remain intact. */
:root {
  --brand-50: #f2f8fc;
  --brand-100: #e6f2fa;
  --brand-200: #c9e1f2;
  --brand-300: #9fcbe8;
  --brand-500: #2379ba;
  --brand-600: #1265a8;
  --brand-700: #0e548e;
  --brand-800: #123e68;
  --brand-900: #0c2943;
  --ink: #10263c;
  --muted: #5c7084;
  --line: #dce7ee;
  --surface: #fff;
  --bg: #f5f9fc;
  --radius: 14px;
  --shadow: 0 16px 42px -30px rgba(12, 41, 67, .33);
}
html { scroll-padding-top: 5.5rem; }
body { background: #fff; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.55; }
h1, h2, h3 { color: var(--brand-900); letter-spacing: -.035em; }
.container-shell { width: min(100% - 3.5rem, 78rem); }
:where(.surface, .panel, .program-card, .gallery-card, .package-card, .donor-card, .detail-content, .detail-heading-card, .donation-card) {
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; background: #fff;
}
:where(.btn, .field, .select, .textarea, .nominal-card, .payment-choice) { font-family: inherit; }
.btn { min-height: 2.9rem; padding: .76rem 1.25rem; border-radius: 9px; font-size: .9rem; font-weight: 700; box-shadow: none; }
.btn-primary, .donation-sticky > .btn { background: var(--brand-600) !important; color: #fff !important; border-color: var(--brand-600) !important; }
.btn-primary:hover:not(:disabled), .donation-sticky > .btn:hover:not(:disabled) { background: var(--brand-700) !important; border-color: var(--brand-700) !important; box-shadow: 0 9px 20px -12px rgba(18,101,168,.65); }
.btn-secondary, .campaign-load-more { color: var(--brand-700) !important; background: #fff !important; border-color: #bed8e9 !important; }
.btn-secondary:hover:not(:disabled), .campaign-load-more:hover:not(:disabled) { background: var(--brand-50) !important; }
:where(button, a, input, select, textarea):focus-visible { outline: 3px solid rgba(18,101,168,.32); outline-offset: 3px; }
.progress-fill { background: var(--brand-600) !important; }
.badge-blue { background: #e7f3fb; color: #0d548a; }
.badge-green { background: #e7f7f0; color: #086b4d; }
.badge-amber { background: #fff4dc; color: #865507; }
.badge-red { background: #ffeded; color: #a02d35; }

/* Shared navigation and footer */
.site-header { background: rgba(255,255,255,.97); border-color: #e8eff4; box-shadow: 0 2px 14px rgba(12,41,67,.035); }
.nav-wrap { height: 5.1rem; gap: 1.25rem; }
.site-header .brand-mark, .site-footer .brand-mark, .admin-sidebar .brand-mark { display: none; }
.site-header .brand-mark { display: grid; width: 3rem; height: 3rem; flex: 0 0 3rem; padding: .18rem; border: 0; border-radius: 7px; background: #fff; box-shadow: none; }
.site-header .brand { gap: .65rem; }
.site-header .site-logo { width: 100%; height: 100%; object-fit: contain; }
.brand { gap: 0; color: var(--brand-900); font-weight: 800; }
.brand-copy-text { display: block; max-width: 17rem; font-size: .95rem; line-height: 1.18; letter-spacing: -.02em; }
.brand-copy small { margin-top: .2rem; color: var(--brand-600); font-size: .6rem; font-weight: 700; letter-spacing: .13em; }
.nav-links { gap: .05rem; }
.nav-link { padding: .6rem .65rem; border-radius: 8px; color: #44596d; font-size: .85rem; font-weight: 600; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--brand-700); background: var(--brand-50); }
.nav-actions .btn { white-space: nowrap; }
.site-footer { background: #f5f9fc; border-color: var(--line); }
.footer-grid { padding-top: 3.6rem; }
.footer-title { color: var(--brand-900); letter-spacing: .06em; }
.footer-links a:hover { color: var(--brand-600); }
.social-links .social-icon { width: 1.2rem; height: 1.2rem; stroke-width: 1.8; }
.social-links a:hover { color: #fff; background: var(--brand-600); border-color: var(--brand-600); }
.site-footer .social-title { margin-top: 1.25rem; font-size: .78rem; }

/* Public homepage */
.hero { overflow: hidden; padding: 3.25rem 0 3.5rem; background: #fff; }
.hero::before, .hero::after { display: none; }
.hero-grid { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(2.5rem, 5vw, 5.5rem); }
.hero .eyebrow, .hero .trust-row, .hero-card { display: none; }
.hero h1 { max-width: 11ch; margin: 0 0 1.2rem; color: var(--brand-900); font-size: clamp(2.85rem, 4.6vw, 4.8rem); font-weight: 800; line-height: 1.04; letter-spacing: -.055em; }
.hero h1 span { color: var(--brand-900); }
.hero-copy { max-width: 34rem; margin-bottom: 1.65rem; color: #53697d; font-size: 1.06rem; line-height: 1.7; }
.hero-actions { gap: .9rem; align-items: center; }
.hero-actions .btn-primary { min-height: 3.25rem; padding-inline: 1.5rem; }
.hero-actions .btn-secondary { border-color: transparent !important; box-shadow: inset 0 -1px var(--brand-600); border-radius: 0; padding-inline: .25rem; min-height: 2.5rem; }
.hero-visual { border-radius: 15px; overflow: hidden; background: #dcebf5; }
.hero-image { display: block; width: 100%; height: clamp(22rem, 34vw, 29rem); aspect-ratio: auto; object-fit: cover; object-position: 57% 50%; border-radius: 0; box-shadow: none; }
.metric-strip { margin-top: 0; padding-top: .8rem; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; overflow: visible; background: transparent; }
.metric { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; min-height: 9.5rem; padding: 1.4rem; text-align: left; border: 1px solid #d8e9f4; border-radius: 16px; background: linear-gradient(145deg,#fff 40%,#edf7fd); box-shadow: 0 14px 30px -25px rgba(12,66,112,.3); }
.metric:last-child { border-right: 1px solid #d8e9f4; }
.metric-icon { display: grid !important; flex: 0 0 2.7rem; place-items: center; width: 2.7rem; height: 2.7rem; margin: 0 !important; border-radius: 12px; color: var(--brand-700) !important; background: #dbedf9; }
.metric-icon svg { width: 1.45rem; height: 1.45rem; }
.metric-copy { display: flex; flex-direction: column; min-width: 0; }
.metric .metric-label { margin: .1rem 0 .55rem; color: #496b82; font-size: .79rem; font-weight: 750; }
.metric strong { color: var(--brand-900); font-size: clamp(1.5rem,2.3vw,2.15rem); font-weight: 850; line-height: 1.12; overflow-wrap: anywhere; }
.metric .metric-caption { margin-top: .45rem; color: #6c8294; font-size: .73rem; line-height: 1.4; }
.section { padding: 5.3rem 0; }
.section-sm { padding: 4rem 0; }
.section-tint { background: #f2f8fc; }
.section-head { margin-bottom: 1.7rem; gap: 1.5rem; }
.section-copy { max-width: 44rem; }
.kicker { color: var(--brand-600); font-size: .75rem; font-weight: 800; letter-spacing: .11em; }
.section-title { color: var(--brand-900); font-size: clamp(1.85rem, 3vw, 2.65rem); font-weight: 800; line-height: 1.13; }
.section-description { color: #61768a; font-size: .98rem; line-height: 1.65; }
.program-grid { gap: 1.15rem; }
.program-card { border-radius: 13px; overflow: hidden; box-shadow: none; }
.program-card:hover { border-color: #9fcbe8; transform: translateY(-3px); box-shadow: 0 14px 28px -24px rgba(12,41,67,.45); }
.program-media { height: auto; aspect-ratio: 16/10; border-bottom: 0; background: #eaf4fa; }
.program-media img { width: 100%; height: 100%; object-fit: cover; }
.program-body { padding: 1.3rem 1.35rem 1.4rem; }
.program-org { color: #64798a; font-weight: 650; font-size: .74rem; }
.program-title { color: var(--brand-900); font-size: 1.18rem; line-height: 1.28; font-weight: 800; }
.program-excerpt { color: #687c8d; }
.program-raised strong { color: var(--brand-900); }
.program-card .btn { margin-top: 1.2rem; }
.progress-track { background: #e5edf3; }
.step-card { padding: 1.65rem; }
.step-number { background: #dcecf8; color: var(--brand-700); box-shadow: none; }
.step-card h3 { font-size: 1.12rem; }
.trust-panel { background: var(--brand-900); border-radius: 16px; box-shadow: none; }
.trust-panel h2 { color: #fff; }
.trust-point svg { color: #a9d9f6; }
.faq-item { border-color: var(--line); }
.faq-question { color: var(--brand-900); }
.cta-panel { background: #eaf5fb; border: 1px solid #d0e6f3; border-radius: 14px; box-shadow: none; }
.cta-panel h2 { color: var(--brand-900); }
.cta-panel p { color: #526e82; }
.trend-bar { background: linear-gradient(180deg, #63b3e5, var(--brand-600)); }
.donor-card::before { background: var(--brand-600); }
.aamiin-button { color: var(--brand-700); }

/* Listing, detail, information and status screens */
.page-hero { background: #edf6fb; border-bottom: 1px solid #dcecf5; }
.page-hero h1, .content-page h1 { color: var(--brand-900); font-weight: 800; letter-spacing: -.045em; }
.page-hero p { color: #5a7185; }
.breadcrumbs { color: #657b8c; }
.breadcrumbs a:hover { color: var(--brand-600); }
.filter-bar { border-color: var(--line); }
.field, .select, .textarea { border-color: #cddce6; border-radius: 9px; background: #fff; color: var(--ink); font-size: .94rem; }
.field:focus, .select:focus, .textarea:focus { border-color: var(--brand-600); box-shadow: 0 0 0 4px rgba(18,101,168,.1); }
.field-label { color: var(--brand-900); font-size: .84rem; font-weight: 700; }
.field-help { color: #667b8f; }
.detail-section { background: #fff; }
.campaign-detail { background: #fff; }
.campaign-detail .detail-grid { gap: 2rem; }
.campaign-detail .detail-media { border-color: var(--line); border-radius: 13px; }
.campaign-detail .detail-heading-card { padding: 1.7rem; }
.campaign-detail #detail-title { color: var(--brand-900); font-weight: 800; }
.campaign-detail .detail-meta { background: #f2f8fc; color: #536b80; }
.detail-tabs { border-color: var(--line); border-radius: 13px 13px 0 0; }
.detail-tab.active { color: var(--brand-700); border-color: var(--brand-600); }
.detail-tab-panel { padding: 1.65rem; }
.campaign-detail .donation-card { padding: 1.7rem; border-color: #cbdfea; }
.amount-big { color: var(--brand-900); }
.payment-choice:has(input:checked) { border-color: var(--brand-600); background: var(--brand-50); }
.payment-choice { border: 1px solid #d1e0e9; border-radius: 10px; }
.status-wrap { max-width: 46rem; }
.status-card { border-radius: 14px; }
.content-page { line-height: 1.75; }
.content-page h2 { color: var(--brand-900); }

/* Donation checkout */
.donation-clean-page { background: #f3f8fc; }
.donation-clean-main { padding: 2.65rem 1.25rem 5rem; }
.donation-clean-shell { width: min(100%, 43rem); }
.donation-clean-card { overflow: visible; border: 1px solid #d7e5ee; border-radius: 14px; background: #fff; box-shadow: 0 18px 48px -36px rgba(12,41,67,.32); }
.donation-clean-head { padding: 1.85rem 2.1rem 1.55rem; border-color: var(--line); }
.donation-clean-head p { margin-bottom: .35rem; color: var(--brand-600); font-size: .83rem; font-weight: 700; }
.donation-clean-head h1 { color: var(--brand-900); font-size: 1.5rem; font-weight: 800; line-height: 1.25; }
.donation-block { padding: 1.65rem 2.1rem 1.8rem; border-color: var(--line); }
.donation-block h2 { margin-bottom: 1.05rem; color: var(--brand-900); font-size: 1.09rem; font-weight: 800; }
.donation-block .field-label { margin-top: 1.1rem; margin-bottom: .4rem; }
.donation-block .field, .donation-block .textarea, .donation-block .select { margin: 0; width: 100%; min-height: 3.15rem; }
.donation-block .textarea { min-height: 7.8rem; }
.donation-block .field-error { margin-bottom: .35rem; min-height: .25rem; }
.donation-block .check-row { margin: .85rem 0 1.05rem; color: #4e6478; }
.donation-block .check-row + .field-label { margin-top: .75rem; }
.donation-block .check-row input, .donation-terms input { accent-color: var(--brand-600); }
.nominal-clean-grid { gap: .7rem; margin: .6rem 0 .2rem; }
.nominal-card { min-height: 3.25rem; border: 1px solid #cbdce7; border-radius: 9px; background: #fff; color: var(--brand-900); font-size: .92rem; font-weight: 700; }
.nominal-card:hover { border-color: var(--brand-500); background: #f8fbfd; }
.nominal-card[aria-pressed="true"] { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.payment-options { gap: .75rem; }
.payment-choice { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; align-content: center; min-height: 5rem; padding: .85rem 1rem; }
.payment-choice input { grid-row: 1 / span 2; align-self: center; accent-color: var(--brand-600); }
.payment-choice strong { color: var(--brand-900); font-size: .9rem; }
.payment-choice small { color: #667b8b; font-size: .72rem; }
.package-clean-summary { background: var(--brand-50); color: var(--brand-900); }
.donation-terms { padding: 1.3rem 2.1rem .25rem; color: #4d6477; }
.donation-terms a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }
#terms-error { padding: 0 2.1rem; }
.donation-sticky { padding: 1.15rem 2.1rem 2rem; background: #fff; border-radius: 0 0 14px 14px; }
.donation-sticky > .btn { width: 100%; min-height: 3.35rem; font-size: 1rem; }
.donation-mini-summary { margin-bottom: 1.1rem; padding: .85rem; border: 1px solid var(--line); border-radius: 10px; }
.donation-mini-summary .summary-thumb { width: 3.1rem; height: 3.1rem; }
.donation-mini-summary strong { color: var(--brand-900); }

/* Admin: dense information remains calm and navigable. */
.admin-page { background: #f4f8fb; }
.admin-login { background: #f4f8fb; }
.login-brand { background: var(--brand-900); padding: 3.5rem; }
.login-brand::after { display: none; }
.login-brand > img { display: none; }
.login-copy h1 { max-width: 12ch; color: #fff; font-size: clamp(2.5rem, 4.6vw, 4.5rem); font-weight: 800; line-height: 1.06; }
.login-copy p { color: #bed8eb; }
.login-panel { background: #f4f8fb; }
.login-card { width: min(100%, 27rem); padding: 2.25rem; border: 1px solid var(--line); border-radius: 14px; }
.login-card h2 { font-size: 1.65rem; font-weight: 800; }
.admin-shell { grid-template-columns: 15.75rem minmax(0, 1fr); }
.admin-sidebar { border: 0; background: var(--brand-900); padding: 1.75rem .85rem; }
.admin-sidebar .brand { margin: 0 .85rem; color: #fff; }
.admin-sidebar .brand-copy > span { display: block; font-size: 1.5rem; line-height: 1.05; letter-spacing: -.045em; }
.admin-sidebar .brand-copy small { margin-top: .4rem; color: #b5d4e8; font-size: .6rem; letter-spacing: .05em; }
.admin-nav { margin-top: 2.25rem; gap: .22rem; }
.admin-nav-button { min-height: 2.9rem; padding: .68rem .9rem; border-radius: 8px; color: #d1e3f0; font-size: .89rem; font-weight: 600; }
.admin-nav-button:hover, .admin-nav-button.active { background: #1867a6; color: #fff; }
.admin-sidebar .btn-ghost { width: 100%; justify-content: flex-start; color: #d1e3f0; }
.admin-sidebar .btn-ghost:hover { color: #fff; background: rgba(255,255,255,.1); }
.admin-topbar { height: 4.85rem; padding: 0 2rem; border-color: var(--line); background: rgba(255,255,255,.96); }
.admin-topbar h1 { color: var(--brand-900); font-size: 1.55rem; font-weight: 800; }
.admin-user { color: var(--brand-900); font-weight: 650; }
.avatar { background: #dcecf8; color: var(--brand-700); }
.admin-content { min-height: calc(100vh - 4.85rem); padding: 1.65rem 2rem 3rem; background: #f4f8fb; }
.stat-grid { gap: .9rem; }
.stat-card { min-height: 8.25rem; padding: 1.3rem 1.4rem; border-radius: 12px; }
.stat-card > span { color: #5d7286; font-size: .85rem; font-weight: 600; }
.stat-card strong { margin-top: .7rem; color: var(--brand-900); font-size: clamp(1.35rem, 2vw, 1.95rem); font-weight: 800; line-height: 1.1; }
.admin-grid { grid-template-columns: minmax(0, 1.8fr) minmax(17rem, .9fr); gap: .9rem; margin-top: .9rem; }
.admin-grid .panel { min-height: 19rem; }
.panel, .settings-card { padding: 1.4rem; border-radius: 12px; }
.panel-head h2, .settings-card h2 { color: var(--brand-900); font-size: 1.13rem; font-weight: 800; }
.admin-grid .section-actions { display: grid; gap: .65rem; }
.admin-grid .section-actions .btn { width: 100%; }
.admin-grid .field-help { margin-top: 1.4rem; line-height: 1.6; }
.toolbar { gap: .8rem; margin-bottom: 1rem; }
.toolbar .field { width: min(100%, 28rem); background: #fff; }
.toolbar .select { min-width: 11rem; }
.table-wrap { border-color: var(--line); border-radius: 12px; box-shadow: none; }
.data-table { white-space: normal; }
.data-table th, .data-table td { padding: 1rem .95rem; border-color: #e7eef3; font-size: .82rem; line-height: 1.45; }
.data-table th { background: #edf5fa; color: var(--brand-900); font-size: .77rem; font-weight: 800; white-space: nowrap; }
.data-table td { color: #354f65; vertical-align: middle; }
.data-table td strong { color: var(--brand-900); }
.data-table td small { display: block; color: #6c8293; }
.data-table tbody tr:hover { background: #f5fafd; }
.table-actions { flex-wrap: wrap; }
.table-actions .btn { min-height: 2.25rem; padding: .45rem .65rem; font-size: .76rem; }
.settings-grid { gap: .9rem; }
.settings-card { padding: 1.6rem; }
.settings-card .field-label { margin-top: 1rem; }
.admin-entity-dialog, .dialog { border-radius: 13px; }
.admin-entity-dialog .dialog-head, .admin-entity-dialog .dialog-actions { border-color: var(--line); }
.entity-form-grid .form-group { gap: .38rem; }
.proof-dialog { border-radius: 13px; }

@media (max-width: 1100px) {
  .nav-links { gap: 0; }
  .nav-link { padding-inline: .43rem; font-size: .79rem; }
  .brand-copy-text { max-width: 13rem; font-size: .82rem; }
  .hero-grid { gap: 2.3rem; }
  .admin-shell { grid-template-columns: 13.5rem minmax(0, 1fr); }
  .admin-content { padding-inline: 1.3rem; }
  .admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .container-shell { width: min(100% - 2rem, 78rem); }
  .nav-wrap { height: 4.65rem; }
  .brand-copy-text { max-width: 17rem; font-size: .95rem; }
  .hero { padding: 3rem 0 2.7rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.3rem; }
  .hero h1 { max-width: 14ch; }
  .hero-visual { max-width: none; }
  .hero-image { height: min(55vw, 28rem); min-height: 19rem; }
  .metric-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .metric { padding-inline: 1rem; }
  .admin-shell { display: block; }
  .admin-sidebar { width: 17.5rem; box-shadow: 12px 0 36px rgba(12,41,67,.22); }
  .admin-topbar { padding-inline: 1rem; }
  .admin-content { padding: 1rem; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 4.8rem; }
  .container-shell { width: min(100% - 2rem, 78rem); }
  .nav-wrap { height: 4.45rem; }
  .brand-copy-text { max-width: 13rem; font-size: .8rem; }
  .brand-copy small { font-size: .55rem; }
  .mobile-menu { border-color: var(--line); padding: .45rem 1rem 1rem; box-shadow: 0 18px 30px rgba(12,41,67,.1); }
  .mobile-menu .nav-link { font-size: .93rem; padding: .7rem .8rem; }
  .hero { padding: 2.7rem 0 2rem; }
  .hero h1 { font-size: clamp(2.55rem, 10vw, 3.7rem); line-height: 1.08; }
  .hero-copy { margin-bottom: 1.35rem; font-size: .97rem; line-height: 1.65; }
  .hero-actions { display: flex; gap: .8rem; }
  .hero-actions .btn-primary { width: auto; min-width: 10.4rem; }
  .hero-actions .btn-secondary { width: auto; }
  .hero-visual { border-radius: 11px; }
  .hero-image { height: 16.7rem; min-height: 0; object-position: 62% 50%; }
  .metric-grid { grid-template-columns: 1fr; gap: .7rem; }
  .metric { min-height: 6.7rem; padding: 1rem; }
  .metric:last-child { grid-column: auto; }
  .metric strong { font-size: 1.45rem; }
  .metric .metric-label { font-size: .78rem; }
  .section { padding: 3.5rem 0; }
  .section-sm { padding: 2.8rem 0; }
  .section-head { gap: .8rem; }
  .section-title { font-size: 1.85rem; }
  .section-head > .btn { margin-top: .25rem; }
  .program-body { padding: 1.2rem; }
  .trust-panel { padding: 1.5rem; }
  .detail-tab-panel { padding: 1.2rem; }
  .campaign-detail .detail-heading-card, .campaign-detail .donation-card { padding: 1.25rem; }
  .donation-clean-main { padding: .7rem 0 5rem; }
  .donation-clean-shell { width: 100%; }
  .donation-clean-card { border-inline: 0; border-radius: 0; }
  .donation-clean-head, .donation-block { padding-inline: 1.15rem; }
  .donation-clean-head { padding-top: 1.5rem; }
  .donation-block { padding-block: 1.45rem; }
  .donation-block .field, .donation-block .textarea, .donation-block .select { font-size: 16px; }
  .payment-options { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .payment-choice { padding: .75rem; column-gap: .4rem; }
  .payment-choice small { font-size: .66rem; }
  .nominal-clean-grid { gap: .55rem; }
  .nominal-card { padding: .7rem .35rem; font-size: .83rem; }
  .donation-terms { padding-inline: 1.15rem; }
  #terms-error { padding-inline: 1.15rem; }
  .donation-sticky { position: sticky; bottom: 0; z-index: 12; padding: .75rem 1.15rem calc(.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); border-radius: 0; box-shadow: 0 -8px 22px rgba(12,41,67,.08); }
  .donation-mini-summary { display: none; }
  .donation-sticky > .btn { min-height: 3.15rem; font-size: .94rem; }
  .login-brand { min-height: 13rem; padding: 1.7rem; }
  .login-copy h1 { font-size: 2rem; }
  .login-panel { padding: 1rem; }
  .login-card { padding: 1.5rem; }
  .admin-topbar { height: 4.3rem; }
  .admin-topbar h1 { font-size: 1.3rem; }
  .admin-content { padding: 1rem .8rem 2.5rem; }
  .stat-grid { gap: .6rem; }
  .stat-card { min-height: 6.7rem; padding: 1rem; }
  .stat-card > span { font-size: .75rem; }
  .stat-card strong { font-size: 1.25rem; overflow-wrap: anywhere; }
  .panel, .settings-card { padding: 1.1rem; }
  .toolbar .field, .toolbar .select, .toolbar .btn { width: 100%; }
  .toolbar-actions { display: flex; flex-wrap: wrap; }
  .toolbar-actions .btn { flex: 1 1 10rem; }
  /* The JS supplies data-label from the table headings after each render. */
  .table-wrap { overflow: visible; border: 0; background: transparent; border-radius: 0; }
  .data-table, .data-table tbody { display: block; width: 100%; }
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .data-table tbody tr { display: grid; gap: .7rem; margin-bottom: .8rem; padding: 1.05rem 1.1rem; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
  .data-table tbody tr:hover { background: #fff; }
  .data-table td { display: grid; grid-template-columns: minmax(6rem, 34%) minmax(0,1fr); align-items: start; gap: .8rem; padding: 0; border: 0; font-size: .84rem; overflow-wrap: anywhere; }
  .data-table td::before { content: attr(data-label); color: #657b8d; font-size: .75rem; font-weight: 700; }
  .data-table td:first-child { padding-bottom: .6rem; border-bottom: 1px solid #e6eef3; }
  .data-table td:first-child strong { line-height: 1.35; }
  .data-table td .select { width: 100%; }
  .table-actions { gap: .35rem; }
  .table-actions .btn { min-height: 2.35rem; }
  .admin-entity-dialog { border-radius: 14px 14px 0 0; }
}
@media (max-width: 390px) {
  .hero-actions .btn-primary { min-width: 0; }
  .hero-actions .btn { font-size: .83rem; padding-inline: .8rem; }
  .payment-choice { grid-template-columns: auto 1fr; }
  .payment-choice strong { font-size: .8rem; }
  .data-table td { grid-template-columns: minmax(5rem, 31%) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .program-card, .btn { transition-duration: .01ms; } }

/* Reference-led campaign page: one readable column with the donation action near the top. */
.campaign-detail { background: #edf3f8; }
.campaign-detail .detail-section { padding: 1.25rem 0 3rem; background: #edf3f8; }
.campaign-detail .detail-grid { display: block; width: min(100% - 2rem, 46rem); margin-inline: auto; }
.campaign-detail .detail-main { min-width: 0; }
.campaign-detail .breadcrumbs { margin: .15rem 0 1rem; }
.campaign-detail .detail-media { height: auto; aspect-ratio: 16 / 9; border-radius: 10px 10px 0 0; border-bottom: 0; }
.campaign-detail .detail-heading-card { margin: 0; border-radius: 0; padding: 1.5rem 1.8rem 1rem; border-bottom: 0; }
.campaign-detail #detail-title { font-size: clamp(1.45rem, 3.4vw, 2.1rem); line-height: 1.26; }
.campaign-detail .detail-meta { padding: .75rem 0 0; background: transparent; }
.campaign-detail .detail-main > .donation-card { position: static; margin: 0; padding: .5rem 1.8rem 1.65rem; border-radius: 0 0 10px 10px; border-top: 0; box-shadow: none; }
.campaign-detail .donation-card h2, .campaign-detail .donation-card .amount-target, .campaign-detail [data-detail-progress], .campaign-detail .donation-card .secure-note { display: none; }
.campaign-detail .donation-card .amount-big { font-size: 1.45rem; margin-bottom: .3rem; }
.campaign-detail .donation-card .program-stats { margin: .25rem 0 1rem; }
.campaign-detail .donation-card > .btn { width: 100%; margin-top: .55rem; }
.campaign-detail .detail-content { margin-top: 1rem; border-radius: 10px; }
.campaign-detail .detail-tabs { border-radius: 10px 10px 0 0; }
.campaign-detail .detail-tab-panel { padding: 1.55rem 1.8rem; }
.campaign-detail .campaign-prayers-panel { margin-top: 1rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.campaign-detail .campaign-prayers-panel h2 { margin: .15rem 0 1rem; font-size: 1.35rem; }
.campaign-detail .campaign-donor-list { gap: .65rem; padding: .75rem; border-radius: 9px; background: #f1f5f9; }
.campaign-donor-card { min-width: 0; padding: 1rem 1.1rem; border: 1px solid #dfeaf2; border-radius: 8px; background: #fff; box-shadow: none; }
.campaign-donor-card::after { display: none; }
.campaign-donor-card .campaign-donor-head { margin-bottom: .6rem; gap: .7rem; }
.campaign-donor-card .donor-avatar { width: 2.3rem; height: 2.3rem; font-size: .95rem; box-shadow: none; }
.campaign-donor-card .donor-prayer { margin-bottom: .7rem; font-size: .94rem; line-height: 1.6; }
.campaign-donor-card .donor-amount { font-size: .74rem; padding: .3rem .55rem; box-shadow: none; }
.public-grid .campaign-donor-card { display: flex; flex-direction: column; }
.public-grid .campaign-donor-card .aamiin-button { margin-top: auto; align-self: flex-start; }
.campaign-donor-card .donor-identity small { white-space: normal; overflow-wrap: anywhere; }

/* Donation form mirrors the campaign image and compact reference form. */
.donation-clean-page .donation-clean-shell { width: min(100%, 35rem); }
.donation-clean-page .donation-clean-head { display: flex; align-items: center; gap: 1.15rem; padding: 1.5rem; background: #fff; }
.donation-program-image { flex: none; display: block; width: 8rem; height: 5.8rem; object-fit: cover; border-radius: 8px; background: #e7f2f9; }
.donation-clean-head h1 { font-size: 1.2rem; line-height: 1.3; }
.donation-clean-page .donation-block { padding: 1.3rem 1.5rem; }
.donation-clean-page .donation-block h2 { font-size: 1rem; }
.donation-clean-page .package-clean-summary { padding: 1rem; text-align: center; border-radius: 8px; }
.donation-clean-page .payment-options.bank-only { grid-template-columns: 1fr; }
.donation-clean-page .payment-choice:has(input:checked) { box-shadow: 0 0 0 1px var(--brand-600); }
.donation-clean-page .donation-sticky { padding-inline: 1.5rem; }

/* Transfer confirmation keeps the proof state in view until admin review. */
.payment-detail-page { background: #edf3f8; }
.payment-detail-page .status-wrap { max-width: 37rem; }
.payment-detail-page .status-wrap .page-intro { display: none; }
.payment-detail-page .status-card.payment-detail { border-radius: 13px; box-shadow: 0 14px 38px -30px rgba(12,41,67,.35); }
.payment-detail-page .payment-detail .detail-top { background: #fff; padding: 1.7rem 1.5rem 1.25rem; }
.payment-detail-page .confirmation-logo { display: block; width: 4.7rem; height: 4.7rem; object-fit: contain; margin: 0 auto 1rem; }
.payment-detail-page .payment-detail .amount-panel { background: #f0f8fe; }
.payment-detail-page .payment-detail .detail-body { padding-bottom: 2rem; }
.payment-detail-page .payment-detail .action-panel { border-color: #cfdfeb; background: #fff; }
.payment-detail-page .payment-detail .transfer-proof { padding: 1.25rem; border: 1px solid #cfe1ee; border-radius: 1rem; background: #f6fbff; }
.payment-detail-page .payment-detail .transfer-proof h3 { color: var(--brand-900); font-size: 1.05rem; margin: 0 0 .4rem; }
.payment-detail-page .payment-detail .transfer-proof > p:not(.notice) { color: #526e82; font-size: .86rem; line-height: 1.6; margin: 0 0 1rem; }
.payment-detail-page #transfer-proof-form .field { width: 100%; margin: .55rem 0 1rem; }
.payment-detail-page #proof-submit { width: 100%; }
.payment-detail-page #proof-received { margin: .8rem 0 0; }
@media (max-width: 640px) {
  .campaign-detail .detail-section { padding-top: 0; }
  .campaign-detail .detail-grid { width: 100%; }
  .campaign-detail .breadcrumbs { margin: .7rem 1rem; }
  .campaign-detail .detail-media { border-radius: 0; }
  .campaign-detail .detail-heading-card, .campaign-detail .detail-main > .donation-card { padding-inline: 1.15rem; }
  .campaign-detail .detail-tab-panel { padding: 1.1rem; }
  .campaign-donor-card .campaign-donor-head { grid-template-columns: auto 1fr; }
  .campaign-donor-card .donor-amount { grid-column: 2; width: fit-content; margin: 0; }
  .donation-clean-page .donation-clean-head { gap: .8rem; padding: 1rem; }
  .donation-program-image { width: 6.8rem; height: 5.1rem; }
  .donation-clean-page .donation-block { padding-inline: 1.15rem; }
  .donation-clean-page .donation-sticky { padding-inline: 1.15rem; }
  .payment-detail-page .payment-detail .detail-top { padding: 1.45rem 1rem 1rem; }
  .payment-detail-page .payment-detail .transfer-proof { padding: 1rem; }
}

/* Checkout form: the compact reference layout with blue accents. */
.donation-clean-page { background: #f6f7f9; }
.donation-clean-page .site-header, .donation-clean-page .site-footer { display: none; }
.donation-clean-main { padding: 1.3rem 1rem 4rem; }
.donation-clean-page .donation-clean-shell { width: min(100%, 33rem); }
.donation-back { display: flex; align-items: center; gap: .75rem; margin: 0 0 .8rem; color: #273847; font-weight: 700; font-size: .87rem; text-decoration: none; }
.donation-back > span:first-child { font-size: 1.5rem; line-height: 1; font-weight: 400; }
.donation-back:hover { color: var(--brand-600); }
.donation-clean-card { border-radius: 5px; border-color: #e8eaee; box-shadow: 0 6px 24px -19px rgba(10, 38, 67, .3); }
.donation-clean-page .donation-clean-head { gap: 1.1rem; padding: 1.4rem 1.5rem 1.25rem; border: 0; }
.donation-program-image { width: 9rem; height: 5.7rem; border-radius: 5px; }
.donation-clean-page .donation-clean-head h1 { margin: 0; font-size: 1.03rem; line-height: 1.4; color: #222a34; }
.donation-clean-page .donation-block { padding: 1.2rem 1.5rem; border: 0; }
.donation-clean-page .donation-amount-block { padding-top: 3.75rem; }
.donation-clean-page .package-clean-summary { min-height: 3.65rem; display: grid; place-items: center; padding: .8rem 1rem; border-radius: 6px; background: #eff5fc; color: #16497a; font-size: .88rem; font-weight: 700; }
.donation-clean-page .package-clean-summary.hidden { display: none; }
.donation-clean-page .donation-block .field,
.donation-clean-page .donation-block .textarea,
.donation-clean-page .donation-block .select { min-height: 3.15rem; border: 1px solid #dce2e8; border-radius: 5px; background-color: #fff; box-shadow: none; }
.donation-clean-page .donation-block .field::placeholder,
.donation-clean-page .donation-block .textarea::placeholder { color: #a5aab1; }
.donation-clean-page .donation-block .textarea { min-height: 6.1rem; }
.donation-clean-page .donation-block .field-label { margin-top: .85rem; font-size: .8rem; color: #3b4a5a; font-weight: 650; }
.donation-clean-page #quantity-wrap { margin-top: 1rem; }
.donation-clean-page #quantity, .donation-clean-page #packageId { padding-inline: .95rem 2.2rem; cursor: pointer; }
.donation-clean-page #package-choice-wrap { margin-bottom: 1rem; }
.donation-clean-page .donation-payment-block { padding-top: .45rem; padding-bottom: 1.1rem; }
.donation-clean-page .donation-block h2 { margin: 0 0 .6rem; font-size: .88rem; font-weight: 700; color: #344555; }
.donation-clean-page .payment-options.bank-only { display: none; }
.donation-clean-page .payment-options:not(.bank-only) { margin-bottom: .75rem; }
.donation-clean-page .payment-choice { min-height: 3.65rem; }
.bank-choice-row { display: flex; align-items: center; gap: .8rem; min-height: 4.3rem; padding: .65rem .75rem; border: 1px solid #d4e5f5; border-radius: 5px; background: #eff6fd; }
.bank-choice-row.hidden { display: none; }
.bank-logo { flex: 0 0 4.35rem; width: 4.35rem; height: 2.75rem; display: grid; place-items: center; overflow: hidden; padding: .22rem .3rem; border: 1px solid #dfe6ea; border-radius: 4px; background: #fff; }
.bank-logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.bank-logo-fallback { color: #067a75; font-size: 1rem; font-weight: 900; letter-spacing: -.04em; }
.bank-copy { min-width: 0; flex: 1; display: grid; gap: .12rem; }
.bank-copy strong { font-size: .79rem; line-height: 1.25; color: #263747; }
.bank-copy small { color: #6b7a88; font-size: .67rem; line-height: 1.25; overflow-wrap: anywhere; }
.bank-picker { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; min-width: 4.75rem; min-height: 2.2rem; padding: .35rem .58rem; border: 1px solid #c9d2dc; border-radius: 5px; background: #fff; color: #30465b; font-size: .77rem; font-weight: 700; cursor: pointer; }
.bank-picker-chevron { font-size: 1rem; line-height: .7; }
.bank-picker select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.bank-picker:focus-within { outline: 3px solid rgba(18,101,168,.32); outline-offset: 2px; }
.donation-clean-page .donation-donor-block { padding-top: 1.35rem; }
.donation-clean-page .donation-donor-block h2 { margin-bottom: .75rem; }
.donation-clean-page .donation-donor-block .field-label { margin-top: .9rem; margin-bottom: .35rem; }
.donation-clean-page .donation-donor-block .field-label:first-of-type { margin-top: 0; }
.anonymous-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.65rem; margin: .35rem 0 .35rem; color: #687482; font-size: .78rem; cursor: pointer; }
.anonymous-toggle-row input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.toggle-track { flex: 0 0 2.65rem; width: 2.65rem; height: 1.5rem; padding: .2rem; border-radius: 2rem; background: #d2d4d9; transition: background .16s ease; }
.toggle-track::before { content: ""; display: block; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #87919d; transition: transform .16s ease; }
.anonymous-toggle-row input:checked + .toggle-track { background: var(--brand-600); }
.anonymous-toggle-row input:checked + .toggle-track::before { transform: translateX(1.15rem); }
.anonymous-toggle-row input:focus-visible + .toggle-track { outline: 3px solid rgba(18,101,168,.32); outline-offset: 2px; }
.donation-clean-page .donation-terms { padding-top: .85rem; padding-bottom: .25rem; font-size: .74rem; }
.donation-clean-page #terms-error { display: block; }
.donation-clean-page .donation-sticky { padding-top: .85rem; }
.donation-clean-page .donation-sticky > .btn { min-height: 3.35rem; border-radius: 5px; }
.bank-detail-heading { display: flex; align-items: center; gap: .8rem; }
.bank-detail-heading .bank-logo { flex-basis: 4.6rem; }
@media (max-width: 640px) {
  .donation-clean-main { padding: .7rem 0 2rem; }
  .donation-back { margin: .4rem 1rem .9rem; }
  .donation-clean-card { border-radius: 0; }
  .donation-clean-page .donation-clean-head { gap: .8rem; padding: 1.05rem 1rem .9rem; }
  .donation-program-image { width: 7.25rem; height: 5rem; }
  .donation-clean-page .donation-clean-head h1 { font-size: .95rem; }
  .donation-clean-page .donation-block { padding-inline: 1rem; }
  .donation-clean-page .donation-amount-block { padding-top: 2.5rem; }
  .donation-clean-page .donation-sticky { padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); }
  .donation-clean-page .donation-terms { padding-inline: 1rem; }
  .donation-clean-page #terms-error { padding-inline: 1rem; }
}

/* Rasio gambar konsisten di beranda, detail, donasi, dan panel admin. */
.hero-visual { aspect-ratio: 3 / 2; }
.hero-image { width:100%; height:100%; min-height:0; aspect-ratio:3 / 2; object-fit:cover; object-position:center; }
.program-media, .campaign-detail .detail-media { aspect-ratio:16 / 9; }
.program-media img, .detail-media img { width:100%; height:100%; object-fit:cover; }
.gallery-card img { display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; }
.package-card img { display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; }
.donation-program-image { width:9rem; height:auto; aspect-ratio:16 / 9; object-fit:cover; }
.donation-mini-summary .summary-thumb { width:3.6rem; height:auto; aspect-ratio:16 / 9; object-fit:cover; }
.image-upload-preview { min-height:0; aspect-ratio:16 / 9; }
.image-upload-preview img { width:100%; height:100%; object-fit:cover; }
.image-preview-hero, .image-preview-gallery { aspect-ratio:3 / 2; }
.image-preview-logo, .image-preview-bank { aspect-ratio:1 / 1; max-width:14rem; }
.image-preview-logo img, .image-preview-bank img { object-fit:contain; }
@media(max-width:640px){
  .hero-visual { aspect-ratio:3 / 2; }
  .hero-image { height:100%; min-height:0; }
  .donation-program-image { width:7.25rem; height:auto; }
}

/* Checkout: adaptasi formulir referensi dengan data paket, rekening, dan nominal asli. */
.checkout-reference-page { background:#eef2f6; }
.checkout-reference-page .donation-clean-main { padding:0 1rem 3rem; }
.checkout-reference-page .donation-clean-shell { width:min(100%,480px); min-height:100vh; background:#fff; box-shadow:0 18px 42px rgba(15,23,42,.09); }
.checkout-nav { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:.9rem; min-height:3.6rem; padding:.65rem 1.25rem; border-bottom:1px solid #f1f5f9; background:#fff; }
.checkout-reference-page .donation-back { margin:0; display:grid; place-items:center; width:1.8rem; height:1.8rem; flex:none; font-size:1.55rem; font-weight:400; line-height:1; }
.checkout-reference-page .checkout-nav-title { overflow:hidden; min-width:0; color:#1e293b; font-size:.86rem; font-weight:650; white-space:nowrap; text-overflow:ellipsis; }
.checkout-reference-page .donation-clean-card { border:0; border-radius:0; box-shadow:none; }
.checkout-reference-page .donation-clean-head { gap:.8rem; margin:1rem 1.25rem 0; padding:.75rem; border:1px solid #e9eff5; border-radius:.8rem; background:#fff; box-shadow:0 2px 10px rgba(15,23,42,.03); }
.checkout-reference-page .donation-program-image { width:7.75rem; height:4.875rem; aspect-ratio:124 / 78; border:1px solid #e2e8f0; border-radius:.55rem; }
.checkout-reference-page .donation-clean-head h1 { font-size:.86rem; font-weight:750; line-height:1.4; color:#1e293b; }
.checkout-reference-page .donation-block { padding:1rem 1.25rem 0; border:0; }
.checkout-reference-page .donation-amount-block { padding-top:1rem; }
.checkout-reference-page #package-choice-wrap { margin:0 0 .7rem; }
.checkout-reference-page .donation-block .field-label { margin:.35rem 0 .45rem; color:#334155; font-size:.82rem; font-weight:650; }
.checkout-reference-page .package-clean-summary { min-height:3.1rem; display:grid; place-items:center; padding:.7rem 1rem; border:1px solid #dcecf9; border-radius:.55rem; background:#f0f8fe; color:#134b75; font-size:.86rem; font-weight:700; }
.checkout-reference-page .package-clean-summary.hidden { display:none; }
.checkout-reference-page #quantity-wrap { margin-top:.75rem; }
.checkout-reference-page .donation-block .select,
.checkout-reference-page .donation-block .field,
.checkout-reference-page .donation-block .textarea { width:100%; min-height:2.9rem; margin:0; padding:.72rem .88rem; border:1px solid #cbd5e1; border-radius:.55rem; background:#fff; color:#1e293b; font-size:.86rem; box-shadow:none; }
.checkout-reference-page .donation-block .select { border-color:#1686c9; border-width:1.5px; font-weight:650; cursor:pointer; }
.checkout-reference-page .donation-block .textarea { min-height:6rem; resize:vertical; }
.checkout-reference-page .donation-block .field::placeholder,
.checkout-reference-page .donation-block .textarea::placeholder { color:#94a3b8; }
.checkout-reference-page .nominal-clean-grid { gap:.55rem; margin:.55rem 0; }
.checkout-reference-page .nominal-card { padding:.7rem .45rem; border-radius:.55rem; font-size:.82rem; }
.checkout-reference-page .donation-payment-block { padding-top:1rem; }
.payment-method-row { display:flex; align-items:center; gap:.75rem; min-height:4rem; padding:.75rem; border:1px solid #bfe0f4; border-radius:.65rem; background:#f0f9ff; }
.checkout-reference-page .method-logo { flex:0 0 3.4rem; width:3.4rem; height:2.1rem; border-radius:.4rem; color:#0369a1; font-size:.7rem; font-weight:850; }
.method-logo img { max-width:100%; max-height:100%; object-fit:contain; }
.method-copy { display:grid; gap:.1rem; flex:1; min-width:0; }
.method-copy strong { overflow:hidden; color:#1e293b; font-size:.82rem; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.method-copy small { overflow:hidden; color:#64748b; font-size:.69rem; text-overflow:ellipsis; white-space:nowrap; }
.method-picker { position:relative; display:inline-flex; align-items:center; gap:.35rem; flex:none; padding:.35rem .55rem; border:1px solid #cbd5e1; border-radius:.35rem; background:#fff; color:#475569; font-size:.73rem; font-weight:650; }
.method-picker select { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.method-picker:focus-within { outline:3px solid rgba(18,101,168,.35); outline-offset:2px; }
.checkout-reference-page .bank-choice-row { margin-top:.55rem; border-radius:.6rem; }
.checkout-reference-page .donation-donor-block { display:grid; gap:.65rem; padding-top:1.2rem; }
.checkout-reference-page .donation-donor-block .field-label { margin:0; }
.checkout-reference-page .donation-donor-block .anonymous-toggle-row { margin:0; min-height:2.15rem; color:#475569; font-size:.81rem; }
.checkout-reference-page .donation-donor-block .check-row { margin:.05rem 0; font-size:.76rem; }
.checkout-reference-page .donation-block .field-error { min-height:0; margin:0; }
.checkout-reference-page .donation-block .field-error:empty { display:none; }
.checkout-reference-page .donation-terms { margin:1rem 1.25rem 0; padding:.5rem 0; color:#475569; font-size:.74rem; }
.checkout-reference-page #terms-error { display:block; padding:0 1.25rem; }
.checkout-reference-page .donation-sticky { padding:1rem 1.25rem 1.5rem; border:0; border-radius:0; background:#fff; box-shadow:none; }
.checkout-reference-page .donation-sticky > .btn { min-height:3.25rem; border-radius:.55rem; font-size:.9rem; }
@media(max-width:520px) {
  .checkout-reference-page .donation-clean-main { padding:0; }
  .checkout-reference-page .donation-clean-shell { box-shadow:none; }
  .checkout-reference-page .donation-clean-head { margin:1rem 1rem 0; }
  .checkout-reference-page .donation-block { padding-inline:1rem; }
  .checkout-reference-page .donation-terms { margin-inline:1rem; }
  .checkout-reference-page #terms-error { padding-inline:1rem; }
  .checkout-reference-page .donation-sticky { position:sticky; bottom:0; z-index:12; padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); border-top:1px solid #e2e8f0; box-shadow:0 -8px 24px rgba(15,23,42,.05); }
  .checkout-reference-page .donation-program-image { width:6.8rem; height:4.3rem; }
}

/* Kartu doa yang sama untuk beranda, daftar donatur, dan detail program. */
.campaign-detail .campaign-donor-list { gap:.85rem; padding:0; background:transparent; }
.campaign-donor-card { display:flex; flex-direction:column; width:100%; max-width:420px; min-width:0; padding:20px; overflow:visible; border:1px solid #e2e8f0; border-radius:16px; background:#fff; box-shadow:0 4px 20px -2px rgba(15,23,42,.05); transform:none; }
.campaign-donor-card:hover { transform:none; box-shadow:0 4px 20px -2px rgba(15,23,42,.05); }
.campaign-donor-card::after { display:none; }
.campaign-donor-card .campaign-donor-head { display:flex; align-items:center; gap:12px; margin:0; }
.campaign-donor-card .donor-avatar { display:flex; flex:0 0 40px; width:40px; height:40px; border-radius:50%; background:#e0f2fe; color:#0284c7; font-size:15px; font-weight:700; box-shadow:none; }
.campaign-donor-card .donor-identity { display:block; flex:1; min-width:0; }
.campaign-donor-card .donor-name-line { display:flex; justify-content:space-between; align-items:baseline; gap:8px; min-width:0; }
.campaign-donor-card .donor-identity strong { flex:1; min-width:0; color:#0f172a; font-size:14px; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.campaign-donor-card .donor-amount { flex:none; width:auto; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:#0284c7; font-size:13px; font-weight:700; line-height:1.3; white-space:nowrap; box-shadow:none; }
.campaign-donor-card .donor-identity small { display:block; margin-top:2px; color:#94a3b8; font-size:12px; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.campaign-donor-card .donor-prayer { margin:14px 0 0; padding:0; border:0; background:transparent; color:#334155; font-size:13.5px; font-weight:400; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.campaign-donor-card .donor-prayer:empty { display:none; }
.campaign-donor-card .donor-card-footer { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:16px; padding-top:14px; border-top:1px solid #f1f5f9; color:#64748b; font-size:12px; }
.aamiin-wrapper { position:relative; display:inline-flex; flex:none; }
.campaign-donor-card .aamiin-button { position:relative; z-index:2; display:inline-flex; align-items:center; gap:6px; min-height:0; margin:0; padding:6px 14px; border:1px solid #cbd5e1; border-radius:99px; background:#f8fafc; color:#0284c7; font-size:12.5px; font-weight:600; box-shadow:none; cursor:pointer; transition:background .15s ease,border-color .15s ease,transform .15s ease; }
.campaign-donor-card .aamiin-button:hover:not(:disabled) { background:#f0f9ff; color:#0284c7; border-color:#38bdf8; box-shadow:none; }
.campaign-donor-card .aamiin-button:active:not(:disabled) { transform:scale(.94); }
.campaign-donor-card .icon-aamiin { width:16px; height:16px; flex:none; stroke-width:1.8; color:#0284c7; transition:transform .2s ease; }
.campaign-donor-card .aamiin-button:hover .icon-aamiin { transform:scale(1.1); }
.campaign-donor-card .aamiin-count { margin:0; padding:0; border:0; border-radius:0; background:none; color:#0284c7; font-size:12px; font-weight:700; }
.campaign-donor-card .aamiin-button:hover:not(:disabled) .aamiin-count { color:#0284c7; background:none; }
.prayer-ray { position:absolute; top:50%; left:50%; z-index:1; width:3px; height:14px; border-radius:99px; pointer-events:none; transform-origin:center; animation:prayer-ray-burst 1.2s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes prayer-ray-burst { 0% { opacity:0; transform:translate(-50%,-50%) rotate(var(--angle)) translateY(0) scaleY(.4); } 20% { opacity:1; transform:translate(-50%,-50%) rotate(var(--angle)) translateY(14px) scaleY(1); } 100% { opacity:0; transform:translate(-50%,-50%) rotate(var(--angle)) translateY(var(--distance)) scaleY(.6); } }
@media(prefers-reduced-motion:reduce) { .prayer-ray { animation:none; display:none; } .campaign-donor-card .aamiin-button, .campaign-donor-card .icon-aamiin { transition:none; } }
@media(max-width:390px) { .campaign-donor-card { padding:16px; } .campaign-donor-card .donor-card-footer { gap:.4rem; } .campaign-donor-card .aamiin-button { padding:6px 10px; } }

/* Invoice referensi, memakai nominal dan rekening yang dikirim PHP. */
.payment-reference-page { background:#eef2f6; }
.payment-reference-page .site-header, .payment-reference-page .site-footer { display:none; }
.payment-reference-page .status-wrap { width:min(100%,480px); max-width:480px; padding:1.5rem 0 3rem; }
.payment-reference-page .payment-detail { border:1px solid #e2e8f0; border-radius:16px; box-shadow:0 16px 38px rgba(15,23,42,.08); }
.payment-reference-page .payment-detail .detail-top { padding:2rem 1.3rem 1.5rem; background:radial-gradient(circle at 12% 0%,#e0f2fe,transparent 45%),radial-gradient(circle at 90% 0%,#eff6ff,transparent 47%),#fff; }
.payment-reference-page .confirmation-logo { width:4.5rem; height:4.5rem; object-fit:contain; margin:0 auto 1rem; }
.payment-reference-page .payment-detail .detail-top .detail-thanks { color:#475569; font-size:.86rem; line-height:1.55; }
.payment-reference-page .detail-thanks strong { color:#0f172a; }
.payment-reference-page .payment-detail .detail-top .detail-program-name { margin:.45rem auto 1rem; color:#0f172a; font-size:.89rem; font-weight:750; line-height:1.5; }
.payment-reference-page .payment-detail .detail-top h2 { margin:0 0 .35rem; color:#075985; font-size:1.18rem; }
.payment-reference-page .payment-detail .detail-top #status-message { color:#64748b; font-size:.8rem; }
.payment-reference-page .payment-detail .detail-body { padding:0 1.25rem 1.65rem; }
.payment-reference-page .payment-detail .amount-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.35rem .65rem; padding:1rem; border:1px solid #dbeafe; border-radius:.8rem; background:#f0f9ff; text-align:left; }
.payment-reference-page .payment-detail .amount-panel .field-caption { grid-column:1 / -1; color:#64748b; font-size:.7rem; }
.payment-reference-page .payment-detail .amount-panel strong { display:block; min-width:0; margin:0; color:#075985; font-size:clamp(1.35rem,5vw,1.8rem); overflow-wrap:anywhere; }
.payment-reference-page .payment-detail .amount-panel .mini-copy { justify-self:end; padding:.4rem .6rem; font-size:.72rem; white-space:nowrap; }
.payment-reference-page .payment-detail .amount-panel .method-chip { grid-column:1 / -1; justify-self:start; margin-top:.2rem; padding:.28rem .55rem; font-size:.7rem; }
.payment-reference-page .payment-detail .amount-panel .amount-hint { grid-column:1 / -1; margin:.3rem 0 0; color:#64748b; font-size:.72rem; line-height:1.55; }
.payment-reference-page .payment-detail .detail-meta { margin:1rem 0; }
.payment-reference-page .payment-detail .detail-meta .summary-row { padding:.68rem 0; font-size:.8rem; }
.payment-reference-page .payment-detail .action-panel { padding:1rem; border:1px solid #e2e8f0; border-radius:.8rem; background:#fff; }
.payment-reference-page .payment-detail .action-panel h3 { font-size:.94rem; }
.payment-reference-page .payment-detail .action-panel p { font-size:.78rem; }
.payment-reference-page .payment-detail .account-line strong { font-size:1rem; }
.payment-reference-page .payment-detail .transfer-proof { margin-top:1rem; padding:1rem; border:1px solid #dbeafe; border-radius:.8rem; background:#f8fcff; }
.payment-reference-page .payment-detail #proof-submit { display:flex; justify-content:center; width:100%; }
.payment-reference-page .payment-detail .transaction-panel { background:#f8fafc; }
.payment-reference-page .status-wrap .status-card.payment-detail { border-radius:16px; }
@media(max-width:520px) {
  .payment-reference-page .status-wrap { width:100%; padding:0 0 2rem; }
  .payment-reference-page .status-wrap .status-card.payment-detail { border-radius:0; border-inline:0; box-shadow:none; }
  .payment-reference-page .payment-detail .detail-body { padding-inline:1rem; }
}