:root { --donation-theme: #6C1319; }

/* =========================
   DESKTOP HERO (background)
========================= */
.fullwidth-image{
    width:100vw; min-height:460px; position:relative; margin-top:12px;
    background-size:cover; background-position:center;

    left:50%; right:50%;
    margin-left:-50vw; margin-right:-50vw;
}
.fullwidth-image-dim{
    position:absolute; inset:0;
    background:rgba(0,0,0,.25);
    z-index:1;
}
.donation-overlay{
    position:absolute;
    top:50%; transform:translateY(-50%);
    width:420px; max-width:calc(100% - 32px);
    padding:22px;
    border-radius:8px;
    background:var(--donation-theme);
    color:#fff;
    box-shadow:0 18px 50px rgba(0,0,0,.35);
    z-index:2;
}
.overlay-center .donation-overlay{ left:50%; transform:translate(-50%,-50%); text-align:center; }
.overlay-left .donation-overlay{ left:5%; text-align:left; }
.overlay-right .donation-overlay{ right:5%; left:auto; text-align:left; }

/* Typography */
.donation-title{ font-weight:800; font-size:1.6rem; color:#FFD966; }
.donation-subtitle{ font-size:.95rem; opacity:.92; }

/* Options */
.donation-options{ display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:10px; }
.donation-box{
    border:2px solid rgba(255,255,255,.45);
    background:none; color:#fff;
    border-radius:6px;
    padding:12px 8px;
    font-weight:800;
    text-align:center;
    cursor:pointer;
}
.donation-box span{ display:block; font-size:.78rem; margin-top:4px; }
.donation-box.active, .donation-box:hover{ background:#fff; color:var(--donation-theme); }





/* Container */
.donation-form {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

/* Amount control */
.amount-wrapper {
    display: flex;
    align-items: center;
    height: 48px;
    width: 180px;
    background: rgba(255,255,255,0.9); /* cleaner, calmer */
    border-radius: 6px;          /* ⬅ rounded outer */
    overflow: hidden;             /* ⬅ important */

    box-sizing: border-box;
}


/* £ block */
.currency-prefix {
    width: 25px;
    flex-shrink: 0;

    background: rgba(108,19,25,1);
    color: #fff;

    font-size: 20px;
    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 0px 6px 6px 0px;  /* ⬅ left-side rounding */
}


/* Input */
.donation-amount {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0 12px;
    font-size: 16px;
    outline: none;
}

/* Donate button */
.donation-cta {
    background-color: #ffffff !important;
    color: #6C1319 !important;

    border: 2px solid #6C1319 !important;
    border-radius: 8px;

    height: 48px;
    flex: 1;
    min-width: 200px;

    font-size: 16px;
    font-weight: 800;

    cursor: pointer;

    filter: none !important;
    mix-blend-mode: normal !important;
    isolation: isolate;
}

.donation-cta:hover {
    background-color: #6C1319 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}


.donation-cta:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}


/* Amount + CTA */
/*.donation-form{ display:grid; grid-template-columns:110px 1fr; gap:10px; align-items:center; }*/
/*.donation-amount{ height:42px; font-size:1rem; text-align:center; }*/
/*.donation-cta{ height:42px; padding:0 18px; font-size:1rem; font-weight:800; white-space:nowrap; }*/




/* Visibility */
.donation-hero-desktop{ display:block; }
.donation-hero-mobile{ display:none; }

/* =========================
   MOBILE HERO (stacked)
   Ignores overlay positioning
========================= */
@media (max-width: 768px){

    .donation-hero-desktop{ display:none; }
    .donation-hero-mobile{ display:block; }

    /* Fullwidth image element */
    .donation-hero-mobile-img{
        display:block;
        width:100%;
        height:auto;
    }

    /* Overlay below image (fullwidth) */
    .donation-hero-mobile .donation-overlay{
        position:relative;
        top:auto; left:auto; right:auto; bottom:auto;
        transform:none;

        width:100%;
        max-width:100%;
        box-sizing:border-box;

        margin:0;
        padding:20px 16px;

        border-radius:0;
        box-shadow:none;
        text-align:center;
        background:var(--donation-theme);
    }

    /* Space between multiple heroes */
    .donation-hero-mobile{ margin-bottom:32px; }

    /* Smaller amount row */
    .donation-form{ grid-template-columns:95px 1fr; }
}

.donation-payment-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

.payment-logo {
    height: 22px;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.payment-logo:hover {
    opacity: 1;
}

/* Mobile tweak */
@media (max-width: 576px) {
    .payment-logo {
        height: 20px;
    }
}

.secure-payments-link {
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
    color: #6C1319; /* Crescent Relief primary */
}

.secure-payments-link:hover {
    opacity: 0.85;
}

.secure-list {
    padding-left: 18px;
    margin-bottom: 12px;
}

.secure-list li {
    margin-bottom: 6px;
}



/* ===========================
   HERO BACKGROUND VIDEO
   =========================== */

.donation-hero-desktop {
    position: relative;
    width: 100%;
    height: 420px;          /* match your hero height */
    overflow: hidden;
}

/* Background video behaves like background-image */
.donation-hero-desktop .hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

/* Fallback image (same behaviour) */
.donation-hero-desktop .hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Dark overlay layer */
.donation-hero-desktop .fullwidth-image-dim {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1;
}

/* Donation overlay content */
.donation-hero-desktop .donation-overlay {
    z-index: 2;
}