/* =============================================================
   Donations — campaign card, amount box (step 1) and the
   donor / card dialog (steps 2-4).
   Brand colour follows the theme's --thm-base with a fallback.
   ============================================================= */

.donation-card,
.donation-box,
.donation-modal {
    --donation-accent: var(--thm-base, #009f84);
    --donation-border: #e6eaee;
    --donation-muted: #7a838f;
    --donation-radius: 14px;
}

/* ---------- campaign progress card ---------- */

.donation-card {
    background: #fff;
    border: 1px solid var(--donation-border);
    border-radius: var(--donation-radius);
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
}

.donation-card__progress-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.donation-card__raised strong {
    font-size: 24px;
    font-weight: 800;
    color: var(--donation-accent);
    line-height: 1.1;
}

.donation-card__raised span {
    font-size: 13px;
    color: var(--donation-muted);
    margin-inline-start: 6px;
}

.donation-card__percent {
    background: rgba(0, 159, 132, .1);
    color: var(--donation-accent);
    font-weight: 700;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.donation-card__bar {
    height: 8px;
    border-radius: 999px;
    background: #eef1f4;
    overflow: hidden;
}

.donation-card__bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--donation-accent), #35c3a7);
    transition: width .6s ease;
}

.donation-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--donation-muted);
}

.donation-card__stats {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 14px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid #eef1f4;
    text-align: center;
}

.donation-card__stats li + li {
    border-inline-start: 1px solid #eef1f4;
}

.donation-card__stats strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #1f2937;
    line-height: 1.2;
}

.donation-card__stats span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--donation-muted);
}

/* ---------- amount box (step 1) ---------- */

.donation-box {
    background: #fff;
    border: 1px solid var(--donation-border);
    border-radius: var(--donation-radius);
    padding: 18px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
}

.donation-form__frequency {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.donation-frequency {
    margin: 0;
    text-align: center;
    border: 1.5px solid var(--donation-border);
    border-radius: 10px;
    padding: 11px 8px;
    cursor: pointer;
    font-weight: 700;
    color: #5b6572;
    background: #fff;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.donation-frequency input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.donation-frequency.active {
    border-color: var(--donation-accent);
    color: var(--donation-accent);
    background: rgba(0, 159, 132, .05);
}

.donation-tagline {
    text-align: center;
    color: var(--donation-accent);
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 14px;
}

.donation-form__amounts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.donation-amount {
    border: 1.5px solid var(--donation-border);
    background: #fff;
    border-radius: 10px;
    padding: 12px 4px;
    font-weight: 700;
    font-size: 15px;
    color: #2b3440;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.donation-amount:hover,
.donation-amount.active {
    border-color: var(--donation-accent);
    color: var(--donation-accent);
    background: rgba(0, 159, 132, .06);
}

.donation-amount-field {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid var(--donation-border);
    border-radius: 10px;
    padding: 8px 14px;
    margin-bottom: 14px;
    background: #fff;
}

.donation-amount-field:focus-within {
    border-color: var(--donation-accent);
    box-shadow: 0 0 0 3px rgba(0, 159, 132, .12);
}

.donation-amount-field__currency {
    color: var(--donation-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
}

.donation-amount-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 26px;
    font-weight: 800;
    color: var(--donation-accent);
    text-align: center;
    padding: 4px 0;
    -moz-appearance: textfield;
}

.donation-amount-field input::-webkit-outer-spin-button,
.donation-amount-field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.donation-amount-field__symbol {
    font-size: 20px;
    font-weight: 800;
    color: var(--donation-accent);
}

/* ---------- buttons ---------- */

.donation-cta {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: 14px 18px;
    background: var(--donation-accent);
    color: #fff !important;
    text-align: center;
    font-weight: 700;
    font-size: 17px;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}

.donation-cta:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    color: #fff !important;
}

.donation-cta[disabled] {
    opacity: .7;
    cursor: not-allowed;
    transform: none;
}

.donation-card__cta {
    display: block;
    margin: 4px 0 0;
    padding: 14px 18px;
    border-radius: 10px;
    background: var(--donation-accent);
    color: #fff !important;
    text-align: center;
    font-weight: 700;
    text-decoration: none;
}

.donation-back {
    flex: none;
    border: 1px solid #dde2e7;
    background: #fff;
    color: #4b5563;
    border-radius: 10px;
    padding: 13px 18px;
    font-weight: 600;
    cursor: pointer;
}

.donation-back:hover {
    background: #f6f8f9;
}

.donation-form__nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.donation-form__nav .donation-cta {
    flex: 1;
    width: auto;
}

.donation-form__spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-inline-start: 8px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: donation-spin .7s linear infinite;
}

@keyframes donation-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- accepted cards ---------- */

.donation-marks {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.donation-marks .donation-mark {
    /* themes often ship a global `svg { width: 100% }` — pin these down. */
    width: 42px !important;
    height: 28px !important;
    max-width: 42px;
    flex: 0 0 auto;
    display: block;
    border-radius: 5px;
    border: 1px solid var(--donation-border);
}

/* ---------- fields ---------- */

.donation-form__field {
    margin-bottom: 14px;
}

.donation-form__field > label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}

.donation-optional {
    font-weight: 400;
    color: var(--donation-muted);
    font-size: 12px;
}

.donation-form__field input[type="text"],
.donation-form__field input[type="email"],
.donation-form__field input[type="tel"],
.donation-form__field textarea {
    width: 100%;
    border: 1px solid var(--donation-border);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 15px;
    background: #fff;
}

.donation-form__field input:focus,
.donation-form__field textarea:focus {
    outline: none;
    border-color: var(--donation-accent);
    box-shadow: 0 0 0 3px rgba(0, 159, 132, .12);
}

.donation-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
}

.donation-card-container {
    /* Square's card iframe follows this element; RTL pages must not flip it. */
    direction: ltr;
    text-align: left;
    border: 1px solid var(--donation-border);
    border-radius: 10px;
    padding: 6px 10px;
    min-height: 56px;
    background: #fff;
}

.donation-form__message {
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    margin-bottom: 12px;
}

.donation-form__message.is-error {
    background: #fdeceb;
    color: #b42318;
}

.donation-form__message.is-success {
    background: #eafaf0;
    color: #197741;
}

.donation-form__secure {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--donation-muted);
    text-align: center;
}

/* ---------- dialog (steps 2-4) ---------- */

body.donation-modal-open {
    overflow: hidden;
}

.donation-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.donation-modal[hidden] {
    display: none;
}

.donation-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 32, .55);
    backdrop-filter: blur(2px);
}

.donation-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 24px 60px rgba(16, 24, 40, .25);
    animation: donation-pop .2s ease;
}

