/**
 * maintenance-theme.css
 * Light-cream + rust-orange visual language for the maintenance page.
 *
 * Full palette shift from the appeal's dark-atmospheric look to a warmer,
 * editorial, single-focus layout per management's mockup. The DUS emerald
 * and gold still live on the appeal side; here the primary accent is a
 * warm rust orange with green reserved for subtle affirmatives ("+ Or
 * give a different amount", checkmarks).
 *
 * Loaded AFTER main.css -- these rules win via source order.
 */

/* ============================================================
   1. Palette + page base
   ============================================================ */
:root {
    --mnt-bg:          #faf5ef;  /* warm cream page background */
    --mnt-card:        #ffffff;  /* white cards */
    --mnt-text:        #1a1d29;  /* near-black body text */
    --mnt-muted:       #64748b;  /* slate for supporting copy */
    --mnt-border:      #ecdec8;  /* warm-cream border / divider */
    --mnt-border-soft: #f4ecdd;  /* lighter divider */
    --mnt-accent:      #c94a1c;  /* rust orange, primary */
    --mnt-accent-dark: #a83c14;  /* darker rust, hover */
    --mnt-accent-soft: #fdf1e8;  /* peach, selected background */
    --mnt-green:       #10b981;  /* affirmative green */
    --mnt-footer-bg:   #1a1d29;  /* dark footer */
}

body {
    background: var(--mnt-bg);
    color: var(--mnt-text);
}
body, input, select, textarea { color: var(--mnt-text); }

/* Undo the appeal's dark background layer entirely. */
.bg-layer { display: none !important; }

/* ============================================================
   2. Header: cream-on-cream, minimal, single-focus.
      The DUS wordmark carries the brand -- no navbar (per brief).
   ============================================================ */
.header-wrap {
    background: var(--mnt-bg);
    box-shadow: none;
    border-bottom: 1px solid var(--mnt-border-soft);
}
.header {
    padding: 22px 0;
    justify-content: flex-start;
}
.header-wrap.active .header { padding: 18px 0; }

/* Replace the SVG-image logo with a text wordmark that renders reliably
   on the cream background. Keeps the DUS brand voice without relying on
   a white-only SVG file. */
.header a.main__logo { display: none !important; }

.dus-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--mnt-text);
}
.dus-brand__mark {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--mnt-accent-soft);
    color: var(--mnt-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.dus-brand__wordmark {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
}
.dus-brand__title {
    font-family: "Epilogue", sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--mnt-text);
    letter-spacing: -0.2px;
}
.dus-brand__sub {
    font-size: 11px;
    font-weight: 600;
    color: var(--mnt-muted);
    letter-spacing: 0.15em;
    margin-top: 2px;
}

/* ============================================================
   3. Hero (support-wrap) becomes a light, editorial two-column
      layout. Removes the appeal's dark backdrop entirely.
   ============================================================ */
.support-wrap {
    background: var(--mnt-bg);
    color: var(--mnt-text);
    padding: 56px 0 72px;
}
.support-wrap::before,
.support-wrap .vector__one,
.support-wrap .vector__two,
.support-wrap .vector__three,
.support-wrap .vector__four { display: none !important; }

.support-content-row {
    align-items: flex-start !important;
    gap: 48px;
}
.support_info {
    padding-right: 0;
    min-width: 0;
}
.support_info h2 {
    color: var(--mnt-text);
    font-size: 45px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.8px;
    margin-bottom: 20px;
}
.support_info h2 .days-highlight {
    color: var(--mnt-accent);
    font-weight: 700;
}
/* Emphasise "Masjid Daar us Sunnah" in the hero H2 via a themed span
   (rendered by home-stats.php). */
.support_info h2 .dus-hero-emph {
    color: var(--mnt-accent);
    font-weight: 700;
}
.support_info > p:first-of-type,
.support_info .support-lede {
    color: var(--mnt-muted);
    font-size: 18px;
    line-height: 1.55;
    max-width: 480px;
    margin-bottom: 34px;
}

/* ============================================================
   4. Supporter trackers on the LEFT (icon + label + count).
      Two white cards side-by-side, with the blurb inside each card.
   ============================================================ */
.tier-trackers {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    list-style: none !important;
    min-width: 0 !important;
}
.tier-tracker {
    background: var(--mnt-card);
    border: 1px solid var(--mnt-border);
    border-radius: 16px;
    padding: 26px 26px 28px;
    box-shadow: 0 2px 12px rgba(30, 30, 40, 0.03);
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    text-align: left;
}
/* Head: label above, hero count below. Stacked vertically so nothing
   crowds against the card edge when the card is narrow. */
