* {
    box-sizing: border-box;
}

:root {
    --lums-blue: #052b88;
    --deep-blue: #06114f;
    --footer-blue: #052c91;
    --cyan: #0bc5ef;
    --text: #454545;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: "Lato", Arial, Helvetica, sans-serif;
    color: var(--text);
    background: #fff;
    font-weight: 400;
}

a {
    text-decoration: none;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
    height: 218px;
    background: #fff;
}

.header-inner {
    width: 100%;
    max-width: 1610px;
    height: 100%;
    margin: 0 auto;
    position: relative;
}

.brand-area {
    position: absolute;
    left: 18px;
    top: 34px;
    width: 300px;
}

.logo-link {
    display: block;
}

.lums-logo {
    display: block;
    width: 285px;
    height: auto;
}

.lums-slogan {
    display: block;
    width: 220px;
    height: auto;
    margin: 13px 0 0 31px;
}

.header-right {
    position: absolute;
    right: 20px;
    top: 5px;
    width: 570px;
}

.utility-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 31px;
}

.utility-nav a {
    color: #3f3f3f;
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
}

.utility-nav a:hover {
    color: var(--lums-blue);
}

.header-icons {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
    margin-top: 69px;
    padding-right: 2px;
}

.header-icons a {
    color: #66758f;
    font-size: 27px;
}

/* =========================================================
   MAIN / BACKGROUND
   ========================================================= */
.donation-area {
    min-height: 1227px;
    padding: 75px 0 76px;
    background:
        linear-gradient(rgba(0, 49, 143, .78), rgba(0, 49, 143, .78)),
        url("../images/ps_001.jpg") center center / cover no-repeat;
}

.donation-shell {
    width: 100%;
    max-width: 1612px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 927px 688px;
    gap: 18px;
    align-items: start;
}

/* =========================================================
   LEFT DONATION CARD
   ========================================================= */
.donation-card {
    height: 1079px;
    background: #fff;
    border-radius: 7px;
    padding: 38px 86px 40px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .09);
}

.steps {
    display: grid;
    grid-template-columns: 70px 1fr 70px;
    align-items: start;
    width: 585px;
    margin: 0 auto;
}

.step {
    text-align: center;
    color: #9aa2b1;
}

.circle {
    width: 47px;
    height: 47px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 12px;
    border: 2px solid #cbd2df;
    border-radius: 50%;
    color: #8f98a8;
    font-size: 17px;
    font-weight: 700;
    background: #fff;
}

.step.active {
    color: #052b88;
}

.step.active .circle {
    background: #052b88;
    border-color: #052b88;
    color: #fff;
}

.step-title {
    display: block;
    font-size: 11px;
    font-weight: 900;
    line-height: 15px;
}

.step-name {
    display: block;
    font-size: 12px;
    line-height: 16px;
}

.step-connector {
    height: 1px;
    background: #bfc7d5;
    margin-top: 24px;
}

.donation-card h1 {
    margin: 46px 0 27px;
    text-align: center;
    color: #062c88;
    font-size: 31px;
    line-height: 1.37;
    font-weight: 900;
    letter-spacing: -.35px;
}

.field-group {
    margin-bottom: 27px;
}

.field-group label {
    display: block;
    font-size: 17px;
    line-height: 23px;
    color: #626262;
    margin-bottom: 8px;
}

.form-control-custom {
    width: 100%;
    height: 62px;
    padding: 0 18px;
    border: 1px solid #cfcfcf;
    border-radius: 0;
    outline: none;
    background: #fff;
    color: #666;
    font-family: inherit;
    font-size: 16px;
}

.form-control-custom:focus {
    border-color: #5574ae;
    box-shadow: 0 0 0 1px #5574ae;
}

.once-button {
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0bc5ef;
    color: #fff;
    font-size: 17px;
}

.continue-wrap {
    text-align: center;
    margin-top: 46px;
}

.continue-btn {
    height: 57px;
    min-width: 170px;
    padding: 0 25px;
    border: 0;
    border-radius: 4px;
    background: #062b87;
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.continue-btn:hover {
    background: #041f68;
    transform: translateY(-1px);
}

.continue-btn:disabled {
    background: #062b87;
    color: #fff;
    cursor: not-allowed;
    opacity: 1;
    transform: none;
}

/* =========================================================
   RIGHT PROMO
   ========================================================= */
.promo-panel {
    width: 688px;
    height: 930px;
    overflow: hidden;
    border-radius: 36px;
    background: #152a51;
}

.promo-panel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
    color: #fff;
}

