/* ==========================================================
   GIVING
   Shared by donate.blade.php, membership.blade.php and
   donate-checkout.blade.php.

   The old site carried ~250 lines of <style> at the top of both the donate
   and the membership page — the same rules, twice, drifting apart. They are
   here once instead.
   ========================================================== */


/* ----------------------------------------------------------
   THE HERO

   A dark photograph with the giving card floating over it on the right.
   The card is the page, so on a narrow screen the photograph goes and the
   card takes the full width on white — a 1.6MB backdrop behind a form is
   not worth a phone's data.
   ---------------------------------------------------------- */
.give-hero {
    background-image: url('../../uploads/site/donate/hero.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 60px 0;
    margin-top: 85px;
}

.give-hero .give-headline {
    color: #fff;
    font-size: 26px;
    line-height: 1.1em;
    font-weight: 500;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

/* Sits on the photograph, so the theme's muted grey is close to unreadable
   there. White with a shadow, and it goes back to dark once the photograph
   does — see the narrow-screen block below. */
.give-hero .secure-pay {
    color: rgba(255, 255, 255, .9) !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}

@media only screen and (max-width: 991px) {
    .give-hero {
        background-image: none;
        background-color: #fff;
        padding-top: 30px;
    }

    .give-hero .give-headline {
        color: #302c51;
        text-shadow: none;
    }

    .give-hero .secure-pay {
        color: #6c757d !important;
        text-shadow: none;
    }
}


/* ----------------------------------------------------------
   THE CARD
   ---------------------------------------------------------- */
.give-card {
    width: 100%;
    background: #fff;
    border: 1px solid #e9eae4;
    border-radius: 6px;
    overflow: hidden;
}

.give-card .give-title {
    font-size: 34px;
    line-height: 35px;
    font-weight: 900;
    color: #ff6015;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    padding: 20px 15px 5px;
    margin: 0;
}

.give-card .give-sub {
    text-align: center;
    font-size: 18px;
    padding: 15px;
    margin: 0;
    background: #f8f9fa;
    border-bottom: 1px solid #e9eae4;
    text-transform: capitalize;
}

.give-card .card-body {
    padding: 15px 15px 0;
}

@media only screen and (max-width: 600px) {
    .give-card .give-title {
        font-size: 28px;
        line-height: 32px;
    }
}


/* ----------------------------------------------------------
   AMOUNT BUTTONS

   A radio hidden under its own label, so the whole pill is the hit area.
   ---------------------------------------------------------- */
.donate-now {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.donate-now li {
    position: relative;
    display: block;
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    border: 1px solid #e9eae4;
    border-radius: 30px;
    overflow: hidden;
}

.donate-now label,
.donate-now input {
    position: absolute;
    inset: 0;
    margin: 0;
}

.donate-now input[type="radio"] {
    opacity: .01;
    z-index: 100;
    cursor: pointer;
}

.donate-now label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    height: 100%;
    font-size: 14px;
    font-weight: 600;
    color: #302c51;
    cursor: pointer;
    z-index: 90;
    border-radius: 30px;
    transition: .2s all ease;
}

.donate-now label:hover {
    background: #f1f1f1;
}

.donate-now input[type="radio"]:checked + label {
    background: #ff6400;
    color: #fff;
}

/* the keyboard ring has to sit on the label: the input itself is invisible */
.donate-now input[type="radio"]:focus-visible + label {
    box-shadow: 0 0 0 3px rgba(255, 96, 21, .35);
}

/* the row of Give Once / Give Monthly pills above the amounts */
.donate-now.small-donate-btn li {
    min-width: 120px;
}


/* ----------------------------------------------------------
   "OTHER" — a free-typed amount
   ---------------------------------------------------------- */
.oa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    border: 1px solid #e9eae4;
    border-radius: 30px;
    background: #fff;
    color: #302c51;
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
    cursor: pointer;
    transition: .2s all ease;
}

.oa-btn:hover {
    background: #f1f1f1;
    color: #302c51;
}

.amount-entry {
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
}

.amount-entry .form-control,
.amount-entry .input-group-text {
    height: 40px;
    font-size: 14px;
}

.amount-entry .input-group-text {
    background: transparent;
    color: #000;
}

/* the browser's number spinners are noise on a money field */
.amount-entry input[type=number]::-webkit-outer-spin-button,
.amount-entry input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.amount-entry input[type=number] {
    -moz-appearance: textfield;
}

.give-card input:focus,
.give-card .form-control:focus {
    outline: 0;
    box-shadow: none;
}


/* ----------------------------------------------------------
   THE STRAP LINE UNDER THE FORM

   It changes as amounts are picked, so it is given a minimum height —
   otherwise the button above it jumps when a one-line message replaces a
   two-line one.
   ---------------------------------------------------------- */
.give-blurb {
    background: #f8f9fa;
    border-top: 1px solid #e9eae4;
    padding: 15px;
    text-align: center;
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.give-blurb h6 {
    font-size: 14px;
    margin: 0;
    color: #6c757d;
    line-height: 1.6;
}

.give-submit {
    width: 100%;
    height: 40px;
    margin-top: 5px;
    border: 0;
    border-radius: 30px;
    background-color: #302c51;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s all ease;
}

.give-submit:hover {
    background-color: #ff6015;
    color: #fff;
}

.give-submit:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(255, 96, 21, .35);
}


/* ----------------------------------------------------------
   PROGRAMME CARDS

   .equal-cards is the site-wide helper; these add the photo crop so six
   pictures of different proportions line up.
   ---------------------------------------------------------- */
.give-programmes .blog-item {
    height: calc(100% - 30px);
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.give-programmes .blog-item .top img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.give-programmes .blog-item .bottom {
    flex: 1 1 auto;
    padding: 20px;
}

.give-programmes .blog-item h3 {
    font-size: 20px;
    text-transform: capitalize;
}


/* ----------------------------------------------------------
   OTHER WAYS TO GIVE
   ---------------------------------------------------------- */
.other-ways .benefit-item {
    height: calc(100% - 30px);
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* The theme draws a round badge on ::before behind the <i>; these cards use
   a picture instead of a glyph, so the badge is turned off and the image
   centred on its own. */
.other-ways .benefit-item > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
}

.other-ways .benefit-item > i::before {
    display: none;
}

.other-ways .benefit-item > i img {
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
}

.other-ways .benefit-item h3 {
    font-size: 18px;
    text-transform: capitalize;
}

.other-ways .benefit-item p {
    flex: 1 1 auto;
}

/* the button sits on the card's floor whatever the text above it does */
.other-ways .benefit-item .impact-btn {
    margin-top: auto;
    align-self: center;
}


/* ----------------------------------------------------------
   THE BUTTONS IN THE OTHER-WAYS CARDS
   ----------------------------------------------------------
   Six cards across means a 196px column, and the theme gives
   .benefit-item 34px of padding on each side -- so a button
   had 128px to live in. The theme's button is 15px bold on
   30px of padding with a 16px arrow beside it, which wants
   182px, so "Donate Now" broke across two lines inside a
   65px-tall pill, and sat 13px left of its own middle because
   an inline-flex with no justification leaves its contents at
   flex-start.

   Measured at four sizes, nothing fits 128px -- even 12px on
   16px padding wants 135. So the card gives some padding back
   (20px a side, which a 196px card can well afford) and the
   button comes down to 13.5px on 18px. That needs about 149
   against 156 available: one line, with room to spare.

   nowrap holds it there, and justify-content centres the
   label and its arrow together. The hover is the theme's and
   is left exactly as it is.
   ---------------------------------------------------------- */
body.home-premium .other-ways .benefit-item {
    padding: 32px 20px 28px;
}

body.home-premium .other-ways .benefit-item .impact-btn {
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 13.5px;
    white-space: nowrap;
}


/* ----------------------------------------------------------
   THE VIDEO PAIR
   ---------------------------------------------------------- */
.give-videos .blog-item .top {
    position: relative;
}

/* The two thumbnails are 1080x1080 squares with the subject's head near the
   top, so anything that fixes a height and crops to fill takes the top of
   their heads off. They keep their own proportions, which is what the old
   site does — it puts no height on them at all. Both files are the same
   shape, so the two columns still come out level. */
.give-videos .blog-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 5px;
}


/* ----------------------------------------------------------
   THE AMOUNT MESSAGE

   One slot for both the server's complaint and the script's, so a rejected
   amount reads the same whichever noticed it.
   ---------------------------------------------------------- */
.give-error {
    font-size: 14px;
    margin: 0 0 8px;
}


/* ==========================================================
   THE PAYMENT PAGE
   donate-checkout.blade.php
   ========================================================== */

.pay-panel {
    border: 1px solid #e9eae4;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
}

.pay-panel-head {
    background: #ff6015;
    color: #fff;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 15px 20px;
}

.pay-panel-body {
    padding: 24px;
}


/* ----------------------------------------------------------
   THE FIELDS

   `.form-group` is a Bootstrap 4 class. Bootstrap 5 dropped it and the
   theme never defined it either, so every field on this form had no bottom
   margin at all and they sat flush against one another in one grey slab.
   That is what this fixes.
   ---------------------------------------------------------- */
.pay-panel .form-group {
    margin-bottom: 16px;
}

.pay-panel .form-control,
.pay-panel .form-select {
    height: 46px;
    padding: 10px 14px;
    border: 1px solid #e0e0e6;
    border-radius: 5px;
    font-size: 15px;
    color: #302c51;
    transition: .2s border-color ease;
}

.pay-panel .form-control::placeholder {
    color: #9a9aa5;
}

.pay-panel .form-control:focus,
.pay-panel .form-select:focus {
    border-color: #ff6015;
    box-shadow: 0 0 0 3px rgba(255, 96, 21, .15);
    outline: 0;
}

.pay-panel .form-control.is-invalid {
    border-color: #dc3545;
    /* Bootstrap's own invalid state paints a warning icon inside the field,
       which collides with the text on a box this narrow. The red border and
       the message underneath already say it. */
    background-image: none;
    padding-right: 14px;
}

/* The :not()s match Bootstrap's own selector for an invalid select,
   .form-select.is-invalid:not([multiple]):not([size]). Without them this rule
   loses on specificity and the warning icon is drawn on top of the chevron
   anyway, which is the thing it is here to prevent. */
.pay-panel .form-select.is-invalid:not([multiple]):not([size]) {
    border-color: #dc3545;
    /* Same again, but a select has to keep its chevron — Bootstrap stacks
       the warning icon on top of it, so the chevron is restored on its own.
       (This is Bootstrap's own arrow, copied from its .form-select rule.) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

/* Bootstrap hides .invalid-feedback unless a sibling is .is-invalid, and
   these messages are rendered by Blade only when there is something to say,
   so they use a class of their own and are simply always shown. */
.pay-panel .field-error {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: #dc3545;
    line-height: 1.4;
}

.pay-amount {
    color: #ff6015;
    margin: 0;
}

.pay-meta {
    font-size: 14px;
    color: #6c757d;
    margin: 4px 0 0;
}

.pay-panel-body hr {
    margin: 8px 0 12px;
}


/* ----------------------------------------------------------
   PAYMENT METHODS

   A card each, the whole of which is clickable.

   The theme draws its own radio widget on every `label > span` on the site
   (style.css:4692 onwards): a white circle on a ::before, and a filled navy
   block once checked. That made the selected method a heavy dark bar and
   the unselected one bare text — two controls that looked nothing alike.
   Both are turned off here and the state is drawn on the card.
   ---------------------------------------------------------- */
.pay-methods {
    margin-bottom: 4px;
}

.pay-method {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid #e0e0e6;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    transition: .2s all ease;

    /* the theme sets overflow:hidden on every label, which clips the ring */
    overflow: visible;
}

.pay-method:hover {
    border-color: #ff6015;
}

/* The real radio is hidden but still focusable, so the keyboard ring below
   has something to hang off. */
.pay-method input[type="radio"],
.pay-method input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* The theme's radio styling lands on BOTH spans inside this label — it
   targets `label span` and `label span:before` with no other qualifier — so
   it is switched off for both before either is styled. Missing the dot span
   left the theme's own circle drawn on top of ours. */
.pay-method span {
    padding: 0;
    margin: 0;
    background: none;
    transition: none;
}

.pay-method span::before {
    display: none;
}

.pay-method span:hover {
    background: none;
}

/* ---- the dot we draw ourselves ---- */
.pay-method-dot {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 2px solid #c9c9d2;
    border-radius: 50%;
    background: #fff;
    transition: .2s all ease;
}

.pay-method input:checked ~ .pay-method-dot {
    border-color: #ff6015;
    /* the inner dot, drawn with a ring rather than a child element */
    box-shadow: inset 0 0 0 4px #ff6015;
}

/* ---- the label ---- */
.pay-method-label {
    display: flex;
    align-items: center;
    /* undo the theme's own radio styling for this one span */
    padding: 0;
    background: none;
    font-size: 15px;
    color: #302c51;
    line-height: 1.3;
}

.pay-method-label::before {
    display: none;
}

.pay-method-label:hover {
    background: none;
}

.pay-method-label img {
    max-height: 24px;
    width: auto;
}

/* ----------------------------------------------------------
   THE ZAKAT CARD
   ----------------------------------------------------------
   A .pay-method like the others, with two differences: it holds a
   sentence rather than a single label, and it stands alone in its
   column rather than in a row of cards.
   ---------------------------------------------------------- */
.fr-zakat-method {
    margin-bottom: 0;

    /* It sits beside the Amount box, so it matches that box rather than the
       52px payment cards above — otherwise the two are 6px out of step. */
    min-height: 46px;
}

/* Square, because it is a checkbox and not one of a set: ticking it adds
   Zakat to the gift, it does not choose between options. The orange fill
   inside is the payment cards' own, so the two still read as one family. */
.fr-zakat-method .pay-method-dot {
    border-radius: 4px;
}

/* .pay-method-label is a flex row, which would drop the space before
   the bold word and read "as Zakat" with no gap. */
.fr-zakat-method .pay-method-label {
    display: block;
    font-size: 14px;
    line-height: 1.35;
}

.fr-zakat-method .pay-method-label strong {
    display: inline;
    color: #302c51;
}

/* ---- selected ---- */
.pay-method:has(input:checked) {
    border-color: #ff6015;
    background: #fff7f3;
}

.pay-method:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(255, 96, 21, .3);
}

/* :has() is recent; without it a selected card still reads correctly from
   the filled dot, it just does not tint. Nothing is lost. */


/* ---- section headings inside the panel ---- */
.pay-panel-body h5 {
    font-size: 17px;
    margin-top: 26px;
    margin-bottom: 0;
}

.pay-panel-body h6 {
    font-size: 15px;
}

/* ----------------------------------------------------------
   THE "NOT CONNECTED YET" NOTICE
   ---------------------------------------------------------- */
.pay-notice {
    background: #fff4ee;
    border-left: 3px solid #ff6015;
    color: #8a4b26;
    font-size: 13.5px;
    line-height: 1.6;
    padding: 10px 14px;
    margin: 4px 0 0;
    border-radius: 3px;
}


/* ----------------------------------------------------------
   BANK TRANSFER SLIP
   ---------------------------------------------------------- */
.pay-receipt {
    background: #f8f9fa;
    border: 1px dashed #d8d8e0;
    border-radius: 5px;
    padding: 15px;
    margin-top: 12px;
    font-size: 14px;
}


/* ----------------------------------------------------------
   NEXT
   ---------------------------------------------------------- */
.pay-next {
    width: 50%;
    min-width: 180px;
}

/* Disabled until every field is valid — the old site does the same, at the
   same opacity. `not-allowed` rather than `default`: without it the button
   still looks clickable and people click it repeatedly wondering why
   nothing happens. */
.pay-next:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* The theme gives .common-btn a hover; a disabled button must not pretend
   to respond to one. */
.pay-next:disabled:hover {
    opacity: .6;
}


/* ----------------------------------------------------------
   THE RIGHT-HAND COLUMN
   ---------------------------------------------------------- */
.pay-aside .faq-img img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.pay-aside h3 {
    text-transform: capitalize;
}

.pay-aside small {
    display: block;
    line-height: 1.7;
}

@media only screen and (max-width: 991px) {
    .pay-aside {
        margin-top: 40px;
    }

    .pay-next {
        width: 100%;
    }
}


/* ----------------------------------------------------------
   THE CARD PANEL
   ----------------------------------------------------------
   Where CyberSource draws its own payment iframe. Empty and hidden
   until a card is chosen, so it takes no room on a page that is
   collecting an address.
   ---------------------------------------------------------- */
.pay-card-panel {
    min-height: 60px;

    /* A width of its own, so the button is the same size everywhere.
       The iframe below is forced to fill this box, which means the button ends
       up as wide as whatever column the form sits in — and those differ: the
       giving page gives it 586px, a fundraiser page 806px, and the button
       looked oversized there. Capping it here settles both. max-width keeps it
       inside a column narrower than the cap, so nothing overflows on a phone,
       and auto margins centre it in a column wider than the cap. */
    width: 580px;
    margin: 18px auto 0;

    /* Kept inside the donation box whatever CyberSource puts in it. Their
       panel sets its own width and can be wider than the column it lands in;
       without this it spills past the edge of the card. A panel that really is
       too wide scrolls sideways rather than breaking the page. */
    position: relative;
    max-width: 100%;
    overflow-x: auto;

    /* The old site mounted the button list into the middle of the row where
       the Next button had been, so it reads the same way here. */
    text-align: center;
}

.pay-card-panel iframe {
    display: block;
    width: 100% !important;   /* beats the width attribute their script sets */
    max-width: 100%;
    border: 0;
}


/* ----------------------------------------------------------
   THE CARD PAYMENT POPUP
   ----------------------------------------------------------
   What assets/js/card-payment.js draws: a spinner while the card
   panel is being prepared and the donation saved, and the result
   the donor acknowledges before being taken to the thank-you page.

   zindagi-trust uses SweetAlert2 from a CDN for this. Drawn here
   instead, so the page still loads nothing from outside — about
   1 KB of CSS in place of 91 KB over the network.
   ---------------------------------------------------------- */
.pay-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(18, 20, 44, 0.55);
}