.tier-tracker .tier-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 0;
    min-width: 0;
    width: 100%;
}
.tier-tracker .tier-label {
    font-family: "Epilogue", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--mnt-text);
    letter-spacing: -0.1px;
    text-transform: none;
    line-height: 1.25;
}
.tier-tracker .tier-count {
    font-size: 14px;
    color: var(--mnt-muted);
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
}
.tier-tracker .tier-count strong {
    font-family: "Epilogue", sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--mnt-accent);
    margin-right: 4px;
}
/* Thin horizontal progress bar between the head row and the blurb. */
.tier-tracker .tier-bar {
    position: relative;
    width: 100%;
    height: 6px;
    background: rgba(30, 30, 40, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
.tier-tracker .tier-bar__fill {
    display: block;
    height: 100%;
    background: var(--mnt-accent);
    border-radius: 999px;
    transition: width 0.6s ease;
}
.tier-tracker--weekly .tier-bar__fill {
    background: #b8571b;
}
.tier-tracker.is-met .tier-bar__fill {
    background: #2f8f5a;
}
/* Hide the appeal's progress bar inside the tracker (the "RAISED THIS
   MONTH" card carries the £-progress bar; supporter cards are count only). */
.tier-tracker .progress-container.tier-progress { display: none; }
.tier-tracker .tier-blurb {
    font-size: 13.5px;
    color: var(--mnt-muted);
    line-height: 1.5;
    margin: 4px 0 0;
    text-align: left;
}

/* ============================================================
   5. RAISED THIS MONTH card (below the tier trackers).
   ============================================================ */
.raised-tracker {
    background: var(--mnt-card);
    border: 1px solid var(--mnt-border);
    border-radius: 16px;
    padding: 24px 26px 22px;
    box-shadow: 0 2px 12px rgba(30, 30, 40, 0.03);
    margin-bottom: 34px !important;
}
.raised-tracker__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.raised-tracker__label {
    font-family: "Epilogue", sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mnt-text);
}
.raised-tracker__amount {
    color: var(--mnt-muted);
    font-size: 15px;
}
.raised-tracker__amount strong {
    font-family: "Epilogue", sans-serif;
    color: var(--mnt-accent);
    font-size: 32px;
    font-weight: 800;
    margin-right: 6px;
    letter-spacing: -0.6px;
}
.raised-tracker__of {
    color: var(--mnt-muted);
    font-size: 14px;
    font-weight: 500;
}
.raised-tracker__bar {
    position: relative;
    height: 8px;
    background: #eee6d6;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
}
.raised-tracker__bar-fill {
    background: linear-gradient(90deg, #d05a24 0%, #c94a1c 100%);
    border-radius: 999px;
    height: 100%;
    position: relative;
    z-index: 1;
}
.raised-tracker__bar-text { display: none; } /* redundant; percent isn't in mockup */

/* Milestone tick marks sitting on the bar at 25 / 50 / 75%. Muted grey on
   the cream track (visible against unfilled portion), light peach on the
   rust fill (visible against filled portion). Skinny 2px lines. */
.raised-tracker__bar-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(30, 30, 40, 0.22);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 3;
    border-radius: 1px;
}
.raised-tracker__bar-tick.is-reached {
    background: rgba(255, 255, 255, 0.85);
}
.raised-tracker__milestones {
    position: relative;
    height: 20px;
    margin-top: 4px;
}
.raised-tracker__milestone {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.raised-tracker__milestone-tick { display: none; }
.raised-tracker__milestone-label {
    font-size: 12px;
    color: var(--mnt-muted);
    font-weight: 500;
    white-space: nowrap;
}
.raised-tracker__milestone.is-reached .raised-tracker__milestone-label {
    color: var(--mnt-accent);
    font-weight: 700;
}
.raised-tracker__blurb {
    font-size: 14px;
    color: var(--mnt-muted);
    line-height: 1.5;
    margin: 16px 0 0 !important;
    padding-top: 16px;
    border-top: 1px solid var(--mnt-border-soft);
}

/* ============================================================
   6. Recent contributions -- full-width horizontal pill row.
      Now sits BELOW the two-column hero (moved out of .support_info
      so it can use the full container width -- no more empty gap
      on the right when only 4 of 5 pills fit in the narrow column).
   ============================================================ */
.recent-donations-wrap {
    margin: 40px auto 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.recent-donations-wrap h3 {
    font-family: "Epilogue", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--mnt-text);
    margin: 0 0 14px;
    letter-spacing: -0.2px;
}
.recent-donations-wrap h3::after {
    content: '\2764';   /* ❤ heart */
    color: var(--mnt-accent);
    margin-left: 8px;
    font-size: 14px;
}
ul.recent-donations-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: flex-start;
    align-items: stretch;
}
.recent-donations-list li {
    background: var(--mnt-card);
    border: 1px solid var(--mnt-border);
    border-radius: 12px;
    padding: 12px 16px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    box-shadow: 0 1px 6px rgba(30, 30, 40, 0.03);
    flex: 1 1 0;
}
.recent-donations-list .donation-meta {
    font-family: "Epilogue", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--mnt-muted);
    text-transform: uppercase;
    order: 1;
}
.recent-donations-list .donation-amount {
    font-family: "Epilogue", sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--mnt-text);
    order: 2;
    line-height: 1;
}