.footer-top {
    height: 196px;
    background: #062e91;
}

.footer-inner {
    width: 100%;
    max-width: 1612px;
    height: 100%;
    margin: 0 auto;
}

.footer-top .footer-inner {
    display: flex;
    align-items: center;
}

.footer-brand {
    width: 405px;
    padding-left: 26px;
}

.footer-brand img {
    width: 286px;
    height: auto;
}

.footer-links {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 38px;
    padding-right: 23px;
}

.footer-links a {
    display: block;
    color: #fff;
    font-size: 12px;
    line-height: 23px;
    font-weight: 700;
}

.footer-middle {
    height: 208px;
    background: #030c51;
}

.footer-middle-inner {
    display: flex;
    align-items: center;
}

.contact-details {
    width: 405px;
    padding-left: 26px;
    font-size: 16px;
    line-height: 26px;
}

.contact-details .phone {
    margin-top: 18px;
}

.social-links {
    display: flex;
    align-items: center;
    gap: 36px;
    margin-left: 18px;
}

.social-links a {
    color: #fff;
    font-size: 28px;
}

.copyright {
    height: 44px;
    background: #f5f5f5;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1650px) {
    .header-inner,
    .donation-shell,
    .footer-inner {
        max-width: 94%;
    }

    .donation-shell {
        grid-template-columns: minmax(0, 1.35fr) minmax(480px, 1fr);
    }

    .promo-panel {
        width: 100%;
    }

    .donation-card {
        width: 100%;
    }
}

@media (max-width: 1200px) {
    .site-header {
        height: 175px;
    }

    .header-right {
        width: 510px;
    }

    .header-icons {
        margin-top: 45px;
    }

    .donation-area {
        padding-top: 45px;
    }

    .donation-shell {
        grid-template-columns: 1fr;
        max-width: 900px;
    }

    .donation-card {
        height: auto;
        min-height: 950px;
    }

    .promo-panel {
        height: auto;
        aspect-ratio: 688 / 930;
    }
}

