/* =========================================================
   Donation Styles – Two‑column layout, pills, base overrides
   ========================================================= */

/* ── Section wrapper ─────────────────────────────────── */
.c-donate-section {
    position: relative;
    overflow: hidden;
    padding-top: 6rem;
    padding-bottom: 6rem;
    min-height: 50rem;
}

.c-donate-section__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.c-donate-section__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.c-donate-section__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.4);
}

/* ── Inner flex row ──────────────────────────────────── */
.c-donate-section__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    align-items: stretch;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-px, 1.25rem);
    padding-right: var(--container-px, 1.25rem);
    max-width: var(--container-max, 1280px);
}

/* ── LEFT COLUMN ───────────────────────────────────── */
.c-donate-section__left {
    color: #fff;
    flex: 1 1 300px;
    display: flex;
    align-items: center;
    min-width: 0;
}

/* ── Text overlay block ────────────────────────────── */
.c-donate-section__text-block {
    background: rgba(0, 0, 0, 0.6);
    padding: 2rem;
    border-radius: 1rem;
    backdrop-filter: blur(4px);
    width: 100%;
}

/* ── Accent bar ─────────────────────────────────────── */
.c-donate-section__accent-bar {
    width: 2.5rem;
    height: 4px;
    background: var(--color-secondary);
    margin-bottom: 1.5rem;
}

.c-donate-section__heading {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #fff;
}

.c-donate-section__text {
    font-size: var(--font-size-body);
    line-height: 1.6;
    opacity: 0.85;
    margin-bottom: 2rem;
}

/* Payment pills (left column) */
.c-donate-section__payment-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.c-donate-payment-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: rgba(255,255,255,0.15);
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}

.c-donate-payment-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-secondary);
}

/* ── RIGHT COLUMN (card) ────────────────────────────── */
.c-donate-card {
    background: #fff;
    color: var(--color-black);
    padding: 2.5rem;
    border-radius: 1.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 768px) {
    .c-donate-card {
        padding: 3rem;
    }
}

/* ── Typography inside card ─────────────────────────── */
.c-donate-card__title {
    font-family: 'Playfair Display', serif;
    font-size: var(--font-size-h2);
    font-weight: 900;
    margin-bottom: 0.5rem;
    color: var(--color-black);
}