/* ============================================================
   7. Hadith / support-text -- FULL-WIDTH card that sits BELOW
      the two-column hero (moved out of .support_info so it no
      longer leaves empty space to the right of the donation
      form). Icon | text | social share, one horizontal row.
   ============================================================ */
.spread-word-left {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 36px;
    align-items: center;
    background: var(--mnt-card);
    border: 1px solid var(--mnt-border);
    border-radius: 20px;
    padding: 32px 40px;
    margin: 40px auto 0;
    box-shadow: 0 4px 20px rgba(30, 30, 40, 0.05);
    position: relative;
}
.spread-word-left::before {
    content: '\f518'; /* fa-book-open -- Free-tier */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--mnt-accent-soft);
    color: var(--mnt-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
}
.support-text {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;   /* keeps long lines from overflowing the grid track */
}
.support-text p {
    font-size: 15px;
    color: var(--mnt-text);
    line-height: 1.6;
    margin-bottom: 14px;
}
.support-text p:last-child { margin-bottom: 0; }

.social__sharing-horizontal {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 0;
    padding-left: 32px;
    margin-top: 0;
    border-top: none;
    border-left: 1px solid var(--mnt-border-soft);
    align-self: center;
}
@media (max-width: 900px) {
    .spread-word-left { grid-template-columns: 88px 1fr !important; }
    .social__sharing-horizontal {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        padding-left: 0 !important;
        padding-top: 18px !important;
        border-left: none !important;
        border-top: 1px solid var(--mnt-border-soft) !important;
    }
}
.social__sharing-horizontal h3 {
    font-family: "Epilogue", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--mnt-text);
    margin: 0;
}
ul.social-list-horizontal {
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}
ul.social-list-horizontal li a {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--mnt-card);
    border: 1px solid var(--mnt-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mnt-text);
    transition: 0.18s all;
}
ul.social-list-horizontal li a:hover {
    background: var(--mnt-accent-soft);
    border-color: var(--mnt-accent);
    color: var(--mnt-accent);
}
ul.social-list-horizontal li a svg {
    width: 16px; height: 16px;
    fill: currentColor;
}

/* ============================================================
   8. Donation card (right column).
   ============================================================ */
.support__box {
    background: var(--mnt-card);
    border: 1px solid var(--mnt-border);
    border-top: none;
    border-radius: 20px;
    padding: 34px 32px;
    box-shadow: 0 8px 32px rgba(30, 30, 40, 0.06);
    position: relative;
    overflow: hidden;
}
/* Subtle orange top edge on the card. */
.support__box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--mnt-accent);
}
.support__box h3 {
    font-family: "Epilogue", sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: var(--mnt-text);
    letter-spacing: -0.4px;
    margin-bottom: 4px;
    text-align: center;
    position: relative;
    padding-bottom: 14px;
}
.support__box h3::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--mnt-accent);
    border-radius: 2px;
    margin: 12px auto 0;
}
.support__box > p {
    text-align: center;
    color: var(--mnt-muted);
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 24px;
}

/* ============================================================
   9. Priority tier CTAs inside the donation form.
      Two cards side by side, icon in top-left, price + copy + pill.
   ============================================================ */