@media (max-width: 767px) {
    .site-header {
        height: auto;
        min-height: 145px;
    }

    .header-inner {
        max-width: 92%;
    }

    .brand-area {
        position: relative;
        left: 0;
        top: 18px;
        width: 230px;
    }

    .lums-logo {
        width: 220px;
    }

    .lums-slogan {
        width: 170px;
        margin-left: 24px;
    }

    .header-right {
        position: absolute;
        right: 0;
        top: 10px;
        width: auto;
    }

    .utility-nav {
        display: none;
    }

    .header-icons {
        margin-top: 0;
        gap: 15px;
    }

    .header-icons a {
        font-size: 22px;
    }

    .donation-area {
        min-height: auto;
        padding: 30px 0 45px;
    }

    .donation-shell {
        max-width: 94%;
    }

    .donation-card {
        padding: 28px 24px 38px;
        min-height: auto;
    }

    .steps {
        width: 100%;
        grid-template-columns: 55px 1fr 55px;
    }

    .circle {
        width: 42px;
        height: 42px;
    }

    .donation-card h1 {
        margin: 35px 0 38px;
        font-size: 26px;
    }

    .field-group label {
        font-size: 15px;
    }

    .form-control-custom {
        height: 55px;
    }

    .once-button {
        height: 52px;
    }

    .promo-panel {
        border-radius: 24px;
    }

    .footer-top {
        height: auto;
        padding: 35px 0;
    }

    .footer-top .footer-inner,
    .footer-middle-inner {
        display: block;
        height: auto;
    }

    .footer-brand {
        width: auto;
        padding-left: 0;
        margin-bottom: 25px;
    }

    .footer-brand img {
        width: 245px;
    }

    .footer-links {
        grid-template-columns: repeat(2, 1fr);
        padding-right: 0;
        gap: 20px;
    }

    .footer-middle {
        height: auto;
        padding: 35px 0;
    }

    .contact-details {
        width: auto;
        padding-left: 0;
    }

    .social-links {
        margin: 28px 0 0;
        gap: 25px;
    }

    .copyright {
        height: auto;
        min-height: 55px;
        padding: 10px 20px;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .steps {
        grid-template-columns: 45px 1fr 45px;
    }

    .step-title {
        font-size: 9px;
    }

    .step-name {
        font-size: 10px;
    }

    .donation-card h1 {
        font-size: 23px;
    }

    .footer-links {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   STEP 1 — PROGRAMME CHOICE + PRODUCTS
   ========================================================= */
.step1-card {
    height: auto;
    min-height: 0;
}

.programme-choice {
    margin-bottom: 24px;
}

.programme-choice__label {
    margin: 0 0 12px;
    color: #626262;
    font-size: 15px;
    line-height: 22px;
}

.programme-radio {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    width: 100%;
    margin-bottom: 10px;
    padding: 14px 17px;
    border: 1px solid #cbd4e1;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.programme-radio:last-child {
    margin-bottom: 0;
}

.programme-radio input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.programme-radio__control {
    position: relative;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border: 2px solid #062b87;
    border-radius: 4px;
    background: #fff;
}

.programme-radio__control::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: #062b87;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .18s ease, transform .18s ease;
}

.programme-radio input:checked + .programme-radio__control::after {
    opacity: 1;
    transform: scale(1);
}

.programme-radio input:checked ~ .programme-radio__content {
    color: #062b87;
}

.programme-radio:has(input:checked) {
    border-color: #062b87;
    background: #f7f9fd;
    box-shadow: 0 2px 7px rgba(6, 43, 135, .08);
}

.programme-radio input:focus-visible + .programme-radio__control {
    outline: 3px solid rgba(25, 198, 232, .28);
    outline-offset: 2px;
}

.programme-radio__content {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 2px;
    min-width: 0;
}

.programme-radio__eyebrow {
    flex-basis: 100%;
    color: #a88b4d;
    font-size: 14px;
    line-height: 19px;
    font-weight: 900;
    letter-spacing: 1.6px;
}

.programme-radio__name {
    color: #73777e;
    font-size: 17px;
    line-height: 23px;
    font-style: italic;
}

/* Contribution amount selector */
.contribution-selection {
    margin-bottom: 24px;
}

.contribution-selection__label {
    margin: 0 0 12px;
    color: #626262;
    font-size: 17px;
    line-height: 23px;
}

.contribution-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contribution-option {
    position: relative;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: stretch;
    min-height: 86px;
    overflow: hidden;
    border: 1px solid #d9e0ea;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 2px 7px rgba(20, 48, 91, .045);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.contribution-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.contribution-option__amount {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 12px 14px;
    background: #0bc5ef;
    color: #fff;
    font-size: 23px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.25px;
    transition: background-color .2s ease, color .2s ease;
}

.contribution-option__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 13px 18px 13px 20px;
    background: #fff;
}

.contribution-option__title {
    display: block;
    margin-bottom: 4px;
    color: #162e56;
    font-size: 17px;
    line-height: 22px;
    font-weight: 800;
}

.contribution-option__description {
    display: block;
    color: #707782;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.contribution-option:hover {
    border-color: #0bc5ef;
    box-shadow: 0 5px 15px rgba(20, 48, 91, .09);
    transform: translateY(-1px);
}

.contribution-option:has(input:checked) {
    border-color: #062b87;
    box-shadow: 0 0 0 1px #062b87, 0 6px 16px rgba(6, 43, 135, .12);
}

.contribution-option:has(input:checked) .contribution-option__amount {
    background: #062b87;
}

.contribution-option:has(input:checked) .contribution-option__content {
    background: #f8faff;
}

.contribution-option input:focus-visible + .contribution-option__amount {
    outline: 3px solid rgba(25, 198, 232, .35);
    outline-offset: -4px;
}

@media (max-width: 767px) {
    .contribution-option { grid-template-columns: 96px minmax(0, 1fr); min-height: 82px; }
    .contribution-option__amount { padding: 10px 8px; font-size: 19px; }
    .contribution-option__content { padding: 12px 13px 12px 15px; }
    .contribution-option__title { font-size: 16px; line-height: 21px; }
    .contribution-option__description { font-size: 13px; line-height: 18px; }
}
@media (max-width: 420px) {
    .contribution-option { grid-template-columns: 88px minmax(0, 1fr); }
    .contribution-option__amount { font-size: 18px; }
    .contribution-option__content { padding-left: 13px; padding-right: 11px; }
    .contribution-option__title { font-size: 15px; }
    .contribution-option__description { font-size: 12.5px; line-height: 17px; }
}

.additional-contribution {
    display: grid;
    grid-template-columns: 1fr 160px;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 18px 15px;
    border: 1px solid #cbd4e1;
    border-radius: 5px;
    background: #f7f8fb;
}


.additional-contribution__content label {
    display: block;
    margin: 0;
    color: #162e56;
    font-size: 17px;
    line-height: 23px;
    font-weight: 900;
}


.additional-contribution__field {
    display: flex;
    align-items: center;
    height: 58px;
    border: 1px solid #8b9bb8;
    border-radius: 5px;
    background: #fff;
    overflow: hidden;
}

.additional-contribution__field span {
    padding: 0 10px;
    color: #8998b0;
    font-size: 15px;
    font-weight: 700;
}

.additional-contribution__field input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 10px 0 4px;
    border: 0;
    outline: 0;
    color: #263f69;
    background: transparent;
    font-family: inherit;
    font-size: 17px;
    font-style: italic;
}

