/*
 * Filantropi Pesantren — Design Token System (spec §6)
 * All colors used across frontend + backend must come from these
 * custom properties. Do not hard-code hex colors in views or components.
 *
 * Theme switching uses Bootstrap 5.3's [data-bs-theme] attribute so native
 * Bootstrap components (buttons, alerts, forms, tables...) stay in sync
 * automatically, while our own custom properties drive everything else.
 */

:root {
    --primary-color: #0E7C61;
    --primary-color-hover: #0B6350;
    --secondary-color: #1B4B6B;
    --accent-color: #E8A33D;
    --success-color: #22A559;
    --warning-color: #E8A33D;
    --danger-color: #DC3545;
    --info-color: #2E86AB;
    --background-color: #F7F9F8;
    --surface-color: #FFFFFF;
    --text-color: #1F2937;
    --muted-color: #6B7280;
    --border-color: #E5E7EB;

    /* Backend-specific hierarchy (§52): same tokens, more neutral surface */
    --backend-sidebar-bg: #14232B;
    --backend-sidebar-text: #C9D6DC;
    --backend-sidebar-active-bg: rgba(255, 255, 255, 0.08);
    --backend-topbar-bg: var(--surface-color);

    color-scheme: light;
}

[data-bs-theme="dark"] {
    --primary-color: #2FBF97;
    --primary-color-hover: #3ED4A8;
    --secondary-color: #5B9BC7;
    --accent-color: #F2B75B;
    --success-color: #34C77B;
    --warning-color: #F2B75B;
    --danger-color: #E5606D;
    --info-color: #58A6D6;
    --background-color: #10151A;
    --surface-color: #1A2128;
    --text-color: #E5E7EB;
    --muted-color: #9CA3AF;
    --border-color: #2A323B;

    --backend-sidebar-bg: #0C1418;
    --backend-sidebar-text: #C9D6DC;
    --backend-sidebar-active-bg: rgba(255, 255, 255, 0.06);
    --backend-topbar-bg: var(--surface-color);

    color-scheme: dark;
}

/*
 * §7 — frontend and backend keep INDEPENDENT theme preferences (their own
 * localStorage key, their own toggle). To make it visually obvious which
 * side you're on, the two areas also get distinct neutral palettes: the
 * frontend leans warm near-black, the backend a cooler slate. The brand
 * colour (--primary-color) is deliberately NOT changed per-area.
 * Custom properties are redefined on `body[data-area]` so they cascade to
 * everything inside, overriding the :root / [data-bs-theme] values.
 */
body[data-area="backend"] {
    --background-color: #F4F6FA;
    --surface-color: #FFFFFF;
    --border-color: #E3E8EF;
    --bs-body-bg: var(--background-color);
    --bs-border-color: var(--border-color);
}

[data-bs-theme="dark"] body[data-area="backend"] {
    --background-color: #0B1220;
    --surface-color: #141D2E;
    --border-color: #26324A;
    --muted-color: #94A3B8;
    --backend-sidebar-bg: #0A1120;
    --backend-topbar-bg: #101A2B;
    --bs-body-bg: var(--background-color);
    --bs-border-color: var(--border-color);
}

[data-bs-theme="dark"] body[data-area="frontend"] {
    --background-color: #0E1512;
    --surface-color: #17201C;
    --border-color: #2A342E;
}

/* Map our tokens onto Bootstrap's CSS variables so native components
   (.btn-primary, .alert-success, .badge, .table, .form-control, ...)
   automatically follow the same design system without per-component overrides. */
:root,
[data-bs-theme="dark"] {
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: 14, 124, 97;
    --bs-secondary: var(--secondary-color);
    --bs-success: var(--success-color);
    --bs-warning: var(--warning-color);
    --bs-danger: var(--danger-color);
    --bs-info: var(--info-color);
    --bs-body-bg: var(--background-color);
    --bs-body-color: var(--text-color);
    --bs-border-color: var(--border-color);
    --bs-link-color: var(--primary-color);
    --bs-link-hover-color: var(--primary-color-hover);
}

/* ---------------------------------------------------------------- */
/* Base                                                              */
/* ---------------------------------------------------------------- */

body {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color .15s ease, color .15s ease;
}