.priority-tiers {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    align-items: stretch !important;
    margin-bottom: 24px !important;
}
.tier-cta {
    background: var(--mnt-card);
    border: 2px solid var(--mnt-border);
    border-radius: 14px;
    padding: 16px 14px 14px;
    gap: 8px !important;
    text-align: left;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.18s ease;
    position: relative;
}
.tier-cta::before {
    content: '';
    position: absolute;
    top: 14px; left: 14px;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--mnt-accent-soft);
    color: var(--mnt-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
}
.tier-cta--daily::before   { content: '\f0c0'; }  /* fa-users */
.tier-cta--weekly::before  { content: '\f7b6'; background: #f7ecdc; color: #b8571b; }  /* fa-mug-hot */
.tier-cta__price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-left: 42px;
    margin-bottom: 4px;
}
.tier-cta__amount {
    font-family: "Epilogue", sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: var(--mnt-text);
    letter-spacing: -0.5px;
}
.tier-cta__per {
    font-size: 14px;
    color: var(--mnt-muted);
    font-weight: 500;
}
.tier-cta__title {
    font-family: "Epilogue", sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--mnt-text);
    letter-spacing: -0.1px;
    line-height: 1.25;
}
.tier-cta__sub {
    font-size: 12.5px;
    color: var(--mnt-muted);
    line-height: 1.4;
    margin-bottom: 6px;
}
.tier-cta__pill {
    align-self: flex-start;
    background: var(--mnt-accent-soft);
    color: var(--mnt-accent);
    font-family: "Epilogue", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    margin-top: 6px;
}
.tier-cta--weekly .tier-cta__pill {
    background: #f7ecdc;
    color: #b8571b;
}
/* Selected state */
.tier-cta--daily.is-selected {
    border-color: var(--mnt-accent);
    background: var(--mnt-accent-soft);
    box-shadow: 0 6px 18px rgba(201, 74, 28, 0.18);
    transform: none;
}
.tier-cta--weekly.is-selected {
    border-color: #b8571b;
    background: #f7ecdc;
    box-shadow: 0 6px 18px rgba(184, 87, 27, 0.18);
    transform: none;
}
.tier-cta:hover { transform: none; }

/* ============================================================
   10. Checkboxes -- coloured checkmarks, cleaner rows.
   ============================================================ */
.checkboxes-wrapper {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 20px !important;
}
.checkbox__field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px !important;
}
.checkbox__field input[type="checkbox"] {
    width: 20px; height: 20px;
    margin: 2px 0 0;
    accent-color: var(--mnt-accent);
    flex-shrink: 0;
}
.checkbox__field label {
    font-size: 14px !important;
    color: var(--mnt-text) !important;
    line-height: 1.5;
    padding-left: 0 !important;
    margin: 0 !important;
    cursor: pointer;
}
.checkbox__field label b { color: var(--mnt-text); font-weight: 700; }

/* ============================================================
   11. Give-now button -- big rust orange bar.
   ============================================================ */
.give-now-btn {
    background: var(--mnt-accent) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: 18px 22px !important;
    font-family: "Epilogue", sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    box-shadow: 0 8px 20px rgba(201, 74, 28, 0.28) !important;
    letter-spacing: -0.2px;
    cursor: pointer;
    width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: background 0.18s ease;
}
.give-now-btn:hover { background: var(--mnt-accent-dark) !important; opacity: 1 !important; }
.give-now-btn .give-now-icon { display: none !important; }  /* replaced with unicode arrow */
.give-now-btn .give-now-label { display: inline !important; width: auto !important; }
.give-now-btn .give-now-label::after {
    content: '  \2192';   /* → */
    font-size: 18px;
}

/* ============================================================
   12. "Or give a different amount" disclosure -- muted with green +.
   ============================================================ */
.other-amounts {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--mnt-border);
    text-align: center;
}
.other-amounts > summary {
    color: var(--mnt-muted);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}
.other-amounts > summary::before {
    content: '+';
    color: var(--mnt-green) !important;
    font-weight: 800;
    margin-right: 6px;
    font-size: 16px;
    display: inline-block;
    width: auto !important;
}
.other-amounts[open] > summary::before {
    content: '−';
}

/* ============================================================
   13. Other-ways-to-donate row.
   ============================================================ */