@keyframes donation-pop {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.donation-modal__close {
    position: absolute;
    top: 10px;
    inset-inline-end: 14px;
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: #9aa3ae;
    cursor: pointer;
}

.donation-modal__close:hover {
    color: #4b5563;
}

.donation-modal__head h3 {
    font-size: 18px;
    margin: 0 0 12px;
    font-weight: 700;
}

.donation-summary-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(0, 159, 132, .07);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.donation-summary-line__label {
    color: #4b5563;
    font-size: 14px;
}

.donation-summary-line__value {
    font-size: 20px;
    font-weight: 800;
    color: var(--donation-accent);
}

.donation-step {
    display: none;
}

.donation-step.is-active {
    display: block;
}

/* ---------- thank you ---------- */

.donation-done {
    text-align: center;
    padding: 10px 0 4px;
}

.donation-done__icon {
    color: var(--donation-accent);
    width: 62px;
    height: 62px;
    margin: 0 auto 12px;
}

.donation-done__icon svg {
    width: 100%;
    height: 100%;
}

.donation-done h4 {
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 6px;
}

.donation-done__amount {
    font-size: 24px;
    font-weight: 800;
    color: var(--donation-accent);
    margin: 0 0 6px;
}

.donation-done__note {
    color: var(--donation-muted);
    font-size: 14px;
    margin: 0 0 16px;
}

/* ---------- donation page ---------- */

.donation-campaign-head {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--donation-border, #e6eaee);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 16px;
}

.donation-campaign-head img {
    width: 82px;
    height: 62px;
    object-fit: cover;
    border-radius: 10px;
    flex: none;
}

.donation-campaign-head h2 {
    font-size: 17px;
    margin: 0 0 8px;
    font-weight: 700;
}

/* ---------- campaign card in listing grids ---------- */

.donation-project-card {
    --donation-accent: var(--thm-base, #009f84);
    --donation-border: #e6eaee;
    --donation-muted: #7a838f;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--donation-border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 26px;
    box-shadow: 0 8px 26px rgba(16, 24, 40, .06);
    transition: box-shadow .2s ease, transform .2s ease;
}

.donation-project-card:hover {
    box-shadow: 0 14px 34px rgba(16, 24, 40, .12);
    transform: translateY(-2px);
}

.donation-project-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f2f4f6;
}

.donation-project-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.donation-project-card:hover .donation-project-card__media img {
    transform: scale(1.04);
}

.donation-project-card__body {
    padding: 16px 16px 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.donation-project-card__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 14px;
    text-align: center;
    min-height: 3em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.donation-project-card__title a {
    color: #1f2937;
    text-decoration: none;
}

.donation-project-card__title a:hover {
    color: var(--donation-accent);
}

.donation-project-card__progress {
    margin-bottom: 14px;
}

.donation-project-card__percent {
    display: block;
    text-align: end;
    font-size: 13px;
    font-weight: 700;
    color: var(--donation-accent);
    margin-bottom: 6px;
}

.donation-project-card__cta {
    margin-top: auto;
}

.donation-project-card .donation-marks {
    margin-top: 12px;
}

.donation-project-card .donation-marks .donation-mark {
    width: 36px !important;
    height: 24px !important;
    max-width: 36px;
}

.donation-project-card__stats {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: 12px 8px;
    border-top: 1px solid #eef1f4;
    background: #fafbfc;
    text-align: center;
}

.donation-project-card__stats li + li {
    border-inline-start: 1px solid #e9edf1;
}

.donation-project-card__stats strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #1f2937;
    line-height: 1.3;
}

.donation-project-card__stats span {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--donation-muted);
}

/* ---------- digital wallets (Apple Pay / Google Pay) ---------- */

.donation-wallets {
    margin-bottom: 16px;
}

.donation-wallets[hidden] {
    display: none;
}

.donation-wallet-button {
    width: 100%;
    height: 48px;
    margin-bottom: 10px;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.donation-wallet-button[hidden] {
    display: none;
}

/* Apple's own button rendering — required by their brand guidelines. */
.apple-pay-button {
    -webkit-appearance: -apple-pay-button;
    appearance: -apple-pay-button;
    -apple-pay-button-type: contribute;
    -apple-pay-button-style: black;
    background: #000;
}

.donation-or {
    position: relative;
    text-align: center;
    margin: 14px 0 4px;
}

.donation-or::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: 1px;
    background: #e6eaee;
}

.donation-or span {
    position: relative;
    background: #fff;
    padding: 0 12px;
    font-size: 13px;
    color: var(--donation-muted, #7a838f);
}

/* =============================================================
   v1.5 — social proof + sticky donate button
   ============================================================= */

.donation-proof,
.donation-fab,
.donation-proof-bar {
    --donation-accent: var(--thm-base, #009f84);
    --donation-border: #e6eaee;
    --donation-muted: #7a838f;
}

/* ---------- proof strip inside the campaign card ---------- */

.donation-proof-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(0, 159, 132, .07);
    font-size: 13px;
    line-height: 1.5;
    color: #223;
}

.donation-proof-bar__pulse {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--donation-accent);
    box-shadow: 0 0 0 0 rgba(0, 159, 132, .55);
    animation: donation-pulse 2.2s infinite;
}

.donation-proof-bar__text {
    font-weight: 600;
}

.donation-proof-bar__ago {
    color: var(--donation-muted);
}

@keyframes donation-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 159, 132, .5); }
    70% { box-shadow: 0 0 0 8px rgba(0, 159, 132, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 159, 132, 0); }
}

/* ---------- rotating proof toast ---------- */

.donation-proof {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9400;
    max-width: 330px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}

.donation-proof.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.donation-proof[hidden] {
    display: none;
}

.donation-proof__card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--donation-border);
    box-shadow: 0 14px 34px rgba(16, 24, 40, .14);
    cursor: pointer;
}

.donation-proof__avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(135deg, var(--donation-accent), #35c3a7);
}

.donation-proof__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.donation-proof__line {
    font-size: 13px;
    line-height: 1.45;
    color: #1b2430;
}

.donation-proof__line strong {
    font-weight: 700;
}