.c-donate-card__desc {
    font-size: var(--font-size-body);
    font-weight: 500;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.c-donate-info,
.c-donate-info p {
    font-size: var(--font-size-body);
}

.c-donate-info {
    min-height: 4rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

/* ── Tab switcher ───────────────────────────────────── */
.c-donate-tabs {
    display: flex;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid rgba(0,0,0,.15);
}

.c-donate-tab-btn {
    flex: 1;
    padding: .625rem .5rem;
    margin-bottom: -2px;
    background: transparent !important;
    color: rgba(0,0,0,0.55) !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    font-size: var(--font-size-body) !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    cursor: pointer;
    transition: border-color 0.22s, color 0.22s;
}

.c-donate-tab-btn:hover,
.c-donate-tab-btn:focus {
    background: transparent !important;
    color: var(--color-primary) !important;
    outline: none;
}

.c-donate-tab-btn.active,
.c-donate-tab-btn[aria-selected="true"] {
    color: var(--color-black) !important;
    border-bottom-color: var(--color-black) !important;
}

/* ── Amount radio buttons ───────────────────────────── */
.c-donate-amounts {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.c-donate-amount { position: relative; }

.c-donate-amount input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.c-donate-amount label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: .6rem .875rem;
    border: 2px solid rgba(0,0,0,.25);
    background: rgba(0,0,0,.04);
    font-size: var(--font-size-body);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.22s, border-color 0.22s;
    user-select: none;
    border-radius: 0.5rem;
}

.c-donate-amount input[type="radio"]:checked + label {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

.c-donate-amount label:hover { border-color: rgba(0,0,0,.6); }
.c-donate-amount--other label { min-width: 5rem; }

/* ── Submit button (base) ───────────────────────────── */
.c-donate-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--color-black);
    color: var(--color-white);
    border: 3px solid var(--color-black);
    font-size: var(--font-size-body);
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    border-radius: 999px;
    transition: background 0.22s, color 0.22s;
}

.c-donate-submit:hover {
    background: transparent;
    color: var(--color-black);
}

/* ── UNIFIED DONATE BUTTON (used everywhere) ────────── */
.c-donate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.75rem;
    font-size: var(--font-size-body);
    font-weight: 700;
    font-family: var(--font-body);
    color: var(--donate-btn-text, #fff);
    background: var(--donate-btn-bg, #5900a8);
    border: none;
    border-radius: 999px;
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease;
}

.c-donate-btn:hover {
    background: var(--donate-btn-hover-bg, #6778a9);
    color: var(--donate-btn-hover-text, #000);
}

/* Ensure the form’s submit button stays full‑width */
.c-donate-btn.c-donate-submit {
    width: 100%;
}

/* Override any header‑specific donate button styles */
.c-primary-nav__donate-btn.c-donate-btn {
    background: var(--donate-btn-bg) !important;
    color: var(--donate-btn-text) !important;
    border: none !important;
}
.c-primary-nav__donate-btn.c-donate-btn:hover {
    background: var(--donate-btn-hover-bg) !important;
    color: var(--donate-btn-hover-text) !important;
}

/* Override the base .c-donate-submit background for unified button */
.c-donate-btn.c-donate-submit {
    background: var(--donate-btn-bg, #5900a8) !important;
    color: var(--donate-btn-text, #fff) !important;
    border: none !important;
}
.c-donate-btn.c-donate-submit:hover {
    background: var(--donate-btn-hover-bg, #6778a9) !important;
    color: var(--donate-btn-hover-text, #000) !important;
}

/* ── Payment icons (right column) ──────────────────── */
.c-donate-payment-icons {
    background: rgba(0,0,0,0.03);
    padding: 1rem;
    border-radius: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    width: 100%;
    box-sizing: border-box;
}

.c-donate-payment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    transition: opacity 0.2s;
}

.c-donate-payment-icon svg {
    width: 2.5rem;
    height: 2.5rem;
    fill: currentColor;
}

/* Brand colours for payment methods */
.c-donate-payment-icon[aria-label="Visa"]             { color: #1A1F71; }
.c-donate-payment-icon[aria-label="Mastercard"]       { color: #EB001B; }
.c-donate-payment-icon[aria-label="PayPal"]           { color: #003087; }
.c-donate-payment-icon[aria-label="Apple Pay"]        { color: #000000; }
.c-donate-payment-icon[aria-label="Google Pay"]       { color: #4285F4; }
.c-donate-payment-icon[aria-label="American Express"]  { color: #2E77BC; }
.c-donate-payment-icon[aria-label="Venmo"]            { color: #008CFF; }
.c-donate-payment-icon[aria-label="Cash App"]         { color: #00D64B; }
.c-donate-payment-icon[aria-label="Discover"]         { color: #FF6000; }

/* ── Custom amount input ────────────────────────────── */
.c-donate-custom-wrap {
    margin-bottom: 1rem;
    display: none;
}
.c-donate-custom-wrap.is-visible { display: block; }

.c-donate-custom-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.c-donate-custom-prefix {
    font-weight: 700;
    font-size: var(--font-size-body);
    flex-shrink: 0;
}

.c-donate-custom-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid rgba(0,0,0,.4);
    background: rgba(255,255,255,.6);
    font-size: var(--font-size-body);
    font-weight: 700;
    border-radius: 0.5rem;
}

.c-donate-custom-input:focus {
    outline: none;
    border-color: var(--color-black);
    box-shadow: 0 0 0 3px rgba(0,0,0,.15);
}

/* ── Mobile ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .c-donate-section__text-block {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        width: auto;
        max-width: 90%;
    }

    .c-donate-section__left {
        align-items: center;
    }

    .c-donate-card {
        margin-left: auto;
        margin-right: auto;
        max-width: 90%;
        width: 100%;
    }

    .c-donate-section__left,
    .c-donate-card {
        width: 100% !important;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        flex: 1 1 100%;
    }

    .c-donate-section__text-block {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 90%;
        max-width: 100%;
    }
    /* Keep donation amount buttons in a single row */
    .c-donate-amounts {
        flex-wrap: nowrap;               /* prevent wrapping */
        gap: 0.25rem;
        justify-content: center;
    }

    .c-donate-amount label {
        min-width: 0;                    /* allow the label to shrink below 4.5rem */
        padding: 0.4rem 0.6rem;          /* tighter padding */
        font-size: var(--font-size-body);  /* slightly smaller text, still readable */
    }

    .c-donate-amount--other label {
        min-width: 0;                    /* same for 'Other' */
        padding: 0.4rem 0.6rem;
        font-size: var(--font-size-body)
    }

    .c-donate-info{
        margin-bottom: 0rem;
    }
    .c-donate-card__title{
        margin-top: 0.2rem !important;

    }
}

/* ── Anchor‑based donate buttons – override global link styles ── */
a.c-donate-btn {
    color: var(--donate-btn-text, #fff) !important;
    text-decoration: none !important;
}

a.c-donate-btn:hover,
a.c-donate-btn:focus {
    color: var(--donate-btn-hover-text, #000) !important;
    text-decoration: none !important;
}

a.c-btn-secondary {
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

a.c-btn-secondary:hover,
a.c-btn-secondary:focus {
    color: #fff !important;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .c-donate-section {
        padding-top: 1.5rem;
        padding-bottom: 3rem;
    }
}