.other-donate {
    text-align: center;
    font-family: "Epilogue", sans-serif;
    font-weight: 700;
    color: var(--mnt-text);
    margin-top: 20px !important;
    margin-bottom: 14px !important;
    font-size: 15px !important;
}
.donate__outer {
    justify-content: center !important;
    gap: 14px !important;
}
.donate__box {
    background: var(--mnt-card);
    border: 1px solid var(--mnt-border);
    border-radius: 12px;
    padding: 10px;
    width: 60px; height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(30,30,40,0.04);
    transition: all 0.18s ease;
}
.donate__box:hover {
    border-color: var(--mnt-accent);
}
.donate__box img {
    max-width: 100%;
    max-height: 40px;
}

/* ============================================================
   14. "Our Masjid" service section (video + copy).
   ============================================================ */
.service-wrap {
    background: var(--mnt-bg);
    padding: 56px 0 72px;
}
.service-wrap .lead__info { display: none; }  /* mockup goes straight into the video/text row */
.service-wrap .service {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: center;
}
@media (max-width: 900px) {
    .service-wrap .service { grid-template-columns: 1fr; }
}
.service-wrap .service__video {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(30,30,40,0.12);
    aspect-ratio: 16 / 9;
    background: #000;
}
.service-wrap .service__video iframe {
    width: 100%; height: 100%;
    display: block;
    border: 0;
}
.service-wrap .service__box h3 {
    font-family: "Epilogue", sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: var(--mnt-text);
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
}
.service-wrap .service__box p {
    color: var(--mnt-muted);
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 22px;
}
.service-wrap .service__box .theme-btn {
    background: var(--mnt-accent);
    box-shadow: 0 8px 20px rgba(201, 74, 28, 0.28);
    border-radius: 12px;
    padding: 13px 24px;
    font-size: 15px;
    font-weight: 700;
}
.service-wrap .service__box .theme-btn:hover { background: var(--mnt-accent-dark); opacity: 1; }
.service-wrap .service__box .theme-btn span { display: none; }

/* ============================================================
   15. Footer -- keep dark for visual contrast, tweak spacing.
   ============================================================ */
.footer-wrap { background: var(--mnt-footer-bg); }

/* ============================================================
   16. Smooth-open animation for "Or give a different amount".
       The native <details> is a hard show/hide; this pairs with
       the JS in home-stats.php that animates .other-amounts__inner.
   ============================================================ */
.other-amounts__inner {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 320ms cubic-bezier(.4,0,.2,1),
                opacity 220ms ease-out,
                transform 260ms ease-out;
    will-change: max-height, opacity;
}
.other-amounts.is-open .other-amounts__inner {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   17. Milestone label edge-handling.
       First tick sits at left=0, last at left=100% -- naive
       translateX(-50%) clips them off the edges of the card.
   ============================================================ */
.raised-tracker__milestone[style*="left: 0%"]    { transform: translateX(0) !important; align-items: flex-start; }
.raised-tracker__milestone[style*="left: 100%"]  { transform: translateX(-100%) !important; align-items: flex-end; }

/* ============================================================
   18. Overrides for main.css rules that were designed for the
       appeal's dark hero and would render invisible on cream.
   ============================================================ */
.support_info em {
    color: var(--mnt-accent) !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}
.recent-donations-wrap h3 {
    color: var(--mnt-text) !important;
}
/* main.css sets .support-wrap { color: white } -- push descendants dark. */
.support-wrap p,
.support-wrap li,
.support-wrap label,
.support-wrap span {
    color: inherit;
}
.support-wrap { color: var(--mnt-text); }

/* Donation-detail popovers (bank / bitcoin) were tinted for the dark hero.
   Re-brand them for the cream card. */
.donate-detail__box {
    background: var(--mnt-card) !important;
    color: var(--mnt-text);
    border: 1px solid var(--mnt-border);
    box-shadow: 0 8px 32px rgba(30, 30, 40, 0.14);
}
.donate-detail__box h3, .donate-detail__box h4 { color: var(--mnt-text) !important; }
.donate-detail__box label { color: var(--mnt-muted); }
.donate-detail__box input[type="text"] {
    background: var(--mnt-bg);
    color: var(--mnt-text);
    border: 1px solid var(--mnt-border);
}
.all-copy {
    background: var(--mnt-accent) !important;
    color: #fff !important;
    border-radius: 10px;
    font-weight: 700;
    padding: 10px 18px;
}
.all-copy:hover { background: var(--mnt-accent-dark) !important; }

/* Empty-state row in recent contributions (Bootstrap classes were being
   used but the site doesn't load Bootstrap). Style it explicitly. */
ul.recent-donations-list .text-center,
ul.recent-donations-list .text-muted {
    color: var(--mnt-muted) !important;
    text-align: center;
    width: 100%;
    padding: 18px 0;
    background: var(--mnt-bg);
    border: 1px dashed var(--mnt-border);
    border-radius: 12px;
    font-size: 14px;
}

/* ============================================================
   19. Form-control accents inside "Or give a different amount".
       main.css defaults to green (DUS emerald) for checked states;
       shift to the rust-orange brand for the maintenance page.
   ============================================================ */
.other-amounts .frequency-toggle input[type="radio"]:checked + .toggle-btn {
    background: var(--mnt-text);
    color: #fff;
}
.other-amounts .frequency-toggle input[type="radio"]:checked + .monthly-btn {
    background: var(--mnt-accent-soft);
    color: var(--mnt-accent-dark);
    border: 1px solid rgba(201, 74, 28, 0.25);
}
.other-amounts .sub-toggle input[type="radio"]:checked + .toggle-btn {
    color: var(--mnt-accent);
}
.other-amounts .amount-grid .radio-btn input:checked + label {
    border-color: var(--mnt-accent);
    background: var(--mnt-accent-soft);
    color: var(--mnt-accent);
}
.other-amounts .suggested-amt label {
    border-color: var(--mnt-accent);
    background: var(--mnt-accent-soft);
}
.other-amounts .suggested-badge {
    background: var(--mnt-accent);
    box-shadow: 0 2px 5px rgba(201, 74, 28, 0.3);
}
.other-amounts .custom-amount-input {
    border-color: var(--mnt-border);
}
.other-amounts .custom-amount-input:focus-within {
    border-color: var(--mnt-accent);
    box-shadow: 0 0 0 4px rgba(201, 74, 28, 0.12);
}
.other-amounts .impact-message {
    background: var(--mnt-accent-soft);
    border-color: rgba(201, 74, 28, 0.25);
}
.other-amounts .impact-message #impact-title {
    color: var(--mnt-accent-dark) !important;
}
.other-amounts .impact-nudge {
    color: var(--mnt-accent) !important;
}
.other-amounts h4.other-donate { display: none; }  /* the parent already labels "Other ways to donate" -- avoids repeat */