.donation-proof__meta {
    font-size: 11.5px;
    color: var(--donation-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.donation-proof__close {
    align-self: flex-start;
    margin-inline-start: auto;
    border: 0;
    background: transparent;
    color: var(--donation-muted);
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

.donation-proof__close:hover {
    color: #1b2430;
}

/* ---------- sticky donate button ---------- */

.donation-fab {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translate(110%, -50%);
    z-index: 9300;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px;
    border: 0;
    border-radius: 12px 0 0 12px;
    background: var(--donation-accent);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: -6px 6px 22px rgba(16, 24, 40, .22);
    transition: transform .35s ease, filter .2s ease;
    writing-mode: vertical-rl;
}

.donation-fab.is-visible {
    transform: translate(0, -50%);
}

.donation-fab:hover,
.donation-fab:focus-visible {
    filter: brightness(1.07);
}

.donation-fab__icon {
    writing-mode: horizontal-tb;
    display: flex;
}

.donation-fab__icon svg {
    width: 18px;
    height: 18px;
}

.donation-fab__label {
    letter-spacing: .2px;
}

/* The floating form is only a host for its dialog. */
.donation-fab-host,
.donation-form--floating {
    margin: 0;
}

/* Campaign strip at the top of the floating dialog. */
.donation-modal__campaign {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--donation-border);
}

.donation-modal__campaign-image img {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.donation-modal__campaign-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: #1b2430;
}

/* Inside the dialog the amount box has no frame of its own. */
.donation-box--bare {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

/* ---------- small screens ---------- */

@media (max-width: 767.98px) {
    .donation-fab {
        top: auto;
        bottom: 84px;
        border-radius: 999px;
        padding: 12px 16px;
        writing-mode: horizontal-tb;
        transform: translate(120%, 0);
    }

    .donation-fab.is-visible {
        transform: translate(-12px, 0);
    }

    .donation-proof {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .donation-proof,
    .donation-fab,
    .donation-proof-bar__pulse {
        transition: none;
        animation: none;
    }
}


/* =============================================================
   Campaign page v2
   -------------------------------------------------------------
   The single-campaign layout: progress card with a percentage
   ring, the amount box, an accepted-methods card and the
   zakat / share pair. Scoped to .donation-card--v2 and
   .donation-box--campaign so /donate and the sticky-button
   dialog keep the compact design.

   The site renders LTR even in Arabic, so the few places that
   need the Arabic reading order use flex-direction: row-reverse
   rather than `direction`, which would also re-align the text.
   ============================================================= */

.donation-card--v2,
.donation-box--campaign,
.donation-methods,
.donation-side-cards {
    --donation-accent: var(--thm-base, #009f84);
    --donation-border: #e8ecef;
    --donation-muted: #7a838f;
    --donation-ink: #1f2937;
    --donation-soft: #f4f6f8;
    --donation-radius: 18px;
}

.donation-icon {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: middle;
}

/* ---------- progress card ---------- */

.donation-card--v2 {
    padding: 22px;
    border-radius: var(--donation-radius);
    border-color: var(--donation-border);
    box-shadow: 0 12px 34px rgba(16, 24, 40, .05);
    margin-bottom: 16px;
}

.donation-card--v2 .donation-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.donation-card--v2 .donation-card__raised {
    min-width: 0;
}

.donation-card--v2 .donation-card__raised strong {
    display: block;
    font-size: clamp(28px, 8.5vw, 38px);
    font-weight: 800;
    line-height: 1.05;
    color: var(--donation-accent);
    letter-spacing: -.5px;
}

.donation-card--v2 .donation-card__raised span {
    display: block;
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: #6b7280;
}

.donation-card__ring {
    position: relative;
    flex: 0 0 auto;
    width: 82px;
    height: 82px;
}

.donation-card__ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.donation-ring__track {
    fill: none;
    stroke: rgba(0, 159, 132, .12);
    stroke-width: 8;
}

.donation-ring__value {
    fill: none;
    stroke: var(--donation-accent);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset .8s ease;
}

.donation-card__ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
    color: var(--donation-accent);
}

.donation-card--v2 .donation-card__bar {
    height: 10px;
    background: #eef1f4;
}

.donation-card--v2 .donation-card__meta {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
}

.donation-card__meta-item {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.donation-card__meta-item .donation-icon {
    width: 18px;
    height: 18px;
    color: var(--donation-accent);
}

.donation-card--v2 .donation-proof-bar {
    margin-top: 12px;
}

.donation-card--v2 .donation-card__stats {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #eef1f4;
    gap: 0;
}

.donation-card--v2 .donation-card__stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
}

.donation-card__stat-icon {
    width: 22px;
    height: 22px;
    margin-bottom: 6px;
    color: var(--donation-accent);
}

.donation-card--v2 .donation-card__stats strong {
    font-size: 19px;
    color: var(--donation-ink);
}

.donation-card--v2 .donation-card__stats span {
    font-size: 13px;
    color: var(--donation-muted);
}

/* ---------- amount box ---------- */

.donation-box--campaign {
    padding: 22px;
    border-radius: var(--donation-radius);
    border-color: var(--donation-border);
    box-shadow: 0 12px 34px rgba(16, 24, 40, .05);
}

.donation-box--campaign .donation-form__frequency {
    display: flex;
    flex-direction: row-reverse;
    gap: 12px;
    margin-bottom: 16px;
}

.donation-box--campaign .donation-frequency {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 8px;
    border-radius: 14px;
    border: 1px solid var(--donation-border);
    background: var(--donation-soft);
    color: #5b6572;
    font-size: 15px;
    line-height: 1.2;
}

.donation-box--campaign .donation-frequency .donation-icon {
    width: 19px;
    height: 19px;
}

.donation-box--campaign .donation-frequency.active {
    background: var(--donation-accent);
    border-color: var(--donation-accent);
    color: #fff;
    box-shadow: 0 8px 18px rgba(0, 159, 132, .22);
}

.donation-box--campaign .donation-form__amounts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.donation-box--campaign .donation-amount {
    position: relative;
    padding: 15px 2px;
    border-radius: 14px;
    border-width: 1.5px;
    font-size: 17px;
    overflow: visible;
}

.donation-box--campaign .donation-amount.active {
    background: rgba(0, 159, 132, .07);
    border-color: var(--donation-accent);
}

.donation-amount__check {
    position: absolute;
    top: -7px;
    inset-inline-start: -7px;
    width: 21px;
    height: 21px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--donation-accent);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 159, 132, .35);
}

.donation-amount__check .donation-icon {
    width: 11px;
    height: 11px;
}

.donation-box--campaign .donation-amount.active .donation-amount__check {
    display: flex;
}

.donation-box--campaign .donation-amount-field {
    background: var(--donation-soft);
    border-color: transparent;
    border-radius: 14px;
    padding: 10px 16px;
    margin-bottom: 16px;
}

.donation-box--campaign .donation-amount-field:focus-within {
    border-color: var(--donation-accent);
    background: #fff;
}

.donation-box--campaign .donation-amount-field input {
    font-size: 30px;
}

/* hero donate button */

.donation-cta--hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 17px 18px;
    border-radius: 16px;
    font-size: 19px;
    background: linear-gradient(135deg, var(--donation-accent), #14b394);
    box-shadow: 0 12px 24px rgba(0, 159, 132, .28);
    overflow: hidden;
}

.donation-cta__glyph {
    position: absolute;
    inset-inline-start: 22px;
    top: 50%;
    width: 34px;
    height: 34px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .22);
    pointer-events: none;
}

/* ---------- accepted methods card ---------- */

.donation-methods {
    margin-top: 16px;
    padding: 14px 16px 16px;
    background: #fff;
    border: 1px solid var(--donation-border);
    border-radius: var(--donation-radius);
    box-shadow: 0 12px 34px rgba(16, 24, 40, .05);
}

.donation-methods__title {
    margin: 0 0 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--donation-muted);
}