.additional-contribution__field:focus-within {
    border-color: #062b87;
    box-shadow: 0 0 0 2px rgba(6, 43, 135, .1);
}

.total-due {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
    color: #162e56;
    font-size: 18px;
    line-height: 25px;
    font-weight: 900;
}

.total-due strong {
    color: #062b87;
    font-size: 18px;
    font-weight: 900;
}

.step1-card .continue-wrap {
    margin-top: 25px;
}

@media (max-width: 767px) {
    .programme-radio {
        padding: 13px 14px;
    }

    .additional-contribution {
        grid-template-columns: 1fr;
    }

    .additional-contribution__field {
        grid-column: 1;
        width: 100%;
    }

    .total-due {
        font-size: 17px;
    }
}

/* =========================================================
   STEP 1 RIGHT-HAND IMPACT PANEL
   ========================================================= */
.impact-panel-v2 {
    width: 100%;
    min-height: 1079px;
    overflow: hidden;
    border-radius: 36px;
    background: #172c53;
    color: #fff;
}

.impact-photo-v2 {
    width: 100%;
    padding: 25px 56px 0;
}

.impact-photo-v2 img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.impact-copy-v2 {
    padding: 28px 56px 38px;
    color: #fff;
}

.impact-copy-v2 h2 {
    margin: 0 0 17px;
    color: #fff;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
}

.impact-copy-v2 p {
    margin: 0 0 16px;
    color: #fff;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 400;
}

.impact-copy-v2 .impact-lead-v2 {
    margin-bottom: 17px;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 700;
}

.impact-rule-v2 {
    height: 1px;
    margin: 24px 0 28px;
    background: rgba(255, 255, 255, .72);
}

@media (max-width: 1650px) {
    .impact-photo-v2 {
        padding-left: 56px;
        padding-right: 56px;
    }

    .impact-copy-v2 {
        padding-left: 56px;
        padding-right: 56px;
    }
}

@media (max-width: 1200px) {
    .impact-panel-v2 {
        min-height: 0;
    }

    .impact-photo-v2 {
        padding: 25px 40px 0;
    }

    .impact-copy-v2 {
        padding: 28px 40px 38px;
    }

}

@media (max-width: 767px) {
    .impact-panel-v2 {
        border-radius: 28px;
    }

    .impact-photo-v2 {
        padding: 24px 24px 0;
    }

    .impact-copy-v2 {
        padding: 24px 24px 32px;
    }

}

/* =========================================================
   STEP 1 — PROGRAMME READ MORE / MODALS
   ========================================================= */
.impact-read-more {
    display: inline;
    margin: 0 0 0 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #062b87;
    font: inherit;
    font-style: normal;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.impact-read-more:hover,
.impact-read-more:focus-visible {
    color: #19c6e8;
}

.impact-read-more:focus-visible {
    outline: 2px solid #19c6e8;
    outline-offset: 3px;
}

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

.impact-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility 0s linear .22s;
}

.impact-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .22s ease;
}

.impact-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 25, 66, .72);
    backdrop-filter: blur(3px);
}

.impact-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: min(760px, calc(100vh - 60px));
    overflow-y: auto;
    padding: 42px 46px 44px;
    border-radius: 20px;
    background: #fff;
    color: #444;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.impact-modal__close {
    position: absolute;
    top: 13px;
    right: 17px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #062b87;
    font-family: Arial, sans-serif;
    font-size: 34px;
    line-height: 38px;
    cursor: pointer;
}

.impact-modal__close:hover,
.impact-modal__close:focus-visible {
    color: #19c6e8;
}

.impact-modal__close:focus-visible {
    outline: 2px solid #19c6e8;
    outline-offset: 2px;
}