/* ============================================================
   20. HIGH-SPECIFICITY OVERRIDES for main.css leftovers.
       main.css `.spread-word-left .support-text p { color: rgba(255,255,255,0.85) }`
       has 3 classes and outweighs my earlier `.support-text p` (2 classes)
       even with correct source order -- causing invisible white text on
       the cream card. Re-prefix at the same specificity + !important.
   ============================================================ */
.spread-word-left .support-text p {
    color: var(--mnt-text) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin-bottom: 14px !important;
}
.spread-word-left .support-text p:last-child { margin-bottom: 0 !important; }

/* Equal-height cards inside the two 2-column grids. Grid auto-stretches
   items to the tallest sibling by default, but a couple of main.css
   rules (list-style, display: block on li) were breaking the stretch
   for the tier trackers. Force it explicitly. */
.tier-trackers, .priority-tiers {
    align-items: stretch !important;
}
.tier-tracker, .tier-cta {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}
.tier-tracker .tier-blurb { margin-top: auto !important; }
.tier-cta__pill { margin-top: auto !important; }
.spread-word-left .social__sharing-horizontal { margin-top: 4px !important; }

/* ============================================================
   21. Cryptocurrency QR-code detail popover.
       main.css `.qr__img img { width: 100% }` stretches the QR
       horizontally with no aspect-ratio constraint -- codes are
       unscannable and look distorted. Constrain to a square.
   ============================================================ */
.qr-detail {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 20px !important;
    justify-items: center;
}
.qr-detail .donate__field--alt {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 200px;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
}
.qr-detail .qr__img {
    width: 160px !important;
    height: 160px !important;
    margin: 0 !important;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--mnt-border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qr-detail .qr__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    aspect-ratio: 1 / 1;
    display: block;
}
.qr-detail .copy__box {
    display: flex !important;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 200px;
}
.qr-detail .copy__box input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: "SF Mono", "Menlo", monospace;
    font-size: 11px;
    padding: 8px 10px;
    background: var(--mnt-accent-soft) !important;
    color: var(--mnt-text) !important;
    border: 1px solid var(--mnt-border);
    border-radius: 8px;
    text-overflow: ellipsis;
}
.qr-detail .copy__box .copy-btn {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    background: var(--mnt-card);
    border: 1px solid var(--mnt-border);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mnt-muted);
    transition: all 0.15s ease;
}
.qr-detail .copy__box .copy-btn:hover {
    color: var(--mnt-accent);
    border-color: var(--mnt-accent);
}
.qr-detail .copy__box .copy-btn::before {
    content: '\f0c5'; /* fa-copy */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
}
.donate-detail__box .close-detail {
    color: var(--mnt-muted);
    cursor: pointer;
}