a {
    color: var(--primary-color);
}

a:hover {
    color: var(--primary-color-hover);
}

.text-muted {
    color: var(--muted-color) !important;
}

.text-brand {
    color: var(--primary-color) !important;
}

.min-w-0 {
    min-width: 0;
}

.nav-link-disabled {
    opacity: .45;
    cursor: not-allowed;
}

.toggle-switch {
    width: 2.5em;
    height: 1.3em;
}

.campaign-cover-lg {
    aspect-ratio: 16 / 7;
    border-radius: .75rem;
}

.text-preline {
    white-space: pre-line;
}

.sticky-top-offset {
    top: 90px;
}

.max-w-narrow {
    max-width: 640px;
}

.max-w-form {
    max-width: 560px;
}

.min-w-progress {
    min-width: 160px;
}

.banner-image {
    max-height: 360px;
    object-fit: cover;
}

.testimonial-avatar {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: cover;
}

.banner-thumb {
    width: 120px;
    height: 48px;
    object-fit: cover;
}

.upload-preview {
    max-width: 240px;
    max-height: 160px;
    object-fit: cover;
}

.testimonial-avatar-lg {
    width: 120px;
    height: 120px;
    object-fit: cover;
}

.bg-surface {
    background-color: var(--surface-color) !important;
}

.border-token {
    border-color: var(--border-color) !important;
}

/* ---------------------------------------------------------------- */
/* Cards, badges, progress                                          */
/* ---------------------------------------------------------------- */

.card {
    background-color: var(--surface-color);
    border-color: var(--border-color);
}

.progress-slim {
    height: .5rem;
    border-radius: 999px;
}

.stat-card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: .75rem;
    padding: 1.25rem;
    height: 100%;
}

.stat-icon {
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    background-color: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.campaign-card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: .75rem;
    overflow: hidden;
    height: 100%;
}

.campaign-card .campaign-cover {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.beneficiary-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: .75rem;
    padding: 1rem;
    height: 100%;
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted-color);
}

.badge-soft-primary {
    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
    color: var(--primary-color);
}

.badge-soft-success {
    background-color: color-mix(in srgb, var(--success-color) 15%, transparent);
    color: var(--success-color);
}

.badge-soft-warning {
    background-color: color-mix(in srgb, var(--warning-color) 15%, transparent);
    color: var(--warning-color);
}

.badge-soft-danger {
    background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);
    color: var(--danger-color);
}

.badge-soft-secondary {
    background-color: color-mix(in srgb, var(--secondary-color) 15%, transparent);
    color: var(--secondary-color);
}

/* ---------------------------------------------------------------- */
/* Frontend navigation                                               */
/* ---------------------------------------------------------------- */

.site-navbar {
    background-color: color-mix(in srgb, var(--surface-color) 92%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--border-color);
}

.site-navbar .navbar-brand {
    font-size: 1.15rem;
    letter-spacing: -0.015em;
}

.site-navbar .nav-link {
    color: var(--text-color);
    font-weight: 500;
}

.site-navbar .nav-link.active,
.site-navbar .nav-link:hover {
    color: var(--primary-color);
}

/* Desktop navigation (≥992px) — grouped dropdowns, quiet hover states */
@media (min-width: 992px) {
    .site-navbar .navbar-nav .nav-item + .nav-item {
        margin-left: .125rem;
    }

    .site-navbar .navbar-nav .nav-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: .2rem;
        padding: .5rem .8rem;
        border-radius: .55rem;
        font-size: .9375rem;
        white-space: nowrap;
        transition: color .15s ease, background-color .15s ease;
    }

    .site-navbar .navbar-nav .nav-link:hover,
    .site-navbar .navbar-nav .nav-link:focus-visible {
        color: var(--primary-color);
        background-color: color-mix(in srgb, var(--primary-color) 8%, transparent);
    }

    .site-navbar .navbar-nav .nav-link.active {
        color: var(--primary-color);
        font-weight: 600;
    }

    .site-navbar .navbar-nav .nav-link.active::after {
        content: "";
        position: absolute;
        left: .8rem;
        right: .8rem;
        bottom: -.3rem;
        height: 2px;
        border-radius: 2px;
        background-color: var(--primary-color);
    }

    .site-navbar .dropdown-toggle::after {
        margin-left: .15rem;
        transition: transform .15s ease;
    }

    .site-navbar .nav-item.dropdown:hover .dropdown-toggle::after {
        transform: rotate(-180deg);
    }

    /* Hover-open with a small bridge so the pointer can travel to the menu */
    .site-navbar .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        animation: siteDropdownIn .16s ease;
    }

    .site-navbar .nav-item.dropdown > .dropdown-menu::before {
        content: "";
        position: absolute;
        inset: -.6rem 0 auto 0;
        height: .6rem;
    }
}