.donation-methods .donation-marks {
    margin-top: 0;
    gap: 10px;
}

.donation-marks .donation-mark {
    width: 60px !important;
    height: 38px !important;
    max-width: 60px;
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 4px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--donation-border, #e8ecef);
    border-radius: 8px;
}

.donation-marks .donation-mark--amex {
    padding: 0;
}

.donation-marks .donation-mark svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    display: block;
}

/* ---------- zakat / share pair (theme) ---------- */

.donation-side-cards {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.donation-side-card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    background: #fff;
    border: 1px solid var(--donation-border);
    border-radius: var(--donation-radius);
    box-shadow: 0 12px 34px rgba(16, 24, 40, .05);
    text-align: start;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}

.donation-side-card:hover {
    border-color: var(--donation-accent);
    transform: translateY(-1px);
}

.donation-side-card__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--donation-accent);
}

.donation-side-card__icon .donation-icon,
.donation-side-card__icon svg {
    width: 24px !important;
    height: 24px !important;
}

.donation-side-card__body {
    min-width: 0;
}

.donation-side-card__title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--donation-ink);
    line-height: 1.3;
}

.donation-side-card--zakat .donation-side-card__title {
    color: var(--donation-accent);
}

.donation-side-card__note {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--donation-muted);
    line-height: 1.3;
}

/* the pair reads right-to-left: zakat on the right, share on the left */
.donation-side-cards {
    flex-direction: row-reverse;
}

/* ---------- narrow screens ---------- */

@media (max-width: 400px) {
    .donation-card--v2,
    .donation-box--campaign {
        padding: 16px;
    }

    .donation-box--campaign .donation-form__amounts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .donation-card__ring {
        width: 68px;
        height: 68px;
    }

    .donation-side-cards {
        flex-direction: column-reverse;
    }
}

/* the zakat card reads right-to-left (icon at the far right); the share
   card keeps the icon on the outer left edge, as in the design. */
.donation-side-card {
    text-align: end;
}

.donation-side-card--share {
    flex-direction: row;
    text-align: start;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}


/* =============================================================
   Listing card v2 (/projects and the home-page grids)
   -------------------------------------------------------------
   Image, title with drop ornaments, a boxed progress panel,
   one hero button, the accepted marks and a tinted stats band.

   The card sizes itself with container queries, because the same
   markup lands in a 4-up grid on desktop and full width on a
   phone; where those are unsupported the compact (stacked)
   layout is what shows, which is the safe end of the range.
   ============================================================= */

.donation-project-card--v2 {
    --donation-accent: var(--thm-base, #009f84);
    --donation-deep: #10574a;
    --donation-tint: #eef7f4;
    --donation-border: #e8ecef;
    --donation-muted: #7a838f;
    container-type: inline-size;
    border-radius: 24px;
    border-color: #edf0f2;
    box-shadow: 0 14px 36px rgba(16, 24, 40, .07);
}

.donation-project-card--v2 .donation-project-card__media {
    aspect-ratio: 16 / 11;
}

.donation-project-card--v2 .donation-project-card__body {
    position: relative;
    z-index: 1;
    margin-top: -22px;
    padding: 20px 18px 16px;
    background: #fff;
    border-radius: 24px 24px 0 0;
}

/* title with the two water-drop ornaments */

.donation-project-card--v2 .donation-project-card__title {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.45;
    min-height: 0;
    overflow: visible;
}

.donation-project-card--v2 .donation-project-card__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--donation-deep);
    min-height: 2.9em;
}

.donation-project-card__drops {
    flex: 0 0 auto;
    width: 22px;
    margin-top: 4px;
    color: rgba(0, 159, 132, .55);
}

.donation-project-card__drops svg {
    width: 22px !important;
    height: 19px !important;
    display: block;
}

.donation-project-card__drops--end svg {
    transform: scaleX(-1);
}

/* progress panel */

.donation-project-card__panel {
    padding: 14px 16px;
    background: #f6f8f9;
    border-radius: 16px;
    margin-bottom: 14px;
}

.donation-project-card--v2 .donation-project-card__progress {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.donation-project-card--v2 .donation-project-card__percent {
    display: block;
    flex: 0 0 auto;
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: #1f2937;
}

.donation-project-card--v2 .donation-card__bar {
    flex: 1 1 auto;
    height: 9px;
    background: #e4e8ea;
}

.donation-project-card__figures {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #6b7280;
}

.donation-project-card__figures bdi {
    color: #4b5563;
}

/* hero button */

.donation-project-card--v2 .donation-project-card__cta {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 15px 16px;
    border-radius: 16px;
    font-size: 17px;
    background: linear-gradient(135deg, var(--donation-accent), #12a88c);
    box-shadow: 0 10px 22px rgba(0, 159, 132, .24);
}

.donation-project-card__cta-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    color: var(--donation-accent);
}

.donation-project-card__cta-icon .donation-icon {
    width: 16px;
    height: 16px;
}

/* accepted marks */

.donation-project-card--v2 .donation-marks {
    margin-top: 0;
    gap: 7px;
}

/* three marks per row on a narrow card, all six on a roomy one */
.donation-project-card--v2 .donation-marks {
    flex-wrap: wrap;
}

.donation-project-card--v2 .donation-marks .donation-mark {
    width: auto !important;
    max-width: 62px;
    min-width: 0;
    height: 34px !important;
    flex: 0 0 calc(33.333% - 5px);
    border-radius: 10px;
}

/* stats band */

.donation-project-card--v2 .donation-project-card__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 14px 12px;
    border-top: 0;
    background: var(--donation-tint);
    text-align: center;
}

.donation-project-card--v2 .donation-project-card__stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.donation-project-card--v2 .donation-project-card__stats li + li {
    border-inline-start: 0;
}

.donation-stat-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: #dcefe9;
    color: var(--donation-deep);
}