/* ============================================================
   22. "Other ways to donate" payment method row.
       Refined: uniform square cards, monochrome logos with a
       subtle grayscale filter that lifts on hover. Consistent
       visual weight instead of the Bitcoin/WhatsApp blocks
       shouting over the smaller PayPal / Bank Transfer marks.
   ============================================================ */
.other-donate {
    text-align: center;
    font-family: "Epilogue", sans-serif !important;
    font-weight: 700 !important;
    color: var(--mnt-text) !important;
    font-size: 13px !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 24px 0 14px !important;
}
.donate__outer {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
}
.donate__box {
    width: 72px !important;
    height: 72px !important;
    padding: 0 !important;
    background: var(--mnt-card) !important;
    border: 1px solid var(--mnt-border) !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.18s ease;
    box-shadow: 0 1px 3px rgba(30, 30, 40, 0.04);
    overflow: hidden;
}
.donate__box:hover {
    border-color: var(--mnt-accent) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(201, 74, 28, 0.14);
}
.donate__box img,
.donate__box .donate-icon__detail img,
.donate__box .donate__icon img {
    max-width: 40px !important;
    max-height: 32px !important;
    width: auto !important;
    height: auto !important;
    filter: grayscale(0.65) opacity(0.82);
    transition: filter 0.18s ease;
}
.donate__box:hover img { filter: grayscale(0) opacity(1); }
.donate__box .donate__icon,
.donate__box .donate-icon__detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
/* WhatsApp inline SVG mark -- kill the neon-green tile, use a subtle
   monochrome glyph that matches the rest of the row. */
.donate__box .wa-donate-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    background: transparent !important;
    border-radius: 0;
    color: var(--mnt-text);
}
.donate__box .wa-donate-box svg {
    width: 26px; height: 26px;
    fill: currentColor;
    transition: fill 0.18s ease;
    opacity: 0.82;
}
.donate__box:hover .wa-donate-box svg { opacity: 1; fill: var(--mnt-accent); }

/* ============================================================
   23. Recent contribution pills -- main.css sets mint-green
       backgrounds + yellow amount text via `.goal__box.recent-
       donations-list li` (2 classes + !important). Override at
       equal specificity + !important.
   ============================================================ */
ul.goal__box.recent-donations-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;      /* single row -- matches dusmasjidappeal */
    justify-content: stretch !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    /* Constrain to the column width so 5 pills compress to fit rather
       than overflow past .support_info under the donation card. */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