.impact-modal__dialog h2 {
    margin: 0 40px 22px 0;
    color: #062b87;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
}

.impact-modal__dialog p {
    margin: 0 0 17px;
    color: #555;
    font-size: 17px;
    line-height: 1.6;
    font-weight: 400;
}

.impact-modal__dialog p:last-child {
    margin-bottom: 0;
}

.impact-modal__dialog .impact-modal__lead {
    color: #062b87;
    font-weight: 700;
}

@media (max-width: 767px) {
    .impact-modal {
        padding: 18px;
    }

    .impact-modal__dialog {
        max-height: calc(100vh - 36px);
        padding: 38px 25px 30px;
        border-radius: 16px;
    }

    .impact-modal__dialog h2 {
        font-size: 24px;
    }

    .impact-modal__dialog p {
        font-size: 16px;
    }
}

/* =========================================================
   STEP 2 — DETAILS & PAYMENT (donor form + PayPal)
   ========================================================= */
.step2-head { position:relative; text-align:center; margin:30px 0 26px; }
.step2-head h1 { margin:0; }
.step2-back { position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:40px; height:40px; border-radius:50%; border:1px solid #cbd4e1;
    display:flex; align-items:center; justify-content:center; color:#062b87; text-decoration:none; }
.step2-back:hover { background:#f2f5fb; }
.gala-field-row { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:6px; }
.gala-field-row .form-group-inline { flex:1 1 200px; min-width:0; margin-bottom:16px; }
.gala-field-row.cols-2 .form-group-inline { flex:1 1 260px; }
.form-group-inline { margin-bottom:16px; }
.form-group-inline .label-top { display:block; font-size:15px; color:#626262; margin-bottom:7px; }
#secFormSelection .form-control, #secFormSelection select.form-control {
    width:100%; height:54px; padding:0 14px; border:1px solid #cfcfcf; border-radius:5px;
    background:#fff; color:#454545; font-family:inherit; font-size:16px; }
#secFormSelection select.form-control { text-align:left; }
#secFormSelection .form-control:focus { border-color:#5574ae; box-shadow:0 0 0 1px #5574ae; outline:none; }
.cover-fee-box { background:#f7f8fb; border:1px solid #cbd4e1; border-radius:6px; padding:14px 16px; margin:8px 0; }
.cover-fee-box label { display:flex; align-items:flex-start; gap:10px; cursor:pointer; margin:0; font-size:14px; color:#454545; line-height:1.5; }
.cover-fee-box input { width:18px; height:18px; margin-top:2px; flex:0 0 auto; }
.charge-total { text-align:right; margin-top:10px; font-size:15px; color:#062b87; font-weight:700; }
.pay-note { font-size:13px; color:#626262; text-align:center; margin:16px 0 6px; }
#paypal-button-container { margin:12px 0 8px; }

/* DB helping-text content inside the dynamic right panel */
.impact-copy-v2 #promoText img,
.impact-copy-v2 .txt-int-img { max-width:100%; height:auto; display:block; border-radius:10px; margin:4px 0 18px; }
.impact-copy-v2 #promoText p { color:#fff; font-size:17px; line-height:1.5; margin:0 0 16px; }
.impact-copy-v2 #promoText h3 { color:#fff; font-size:20px; margin:0 0 12px; font-weight:700; }

/* =========================================================
   STEP INDICATOR — match the other gala pages (_step_indicator.php)
   ========================================================= */
.pay-steps { display:flex; align-items:flex-start; justify-content:center; max-width:520px; margin:0 auto 28px auto; }
.pay-step { flex:0 0 auto; width:auto; padding:0 6px; text-align:center; }
.pay-step-circle { width:38px; height:38px; margin:0 auto; border:2px solid #cfd4e0; border-radius:50%;
    background:#fff; color:#9aa1b2; font-size:15px; font-weight:700; line-height:34px;
    display:flex; align-items:center; justify-content:center; transition:all .2s ease; }
.pay-step-label { margin-top:8px; color:#9aa1b2; font-size:11px; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; }
.pay-step-label span { display:block; font-size:13px; font-weight:600; text-transform:none; letter-spacing:0; white-space:nowrap; }
.pay-step-bar { flex:1 1 auto; height:2px; margin:18px -8px 0 -8px; background:#cfd4e0; }
.pay-step-active .pay-step-circle, .pay-step-done .pay-step-circle { border-color:#002581; background:#002581; color:#fff; }
.pay-step-active .pay-step-label, .pay-step-active .pay-step-label span,
.pay-step-done .pay-step-label, .pay-step-done .pay-step-label span { color:#002581; }
.pay-step-bar-done { background:#002581; }

/* =========================================================
   PAY4 — "NUMBER OF STUDENTS" SELECTOR ON AMOUNT CARDS + ZAKAT
   (scoped with .has-students so the pay3 layout is unaffected)
   ========================================================= */
.contribution-options.has-students .contribution-option {
    grid-template-columns: 132px minmax(0, 1fr) auto;
}

.contribution-option__students {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 22px;
    background: #fff;
    border-left: 1px solid #eef1f5;
    transition: background-color .2s ease;
}

.contribution-option:has(input:checked) .contribution-option__students {
    background: #f8faff;
}

.contribution-option__students-label {
    color: #8a929e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
}

.contribution-option__students-select {
    height: 40px;
    min-width: 74px;
    padding: 0 12px;
    border: 1px solid #c4cdda;
    border-radius: 6px;
    background: #fff;
    color: #162e56;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.contribution-option__students-select:focus {
    outline: none;
    border-color: #062b87;
    box-shadow: 0 0 0 2px rgba(6, 43, 135, .12);
}

@media (max-width: 767px) {
    .contribution-options.has-students .contribution-option { grid-template-columns: 96px minmax(0, 1fr) auto; }
    .contribution-option__students { padding: 10px 12px; }
    .contribution-option__students-select { min-width: 62px; height: 36px; font-size: 15px; }
}

@media (max-width: 480px) {
    .contribution-options.has-students .contribution-option { grid-template-columns: 78px minmax(0, 1fr); }
    .contribution-option__students {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-end;
        gap: 10px;
        padding: 8px 14px;
        border-left: 0;
        border-top: 1px solid #eef1f5;
    }
}

/* Classify donation as Zakat */
.gala-zakat {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid #cbd4e1;
    border-radius: 6px;
    background: #f7f8fb;
}

.gala-zakat label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #454545;
    font-size: 15px;
    cursor: pointer;
}

.gala-zakat input {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}

/* =========================================================
   FAQ SECTION (copied from the pay6 template; self-contained
   accordion so it works without Bootstrap)
   ========================================================= */
.faq-section {
    margin-top: 48px;
    padding-top: 42px;
    border-top: 1px solid #dbe2ec;
}

.faq-section__heading {
    margin-bottom: 24px;
}

.faq-section__eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #0bc5ef;
    font-size: 13px;
    line-height: 18px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.faq-section__heading h2 {
    margin: 0 0 8px;
    color: #162e56;
    font-size: 28px;
    line-height: 35px;
    font-weight: 900;
}

.faq-item {
    margin-bottom: 10px;
    border: 1px solid #d5ddea;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
}

.faq-header {
    margin: 0;
}

.faq-button {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 18px 48px 18px 19px;
    border: 0;
    text-align: left;
    color: #162e56;
    background: #f8faff;
    font-family: inherit;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    cursor: pointer;
}

.faq-item.is-open .faq-button {
    color: #062b87;
    background: #f1f5fc;
}

.faq-button::after {
    content: "";
    position: absolute;
    right: 19px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23062b87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    transition: transform .2s ease;
}

.faq-item.is-open .faq-button::after {
    transform: translateY(-50%) rotate(180deg);
}

.faq-button:focus-visible {
    outline: 2px solid #19c6e8;
    outline-offset: -2px;
}

/* Collapsible body: animated height with the grid 0fr/1fr technique */
.faq-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s ease;
}

.faq-item.is-open .faq-collapse {
    grid-template-rows: 1fr;
}

.faq-answer {
    min-height: 0;
    overflow: hidden;
    padding: 0 19px;
    color: #56677f;
    background: #fff;
    font-size: 15px;
    line-height: 24px;
    transition: padding .28s ease;
}

.faq-item.is-open .faq-answer {
    padding: 18px 19px 20px;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .faq-section {
        margin-top: 38px;
        padding-top: 34px;
    }

    .faq-section__heading h2 {
        font-size: 24px;
        line-height: 31px;
    }

    .faq-button {
        padding: 16px 43px 16px 15px;
        font-size: 15px;
    }

    .faq-item.is-open .faq-answer {
        padding: 15px;
        font-size: 14px;
        line-height: 22px;
    }
}