.donation-stat-chip .donation-icon {
    width: 21px;
    height: 21px;
}

.donation-stat-body {
    min-width: 0;
}

.donation-project-card--v2 .donation-project-card__stats strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--donation-deep);
    line-height: 1.25;
    white-space: nowrap;
}

.donation-project-card--v2 .donation-project-card__stats span {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    color: #6b7280;
}

/* roomier cards: chip beside the figures, as in the design */
@container (min-width: 380px) {
    .donation-project-card--v2 .donation-project-card__body {
        padding: 24px 22px 18px;
    }

    .donation-project-card--v2 .donation-project-card__title {
        font-size: 22px;
    }

    .donation-project-card--v2 .donation-marks .donation-mark {
        flex: 0 0 calc(16.666% - 6px);
    }

    .donation-project-card--v2 .donation-project-card__stats {
        padding: 16px 14px;
    }

    .donation-project-card--v2 .donation-project-card__stats li {
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        text-align: start;
    }
}

@container (max-width: 300px) {
    .donation-project-card__drops {
        display: none;
    }

    .donation-project-card--v2 .donation-project-card__stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .donation-project-card--v2 .donation-project-card__stats li {
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        text-align: start;
    }
}

/* -------------------------------------------------------------
   The theme's main.css paints every <span> inside
   `.crowdfunding_text` with the brand colour, which swallowed the
   button label on /projects (green text on a green button) and
   tinted the stat labels. Restate the colours our cards own.
   ------------------------------------------------------------- */

.donation-project-card--v2 .donation-project-card__cta > span {
    color: #fff;
}

.donation-project-card--v2 .donation-project-card__cta > .donation-project-card__cta-icon {
    color: var(--donation-accent);
}

.donation-project-card--v2 .donation-project-card__percent {
    color: #1f2937;
}

.donation-project-card--v2 .donation-project-card__figures > span {
    color: #6b7280;
}

.donation-project-card--v2 .donation-project-card__figures bdi {
    color: #4b5563;
}

.donation-project-card--v2 .donation-project-card__stats .donation-stat-chip {
    color: var(--donation-deep);
}

.donation-project-card--v2 .donation-project-card__stats strong {
    color: var(--donation-deep);
}

.donation-project-card--v2 .donation-project-card__stats .donation-stat-body > span {
    color: #6b7280;
}

.donation-project-card--v2 .donation-project-card__drops {
    color: rgba(0, 159, 132, .55);
}

.donation-card--v2 .donation-card__raised > span {
    color: #6b7280;
}

.donation-card--v2 .donation-card__stats li > span {
    color: var(--donation-muted);
}

.donation-box--campaign .donation-cta--hero > span {
    color: #fff;
}

/* -------------------------------------------------------------
   Compact scale for the campaign page (about -25%).
   The first pass was sized against a full-width mock-up; in the
   real ~385px sidebar it reads far too airy. Every padding, gap
   and type step is pulled in by roughly a quarter here, in one
   block, so the scale can be re-tuned or dropped on its own.
   ------------------------------------------------------------- */

.donation-card--v2 { padding: 16px; border-radius: 14px; margin-bottom: 11px; }
.donation-card--v2 .donation-card__top { margin-bottom: 11px; }
.donation-card--v2 .donation-card__raised strong { font-size: clamp(22px, 7vw, 29px); }
.donation-card--v2 .donation-card__raised span { font-size: 12.5px; margin-top: 2px; }
.donation-card__ring { width: 62px; height: 62px; }
.donation-card__ring-label { font-size: 14px; }
.donation-card--v2 .donation-card__bar { height: 8px; }
.donation-card--v2 .donation-card__meta { margin-top: 9px; font-size: 12.5px; }
.donation-card__meta-item .donation-icon { width: 15px; height: 15px; }
.donation-card--v2 .donation-proof-bar { margin-top: 9px; }
.donation-card--v2 .donation-card__stats { margin-top: 13px; padding-top: 12px; }
.donation-card__stat-icon { width: 18px; height: 18px; margin-bottom: 4px; }
.donation-card--v2 .donation-card__stats strong { font-size: 15.5px; }
.donation-card--v2 .donation-card__stats span { font-size: 11.5px; }

.donation-box--campaign { padding: 16px; border-radius: 14px; }
.donation-box--campaign .donation-form__frequency { gap: 9px; margin-bottom: 12px; }
.donation-box--campaign .donation-frequency { padding: 10px 6px; border-radius: 11px; font-size: 13px; gap: 6px; }
.donation-box--campaign .donation-frequency .donation-icon { width: 16px; height: 16px; }
.donation-box--campaign .donation-form__amounts { gap: 8px; margin-bottom: 10px; }
.donation-box--campaign .donation-amount { padding: 11px 2px; border-radius: 11px; font-size: 14.5px; }
.donation-amount__check { width: 17px; height: 17px; top: -6px; inset-inline-start: -6px; }
.donation-amount__check .donation-icon { width: 9px; height: 9px; }
.donation-box--campaign .donation-amount-field { padding: 7px 12px; border-radius: 11px; margin-bottom: 12px; }
.donation-box--campaign .donation-amount-field input { font-size: 23px; }
.donation-box--campaign .donation-amount-field__currency { font-size: 11.5px; }
.donation-box--campaign .donation-amount-field__symbol { font-size: 16px; }
.donation-cta--hero { padding: 13px 14px; border-radius: 13px; font-size: 16px; }
.donation-cta__glyph { width: 26px; height: 26px; inset-inline-start: 16px; }

.donation-methods { margin-top: 12px; padding: 10px 12px 12px; border-radius: 14px; }
.donation-methods__title { margin-bottom: 7px; font-size: 11.5px; }
.donation-methods .donation-marks { gap: 7px; }
.donation-methods .donation-mark { width: 46px !important; height: 30px !important; max-width: 46px; border-radius: 7px; }

.donation-side-cards { gap: 9px; margin-top: 12px; }
.donation-side-card { padding: 10px 11px; border-radius: 14px; gap: 8px; }
.donation-side-card__icon .donation-icon,
.donation-side-card__icon svg { width: 20px !important; height: 20px !important; }
.donation-side-card__title { font-size: 13px; }
.donation-side-card__note { font-size: 11px; }

/* -------------------------------------------------------------
   Listing grid fixes
   ------------------------------------------------------------- */

/* Row spacing. The card is height:100% inside a stretched Bootstrap
   column, so its own margin-bottom spilled outside the column and the
   next row sat flush against it. Put the gap on the flex row instead,
   where it costs the card no height and keeps rows equal-height. */