ul.goal__box.recent-donations-list li {
    background: var(--mnt-card) !important;
    border: 1px solid var(--mnt-border) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    box-shadow: 0 1px 3px rgba(30, 30, 40, 0.04) !important;
    /* Appeal-style stretch: each pill fills 1/N of the row width so they
       always sit on a single line, evenly distributed. */
    flex: 1 1 0px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    transform: none !important;
    overflow: hidden !important;
    gap: 4px;
}
ul.goal__box.recent-donations-list li:hover {
    transform: translateY(-2px) !important;
    background: var(--mnt-accent-soft) !important;
    border-color: var(--mnt-accent) !important;
    box-shadow: 0 6px 16px rgba(201, 74, 28, 0.14) !important;
}
ul.goal__box.recent-donations-list .donation-meta {
    color: var(--mnt-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;   /* lowercase "50m ago" fits; uppercase+spacing did not */
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    line-height: 1;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}
ul.goal__box.recent-donations-list .donation-when {
    color: var(--mnt-muted);
    min-width: 0;
    white-space: nowrap;
}
ul.goal__box.recent-donations-list .donation-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 4px;
    background: var(--mnt-accent-soft);
    color: var(--mnt-accent);
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
ul.goal__box.recent-donations-list .donation-amount {
    color: var(--mnt-text) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    font-family: "Epilogue", sans-serif !important;
    line-height: 1 !important;
}

/* ============================================================
   24. Video / "Our Masjid" section -- kill the appeal's
       overlap-card design (max-width:560px + margin-left:-112px)
       and the video's fixed max-width:872px that leave empty
       space on the right. Full-width 2-column grid instead.
   ============================================================ */
.service-wrap .service {
    display: grid !important;
    grid-template-columns: 1.15fr 1fr !important;
    gap: 40px !important;
    align-items: stretch !important;
    justify-content: initial !important;
}
.service-wrap .service__video {
    max-width: none !important;
    width: 100% !important;
    padding-bottom: 0 !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(30, 30, 40, 0.12);
}
.service-wrap .service__video span {
    display: none !important;  /* the yellow play-button overlay from appeal design */
}
.service-wrap .service__box {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 34px 36px 30px !important;
    background: var(--mnt-card);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(30, 30, 40, 0.06);
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    z-index: auto !important;
}
.service-wrap .service__box h3 {
    font-size: 30px !important;
    color: var(--mnt-text) !important;
    letter-spacing: -0.4px;
    line-height: 1.2;
    margin-bottom: 16px !important;
}
.service-wrap .service__box p {
    color: var(--mnt-muted) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}
@media (max-width: 900px) {
    .service-wrap .service { grid-template-columns: 1fr !important; }
}

/* ============================================================
   25. Payment method cards -- make the ENTIRE card clickable
       by expanding the inner icon container to fill 100%.
       main.css locks `.donate-icon__detail, .donate__icon,
       .wa-donate-box { max-width: 55px; height: 55px }` -- so
       the click target was only ~55x55 inside a 72x72 card.
   ============================================================ */
.donate__box .donate-icon__detail,
.donate__box .donate__icon,
.donate__box .wa-donate-box {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    background: transparent !important;   /* main.css sets WhatsApp brand-green (#25D366) here */
    border-radius: 0 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
}
.donate__box .wa-donate-box:hover {
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
/* WhatsApp SVG: same monochrome-on-rest / rust-on-hover treatment
   as the other payment logos, so the row has consistent weight. */
.donate__box .wa-donate-box svg {
    width: 24px !important;
    height: 24px !important;
    fill: var(--mnt-text) !important;
    opacity: 0.62 !important;
    transition: fill 0.18s ease, opacity 0.18s ease;
}
.donate__box:hover .wa-donate-box svg {
    fill: var(--mnt-accent) !important;
    opacity: 1 !important;
}

/* ============================================================
   26. Header brand mark -- use the official DUS logo file
       (dus-masjid-logo.svg) instead of the Font Awesome mosque
       glyph in a peach circle.
   ============================================================ */
.dus-brand__mark {
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    padding: 0;
    color: inherit;
}
.dus-brand__mark img {
    display: block;
    width: 44px;
    height: auto;
}
/* Keep the FA fallback tidy if the img is missing */
.dus-brand__mark i.fas {
    color: var(--mnt-accent);
    font-size: 22px;
}

/* ============================================================
   27. Footer contact icons -- use FA glyphs (envelope / phone /
       map pin) rather than the paper-airplane #ft-link-icon.
   ============================================================ */
.footer .contact-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ============================================================
   28. Small responsive nudges.
   ============================================================ */

/* responsive.css @media (max-width: 1199px) turns the recent-donations
   list into a horizontal-scroll carousel and forces `min-width: 200px`
   on each pill. That in turn expands the .support_info flex track and
   pushes the fixed-width .support__box off-screen. Neutralise on this
   maintenance page -- pills always stretch to fill the column.
   Higher specificity than responsive.css by adding a scope selector. */
@media (max-width: 1199px) {
    .support-wrap ul.goal__box.recent-donations-list,
    .recent-donations-wrap ul.goal__box.recent-donations-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        justify-content: stretch !important;
        scroll-snap-type: none !important;
        padding: 0 !important;
        gap: 8px !important;
    }
    .support-wrap ul.goal__box.recent-donations-list li,
    .recent-donations-wrap ul.goal__box.recent-donations-list li {
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
        flex: 1 1 0px !important;
        scroll-snap-align: none !important;
    }
}

@media (max-width: 991px) {
    .support-content-row { flex-direction: column; }
    .support_info { flex: 1 1 auto; width: 100%; }
    .support__box { width: 100%; }
    .support_info h2 { font-size: 42px; }
}
@media (max-width: 600px) {
    .tier-trackers { grid-template-columns: 1fr; }
    .support_info h2 { font-size: 34px; }
    .support__box { padding: 24px 20px; }
    .priority-tiers { grid-template-columns: 1fr; }
    .raised-tracker__amount strong { font-size: 26px; }
}