.site-navbar .dropdown-menu.site-dropdown {
    margin-top: .4rem;
    min-width: 19rem;
    padding: .5rem;
    border: 1px solid var(--border-color);
    border-radius: .9rem;
    background-color: var(--surface-color);
    box-shadow: 0 20px 48px -14px rgba(15, 23, 42, .3);
}

.site-navbar .dropdown-menu.site-dropdown .dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .6rem .7rem;
    border-radius: .65rem;
    white-space: normal;
    color: var(--text-color);
}

.site-navbar .dropdown-menu.site-dropdown .dropdown-item:hover,
.site-navbar .dropdown-menu.site-dropdown .dropdown-item:focus,
.site-navbar .dropdown-menu.site-dropdown .dropdown-item.active {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
}

.site-navbar .dropdown-menu.site-dropdown .nav-ico {
    flex: 0 0 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: .6rem;
    font-size: 1.05rem;
    color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.site-navbar .dropdown-menu.site-dropdown .nav-ttl {
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.25;
}

.site-navbar .dropdown-menu.site-dropdown .nav-sub {
    display: block;
    margin-top: .1rem;
    font-size: .8rem;
    color: var(--muted-color);
}

.site-navbar .dropdown-menu.site-dropdown .dropdown-item:hover .nav-sub,
.site-navbar .dropdown-menu.site-dropdown .dropdown-item:focus .nav-sub {
    color: inherit;
    opacity: .85;
}

/* Action cluster — icon utilities + primary CTA */
.site-navbar .nav-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.site-navbar .nav-actions .btn-icon {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    padding: 0;
    border-radius: .55rem;
    color: var(--text-color);
    border-color: var(--border-color);
}

.site-navbar .nav-actions .btn-icon:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.site-navbar .nav-actions .nav-divider {
    width: 1px;
    height: 1.6rem;
    margin: 0 .2rem;
    background-color: var(--border-color);
}

.site-navbar .nav-actions .btn-donate {
    border-radius: 999px;
    padding-inline: 1.15rem;
    font-weight: 600;
}

@keyframes siteDropdownIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.site-footer {
    background-color: var(--secondary-color);
    color: #ffffff;
}

.site-footer a {
    color: #ffffff;
    opacity: .85;
}

.site-footer a:hover {
    opacity: 1;
}

.hero-section {
    background: linear-gradient(160deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: #ffffff;
}

/* ---------------------------------------------------------------- */
/* Backend layout (§52-53) — professional, data-oriented hierarchy   */
/* ---------------------------------------------------------------- */

body[data-area="backend"] {
    background-color: var(--background-color);
}

.backend-sidebar {
    background-color: var(--backend-sidebar-bg);
    color: var(--backend-sidebar-text);
    width: 260px;
    min-height: 100vh;
    transition: width .15s ease;
}

.backend-sidebar.collapsed {
    width: 76px;
}

.backend-sidebar .sidebar-brand {
    color: #ffffff;
    font-weight: 700;
}

.backend-sidebar .nav-link {
    color: var(--backend-sidebar-text);
    border-radius: .5rem;
    padding: .55rem .75rem;
    margin: .1rem .6rem;
    font-size: .925rem;
}

.backend-sidebar .nav-link:hover {
    background-color: var(--backend-sidebar-active-bg);
    color: #ffffff;
}

.backend-sidebar .nav-link.active {
    background-color: var(--primary-color);
    color: #ffffff;
}

.backend-sidebar .nav-section-title {
    color: rgba(255, 255, 255, .45);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 1rem .9rem .25rem;
}

.backend-sidebar.collapsed .nav-label,
.backend-sidebar.collapsed .nav-section-title,
.backend-sidebar.collapsed .sidebar-brand-text {
    display: none;
}

.backend-topbar {
    background-color: var(--backend-topbar-bg);
    border-bottom: 1px solid var(--border-color);
    height: 64px;
}

.backend-content {
    background-color: var(--background-color);
    min-height: calc(100vh - 64px);
}

/* Dashboard charts (§27) — fixed-height canvas wrappers so Chart.js can
   fill the box without runaway vertical growth. */
.dashboard-chart {
    position: relative;
    width: 100%;
    height: 300px;
}

@media (max-width: 575.98px) {
    .dashboard-chart {
        height: 260px;
    }
}

/* ---------------------------------------------------------------- */
/* Scroll-reveal animations (frontend)                               */
/* ---------------------------------------------------------------- */

/* Hidden state only applies once home.js has taken over (adds .reveal-on).
   If the script is missing or errors, content stays fully visible. */
.reveal-on [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.reveal-on [data-reveal="left"]  { transform: translateX(-32px); }
.reveal-on [data-reveal="right"] { transform: translateX(32px); }
.reveal-on [data-reveal="scale"] { transform: scale(.94); }
.reveal-on [data-reveal="fade"]  { transform: none; }

.reveal-on [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal-on [data-reveal],
    .reveal-on [data-reveal].is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .hero-section {
        animation: none !important;
    }
    .hero-blob { animation: none !important; }
}

/* ---------------------------------------------------------------- */
/* Section rhythm & headings (frontend)                              */
/* ---------------------------------------------------------------- */

.section-eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: .5rem;
}

.section-title {
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: .5rem;
}

.section-title-underline::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    margin: .9rem auto 0;
}

.section-lead {
    color: var(--muted-color);
    max-width: 40rem;
    margin-inline: auto;
}

/* ---------------------------------------------------------------- */
/* Hero — animated, layered                                          */
/* ---------------------------------------------------------------- */

.hero-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(160deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    background-size: 160% 160%;
    animation: heroGradient 18s ease infinite;
    color: #ffffff;
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -2;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .18), transparent 45%),
        radial-gradient(circle at 82% 12%, rgba(232, 163, 61, .28), transparent 40%),
        radial-gradient(circle at 70% 88%, rgba(255, 255, 255, .12), transparent 45%);
}