.pay-modal.is-open {
    display: flex;
}

.pay-modal-card {
    width: 100%;
    max-width: 460px;
    padding: 34px 28px 28px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
    text-align: center;
}

.pay-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #302c51;
}

/* The spinner shown while something is happening */
.pay-modal-spinner {
    width: 54px;
    height: 54px;
    margin: 0 auto 18px;
    border: 4px solid #eceaf3;
    border-top-color: #ff6015;
    border-radius: 50%;
    animation: pay-modal-spin 0.9s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .pay-modal-spinner { animation-duration: 3s; }
}

/* The tick, cross or i above the result */
.pay-modal-mark {
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    border: 3px solid currentColor;
    border-radius: 50%;
    font-size: 32px;
    line-height: 56px;
    font-weight: 400;
}

.pay-modal-mark-success { color: #28a745; }
.pay-modal-mark-error   { color: #dc3545; }
.pay-modal-mark-info    { color: #17a2b8; }

/* Transaction id, status, amount */
.pay-modal-rows {
    margin: 18px 0 22px;
    padding: 14px 16px;
    list-style: none;
    border-radius: 8px;
    background: #f7f7fb;
    text-align: left;
}

.pay-modal-rows li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 0;
    font-size: 14px;
}

.pay-modal-rows span { color: #6b6880; }

.pay-modal-rows strong {
    color: #302c51;
    word-break: break-all;
    text-align: right;
}

.pay-modal-ok {
    min-width: 130px;
    margin-top: 4px;
}


/* ==========================================================
   THEMED PAGES ONLY
   ----------------------------------------------------------
   donate.css serves four pages -- Donate, Membership, the
   payment page and the Marathon appeal -- and each sets
   body-class in its own Blade file. Every rule here is scoped
   to that class, so removing those lines returns all four.
   ========================================================== */


/* ----------------------------------------------------------
   THE HEADINGS, UNCAPPED
   ----------------------------------------------------------
   The theme measures a .section-title at 760px. "Empowering
   Education for Bright Futures" on Membership broke to two
   lines inside that measure and holds one line without it.
   The giving panel is untouched: it is not a .section-title.
   ---------------------------------------------------------- */
body.home-premium .section-title {
    max-width: none;
}


/* ----------------------------------------------------------
   ROOM BETWEEN THE ROWS OF CARDS
   ----------------------------------------------------------
   General Education, Breakfast and Life-Skills sat directly on
   Art & Music, Sports and Teacher Development -- a 1px overlap,
   measured. .blog-item carries margin-bottom: 30px of its own,
   but the theme also gives it height: 100% so a row comes out
   level, and filling the column leaves that margin outside the
   box the row measures. On the column it is space the row can
   see.
   ---------------------------------------------------------- */
body.home-premium .equal-cards > [class*="col-"] {
    margin-bottom: 30px;
}


/* ----------------------------------------------------------
   THE GIVING PANEL ANSWERS THE POINTER
   ----------------------------------------------------------
   Every control in the panel under "Every Classroom Holds a
   Story of Hope" answered a hover with the same flat grey
   wash, #f1f1f1, and the submit button simply swapped navy for
   flat orange. None of it was the gesture the rest of the
   themed site makes.

   An amount that is not chosen now warms instead: its hairline
   takes the accent, the fill takes a tenth of it and the
   figure is set in accent too, so the pill you are pointing at
   reads as the one about to be chosen without pretending it
   already is. The chosen one keeps its solid orange -- a
   hovered pill must never look more selected than the
   selection.
   ---------------------------------------------------------- */
body.home-premium .donate-now li:hover {
    border-color: var(--accent);
}

/* Keyed off the li rather than the label: the label fills the li,
   but the li also carries the 1px border, and a pointer on that
   edge is on the row without being on the label. */
body.home-premium .donate-now li:hover label {
    background: rgba(255, 96, 21, 0.10);
    color: var(--accent);
}

/* The chosen amount is immune to all of that. */
body.home-premium .donate-now input[type="radio"]:checked + label,
body.home-premium .donate-now li:hover input[type="radio"]:checked + label {
    background: #ff6400;
    color: #fff;
}

body.home-premium .donate-now li:has(input[type="radio"]:checked):hover {
    border-color: var(--accent);
}

/* "Other", which opens the free-typed amount, is a pill of the
   same kind and answers the same way. */
body.home-premium .oa-btn:hover {
    border-color: var(--accent);
    background: rgba(255, 96, 21, 0.10);
    color: var(--accent);
}


/* ----------------------------------------------------------
   DONATE NOW
   ----------------------------------------------------------
   It stays navy at rest, which is what sets it apart from the
   orange amounts above it, and on hover it becomes the brand
   gradient, lifts 3px and takes the glow -- the theme's own
   button gesture, arrived at rather than worn from the start.

   The light sweep is a background-image that is always there,
   parked off the right-hand side at rest and travelling across
   the face on hover. It has to be present at rest for that
   journey to animate; an image that only appears on hover has
   nowhere to come from. The colour beneath it is a
   background-COLOR for the same reason -- colours interpolate,
   gradients do not.
   ---------------------------------------------------------- */
body.home-premium .give-submit {
    position: relative;
    overflow: hidden;
    background-color: var(--ink-2);
    background-image:
        linear-gradient(120deg, transparent 36%, rgba(255, 255, 255, 0.30) 50%, transparent 64%);
    background-size: 220% 100%;
    background-position: 160% 0;
    background-repeat: no-repeat;
    box-shadow: 0 8px 22px -10px rgba(22, 19, 46, 0.55);
    transition:
        background-color 0.525s var(--ease),
        background-position 1.125s var(--ease),
        transform 0.525s var(--ease),
        box-shadow 0.525s var(--ease);
}

body.home-premium .give-submit:hover,
body.home-premium .give-submit:focus-visible {
    background-color: var(--accent-deep);
    background-position: -60% 0;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 18px 38px -12px rgba(255, 96, 21, 0.8);
}

/* ----------------------------------------------------------
   THE POPUP'S OK, WITH ITS LABEL IN THE MIDDLE
   ----------------------------------------------------------
   The card-payment script builds its result popup -- the one
   that reports a completed gift or says why one failed -- and
   closes it with <button class="common-btn pay-modal-ok">.
   That button is given min-width: 130px further up this file,
   and the theme lays .common-btn out as an inline-flex
   without saying anything about justification, so "OK" sat
   wherever flex-start put it: hard against the left padding
   of a 130px button. The same thing the Next button did, for
   the same reason.
   ---------------------------------------------------------- */
body.home-premium .pay-modal-ok {
    justify-content: center;
}


/* ----------------------------------------------------------
   NEXT, WITH ITS LABEL IN THE MIDDLE
   ----------------------------------------------------------
   The theme lays .common-btn out as an inline-flex and says
   nothing about justification, which is right for a button
   that is as wide as its words. This one is given width: 50%
   further up, so at 293px the label stayed where flex-start
   put it -- 30px in from the left edge, and 99px left of the
   middle, measured.
   ---------------------------------------------------------- */
body.home-premium .pay-next {
    justify-content: center;
}


/* ----------------------------------------------------------
   A DISABLED NEXT DOES NOT ANSWER THE POINTER
   ----------------------------------------------------------
   Next is held disabled until every field on the form passes,
   and the rule further up this file dims it to 60% and sets
   the not-allowed cursor to say so. It was still rising 3px
   and brightening its glow under the pointer, though --
   measured disabled: lift -3px, shadow deepening from 0.75 to
   0.8 -- because the theme hangs those on .common-btn:hover,
   two classes deep, and the opacity rule here could not reach
   them. So the button looked eager to be pressed while
   refusing to be.

   Naming the disabled state and the hover together is four
   classes, which outranks the theme's. The sweep is parked
   back at its resting position for the same reason.
   ---------------------------------------------------------- */
body.home-premium .pay-next:disabled,
body.home-premium .pay-next:disabled:hover,
body.home-premium .pay-next:disabled:focus {
    transform: none;
    box-shadow: none;
    background-position: 160% 0, 0 0;
}


/* ----------------------------------------------------------
   THE PROGRAMME CARDS HOVER LIKE THE REST OF THE SITE
   ----------------------------------------------------------
   General Education, Breakfast Program and the rest did not
   answer a hover the way the same card does everywhere else:
   measured against the identical card on Fundraisers, this
   one lifted 0px instead of 8 and kept the same shadow it
   had at rest. Only the photograph's zoom was working.

   Two things were in the way, and both are now cleared.

   The lift: data-aos sat on the card, and the theme pins
   transform: translate3d(0,0,0) !important on everything it
   has revealed, so no hover transform could move it. The
   reveal is on the column now -- each card is alone in one --
   and the two rules below put back the stagger the theme
   gives a row, which keys off data-aos being a descendant of
   the column and so stopped matching.

   The shadow: the markup also carries Bootstrap's .shadow
   utility, which is !important, so the theme's own card
   shadow never showed at rest or on hover. Matching that
   !important is the only way to win it back. The two values
   are the theme's own, so these cards now sit and rise
   exactly as .blog-item does on every other page.
   ---------------------------------------------------------- */
body.home-premium .blog-item.shadow {
    box-shadow: var(--shadow-sm) !important;
}

body.home-premium .blog-item.shadow:hover {
    box-shadow: var(--shadow-lg) !important;
}

body.home-premium .equal-cards > [class*="col-"]:nth-of-type(2)[data-aos] {
    transition-delay: 110ms !important;
}

body.home-premium .equal-cards > [class*="col-"]:nth-of-type(3)[data-aos] {
    transition-delay: 220ms !important;
}

body.home-premium .equal-cards > [class*="col-"]:nth-of-type(4)[data-aos] {
    transition-delay: 330ms !important;
}

body.home-premium .equal-cards > [class*="col-"]:nth-of-type(5)[data-aos] {
    transition-delay: 440ms !important;
}


/* ----------------------------------------------------------
   ROOM UNDER THE HEADER ON MEMBERSHIP
   ----------------------------------------------------------
   The giving card is shared with the home page and School
   Reform, where it ends the page and needs no clearance of
   its own. On Membership it is the first thing under a fixed
   header, and its pt-50 left the heading 50px below it. The
   hero this replaced carried 85px, so 40px more puts it back
   where it was. Scoped to the one page, by the class its
   Blade file now sets beside home-premium.
   ---------------------------------------------------------- */
body.membership-page .intro-section {
    margin-top: 80px;
}