.donation-project-card--v2 { margin-bottom: 0; }
.row:has(> [class*="col-"] > .donation-project-card--v2) { row-gap: 30px; }

/* Stat chips: a 21px outline glyph floated in a 40px square read as
   small and empty. Bigger glyph, thicker stroke, stronger chip. */
.donation-project-card--v2 .donation-stat-chip { width: 42px; height: 42px; border-radius: 14px; background: #cfe7df; }
.donation-project-card--v2 .donation-stat-chip .donation-icon { width: 26px; height: 26px; stroke-width: 1.9; }

/* Most campaigns have no goal / minimum / duration filled in, so they get
   no stats band; with height:100% that left a block of white at the foot of
   the card. Pin the accepted marks to the bottom of the body so the card
   closes tidily either way. */
.donation-project-card--v2 .donation-marks { margin-top: auto; padding-top: 10px; }

/* "قيمة المشروع" wrapped to two lines once the chip grew. */
@container (min-width: 380px) {
    .donation-project-card--v2 .donation-project-card__stats li { gap: 8px; }
    .donation-project-card--v2 .donation-project-card__stats .donation-stat-body > span { font-size: 11px; }
}

/* ==================================================================
   v3 campaign card — two stat tiles, a labelled progress bar, a 2x2
   amount grid and the donor fields on the page.

   The page renders LTR with Arabic text (the theme emulates RTL in
   CSS), so these blocks set `direction: rtl` on themselves only, and
   never on anything the older LTR rules lay out.
   ================================================================== */

.donation-card.donation-card--v3 {
    --donation-v3-ink: #1F2A37;
    --donation-v3-muted: #6B7A8D;
    --donation-v3-line: #E4EAF0;
    --donation-v3-brand: #0F9748;
    --donation-v3-brand-dark: #0B6B3A;
    --donation-v3-brand-soft: #E8F5EE;
}

/* --- two stat tiles ------------------------------------------------ */

.donation-card.donation-card--v3 .donation-card__tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    direction: rtl;
    margin-bottom: 14px;
}

.donation-card.donation-card--v3 .donation-card__tile {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--donation-v3-line);
    border-radius: 14px;
    background: #fff;
    text-align: right;
}

.donation-card.donation-card--v3 .donation-card__tile-body strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--donation-v3-ink);
}

.donation-card.donation-card--v3 .donation-card__tile-body span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--donation-v3-muted);
}

.donation-card.donation-card--v3 .donation-card__tile-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--donation-v3-brand-soft);
    color: var(--donation-v3-brand);
}

/* --- progress ------------------------------------------------------ */

.donation-card.donation-card--v3 .donation-card__progress {
    direction: rtl;
    padding: 12px;
    border: 1px solid var(--donation-v3-line);
    border-radius: 14px;
    background: #fff;
}

.donation-card.donation-card--v3 .donation-card__progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--donation-v3-ink);
}

.donation-card.donation-card--v3 .donation-card__progress-head em {
    font-style: normal;
    font-weight: 800;
    color: var(--donation-v3-brand-dark);
}

.donation-card.donation-card--v3 .donation-card__progress .donation-card__bar {
    direction: ltr;
    margin: 0;
}

/* --- amounts, fields, cta ------------------------------------------ */

.donation-box.donation-box--v3 {
    --donation-v3-ink: #1F2A37;
    --donation-v3-muted: #6B7A8D;
    --donation-v3-line: #E4EAF0;
    --donation-v3-brand: #0F9748;
    --donation-v3-brand-dark: #0B6B3A;
    --donation-v3-cta: #E23E57;
    --donation-v3-cta-dark: #C62F47;
}

.donation-box.donation-box--v3 .donation-box__title {
    direction: rtl;
    margin: 4px 0 10px;
    font-size: 14px;
    font-weight: 800;
    text-align: right;
    color: var(--donation-v3-brand-dark);
}

.donation-box.donation-box--v3 .donation-box__title--sub {
    margin-top: 16px;
}

.donation-box.donation-box--v3 .donation-form__amounts {
    direction: rtl;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.donation-box.donation-box--v3 .donation-amount {
    position: relative;
    display: block;
    width: 100%;
    padding: 13px 8px;
    border: 1.5px solid var(--donation-v3-line);
    border-radius: 14px;
    background: #fff;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.donation-box.donation-box--v3 .donation-amount:hover {
    border-color: var(--donation-v3-brand);
}

.donation-box.donation-box--v3 .donation-amount.active,
.donation-box.donation-box--v3 .donation-amount.is-active {
    border-color: var(--donation-v3-brand-dark);
    box-shadow: 0 0 0 2px rgba(15, 151, 72, .15);
}

.donation-box.donation-box--v3 .donation-amount__value {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--donation-v3-brand-dark);
}

.donation-box.donation-box--v3 .donation-amount__unit {
    display: block;
    order: -1;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--donation-v3-muted);
}

.donation-box.donation-box--v3 .donation-amount__check {
    position: absolute;
    top: 8px;
    left: 8px;
    opacity: 0;
    transition: opacity .15s;
}

.donation-box.donation-box--v3 .donation-amount.active .donation-amount__check,
.donation-box.donation-box--v3 .donation-amount.is-active .donation-amount__check {
    opacity: 1;
}

.donation-box.donation-box--v3 .donation-box__donor {
    direction: rtl;
    margin-top: 12px;
}

.donation-box.donation-box--v3 .donation-field-icon {
    position: relative;
    direction: rtl;
}

.donation-box.donation-box--v3 .donation-field-icon + .donation-field-icon {
    margin-top: 10px;
}

.donation-box.donation-box--v3 .donation-field-icon input {
    width: 100%;
    height: 50px;
    padding: 0 44px 0 14px;
    border: 1px solid var(--donation-v3-line);
    border-radius: 14px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    text-align: right;
    color: var(--donation-v3-ink);
    outline: none;
}

.donation-box.donation-box--v3 .donation-field-icon input:focus {
    border-color: var(--donation-v3-brand);
    box-shadow: 0 0 0 3px rgba(15, 151, 72, .12);
}

.donation-box.donation-box--v3 .donation-field-icon__mark {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: #9AA7B5;
    pointer-events: none;
    line-height: 0;
}

.donation-box.donation-box--v3 .donation-cta--hero {
    background: var(--donation-v3-cta);
    border-color: var(--donation-v3-cta);
    box-shadow: 0 8px 18px rgba(226, 62, 87, .26);
}

.donation-box.donation-box--v3 .donation-cta--hero:hover,
.donation-box.donation-box--v3 .donation-cta--hero:focus {
    background: var(--donation-v3-cta-dark);
    border-color: var(--donation-v3-cta-dark);
}