.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(to bottom, #000, transparent 85%);
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

.hero-blob {
    position: absolute;
    z-index: -1;
    border-radius: 45% 55% 62% 38% / 46% 38% 62% 54%;
    background: rgba(255, 255, 255, .08);
    filter: blur(6px);
    animation: heroFloat 12s ease-in-out infinite;
}

.hero-blob--1 { width: 320px; height: 320px; top: -80px; right: -60px; }
.hero-blob--2 { width: 220px; height: 220px; bottom: -70px; left: -50px; animation-delay: -4s; animation-duration: 15s; }

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    justify-content: center;
}

.hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    font-size: .82rem;
    font-weight: 600;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

@keyframes heroGradient {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-24px) rotate(8deg); }
}

/* ---------------------------------------------------------------- */
/* Card polish + hover motion                                        */
/* ---------------------------------------------------------------- */

.stat-card,
.campaign-card,
.beneficiary-card {
    transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease, border-color .28s ease;
}

.stat-card:hover,
.beneficiary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -20px rgba(15, 23, 42, .35);
    border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
}

.campaign-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

.campaign-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -24px rgba(15, 23, 42, .4);
    border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
}

.campaign-card .campaign-cover {
    overflow: hidden;
}

.campaign-card .campaign-cover,
.campaign-card img.campaign-cover {
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.campaign-card:hover .campaign-cover {
    transform: scale(1.04);
}

.campaign-card .p-3 { position: relative; z-index: 1; }
.campaign-card .stretched-link::after { z-index: 2; }

.stat-card .stat-value.count-up {
    font-variant-numeric: tabular-nums;
}

.stat-icon {
    transition: transform .28s cubic-bezier(.16, 1, .3, 1);
}

.stat-card:hover .stat-icon {
    transform: scale(1.08) rotate(-4deg);
}

/* Progress bar fills from 0 when its section reveals */
.progress-bar {
    background-color: var(--primary-color);
    transition: width 1.1s cubic-bezier(.16, 1, .3, 1);
}

/* ---------------------------------------------------------------- */
/* "How it works" connected steps                                   */
/* ---------------------------------------------------------------- */

.steps {
    position: relative;
    counter-reset: step;
}

.step {
    position: relative;
}

.step .step-badge {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .75rem;
    font-size: 1.35rem;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--primary-color) 70%, transparent);
    position: relative;
    z-index: 1;
}

