/* =============================================================
   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: donate;
    -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; }
}

/* ==========================================================================
   v2.2 — Campaign side panel (layout ported from malaak.co.uk/projects/quran)
   ========================================================================== */
.dpanel { display: flex; flex-direction: column; gap: 10px; direction: rtl; text-align: right; }
.ltr .dpanel, [dir="ltr"] .dpanel { direction: ltr; text-align: left; }
.dpanel *, .dpanel *::before, .dpanel *::after { box-sizing: border-box; }
.dpanel .fas, .dpanel .far { font-family: "Font Awesome 5 Free" !important; font-weight: 900; font-style: normal; }

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

/* Stat cards */
.dpanel-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dpanel-stat {
    background: #fff; border-radius: 12px; padding: 12px 10px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}
.dpanel-stat__icon, .dpanel-info__icon {
    display: flex; align-items: center; justify-content: center; border-radius: 50%; flex: 0 0 auto;
}
.dpanel-stat__icon { width: 40px; height: 40px; font-size: 17px; }
.dpanel-info__icon { width: 34px; height: 34px; font-size: 14px; }
.dpanel .is-teal   { background: #e6f2ef; color: #10574a; }
.dpanel .is-green  { background: #e6f9f1; color: #22b573; }
.dpanel .is-orange { background: #fff3ea; color: #f07a2a; }
.dpanel-stat__body { display: flex; flex-direction: column; line-height: 1.25; }
.dpanel .dpanel-stat__body strong { font-size: 16px; font-weight: 800; color: #10574a; }
.dpanel .dpanel-stat__body span { font-size: 12px; color: #667; }

/* Progress + figures */
.dpanel-progress__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.dpanel .dpanel-progress__head span { font-size: 12px; font-weight: 600; color: #444; }
.dpanel .dpanel-progress__head strong { font-size: 13px; font-weight: 800; color: #10574a; }
.dpanel-progress__bar { background: #eef1f6; border-radius: 999px; height: 7px; overflow: hidden; margin-bottom: 12px; }
.dpanel-progress__bar > span { display: block; height: 100%; border-radius: 999px; background: #10574a; transition: width 1s ease; }
.dpanel-info__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; list-style: none; margin: 0; padding: 0; }
.dpanel-info__list li { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; }
.dpanel-info__text { display: flex; flex-direction: column; line-height: 1.25; }
.dpanel .dpanel-info__text strong { font-size: 13px; font-weight: 800; color: #10574a; }
.dpanel .dpanel-info__text span { font-size: 11px; color: #8899aa; }

/* Form */
.dpanel-form { padding: 20px; }
.dpanel .dpf, .dpanel .dpf input, .dpanel .dpf button, .dpanel .dpf label, .dpanel .dpf span { font-size: 15px; }
.dpanel .dpf-frequency {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 14px;
    background: #eef3f2; border-radius: 12px;
}
.dpanel .dpf-frequency .donation-frequency {
    display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0;
    padding: 10px 6px; border-radius: 9px; border: 0; cursor: pointer;
    font-weight: 700; color: #10574a; background: transparent; transition: background .15s, color .15s;
}
.dpanel .dpf-frequency .donation-frequency input { position: absolute; opacity: 0; pointer-events: none; }
.dpanel .dpf-frequency .donation-frequency span { color: inherit; font-weight: 700; }
.dpanel .dpf-frequency .donation-frequency.active { background: #10574a; color: #fff; box-shadow: 0 2px 8px rgba(16, 87, 74, .25); }
.dpanel .dpf-frequency .donation-frequency.active span,
.dpanel .dpf-frequency .donation-frequency.active i { color: #fff; }
.dpanel .dpf-monthly-note { margin: -6px 0 12px; font-size: 13px; line-height: 1.5; color: #10574a; background: #e6f2ef; border-radius: 8px; padding: 8px 10px; }
.dpanel .dpf-monthly-note[hidden] { display: none; }

.dpanel .dpf-title { font-size: 15px; font-weight: 700; color: #10574a; margin: 0 0 10px; }
.dpanel .dpf-levels {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 14px; direction: ltr;
}
.dpanel .dpf-levels .donation-amount {
    display: flex; align-items: center; justify-content: center; width: 100%; margin: 0;
    padding: 14px 4px; border: 2px solid #10574a; border-radius: 10px; background: #fff;
    color: #10574a; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: none;
    transition: background .15s, color .15s;
}
.dpanel .dpf-levels .donation-amount .donation-amount__value { color: inherit; font-weight: 800; font-size: 15px; }
.dpanel .dpf-levels .donation-amount.active { background: #10574a; color: #fff; }
.dpanel .dpf-levels .donation-amount.active .donation-amount__value { color: #fff; }

.dpanel .dpf-field { position: relative; margin: 0 0 10px; }
.dpanel .dpf-field input {
    width: 100%; height: 50px; margin: 0; border: 1.5px solid #dde1ea; border-radius: 10px;
    background: #fff; color: #222; font-size: 15px; padding: 0 40px 0 14px; text-align: right;
    box-shadow: none; outline: 0; transition: border-color .18s, box-shadow .18s; -webkit-appearance: none;
}
.ltr .dpanel .dpf-field input { padding: 0 14px 0 40px; text-align: left; }
.dpanel .dpf-field input:focus { border-color: #009f84; box-shadow: 0 0 0 3px rgba(0, 159, 132, .12); }
.dpanel .dpf-field input::placeholder { color: #9aa3b2; opacity: 1; }
.dpanel .dpf-icon {
    position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
    color: #9aa3b2; font-size: 15px; pointer-events: none; z-index: 2;
}
.ltr .dpanel .dpf-icon { right: auto; left: 14px; }
.dpanel .dpf-field--amount input { direction: ltr; padding-right: 30px; font-size: 22px; font-weight: 700; color: #10574a; -moz-appearance: textfield; }
.dpanel .dpf-field--amount input::-webkit-outer-spin-button,
.dpanel .dpf-field--amount input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dpanel .dpf-dollar {
    position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
    color: #10574a; font-weight: 800; pointer-events: none; z-index: 2;
}
.ltr .dpanel .dpf-field--amount input { padding: 0 14px 0 30px; }
.ltr .dpanel .dpf-dollar { right: auto; left: 14px; }

.dpanel .dpf-check { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; cursor: pointer; }
.dpanel .dpf-check input { width: 16px; height: 16px; margin: 0; accent-color: #009f84; }
.dpanel .dpf-check span { font-size: 13px; color: #6b7a99; font-weight: 500; }

.dpanel .dpf .donation-form__message { margin: -4px 0 10px; font-size: 13px; }

.dpanel .dpf-submit {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    height: 50px; margin: 4px 0 0; border: 0; border-radius: 12px; cursor: pointer;
    background: linear-gradient(135deg, #00b394 0%, #009f84 55%, #0b7c68 100%);
    box-shadow: 0 6px 16px rgba(0, 159, 132, .28); transition: opacity .15s, transform .15s;
}
.dpanel .dpf-submit, .dpanel .dpf-submit span, .dpanel .dpf-submit i { color: #fff !important; font-size: 16px; font-weight: 700; }
.dpanel .dpf-submit:hover { opacity: .93; transform: translateY(-1px); }

.dpanel .dpf-safe { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; color: #6b7a99; }
.dpanel .dpf-safe span { font-size: 13px; color: #6b7a99; }
.dpanel .dpf-safe i { color: #22b573; }
.dpanel .dpf .donation-marks { justify-content: center; margin-top: 10px; }

/* Recent donations ticker */
.dpanel-recent { padding: 16px; }
.dpanel .dpanel-recent__title {
    margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid #10574a;
    text-align: center; font-size: 20px; font-weight: 700; color: #10574a; line-height: 1.3;
}
.dpanel-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);
}
.dpanel-ticker.is-static { max-height: none; -webkit-mask-image: none; mask-image: none; }
.dpanel-ticker:not(.is-static) .dpanel-ticker__track { animation: dpanel-scroll 26s linear infinite; }
.dpanel-ticker:hover .dpanel-ticker__track, .dpanel-ticker:focus-within .dpanel-ticker__track { animation-play-state: paused; }
@keyframes dpanel-scroll { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.dpanel-recent__list { list-style: none; margin: 0; padding: 0; }
.dpanel-recent__item {
    display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 8px 10px;
    border: 1px solid #e6ecea; border-radius: 8px; background: #f7fbfa; transition: background .3s ease;
}
.dpanel-recent__item:hover { background: #eef6f4; }
.dpanel .dpanel-recent__flag { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.dpanel .dpanel-recent__flag.is-empty { font-size: 12px; color: #009f84; width: 18px; text-align: center; }
.dpanel-recent__body { flex: 1 1 auto; min-width: 0; line-height: 1.4; }
.dpanel .dpanel-recent__name { font-size: 14px; color: #10574a; font-weight: 700; }
.dpanel .dpanel-recent__amount { font-size: 14px; color: #111; font-weight: 700; margin: 0 4px; }
.dpanel .dpanel-recent__badge { font-size: 11px; color: #009f84; background: #e6f2ef; border-radius: 999px; padding: 1px 7px; font-weight: 700; }
.dpanel .dpanel-recent__meta { display: block; font-size: 11.5px; color: #8a9391; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
    .dpanel-ticker .dpanel-ticker__track { animation: none !important; }
    .dpanel-ticker { overflow-y: auto; }
}

@media (max-width: 400px) {
    .dpanel .dpf-levels { grid-template-columns: repeat(2, 1fr); }
    .dpanel-info__list li { flex-direction: column; text-align: center; gap: 4px; }
}

/* v2.2.1 — body text is now 22px (El Messiri); keep the dialog buttons on one scale */
.donation-modal .donation-back, .donation-modal .donation-cta, .donation-modal .donation-cta span { font-size: 16px; }

/* 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}


/* ============================================================
   v2.3 — unified button colour #e2365c + always-on side tab
   (2026-09-22). Kept last so it wins over theme + plugin rules.
   ============================================================ */

:root {
    --elv-btn: #e2365c;
    --elv-btn-hover: #c7294d;
}

/* ---------- side donate tab: always visible, mid-right ---------- */

.donation-fab,
.donation-fab.is-visible {
    --donation-accent: var(--elv-btn);
    position: fixed !important;
    top: 50% !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    transform: translate(0, -50%) rotate(180deg) !important;
    z-index: 9300;
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 22px 15px !important;
    border: 0 !important;
    border-radius: 0 14px 14px 0 !important;
    background: var(--elv-btn) !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    writing-mode: vertical-rl !important;
    box-shadow: 6px -6px 22px rgba(16, 24, 40, .25);
    opacity: 1 !important;
    visibility: visible !important;
}

.donation-fab:hover,
.donation-fab:focus-visible {
    background: var(--elv-btn-hover) !important;
    color: #fff !important;
    filter: none;
}

.donation-fab .donation-fab__label,
.donation-fab:hover .donation-fab__label {
    color: #fff !important;
    letter-spacing: .3px;
}

.donation-fab .donation-fab__icon {
    writing-mode: horizontal-tb;
    display: flex;
    color: #fff !important;
}

.donation-fab .donation-fab__icon svg {
    width: 20px !important;
    height: 20px !important;
}

@media (max-width: 767.98px) {
    .donation-fab,
    .donation-fab.is-visible {
        padding: 18px 12px !important;
        font-size: 16px !important;
        border-radius: 0 12px 12px 0 !important;
    }

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

/* ---------- donate buttons only in #e2365c ---------- */

.main_nav_right_two_btn .thm-btn,
.link-box .thm-btn,
.manage_one_btn .thm-btn,
.donation-header-button a,
.donation-cta,
.donation-amount-next,
.dpf-submit {
    background: var(--elv-btn) !important;
    background-color: var(--elv-btn) !important;
    background-image: none !important;
    border-color: var(--elv-btn) !important;
    color: #fff !important;
}

.main_nav_right_two_btn .thm-btn:hover,
.link-box .thm-btn:hover,
.manage_one_btn .thm-btn:hover,
.donation-header-button a:hover,
.donation-cta:hover,
.donation-cta:focus-visible,
.donation-amount-next:hover,
.dpf-submit:hover,
.dpf-submit:focus-visible {
    background: var(--elv-btn-hover) !important;
    background-color: var(--elv-btn-hover) !important;
    border-color: var(--elv-btn-hover) !important;
    color: #fff !important;
}

.main_nav_right_two_btn .thm-btn span,
.link-box .thm-btn span,
.manage_one_btn .thm-btn span,
.donation-cta span,
.donation-cta svg,
.dpf-submit span,
.dpf-submit svg {
    color: #fff !important;
}