.donation-box.donation-box--v3 .donation-box__secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px 0 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--donation-v3-brand);
}

@media (max-width: 360px) {
    .donation-card.donation-card--v3 .donation-card__tiles {
        grid-template-columns: 1fr;
    }
}

/* The quran landing page used to inject its own "5 مصاحف" label above each
   preset; the preset now carries that label itself, so hide the old one. */
.donation-box.donation-box--v3 .donation-amount .mq-count {
    display: none;
}

/* ==================================================================
   v3.1 page layout — campaign detail page
   PATCH-ID: donation-v3.1
   ================================================================== */

/* Image and text on the start side, the donation card on the end side. */
body .donation-section-detail {
    flex-direction: row;
}

body .project_details_tab_box > div > .row {
    flex-direction: row;
}

/* The zakat / share pair under the card is not wanted. */
.donation-side-cards {
    display: none !important;
}

/* ==================================================================
   v3.2 — campaign page laid out like malaak.co.uk
   PATCH-ID: donation-v3.2

   One CSS grid: the side column (card + recent donations) spans both
   rows, the image and then the text follow each other in the main
   column, so the text starts right under the image instead of below
   the taller side column. On mobile it collapses to one column in the
   order image → donation card → text.
   ================================================================== */

.pd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

@media (min-width: 992px) {
    .pd-layout {
        grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
        grid-template-areas:
            "media side"
            "content side";
        column-gap: 30px;
        row-gap: 24px;
        align-items: start;
    }

    .pd-media { grid-area: media; }
    .pd-side { grid-area: side; }
    .pd-content { grid-area: content; }
}

.pd-layout .project_details_left_image,
.pd-layout .donation-section-form {
    width: 100% !important;
}

.pd-side {
    display: block !important;
}

.pd-content .project_idea_details_content {
    width: 100%;
    max-width: none;
}

/* The old two-column row inside the text section: one full-width
   column now, and the empty sidebar column goes away. */
.pd-content .row {
    flex-direction: row !important;
}

.pd-content .col-xl-8 {
    flex: 0 0 100%;
    max-width: 100%;
}

.pd-content .col-xl-4:empty {
    display: none;
}

.pd-content .project_details_tab_box,
.pd-content.project_details_tab_box {
    margin-top: 0 !important;
}

/* --- panel: separate white cards, like malaak.co.uk --------------- */

.donation-card.donation-card--v3 {
    --donation-v3-brand: #17685f;
    --donation-v3-brand-dark: #17685f;
    --donation-v3-brand-soft: #e6f2ef;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.donation-card.donation-card--v3 .donation-card__tiles {
    gap: 8px;
    margin-bottom: 0;
}

.donation-card.donation-card--v3 .donation-card__tile {
    justify-content: flex-start;
    padding: 12px 10px;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}

.donation-card.donation-card--v3 .donation-card__tile-body {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.donation-card.donation-card--v3 .donation-card__tile-body strong {
    font-size: 16px;
    line-height: 1;
    color: #17685f;
}

.donation-card.donation-card--v3 .donation-card__tile-body span {
    margin-top: 0;
    font-size: 12px;
    color: #667;
}

.donation-card.donation-card--v3 .donation-card__tile-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    background: #e6f2ef;
    color: #17685f;
}

.donation-card.donation-card--v3 .donation-card__tile:first-child .donation-card__tile-icon {
    background: #e6f9f1;
    color: #22b573;
}

/* progress + the three figures share one card */

.donation-card.donation-card--v3 .donation-card__info {
    padding: 12px 10px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}

.donation-card.donation-card--v3 .donation-card__progress {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.donation-card.donation-card--v3 .donation-card__progress-head {
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #444;
}

.donation-card.donation-card--v3 .donation-card__progress-head em {
    font-size: 13px;
    color: #17685f;
}

.donation-card.donation-card--v3 .donation-card__bar {
    height: 7px;
    background: #eef1f6;
}

.donation-card.donation-card--v3 .donation-card__bar > span {
    background: #17685f;
}

.donation-card.donation-card--v3 .donation-card__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin: 10px 0 0;
    padding: 0;
    border: 0;
    direction: rtl;
    list-style: none;
}

.donation-card.donation-card--v3 .donation-card__stats li {
    display: grid;
    grid-template-columns: 34px auto;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: right;
}

.donation-card.donation-card--v3 .donation-card__stats li .donation-card__stat-icon {
    grid-row: 1 / 3;
    grid-column: 1;
    width: 34px;
    height: 34px;
    padding: 7px;
    border-radius: 50%;
    box-sizing: border-box;
    background: #e6f2ef;
    color: #17685f;
}

.donation-card.donation-card--v3 .donation-card__stats li:nth-child(1) .donation-card__stat-icon {
    background: #fff3ea;
    color: #f07a2a;
}

.donation-card.donation-card--v3 .donation-card__stats li:nth-child(2) .donation-card__stat-icon {
    background: #e6f9f1;
    color: #22b573;
}

.donation-card.donation-card--v3 .donation-card__stats li strong {
    grid-column: 2;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    color: #17685f;
}

.donation-card.donation-card--v3 .donation-card__stats li span {
    grid-column: 2;
    font-size: 11px;
    color: #8899aa;
}

/* the form sits in its own card too */

.donation-box.donation-box--v3 {
    --donation-v3-brand: #17685f;
    --donation-v3-brand-dark: #17685f;
    padding: 14px 14px 10px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}

.donation-box.donation-box--v3 + .donation-methods,
.donation-card.donation-card--v3 ~ .donation-methods {
    margin-top: 8px;
    padding: 10px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}

/* --- recent donations ticker -------------------------------------- */