.step .step-num {
    position: absolute;
    top: -.35rem;
    inset-inline-end: calc(50% - 2.1rem);
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--accent-color);
    color: #1b1b1b;
    font-size: .72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

@media (min-width: 992px) {
    .steps .step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 1.6rem;
        inset-inline-start: 50%;
        width: 100%;
        height: 2px;
        background: repeating-linear-gradient(90deg, var(--border-color) 0 8px, transparent 8px 16px);
        z-index: 0;
    }
}

/* ---------------------------------------------------------------- */
/* Testimonial card                                                  */
/* ---------------------------------------------------------------- */

.beneficiary-card.testimonial {
    position: relative;
    padding-top: 2.25rem;
}

.beneficiary-card.testimonial::before {
    content: "\201C";
    position: absolute;
    top: -.6rem;
    inset-inline-start: 1rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.5rem;
    line-height: 1;
    color: color-mix(in srgb, var(--primary-color) 35%, transparent);
}

.beneficiary-card.testimonial blockquote {
    font-size: .95rem;
    margin: 0;
}

/* Running (auto-scroll) testimonial strip */
.testi-section {
    background: linear-gradient(180deg, var(--surface-color), color-mix(in srgb, var(--primary-color) 5%, var(--surface-color))) !important;
}

/* The horizontal auto-scroll itself is driven by home.js (scrollLeft in a
   requestAnimationFrame loop) — robust across browsers, unaffected by any
   transform/reveal interactions. Without JS it's just a scrollable strip. */
.testi-marquee {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.testi-marquee::-webkit-scrollbar {
    display: none;
}

.testi-track {
    display: flex;
    align-items: stretch;
    gap: 1.25rem;
    width: max-content;
    padding-inline: 1.25rem;
}

.testi-card {
    flex: 0 0 auto;
    width: clamp(260px, 78vw, 360px);
    height: auto;
}

/* ---------------------------------------------------------------- */
/* Final CTA band                                                    */
/* ---------------------------------------------------------------- */

.cta-band {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #fff;
    background: linear-gradient(130deg, var(--primary-color), var(--secondary-color));
}

.cta-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
    background-size: 20px 20px;
    mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%);
}

.cta-band > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- */
/* Back-to-top button (frontend + backend)                          */
/* ---------------------------------------------------------------- */

.back-to-top {
    position: fixed;
    inset-block-end: 1.25rem;
    inset-inline-end: 1.25rem;
    z-index: 1030;
    width: 2.85rem;
    height: 2.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    font-size: 1.15rem;
    color: #fff;
    background: var(--primary-color);
    box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--primary-color) 65%, transparent);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.9);
    transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.back-to-top:hover {
    background: var(--primary-color-hover);
    transform: translateY(-2px) scale(1.05);
}

.back-to-top:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top { transition: opacity .2s ease, visibility .2s; }
}

/* ---------------------------------------------------------------- */
/* Money input — quick-pick amount chips                             */
/* ---------------------------------------------------------------- */

.amount-chip {
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.amount-chip.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.input-group-lg > .input-group-text {
    font-weight: 600;
    color: var(--muted-color);
}

/* ---------------------------------------------------------------- */
/* News / article cover images                                       */
/* ---------------------------------------------------------------- */

img.campaign-cover,
img.campaign-cover-lg,
.campaign-cover-lg {
    object-fit: cover;
}

img.campaign-cover-lg {
    width: 100%;
}

/* ---------------------------------------------------------------- */
/* Wilayah map browser                                               */
/* ---------------------------------------------------------------- */

.wilayah-map {
    height: 560px;
    border-radius: .5rem;
    background:
        linear-gradient(0deg, color-mix(in srgb, var(--secondary-color) 6%, var(--surface-color)), color-mix(in srgb, var(--secondary-color) 6%, var(--surface-color))),
        repeating-linear-gradient(0deg, transparent 0 39px, color-mix(in srgb, var(--border-color) 55%, transparent) 39px 40px),
        repeating-linear-gradient(90deg, transparent 0 39px, color-mix(in srgb, var(--border-color) 55%, transparent) 39px 40px);
    outline: 1px solid var(--border-color);
}

.wilayah-map.is-loading { opacity: .55; transition: opacity .15s ease; }

.wilayah-map .leaflet-container { background: transparent; font: inherit; }
.wilayah-map .leaflet-tooltip {
    background: var(--surface-color);
    color: var(--text-color);
    border-color: var(--border-color);
    box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .3);
}