.donations-list-box {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

.donations-list-box h2 {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #17685f;
    color: #17685f;
    text-align: center;
}

.donations-ticker {
    position: relative;
    overflow: hidden;
    max-height: 300px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

.donations-ticker.is-static {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}

.donations-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.donations-ticker:not(.is-static) .donations-track {
    animation: donations-scroll 26s linear infinite;
}

.donations-ticker:hover .donations-track,
.donations-ticker:focus-within .donations-track {
    animation-play-state: paused;
}

@keyframes donations-scroll {
    from { transform: translateY(-50%); }
    to { transform: translateY(0); }
}

.donation-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.4rem;
    border: 1px solid #e6ecea;
    border-radius: 8px;
    background: #f7fbfa;
    transition: background .3s ease;
    font-size: 14px;
    direction: rtl;
}

.donation-item:hover {
    background: #eef6f4;
}

.donation-flag {
    font-size: 17px;
    line-height: 1;
    flex: 0 0 auto;
}

.donation-body {
    flex: 1 1 auto;
    min-width: 0;
    text-align: start;
}

.donation-li-name { color: #17685f; font-weight: 700; }
.donation-li-price { color: #111; font-weight: 700; }

.donation-meta {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    color: #8a9391;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.no-donations {
    text-align: center;
    padding: 30px;
    color: #999;
    font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
    .donations-ticker .donations-track { animation: none !important; }
    .donations-ticker { overflow-y: auto; }
}

/* ==================================================================
   v3.3 — the last details that differed from malaak.co.uk
   PATCH-ID: donation-v3.3
   ================================================================== */

/* Value first, label after it — "$275 ما تم إنجازه". */
.donation-card.donation-card--v3 .donation-card__tile-body {
    flex-direction: row;
}

/* Preset buttons read price first, then what it funds. */
.donation-box.donation-box--v3 .donation-amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 11px 6px;
}

.donation-box.donation-box--v3 .donation-amount__value {
    order: 1;
    font-size: 17px;
}

.donation-box.donation-box--v3 .donation-amount__unit {
    order: 2;
    margin: 0;
}

/* Custom amount: just the currency sign on the trailing side. */
.donation-box.donation-box--v3 .donation-amount-field__currency {
    display: none;
}

.donation-box.donation-box--v3 .donation-amount-field {
    direction: rtl;
}

.donation-box.donation-box--v3 .donation-amount-field input {
    height: 42px;
    text-align: right;
    font-size: 14px;
}

/* Compact, like the reference panel. */
.donation-box.donation-box--v3 .donation-box__title {
    font-size: 13px;
    margin-bottom: 7px;
}

.donation-box.donation-box--v3 .donation-field-icon input {
    height: 42px;
    font-size: 13px;
    border-radius: 8px;
}

.donation-box.donation-box--v3 .donation-field-icon + .donation-field-icon {
    margin-top: 8px;
}

.donation-box.donation-box--v3 .donation-cta--hero {
    height: 46px;
    min-height: 46px;
    font-size: 15px;
    border-radius: 10px;
    margin-top: 6px;
}

.donation-box.donation-box--v3 .donation-cta--hero .donation-cta__glyph {
    width: 20px;
    height: 20px;
}

.donation-box.donation-box--v3 .donation-box__secure {
    margin-top: 7px;
    font-size: 12px;
}

/* ==================================================================
   v3.4 — same page width as malaak.co.uk
   PATCH-ID: donation-v3.4

   The theme's container is 1500px wide here and 1200px there, which
   made every column ~25% wider (side panel 504px instead of 399px).
   Narrowed on the campaign page only.
   ================================================================== */

.project_details_top > .container {
    max-width: 1200px;
}

/* Campaign title: always centred, and readable on a phone. */
.project_details_head {
    text-align: center;
}

.project_details_head h1 {
    text-align: center;
    margin: 0 auto .4em;
    max-width: 900px;
    line-height: 1.4;
    font-weight: 800;
}

@media (max-width: 767px) {
    .project_details_head h1 {
        font-size: 22px;
        line-height: 1.45;
        margin-bottom: .5em;
    }
}

/* v-icons 2026-09-22 — larger stat-chip icons in project cards (optically balanced per icon) */
.donation-project-card--v2 .donation-project-card__stats .donation-stat-chip { width: 44px; height: 44px; border-radius: 14px; }
.donation-project-card--v2 .donation-project-card__stats li .donation-stat-chip .donation-icon { width: 30px; height: 30px; stroke-width: 1.6; }
.donation-project-card--v2 .donation-project-card__stats li:nth-child(1) .donation-stat-chip .donation-icon { width: 33px; height: 33px; stroke-width: 1.5; }
.donation-project-card--v2 .donation-project-card__stats li:nth-child(2) .donation-stat-chip .donation-icon { width: 29px; height: 29px; stroke-width: 1.65; }
.donation-project-card--v2 .donation-project-card__stats li:nth-child(3) .donation-stat-chip .donation-icon { width: 30px; height: 30px; stroke-width: 1.6; }


/* v-img-full (22 Sep 2026) — صور كرت الحملة كاملة بلا قص ولا تداخل */
.donation-project-card--v2 .donation-project-card__media{aspect-ratio:auto;height:auto}
.donation-project-card--v2 .donation-project-card__media img{height:auto;aspect-ratio:auto}
.donation-project-card--v2 .donation-project-card__body{margin-top:0;border-radius:0}

/* PATCH-ID: progress-rtl — bar fills right-to-left (Arabic) */
.donation-card__bar > span { margin-left: auto !important; margin-right: 0 !important; }

/* PATCH-ID: hide-card-stats */
.donation-project-card .donation-project-card__stats { display: none !important; }

/* ==================================================================
   PATCH-ID: onepage-checkout-v1 (2026-09-30)
   One-page checkout inside the donation card + no floating side
   buttons on phones.
   ================================================================== */
.donation-form.is-onepage .donation-box {
    scroll-margin-top: 90px;
}

.donation-form.is-onepage .donation-open {
    display: none !important;
}

.donation-onepage {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--donation-border, #e6eaee);
}

.donation-onepage .donation-wallets {
    margin-bottom: 8px;
}

.donation-onepage .donation-wallet-button {
    height: 46px;
    margin-bottom: 8px;
}

.donation-onepage .donation-or {
    margin: 6px 0 10px;
}

.donation-onepage .donation-form__field {
    margin-bottom: 10px;
}

.donation-onepage .donation-form__field > label {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

.donation-onepage .donation-card-container {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.donation-onepage .donation-form__spinner[hidden] {
    display: none !important;
}

.donation-onepage__extras {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 2px 0 10px;
}

.donation-onepage__extras .donation-form__field {
    margin: 0;
}

.donation-onepage .donation-checkbox {
    font-size: 13px;
    font-weight: 500;
}

.donation-onepage .donation-checkbox input {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 16px;
}

.donation-onepage .donation-form__dedication {
    margin-bottom: 8px;
}

.donation-onepage .donation-form__message {
    margin-bottom: 8px;
}

.donation-onepage .donation-onepage__submit {
    width: 100%;
    gap: 8px;
}

.donation-onepage .donation-onepage__submit .donation-form__spinner {
    margin: 0;
}

.donation-onepage .donation-form__secure {
    margin-top: 8px;
    font-size: 11.5px;
    line-height: 1.6;
}

@media (max-width: 767.98px) {
    /* Floating side tab, scroll-to-top and the rotating proof toast take
       screen space on phones; the bottom contribute bar stays. */
    html body a.sticky-donate,
    html body .scroll-to-top,
    html body .donation-proof {
        display: none !important;
    }
}