.wilayah-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem;
}

.wilayah-crumb {
    border: 0;
    background: transparent;
    color: var(--primary-color);
    padding: .1rem .35rem;
    border-radius: .35rem;
    font-weight: 600;
}

.wilayah-crumb:hover { background: color-mix(in srgb, var(--primary-color) 10%, transparent); }
.wilayah-crumb.active { color: var(--text-color); cursor: default; }
.wilayah-crumb-sep { color: var(--muted-color); }

.wilayah-list {
    overflow-y: auto;
    max-height: 460px;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.wilayah-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    text-align: start;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-color);
    padding: .4rem .55rem;
    border-radius: .45rem;
    font-size: .875rem;
}

.wilayah-row:hover { background: color-mix(in srgb, var(--primary-color) 8%, transparent); }
.wilayah-row.active {
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
}
.wilayah-row .bi { color: var(--muted-color); font-size: .8rem; }

.wilayah-search-results {
    position: absolute;
    z-index: 1000;
    inset-inline: 0;
    top: calc(100% + .25rem);
    max-height: 320px;
    overflow-y: auto;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: .5rem;
}

.wilayah-search-item {
    display: block;
    width: 100%;
    text-align: start;
    border: 0;
    background: transparent;
    color: var(--text-color);
    padding: .45rem .6rem;
    font-size: .82rem;
    border-bottom: 1px solid var(--border-color);
}
.wilayah-search-item:last-child { border-bottom: 0; }
.wilayah-search-item:hover { background: color-mix(in srgb, var(--primary-color) 8%, transparent); }
.wilayah-search-empty { padding: .5rem .6rem; color: var(--muted-color); font-size: .82rem; }

/* ---------------------------------------------------------------- */
/* News reader star-rating                                           */
/* ---------------------------------------------------------------- */

.rating-stars {
    display: inline-flex;
    gap: .15rem;
}

.rating-star {
    border: 0;
    background: transparent;
    padding: .1rem;
    line-height: 1;
    font-size: 1.5rem;
    color: color-mix(in srgb, var(--text-color) 35%, transparent);
    cursor: pointer;
    transition: color .12s ease, transform .12s ease;
}

.rating-star:hover,
.rating-star:focus-visible {
    color: var(--accent-color);
    transform: scale(1.12);
    outline: none;
}

.rating-star.is-on {
    color: var(--accent-color);
}

.news-rating.is-busy .rating-stars {
    opacity: .6;
    pointer-events: none;
}

/* ---------------------------------------------------------------- */
/* SweetAlert2 — follow the app theme (light/dark)                   */
/* ---------------------------------------------------------------- */

.swal2-popup {
    background: var(--surface-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: .9rem;
}

.swal2-title,
.swal2-html-container {
    color: var(--text-color);
}

.swal2-actions .swal2-styled {
    border-radius: .5rem;
    box-shadow: none;
}

.swal2-actions .swal2-cancel {
    background: color-mix(in srgb, var(--text-color) 10%, transparent) !important;
    color: var(--text-color) !important;
}

.swal2-icon.swal2-question {
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
    color: var(--primary-color);
}

.swal2-toast {
    background: var(--surface-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color);
}

/* ---------------------------------------------------------------- */
/* RTL adjustments                                                   */
/* ---------------------------------------------------------------- */

[dir="rtl"] .stat-card .stat-icon {
    margin-inline-start: 0;
}

[dir="rtl"] .backend-sidebar .nav-link.active {
    border-inline-start: none;
}