@media (min-width: 768px) and (max-width: 1230px) {
    body.home-v2-page {
        background-color: #f1f5f9;
    }

    body.home-v2-page #wrapper {
        max-width: 48rem;
        margin: 0 auto;
        background-color: #fff;
        position: relative;
        overflow: hidden;
    }

    body.home-v2-page .hv2-header,
    body.home-v2-page .hv2-fullmenu {
        max-width: 48rem;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }

    body.home-v2-page .hv2-fullmenu {
        width: 48rem;
    }

    .home-children__carousel.swiper {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .home-campaigns__grid.swiper-wrapper .swiper-slide {
        width: 50rem;
    }

    .hv2-card-field__input,
    .hv2-stripe-element {
        height: 46px;
        min-height: 46px;
        max-height: 46px;
        box-sizing: border-box;
    }
}

.home-v2-page,
.home-v2-page *:not([class*="hv2-nav__link"]):not(button):not(input):not(select):not(textarea) {
    font-family: var(--pa-font-default);
}

.home-v2-page h1,
.home-hero__headline-wrapper h1,
.home-hero__headline-wrapper h2,
.home-gallery__title,
.home-donation-cta__title,
.home-title,
.home-sponsors__title,
.home-campaigns__others-title,
.home-faq__title,
.home-cta-banner__quote {
    font-family: var(--pa-font-headline) !important;
}

@media (max-width: 1230px) {
    .home-campaigns__others-title {
        font-family: var(--pa-font-default) !important;
    }
}

/* Header & drawer explicitly use Inter */
.hv2-header,
.hv2-header *,
.hv2-drawer,
.hv2-drawer * {
    font-family: var(--pa-font-default);
    box-shadow: none !important;
}

.home-hero {
    position: relative;
    min-height: 80rem;
    display: flex;
    align-items: center;
    padding: 20rem 0 12rem;
    overflow: hidden;
}

.home-hero--v2 {
    min-height: 80vh;
    padding: 12rem 0 16rem;
}

.home-hero>.pa-container {
    width: 100%;
    flex: 1 1 100%;
}

.home-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.home-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transform: scale(1);
    transform-origin: 100% 0%;
}

.home-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 80, 30, 0.15) 100%);
}

/* ── Simplified hero content: title + subtitle + CTA + trust ── */
.home-hero .home-hero__content {
    position: relative;
    z-index: 1;
    max-width: 64rem;
    color: #fff;
    text-align: left;
    margin-left: 0;
    margin-right: auto;
    animation: fadeIn 1s ease-out forwards;
}

.home-hero .home-hero__title {
    font-size: 36px;
    line-height: 1.4;
    margin: 0 0 1.5rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    color: #fff;
    text-align: left;
}

.home-hero .home-hero__subtitle {
    font-size: 1.8rem;
    line-height: 1.55;
    margin: 0 0 2.5rem;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 400;
    max-width: 100%;
    text-align: left;
}

.home-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.6rem 4rem;
    background: var(--pa-primary);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.6rem;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    font-family: inherit;
    text-decoration: none;
    line-height: 1.2;
}

.home-hero__cta:active {
    transform: translateY(0);
}

.home-hero__trust {
    margin: 1.5rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.92);
    padding-left: 0.5rem;
    width: 40rem;
    justify-content: center;
}

.home-hero__trust-icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    color: #fff;
}

.home-hero__trust-icon svg {
    width: 2rem;
    height: 2rem;
}

/* ── VERSION 2: CROWDFUNDING STYLE ── */
.home-hero--v2 .home-hero__bg img {
    object-position: center 30%;
}

.home-hero--v2 .home-hero__overlay {
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.home-hero--v2 .pa-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.home-hero__v2-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #fff;
    margin-bottom: 5rem;
    width: 100%;
}

.home-hero__v2-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.6rem;
    background: white;
    color: var(--pa-primary);
    border-radius: 999px;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.home-hero__v2-title {
    font-family: var(--pa-font-headline) !important;
    font-size: clamp(2.8rem, 6vw, 6rem);
    font-weight: 700;
    line-height: 1.15;
    max-width: 100rem;
    margin: 0 auto;
}

.home-hero__v2-stats {
    position: relative;
    z-index: 2;
    margin-top: -2rem;
    width: 100%;
    max-width: 1100px;
}

.home-hero__v2-stats .sc-stats__card {
    margin: 0 auto;
    border-radius: 32px;
    padding: 3.5rem 5rem;
    border: none;
    background: #fff;
}

@media (max-width: 1230px) {
    .home-hero {
        position: relative;
        min-height: 81.8rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0;
        background: #000;
        overflow: hidden;
    }

    .home-stories__card-visual {
        height: 24rem;
    }

    .home-hero>.pa-container {
        position: relative;
        z-index: 1;
        flex: 0 0 auto;
        padding: 0 2rem 2.4rem;
    }

    .home-hero__bg {
        position: absolute;
        inset: 0;
        height: 100%;
        margin: 0;
    }

    /* How tall this box is decides how close the photo reads. object-fit: cover
       enlarges the image until it covers the box, so a box the full height of an
       81.8rem hero on a ~39rem wide phone had to blow the photo up far enough
       that only a face was left. Giving the box 76% of that height loosens the
       crop while the section keeps its full height — the two are separate knobs.

       Scaling the image down instead cannot work: below cover's own scale it
       stops filling the box and the black behind it shows at the edges.

       The mask fades the photo's last stretch into that same black, so its
       bottom edge reads as a fade rather than a cut. It lives on the image and
       not on .home-hero__overlay because the overlay is restyled for
       .home-hero--v2 at a higher specificity, and the seam has to close in both
       versions. Percentages here are of the image box, not the hero. */
    .home-hero__bg img {
        object-position: 65%;
        height: 76%;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
    }

    .home-hero__overlay {
        display: block;
        background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0) 40%,
                rgba(0, 0, 0, 0.55) 70%,
                rgba(0, 0, 0, 0.9) 100%);
    }

    /* Content overlaid at the bottom of the image */
    .home-hero .home-hero__content {
        max-width: 100%;
        color: #fff;
        text-align: center;
        margin: 0 auto;
        padding: 0;
    }

    .home-hero .home-hero__title {
        font-size: 2.4rem;
        line-height: 1.25;
        font-weight: 500;
        color: #fff;
        text-align: center;
        margin: 0 0 1.4rem;
        letter-spacing: -0.07em;
    }

    .home-hero .home-hero__subtitle {
        font-size: 1.2rem;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.92);
        font-weight: 400;
        text-align: center;
        max-width: 100%;
        margin: 0 0 2.4rem;
        letter-spacing: -0.05em;
    }

    .home-hero__cta {
        display: flex;
        width: 100%;
        padding: 1.8rem 2rem;
        font-size: 1.6rem;
        border-radius: 999px;
    }

    .home-hero__trust {
        width: 100%;
        margin: 1.4rem 0 0;
        padding: 0;
        font-size: 1.4rem;
        color: rgba(255, 255, 255, 0.88);
        justify-content: center;
    }

    .home-hero__trust-icon {
        color: rgba(255, 255, 255, 0.88);
    }
}

/* Hero Donation Card */
.home-hero__card-col {
    display: flex;
    justify-content: center;
}

@media (min-width: 1230px) {
    .home-hero__card-col {
        justify-content: flex-end;
    }
}

.home-hero__card {
    background: linear-gradient(180deg, #FFFFFF 0%, #E4FFEE 100%);
    border-radius: 2.4rem;
    padding: 3rem;
    width: 100%;
    max-width: 60rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    animation: fadeInUp 1s ease-out forwards;
}

@media (min-width: 1230px) {
    .home-hero__card {
        padding: 2.5rem;
    }
}

.home-hero__card-badge {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    border: 1.5px solid var(--pa-primary);
    border-radius: 999px;
    color: var(--pa-primary);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 0.75rem;
    background: #DCFAE6;
}

.home-hero__card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    margin-bottom: 2rem;
}

.home-hero__card-form-border {
    background: white;
    border-radius: 2.4rem;
    padding: 2.4rem;
    border: 1px solid #cfcfcf;
    margin-bottom: 2rem;
}

.home-hero__card-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--pa-text-primary);
    margin-bottom: 0;
    margin-top: 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
    text-align: center;
}

.home-hero__card-avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--pa-primary-light);
    background: var(--pa-primary-light);
}

.home-hero__card-avatar img,
.home-hero__card-avatar svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-hero__card-tabs {
    background: #0495510F;
    padding: 0.6rem;
    border-radius: 999px;
    display: flex;
    gap: 0.25rem;
    border: 1px solid rgba(14, 138, 63, 0.05);
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.home-hero__tab {
    flex: 1;
    padding: 1.6rem 2.4rem;
    border-radius: 999px;
    text-align: center;
    font-size: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.home-hero__tab--active {
    background: linear-gradient(90deg, #FFFFFF 0%, #E4FFEE 100%);
    color: var(--pa-text-primary-active);
    font-weight: 700;
    border: 1px solid transparent;
}

.home-hero__tab:not(.home-hero__tab--active) {
    color: var(--pa-text-secondary);
    font-weight: 600;
}

.home-hero__tab:not(.home-hero__tab--active):hover {
    background: rgba(255, 255, 255, 0.4);
}

.home-hero__field-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 1230px) {
    .home-hero__field-row {
        grid-template-columns: 1fr 1fr;
    }
}

.home-hero__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (max-width: 1230px) {
    .home-hero__field {
        margin-bottom: 0;
    }
}

.home-hero__label {
    font-size: 14px;
    font-weight: 700;
    color: var(--pa-text-primary);
    margin-left: 4px;
}

.home-hero__input {
    width: 100%;
    padding: 12px 20px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--pa-primary-light);
    outline: none;
    transition: all 0.2s;
    font-size: 16px;
    font-weight: 600;
    color: var(--pa-text-primary);
    font-family: inherit;
    box-sizing: border-box;
}

.home-hero__input--amt {
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 700;
}

/* Amount preset buttons */
.home-hero__amount-presets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.home-hero__preset {
    padding: 1.6rem;
    border-radius: 999px;
    border: 1.5px solid var(--pa-border-color);
    background: #fff;
    font-size: 16px;
    font-weight: 400;
    color: var(--pa-text-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    text-align: center;
    white-space: nowrap;
}

.home-hero__preset:hover {
    border-color: var(--pa-primary);
    color: var(--pa-primary);
}

.home-hero__preset--active {
    border-color: 2px solid var(--pa-primary);
    color: var(--pa-primary);
    font-weight: 700;
    background: #ECFDF3;
}

/* Custom Rp amount row */
.home-hero__amount-custom {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--pa-border-color);
    border-radius: 999px;
    padding: 12px 16px;
    gap: 8px;
    margin-top: 4px;
}

.home-hero__amount-prefix {
    font-size: 15px;
    font-weight: 600;
    color: var(--pa-text-secondary);
    flex-shrink: 0;
}

.home-hero__amount-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--pa-text-primary);
    font-family: inherit;
    text-align: right;
    width: 100%;
    -moz-appearance: textfield;
}

.home-hero__amount-input::-webkit-inner-spin-button,
.home-hero__amount-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.home-hero__input:focus {
    background: #fff;
    border-color: rgba(14, 138, 63, 0.2);
}

.home-hero__input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.home-hero__submit {
    width: 40rem;
    padding: 16px 24px;
    background: var(--pa-primary);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 20px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 12px;
    font-family: inherit;
}

@media (max-width: 1230px) {
    .home-hero__submit {
        width: 100%;
        font-size: 16px;
        padding: 12px 20px;
    }
}

.home-hero__submit:hover {
    color: var(--pa-primary);
    background: white;
}

.home-hero__submit:active {
    transform: scale(0.98);
}

/* --- KEYFRAMES --- */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================================================== */

/* --- SPONSOR CTA SECTION --- */
.home-sponsor-cta {
    padding: 6rem 0 0;
    background-color: #fff;
    overflow: hidden;
}

@media (max-width: 1230px) {
    .home-sponsor-cta {
        padding: 0;
    }
}

.home-sponsor-cta__card {
    border-radius: 4.8rem;
    position: relative;
    overflow: visible;
    padding: 0 2rem;
    background: linear-gradient(180deg, #fff 0%, #e8f5ec 100%);
}

@media (min-width: 1230px) {
    .home-sponsor-cta__card {
        padding: 5rem 4rem;
    }
}

.home-sponsor-cta__cloud {
    position: absolute;
    pointer-events: none;
}

.home-sponsor-cta__cloud--mobile {
    display: none;
}

.home-sponsor-cta__cloud--1 {
    top: -1rem;
    left: -15%;
    width: 18rem;
}

@media (max-width: 1230px) {
    .home-sponsor-cta__cloud--1 svg {
        width: 60%;
    }
}

.home-sponsor-cta__cloud--2 {
    top: -2rem;
    width: 22rem;
}

.home-sponsor-cta__cloud--3 {
    top: 45%;
    right: -15%;
    width: 13rem;
    transform: translateY(-50%);
}

@media (min-width: 1230px) {
    .home-sponsor-cta__cloud--desktop svg {
        width: 100%;
        height: auto;
        display: block;
    }

    .home-sponsor-cta__cloud--desktop svg path {
        fill: #ECF5EE;
    }

    .home-sponsor-cta__cloud--desktop.home-sponsor-cta__cloud--1 {
        width: 20rem;
        top: 5%;
    }

    .home-sponsor-cta__cloud--desktop.home-sponsor-cta__cloud--2 {
        width: 18rem;
        top: 50%;
    }

    .home-sponsor-cta__cloud--desktop.home-sponsor-cta__cloud--3 {
        width: 20rem;
        top: 40%;
    }
}

.home-sponsor-cta__content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1.5rem;
    gap: 2.4rem;
}

.home-sponsor-cta__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
    width: 100%;
}

/* Text left, polaroid right — matches the two-column CTA design. */
@media (min-width: 1230px) {
    .home-sponsor-cta__content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 4rem;
        text-align: left;
        padding: 0;
    }

    .home-sponsor-cta__text {
        align-items: flex-start;
        gap: 2rem;
    }
}

.home-sponsor-cta__title {
    font-size: 2.25rem;
    margin-bottom: 2.5rem;
    line-height: 1.2;
}

@media (min-width: 1230px) {
    .home-sponsor-cta__title {
        font-size: 3rem;
    }
}

/* Desktop size/line-height come from .home-title (40px) — declared later in this file. */

.home-sponsor-cta__title-highlight {
    color: var(--pa-primary);
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--pa-font-headline) !important;
}

.home-sponsor-cta__title-text {
    color: #0f172a;
    display: block;
    font-family: var(--pa-font-headline) !important;
}

.home-sponsor-cta__desc {
    font-size: 1.6rem;
    line-height: 1.7;
    color: #333;
    margin: 0;
    max-width: 52rem;
}

@media (min-width: 1230px) {
    .home-sponsor-cta__desc {
        font-size: 1.8rem;
    }
}

.home-sponsor-cta__cta {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: 1.4rem 2.4rem;
    background: var(--pa-primary);
    color: #fff;
    border: 1px solid var(--pa-primary);
    border-radius: 999px;
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.home-sponsor-cta__cta:hover {
    background: #fff;
    color: var(--pa-primary);
}

.home-sponsor-cta__cta:active {
    transform: scale(0.98);
}

.home-sponsor-cta__cta-icon {
    display: inline-flex;
    align-items: center;
}

.home-sponsor-cta__cta-icon svg {
    width: 1.6rem;
    height: 1.6rem;
    display: block;
}

.home-sponsor-cta__img-wrap {
    max-width: 38rem;
    width: 100%;
    margin: 0 auto;
    top: -50px;
}

@media (min-width: 1230px) {
    .home-sponsor-cta__img-wrap {
        max-width: 720px;
        margin: 0 0 0 auto;
        top: auto;
    }
}

.home-sponsor-cta__img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    transition: transform 0.5s ease;
}

@media (max-width: 1230px) {
    .home-sponsor-cta {
        background-color: #ffffff;
        padding: 3rem 0 0;
    }

    .home-sponsor-cta__card {
        background: transparent;
        padding: 5rem 0;
        border-radius: 0;
        overflow: visible;
        position: relative;
    }

    .home-sponsor-cta__cloud {
        position: absolute;
        opacity: 1;
        z-index: 20;
        pointer-events: none;
    }

    .home-sponsor-cta__cloud--mobile {
        display: block;
    }

    .home-sponsor-cta__cloud--desktop {
        display: none;
    }

    .home-sponsor-cta__cloud--1 {
        top: 4rem;
        left: 0rem;
        width: 13rem;
    }

    .home-sponsor-cta__cloud--2 {
        top: -2rem;
        right: 15rem;
        width: 0rem;
    }

    .home-sponsor-cta__cloud--3 {
        top: -2rem;
        left: 0%;
        width: 4rem;
        transform: none;
    }

    .home-sponsor-cta__content {
        padding: 0 1.6rem 1.6rem;
        gap: 2rem;
    }

    .home-sponsor-cta__img-wrap {
        order: 3;
        max-width: 100%;
        background: linear-gradient(360deg, #E9F5EC 0%, #FFFFFF 100%);

        border-radius: 2.4rem;
        padding: 0 1.6rem 1.6rem;
        overflow: hidden;
    }

    .home-sponsor-cta__img {
        display: block;
        max-width: 100%;
        height: auto;
    }

    .home-sponsor-cta__text {
        display: contents;
    }

    .home-sponsor-cta__badge {
        order: 1;
        margin: 0;
    }

    .home-sponsor-cta__title {
        order: 2;
        width: 100%;
        font-size: 2.4rem;
        margin-bottom: 0;
        line-height: 1.25;
    }

    .home-sponsor-cta__desc {
        order: 4;
        margin: 0;
        width: 100%;
    }

    .home-sponsor-cta__cta {
        order: 5;
        width: 100%;
        padding: 1.2rem 2rem;
    }
}

/* --- FEATURED CHILDREN SECTION --- */
.home-children {
    padding: 4rem 0;
    background-color: #fff;
}

@media (max-width: 1230px) {
    .home-children {
        padding: 0 0 4rem;
    }
}

.home-children__header {
    text-align: center;
    margin-bottom: 4rem;
}

.home-children__badge {
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.home-children__title {
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.25;
    font-family: var(--pa-font-headline) !important;
    font-weight: 700;
}

.home-children__title-line-1 {
    color: var(--pa-primary);
}

.home-children__title-line-2 {
    color: #333;
}

.home-children__grid {
    margin: 0 auto;
    display: flex;
    padding-top: 0;
}

@media (min-width: 1230px) {
    .home-children__grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.4rem;
        padding-top: 7rem;
        transform: none !important;
        width: auto !important;
    }
}

.home-children__carousel {
    width: 100%;
}

@media (max-width: 1230px) {
    .home-children__carousel.swiper {
        overflow: hidden;
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}

.home-children__controls {
    display: none;
}

@media (max-width: 1230px) {
    .home-children__controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.6rem;
        margin: 2rem 0 0.5rem;
    }

    .home-children__nav {
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        background: var(--pa-primary-light);
        color: var(--pa-primary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        padding: 0;
        flex-shrink: 0;
    }

    .home-children__nav:hover:not(.swiper-button-disabled) {
        background: var(--pa-primary);
        color: #fff;
        border-color: var(--pa-primary);
    }

    .home-children__nav.swiper-button-disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }

    .home-children__nav svg {
        width: 18px;
        height: 18px;
    }

    .home-children__pagination {
        position: relative !important;
        bottom: auto !important;
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        width: auto !important;
    }

    .home-children__pagination .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        background: #cbd5e1;
        opacity: 1;
        margin: 0 !important;
        transition: all 0.2s;
    }

    .home-children__pagination .swiper-pagination-bullet-active {
        background: var(--pa-primary);
        border-radius: 999px;
        width: 16px;
        height: 16px;
    }

    /* Adjust card spacing inside swiper-slide */
    .home-children__grid .home-child-card {
        margin: 4.5rem 0 0;
        height: auto;
    }
}

.home-child-card {
    position: relative;
    width: 100%;
    margin: 4.5rem auto 0;
}

@media (min-width: 1230px) {
    .home-child-card {
        margin-top: 0;
    }
}

.home-child-card__img-focus {
    position: absolute;
    top: -4.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    margin-bottom: 2.4rem;
}

.home-child-card__img-circle {
    width: 248px;
    height: 248px;
    border-radius: 24px;
    border: none;
    background-color: #e9f5ec;
    overflow: hidden;
    transition: transform 0.4s ease;
}

@media (max-width: 1230px) {
    .home-child-card__img-circle {
        width: 178px;
        height: 178px;
        border-radius: 12px;
    }
}

.home-child-card:hover .home-child-card__img-circle {
    transform: scale(1.05);
}

.home-child-card__img-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.home-child-card__body {
    background: var(--pa-gradient-green);
    border-radius: 32px;
    padding: 20rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

@media (max-width: 1230px) {
    .home-child-card__body {
        padding: 14rem 1.5rem 1.5rem;
    }
}

.home-child-card__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), transparent);
    pointer-events: none;
}

.home-child-card__name {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 15px;
    margin-top: 15px;
    text-align: center;
    line-height: 1.2;
    z-index: 10;
}

@media (max-width: 1230px) {
    .home-child-card__name {
        font-size: 16px;
    }
}

.home-child-card__price {
    width: 100%;
    padding-top: 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    z-index: 10;
}

.home-child-card__price-label {
    font-size: 16px;
    font-weight: 600;
    opacity: 0.8;
}

@media (max-width: 1230px) {
    .home-child-card__price-label {
        font-size: 14px;
    }
}

.home-child-card__price-amount {
    font-size: 20px;
    font-weight: 800;
}

@media (max-width: 1230px) {
    .home-child-card__price-amount {
        font-size: 16px;
    }
}

.home-child-card__needs-box {
    background-color: #fff;
    border-radius: 1.6rem;
    padding: 2rem;
    width: 100%;
    margin-bottom: 1.25rem;
    z-index: 10;
}

.home-child-card__needs-header {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.12em;
    margin-bottom: 0.75rem;
}

@media (max-width: 1230px) {
    .home-child-card__needs-header {
        font-size: 14px;
    }
}

.home-child-card__need-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.home-child-card__need-row:last-child {
    margin-bottom: 0;
}

.home-child-card__need-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

@media (max-width: 1230px) {
    .home-child-card__need-info {
        font-size: 14px;
    }
}

.home-child-card__need-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.home-child-card__need-icon i {
    width: 0.875rem;
    height: 0.875rem;
}

.home-need-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.6rem 1.2rem;
    border-radius: 0.5rem;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
}

@media (max-width: 1230px) {
    .home-need-badge {
        font-size: 14px;
    }
}

.home-need-badge--done {
    background-color: #e6f4ea;
    color: var(--pa-primary);
}

.home-need-badge--done i,
.home-need-badge--done svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.home-need-badge--pending {
    background-color: #fff8ee;
    color: #e08000;
}

.home-child-card__submit {
    width: 100%;
    background-color: #fff;
    color: var(--pa-primary);
    font-weight: 800;
    padding: 16px 24px;
    font-size: 16px;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

@media (max-width: 1230px) {
    .home-child-card__submit {
        font-size: 14px;
    }

    /* Mobile: the button reads just "Sponsori" — drop the child's name so it
       doesn't wrap/overflow on the narrow card. */
    .home-child-card__submit-name {
        display: none;
    }
}

.home-child-card__submit:active {
    transform: scale(0.97);
}

.home-children__global-cta {
    margin-top: 4rem;
    display: flex;
    justify-content: center;
}

@media (max-width: 1230px) {
    .home-children__global-cta {
        margin-top: 2rem;
    }
}

.home-children__cta-wrap {
    position: relative;
    display: inline-block;
}

@media (max-width: 1230px) {
    .home-children__global-cta {
        margin-top: 1.5rem;
    }

    .home-children__cta-wrap {
        display: block;
    }

    .home-children__cta-wrap .pa-btn {
        width: 100%;
        justify-content: center;
        font-size: 1.6rem;
        padding: 1.2rem 2rem;
    }
}

.home-children__arrow-decor {
    position: absolute;
    top: 50%;
    right: calc(100% + 4rem);
    transform: translateY(-80%) rotate(-5deg);
    z-index: 20;
    width: 5rem;
    height: 4rem;
    display: none;
}

@media (min-width: 1230px) {
    .home-children__arrow-decor {
        display: block;
    }
}

/* ========================================================================== */

/* --- SHARED UTILITIES --- */
.home-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--pa-primary);
    font-weight: 400;
    font-size: 16px;
    background: linear-gradient(180deg, #FFFFFF 0%, #E4FFEE 100%);
    border: 1px solid #04955133;
    padding: 12px 24px;
    border-radius: 999px;
    justify-content: center;
}

@media (max-width: 1230px) {
    .home-badge {
        font-size: 14px;
        font-weight: 400;
        padding: 6px 12px;
    }
}

.home-badge__dot {
    width: 12px;
    height: 12px;
    background-color: var(--pa-primary);
    border-radius: 50%;
}

.home-title {
    font-size: 24px;
    font-weight: 500;
    color: #0f172a;
    letter-spacing: -0.025em;
    line-height: 1.1;
    font-family: inherit;
    margin-top: 0;
    margin-bottom: 0;
}

@media (min-width: 1230px) {
    .home-title {
        font-size: 40px;
        font-weight: 500;
    }
}

.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    font-weight: 700;
    transition: all 0.3s;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}

.home-btn--primary {
    background-color: var(--pa-primary);
    color: #fff;
    border-radius: 1.5rem;
    font-size: 20px;
    border: none;
}

.home-btn--primary:hover {
    background-color: var(--pa-primary-hover);
}

.home-btn--primary:active {
    transform: scale(0.95);
}

.home-btn--outline {
    background: transparent;
    border: 2px solid rgba(14, 138, 63, 0.2);
    color: var(--pa-primary);
    border-radius: 9999px;
}

.home-btn--outline:hover {
    background-color: var(--pa-primary);
    color: #fff;
}

.home-btn--round-px12 {
    border-radius: 9999px;
    padding: 1.25rem 3rem;
    font-size: 16px;
}

/* --- STORIES SECTION --- */
.home-stories {
    padding: 4rem 0;
    background-color: #fff;
    overflow: hidden;
}

@media (max-width: 1230px) {
    .home-stories {
        padding: 4rem 0;
    }
}

.home-stories__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2.4rem;
    gap: 1rem;
}

@media (min-width: 1230px) {
    .home-stories__header {
        flex-direction: row;
        align-items: flex-end;
    }
}

.home-stories__header-left {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.home-stories__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
    align-items: stretch;
}

@media (max-width: 1230px) {
    .home-stories__card-visual {
        order: -1;
    }
}

@media (min-width: 1230px) {
    .home-stories__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.home-stories__card-text {
    border-radius: 3rem;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: fadeLeft 1s ease-out forwards;
}

@media (min-width: 1230px) {
    .home-stories__card-text {
        padding: 2rem 0;
    }
}

.home-stories__card-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2rem;
    line-height: 1.2;
}

@media (min-width: 1230px) {
    .home-stories__card-title {
        font-size: 3.2rem;
    }
}

.home-stories__card-desc {
    color: #333;
    font-size: 1.6rem;
    line-height: 1.75;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.home-stories__card-desc p {
    color: #333;
    font-size: 1.6rem;
    line-height: 1.75;
}

.home-stories__card-action {
    display: flex;
    justify-content: space-between;
}

.home-stories__cta-all-mobile {
    display: none;
}

@media (max-width: 1230px) {

    .home-stories__header {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-bottom: 2.4rem;
    }

    .home-stories__header-left {
        align-items: center;
        text-align: center;
        gap: 1.2rem;
    }

    .home-stories__cta-all-desktop {
        display: none;
    }

    .home-stories__card-text {
        background: transparent;
        padding: 2rem 0 0;
        border-radius: 0;
    }

    .home-stories__card-title {
        font-size: 1.8rem;
        margin-bottom: 1.4rem;
        color: #0f172a;
        font-weight: 800;
    }

    .home-stories__card-desc {
        font-size: 1.4rem;
        margin-bottom: 1.6rem;
        gap: 1.4rem;
        color: #333;
    }

    .home-stories__card-action {
        flex-direction: column;
        align-items: stretch;
        gap: 2rem;
        width: 100%;
    }

    .home-stories__card-action .home-stories__cta-donate {
        width: 100%;
        justify-content: center;
        padding: 1.2rem 2rem;
        font-size: 1.6rem;
        border-radius: 999px;
    }

    .home-stories__cta-all-mobile {
        order: -1;
        display: inline-flex;
        align-self: center;
        align-items: center;
        gap: 0.6rem;
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        color: var(--pa-primary);
        font-weight: 700;
        font-size: 1.4rem;
        text-decoration: none;
        line-height: 1;
    }

    .home-stories__cta-all-mobile::after {
        content: '';
        width: 0.8rem;
        height: 0.8rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
    }

    .home-stories__cta-all-mobile:hover {
        background: transparent;
        color: var(--pa-primary-hover);
    }

    /* Visual: tighter radius on mobile to match design */
    .home-stories__card-visual {
        border-radius: 2rem;
    }

    .home-stories__img-title {
        bottom: 1.2rem;
        left: 1.2rem;
        right: 1.2rem;
    }

    .home-stories__img-title p {
        font-size: 1.4rem;
    }
}

.home-stories__card-visual {
    position: relative;
    border-radius: 2.4rem;
    overflow: hidden;
    animation: fadeRight 1s ease-out forwards;
    height: 38.8rem;
}

@media (max-width: 1230px) {
    .home-stories__card-visual {
        aspect-ratio: auto;
        height: 24rem;
    }
}

.home-stories__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2);
}

.home-stories__img-title {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    right: 2rem;
    z-index: 10;
}

.home-stories__img-title p {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    font-size: 16px;
}

.home-stories__play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
}

.home-stories__play-btn {
    position: relative;
    width: 5rem;
    height: 5rem;
}

@media (max-width: 1230px) {
    .home-stories__play-btn svg {
        width: 48px;
        height: 48px;
    }

    .home-stories__play-icon {
        width: 18px !important;
        height: 18px !important;
    }
}

@media (min-width: 1230px) {
    .home-stories__play-btn {
        width: 6.4rem;
        height: 6.4rem;
    }

    .home-stories__play-bg {
        width: 6.4rem;
        height: 6.4rem;
    }
}

.home-stories__play-icon-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s;
    background: #0000007A;
    border-radius: 50%;
}

.home-stories__play-icon {
    width: 2.5rem;
    height: 2.5rem;
}

@media (min-width: 1230px) {
    .home-stories__play-icon {
        width: 3.5rem;
        height: 3.5rem;
    }
}

.home-stories__gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
    pointer-events: none;
    z-index: 5;
}

.pa-yt-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
}

.pa-yt-playing {
    cursor: default;
}

.pa-yt-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: pa-yt-modal-fade-in 0.18s ease-out;

    /* Space kept clear above and below the player. The width formula further down
       reads it, so it has to exist here and not only in the mobile block: a var()
       with no value anywhere in the cascade makes that whole declaration invalid at
       computed-value time, and the player falls back to an iframe's intrinsic
       300px. */
    --pa-yt-gap: 10rem;
}

@keyframes pa-yt-modal-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* The player is as wide as it can be without growing taller than the screen: the
   16/9 turns the height that is left over into the width that produces it. There
   used to be a `width: 80% !important` after this that overrode it everywhere.
   It read as a way to keep the desktop modal off the edges, but !important is not
   breakpoint-aware, so on a phone it also shaved a fifth off a player that was
   already only as tall as a portrait screen allows — hence a video the size of a
   postage stamp. Desktop keeps its margin through --pa-yt-gap instead, which the
   mobile block is free to shrink. */
.pa-yt-modal__inner {
    position: relative;
    width: min(100%, calc((100vh - var(--pa-yt-gap)) * 16 / 9));
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

@supports (height: 100dvh) {

    /* Di browser ponsel, 100vh mengabaikan bilah alamat yang bisa muncul
       lagi saat digulir; 100dvh mengikuti tinggi yang benar-benar terlihat. */
    .pa-yt-modal__inner {
        width: min(100%, calc((100dvh - var(--pa-yt-gap)) * 16 / 9));
    }
}

.pa-yt-modal__inner iframe {
    width: 100%;
    height: 100% !important;
    border: 0;
    display: block;
}

.pa-yt-modal__close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 2.75rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.75rem;
    z-index: 1;
    transition: opacity 0.15s ease;
}

.pa-yt-modal__close:hover {
    opacity: 0.7;
}

@media (max-width: 1230px) {

    /* Edge to edge. In portrait it is the screen's width, not its height, that
       caps a 16/9 player, so every pixel of side padding came straight off the
       picture. The gap stays for landscape, where height is what binds instead. */
    .pa-yt-modal {
        padding: 0;
        --pa-yt-gap: 2rem;
    }

    /* Rounded corners only make sense while the player floats on the backdrop. */
    .pa-yt-modal__inner {
        border-radius: 0;
    }

    /* Both insets are 0 in portrait, so this costs nothing there; it only keeps
       the now edge-to-edge player out from under the notch once the phone is
       turned sideways. Guarded because a browser that cannot parse env() would
       drop the shorthand and fall back to the 2rem padding of the base rule. */
    @supports (padding: env(safe-area-inset-left)) {
        .pa-yt-modal {
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }
    }

    .pa-yt-modal__close {
        top: 0.25rem;
        right: 0.5rem;
        font-size: 2.25rem;
    }
}

@media (max-width: 1230px) and (orientation: portrait) {
    .pa-yt-modal__inner {
        aspect-ratio: 4 / 3;
        max-height: calc(100dvh - var(--pa-yt-gap));
    }
}

@media (min-width: 1230px) {
    .home-stories__header {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-bottom: 4rem;
    }

    .home-stories__header-left {
        align-items: center;
        text-align: center;
    }

    .home-stories__cta-all-desktop {
        display: none;
    }

    .home-stories__card-action {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .home-stories__cta-all-mobile {
        display: inline-flex;
        order: 0;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 2px solid var(--pa-primary);
        color: var(--pa-primary);
        padding: 1.6rem 2.4rem;
        font-size: 1.6rem;
        font-weight: 600;
        border-radius: 999px;
        text-decoration: none;
        line-height: 1;
        align-self: auto;
        margin: 0;
        gap: 0;
        white-space: nowrap;
        transition: background 0.2s, color 0.2s;
        width: 48%;
    }

    .home-stories__cta-all-mobile::after {
        display: none;
    }

    .home-stories__cta-all-mobile:hover {
        background: var(--pa-primary);
        color: #fff;
    }

    .home-stories__card-action .home-stories__cta-donate {
        padding: 1.6rem 2.4rem;
        font-size: 1.6rem;
        border-radius: 999px;
        width: 48%;
    }
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- IMPACT STATS SECTION --- */
.home-impact {
    padding: 4rem 0;
    background-color: #fff;
}

@media (max-width: 1230px) {
    .home-impact {
        padding: 4rem 0;
    }
}

.home-impact__header {
    text-align: center;
    margin-bottom: 5rem;
}

.home-impact__wrapper {
    position: relative;
    padding-top: 7rem;
    padding-bottom: 2rem;
}

@media (max-width: 1230px) {
    .home-impact__wrapper {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

.home-impact__card {
    background-color: #eaf5ee;
    border-radius: 4.8rem;
    padding: 0;
    position: relative;
}

@media (min-width: 1230px) {
    .home-impact__card {
        padding: 8rem 5rem 4rem;
    }
}

.home-impact__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5rem;
}

@media (min-width: 1230px) {
    .home-impact__grid {
        grid-template-columns: 0.7fr 1fr 0.9fr;
        gap: 0;
    }
}

.home-impact__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem 1rem;
}

@media (min-width: 1230px) {
    .home-impact__item {
        border-top: none;
        padding: 1rem 1rem;
    }

    .home-impact__item:first-child {
        border-left: none;
        padding: 1rem 17%;
    }
}

.home-impact__icon-position {
    position: relative;
    margin-bottom: 2rem;
}

@media (min-width: 1230px) {
    .home-impact__icon-position {
        position: absolute;
        top: -15rem;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 0;
    }
}

.home-impact__icon-circle {
    width: 7rem;
    height: 7rem;
    background-color: #fff;
    border-radius: 50%;
    border: 1.5px solid var(--pa-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

@media (max-width: 1230px) {
    .home-impact__icon-circle svg {
        width: 40px;
        height: 40px;
    }
}

@media (min-width: 1230px) {
    .home-impact__icon-circle {
        width: 15rem;
        height: 15rem;
    }
}

.home-impact__svg {
    width: 3.25rem;
    height: 3.25rem;
}

@media (min-width: 1230px) {
    .home-impact__svg {
        width: 4rem;
        height: 4rem;
    }
}

.home-impact__item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0 0.5rem;
}

@media (min-width: 1230px) {
    .home-impact__item-content {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 1.5rem 0 0.5rem;
    }
}

.home-impact__value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--pa-primary);
    line-height: 1;
    white-space: nowrap;
}

@media (min-width: 1230px) {
    .home-impact__value {
        font-size: 6.4rem;
    }
}

.home-impact__label {
    font-size: 16px;
    font-weight: 500;
    color: var(--pa-text-primary);
    line-height: 1.25;
    text-align: center;
}

/* <br>→space swap on mobile is handled by JS in impact-stats.php
   (window.matchMedia + innerHTML swap). CSS alone can't turn a <br>
   into a space text node because <br> is a void element with no ::content. */

@media (min-width: 1230px) {
    .home-impact__label {
        font-size: 14px;
        text-align: center;
    }
}

/* Utility classes for max-width removed */

.home-impact__cta-area {
    margin-top: 3.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.home-impact__cta-wrap {
    position: relative;
    display: inline-block;
}

.home-impact__arrow-decor {
    position: absolute;
    top: 50%;
    right: calc(100% + 5rem);
    transform: translateY(-80%) rotate(-5deg);
    z-index: 20;
    display: none;
    width: 4.5rem;
    height: 3.5rem;
}

@media (min-width: 1230px) {
    .home-impact__arrow-decor {
        display: block;
    }
}

@media (max-width: 1230px) {

    .home-impact {
        background-color: #eaf5ee;
    }

    .home-impact__card {
        background-color: transparent;
        padding: 0;
        border-radius: 0;
    }

    .home-impact__wrapper {
        padding-top: 0;
        padding-bottom: 0;
    }

    .home-impact__grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .home-impact__item {
        flex-direction: row;
        align-items: center;
        text-align: left;
        background-color: #fff;
        border-radius: 2rem;
        padding: 2rem;
        gap: 2rem;
    }

    .home-impact__icon-position {
        position: static;
        margin: 0;
        flex-shrink: 0;
        transform: none;
    }

    .home-impact__icon-circle {
        width: 10rem;
        height: 10rem;
        border: 1.5px solid rgba(4, 149, 81, 0.35);
        background-color: #fff;
        box-shadow: none;
    }

    .home-impact__icon-circle svg {
        width: 38px;
        height: 38px;
    }

    .home-impact__item-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        padding: 0;
        flex: 1;
    }

    .home-impact__value {
        font-size: 3rem;
        font-weight: 700;
        line-height: 1;
        color: var(--pa-primary);
        margin: 0;
    }

    .home-impact__label {
        font-size: 1.6rem;
        font-weight: 400;
        text-align: left;
        line-height: 1.3;
        color: var(--pa-text-primary);
        margin: 0;
    }

    /* Target design doesn't show the Donate CTA in this section on mobile */
    .home-impact__cta-area {
        display: none;
    }
}

@media (min-width: 1230px) {
    .home-impact {
        background-color: #eaf5ee;
    }

    .home-impact__wrapper {
        padding-top: 5rem;
        padding-bottom: 1rem;
    }

    .home-impact__card {
        background-color: #fff;
        border-radius: 4.8rem;
        padding: 8rem 4rem 4rem;
    }

    .home-impact__icon-position {
        top: -15rem;
    }

    .home-impact__icon-circle {
        width: 14.8rem;
        height: 14.8rem;
        border: 1.5px solid rgba(4, 149, 81, 0.35);
    }

    .home-impact__icon-circle svg {
        width: 64px;
        height: 64px;
    }

    .home-impact__item {
        padding: 2rem 1rem;
    }

    .home-impact__item:first-child {
        padding: 2rem 1rem;
    }

    .home-impact__item-content {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 1.5rem 0 0.5rem;
    }

    .home-impact__value {
        font-size: 6rem;
    }

    .home-impact__label {
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        line-height: 1.3;
        color: var(--pa-text-primary);
    }

    /* Target design doesn't show the Donate CTA + arrow decoration in this
       section on desktop either — hide them. */
    .home-impact__cta-area {
        display: none;
    }
}


/* --- INTRO CARD SECTION --- */
.home-intro {
    position: relative;
    z-index: 30;
    margin-top: 3rem;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.5rem;
}

@media (min-width: 1230px) {
    .home-intro {
        margin-top: -4rem;
        padding: 0 2.5rem;
    }
}

.home-intro__card {
    border-radius: 2.4rem;
    padding-top: 3.2rem;
    overflow: hidden;
    background: linear-gradient(0deg, #FFF 0%, #EDF6F0 100%);
}

@media (min-width: 1230px) {
    .home-intro__card {
        border-radius: 4rem;
        padding-bottom: 3rem;
    }
}

.home-intro__inner {
    width: 100%;
    padding: 0 2rem;
}

@media (min-width: 1230px) {
    .home-intro__inner {
        padding: 0 4rem;
    }
}

.home-intro__header {
    text-align: center;
    margin-bottom: 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    max-width: 78.4rem;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
}

@media (min-width: 1230px) {
    .home-intro__header {
        width: 784px;
    }
}


.home-intro__badge-dot {
    width: 12px;
    height: 12px;
    background-color: var(--pa-primary);
    border-radius: 50%;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.home-intro__title {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--pa-text-primary);
    margin-top: 15px;
    font-family: var(--pa-font-headline) !important;
}

@media (max-width:1230px) {
    .home-intro__title {
        margin-bottom: 0;
        margin-top: 0;
    }
}

@media (min-width: 1230px) {
    .home-intro__title {
        font-size: 40px;
        font-weight: 500;
    }
}

@media (min-width: 1230px) {
    .home-intro__title {
        font-size: 40px;
    }
}

.home-intro__title-highlight {
    color: var(--pa-primary);
    font-family: var(--pa-font-headline) !important;
}

.home-intro__grid {
    display: flex;
    gap: 0;
    margin-bottom: 2rem;
}

@media (min-width: 1230px) {
    .home-intro__grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
        margin-bottom: 4rem;
        transform: none !important;
        width: auto !important;
    }

    .home-intro__grid .swiper-slide {
        width: auto !important;
    }
}

.home-intro__pagination {
    position: relative !important;
    bottom: 0 !important;
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
}

.home-intro__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    margin-top: 1rem;
    padding: 0 3.5rem;
}

.home-intro__controls .home-intro__pagination {
    margin: 0;
    position: static !important;
    width: auto !important;
}

.home-intro__nav-btn {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--pa-primary-light);
    color: var(--pa-primary);
    flex-shrink: 0;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.home-intro__nav-btn svg {
    width: 18px;
    height: 18px;
}

.home-intro__nav-btn:hover {
    background-color: rgba(14, 138, 63, 0.2);
}

.home-intro__nav-btn:focus-visible {
    outline: 2px solid var(--pa-primary);
    outline-offset: 2px;
}

.home-intro__nav-btn.swiper-button-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (min-width: 1230px) {

    .home-intro__pagination,
    .home-intro__controls {
        display: none;
    }
}

.home-intro__pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #cbd5e1;
    opacity: 1;
    margin: 0 !important;
}

.home-intro__pagination .swiper-pagination-bullet-active {
    background: var(--pa-primary);
    width: 16px;
    height: 16px;
}


.home-intro__img-wrap {
    border-radius: 32px;
    overflow: hidden;
    transition: all 0.4s ease;
}

@media (max-width: 1230px) {
    .home-intro__card {
        overflow: visible;
    }

    .home-intro__grid-container {
        margin-left: -3.5rem;
        margin-right: -3.5rem;
    }

    .home-intro__img-wrap {
        aspect-ratio: auto;
        height: 412px !important;
    }
}

.home-intro__img-wrap--delay-1 {
    transition-delay: 100ms;
}

.home-intro__img-wrap--delay-2 {
    transition-delay: 200ms;
}

.home-intro__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-intro__quote-section {
    max-width: 934px;
    margin: 0 auto;
    position: relative;
    padding: 1.5rem 2rem;
}

@media (min-width: 1230px) {
    .home-intro__quote-section {
        padding: 1.5rem 7rem;
    }
}

.home-intro__quote-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #049551;
}

.home-intro__quote-icon--left {
    left: 0;
}

.home-intro__quote-icon--right {
    right: 0;
}

.home-intro__quote-icon svg {
    width: 2rem;
    height: 1.5rem;
}

@media (min-width: 1230px) {
    .home-intro__quote-icon svg {
        width: 5.8rem;
        height: 4.8rem;
    }
}

.home-intro__quote-text {
    font-size: 16px;
    color: #374151;
    font-weight: 400;
    text-align: center;
    line-height: 1.5;
    position: relative;
    z-index: 10;
}

@media (min-width: 1230px) {
    .home-intro__quote-text {
        font-size: 20px;
        font-weight: 700;
    }
}

/* Mobile quote section: description text on top, single quote icon below it */
@media (max-width: 1230px) {
    .home-intro__quote-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
        padding: 1.5rem 1.5rem 3.2rem;
    }

    .home-intro__quote-text {
        order: 1;
    }

    .home-intro__quote-icon--left {
        display: none;
    }

    .home-intro__quote-icon--right {
        order: 2;
        position: static;
        transform: none;
        color: rgba(14, 138, 63, 0.4);
    }

    .home-intro__quote-icon--right svg {
        width: 2.9rem;
        height: 2.4rem;
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

/* ========================================================================== */

/* --- CONTACT CTA SECTION --- */
.home-contact-cta {
    padding: 4rem 0;
    background-color: #EDF6EE;
}

@media (max-width: 1230px) {
    .home-contact-cta {
        padding: 2rem 0;
    }
}

.home-contact-cta__card {
    position: relative;
    border-radius: 4.8rem;
    padding: 2.5rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    background: linear-gradient(0deg, #FFF 0%, #F6FCF8 100%);
}

@media (max-width: 1230px) {
    .home-contact-cta__card {
        border-radius: 3.2rem;
    }
}

@media (min-width: 1230px) {
    .home-contact-cta__card {
        flex-direction: row;
        padding: 4rem;
    }
}

.home-contact-cta__text-area {
    text-align: center;
    z-index: 10;
    font-family: var(--pa-font-default) !important;
}

@media (min-width: 1230px) {
    .home-contact-cta__text-area {
        text-align: left;
        line-height: 24px;
    }
}

.home-contact-cta__title {
    font-size: 16px;
    font-weight: 500;
    color: var(--pa-primary);
    line-height: 1.25;
    margin-bottom: 1rem;
}

@media (min-width: 1230px) {
    .home-contact-cta__title {
        font-size: 30px;
        font-weight: 700;
        color: var(--pa-text-primary);
        margin-bottom: 0;
    }
}

.home-contact-cta__desc {
    color: var(--pa-primary);
    font-weight: 500;
    font-size: 20px;
}

@media (max-width: 1230px) {
    .home-contact-cta__desc {
        font-size: 16px;
    }
}

@media (min-width: 1230px) {
    .home-contact-cta__desc {
        font-size: 30px;
        font-weight: 700;
    }
}

.home-contact-cta__arrow-area {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.home-contact-cta__arrow-svg {
    width: 100%;
    max-width: 248px;
    height: auto;
    opacity: 0.8;
}

@media (min-width: 1230px) {
    .home-contact-cta__arrow-area {
        align-items: flex-start;
        margin-top: -5rem;
    }

    .home-contact-cta__arrow-svg {
        max-width: 190px;
        height: 9rem;
        transform: translateY(-1.5rem);
    }
}

.home-contact-cta__action {
    z-index: 10;
}

@media (max-width: 1230px) {
    .home-contact-cta__text-area {
        text-align: center;
        line-height: 1.6;
    }

    .home-contact-cta__title {
        color: var(--pa-text-primary);
        font-weight: 700;
        font-size: 20px;
        line-height: 1.5;
        display: inline;
        margin: 0;
    }

    .home-contact-cta__desc {
        color: var(--pa-primary);
        font-weight: 700;
        font-size: 20px;
        line-height: 1.5;
        display: inline;
        margin: 0;
    }

    .home-contact-cta__action {
        width: 100%;
    }

    .home-contact-cta__action .pa-btn {
        width: 100%;
        justify-content: center;
    }
}

.home-btn--border-green {
    background: #fff;
    border: 2px solid var(--pa-primary);
    color: var(--pa-primary);
    border-radius: 9999px;
    padding: 1.25rem 3rem;
    font-size: 16px;
    white-space: nowrap;
}

.home-btn--border-green:hover {
    background-color: var(--pa-primary);
    color: #fff;
}

/* --- GALLERY CAROUSEL SECTION --- */
.home-gallery {
    padding: 0 0 5rem;
    background-color: #fff;
    overflow: hidden;
}

@media (max-width: 1230px) {
    .home-gallery {
        padding: 2rem 0 0;
    }
}

.home-gallery__separator,
.home-stories__separator {
    border: 0;
    border-top: 1px solid rgba(4, 149, 81, 0.3);
    margin: 0 auto 4rem;
    width: 75%;
}

/* Vision & Mission ends on a tinted band, so the colour change already reads
   as the break between the two sections — the rule would land a hairline a
   few rem under that edge and look like a double divider. */
.home-vm+.home-stories .home-stories__separator {
    display: none;
}

@media (max-width: 1230px) {

    .home-gallery__separator,
    .home-stories__separator {
        margin-bottom: 3.2rem;
    }
}

.home-gallery__header {
    text-align: center;
    margin-bottom: 4.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
}

@media (max-width: 1230px) {
    .home-gallery__header {
        gap: 1.2rem;
        margin-bottom: 0;
    }
}

.home-gallery__title {
    font-size: 2rem;
    line-height: 1.15;
    margin: 0;
}

@media (min-width: 1230px) {
    .home-gallery__title {
        font-size: 2.75rem;
    }
}

@media (min-width: 1230px) {
    .home-gallery__title {
        font-size: 40px;
    }
}

.home-gallery__title-highlight {
    color: var(--pa-primary);
    font-family: var(--pa-font-headline);
}

.home-gallery__carousel-wrap {
    position: relative;
    padding-bottom: 5rem;
    overflow: hidden;
}

.moments-swiper {
    overflow: hidden;
    padding: 0.5rem 0 1.5rem;
}

.moments-swiper .swiper-slide {
    transition: opacity 0.4s ease;
    will-change: opacity;
}

@media (min-width: 1230px) {
    .moments-swiper .swiper-slide {
        width: 31%;
    }
}

.home-gallery-item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.home-gallery-item__img-wrap {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 2.4rem;
    overflow: hidden;
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.home-gallery-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.65s ease;
    display: block;
    transform: scale(1.35);
}

.home-gallery-item__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.home-gallery-item__play-ring {
    position: relative;
    width: 72px;
    height: 72px;
    transition: transform 0.3s ease;
}

.home-gallery-item__play-ring>svg {
    width: 100%;
    height: 100%;
}

.home-gallery-item__play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0000007A;
    border-radius: 50%;
}

.home-gallery-item__play-icon svg {
    width: 40px;
    height: 40px;
}

@media (min-width: 1230px) {
    .home-gallery-item__play-ring {
        width: 64px;
        height: 64px;
    }

    .home-gallery-item__play-icon svg {
        width: 70%;
        height: 70%;
    }
}

.home-gallery-item__gradient {
    position: absolute;
    inset: auto 0 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.28) 0%, transparent 100%);
    pointer-events: none;
    border-radius: 0 0 1.5rem 1.5rem;
}

/* Caption */
.home-gallery-item__title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    text-align: center;
    line-height: 1.4;
    padding: 0 0.25rem;
    transition: color 0.25s;
}

@media (min-width: 1230px) {
    .home-gallery-item__title {
        font-size: 20px;
    }
}

.home-gallery-item:hover .home-gallery-item__title {
    color: var(--pa-primary);
}

.home-gallery__controls {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    white-space: nowrap;
    user-select: none;
}

/* Arrow buttons */
.home-gallery__nav-btn {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--pa-primary);
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.home-gallery__nav-btn:hover {
    background-color: rgba(14, 138, 63, 0.08);
}

.home-gallery__nav-btn:focus-visible {
    outline: 2px solid var(--pa-primary);
    outline-offset: 2px;
}

.home-gallery__nav-btn svg {
    width: 24px;
    height: 24px;
}

/* Dot container — Swiper injects bullets here */
.home-gallery__pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 20px;
    justify-content: center;
}

/* Each dot — rendered via renderBullet as <button class="swiper-pagination-bullet home-gallery__dot"> */
.home-gallery__dot {
    all: unset;
    box-sizing: border-box;
    display: block;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50%;
    background-color: var(--pa-primary);
    opacity: 0.22;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
}

@media (max-width:1230px) {
    .home-gallery__dot {
        width: 12px !important;
        height: 12px !important;
    }

    .home-gallery__dot.swiper-pagination-bullet-active {
        width: 16px !important;
        height: 16px !important;
    }
}

.home-gallery__dot.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--pa-primary);
}

/* Mobile layout — taller image card, arrows at edges, soft-green pill buttons */
@media (max-width: 1230px) {
    .home-gallery__dot {
        width: 40px;
        height: 40px;
    }

    .home-gallery-item__img-wrap {
        border-radius: 2.4rem;
    }

    .home-gallery-item__title {
        font-size: 18px;
        padding: 0 2rem 2rem 0;
    }

    .home-gallery__controls {
        left: 0;
        right: 0;
        transform: none;
        justify-content: space-between;
        gap: 0;
        padding: 0 0.5rem;
        width: 100%;
    }

    .home-gallery__nav-btn {
        width: 40px;
        height: 40px;
        background-color: var(--pa-primary-light);
    }

    .home-gallery__nav-btn:hover {
        transform: none;
        background-color: var(--pa-primary);
        color: #fff;
    }

    .home-gallery__nav-btn svg {
        width: 20px;
        height: 20px;
    }
}

.home-donation-cta {
    padding: 0;
    background-color: #fff;
}

.home-donation-cta__card {
    position: relative;
    overflow: hidden;
    background-color: #1a1a1a;
    background-size: 140%;
    background-position: 0% 20%;
    background-repeat: no-repeat;
    min-height: 61.7rem;
    isolation: isolate;
}

.home-donation-cta__card>.pa-container {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: inherit;
    display: flex;
    align-items: center;
}

.home-donation-cta__card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0) 100%);
}

@media (min-width: 1230px) {
    .home-donation-cta__card::before {
        right: 50%;
    }
}

.home-donation-cta__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem;
    padding: 6rem 0;
    max-width: 60rem;
}

.home-donation-cta__badge {
    align-self: flex-start;
}

.home-donation-cta__title {
    font-size: 4rem;
    line-height: 1.18;
    color: var(--pa-primary);
    font-weight: 500;
    margin: 0;
}

.home-donation-cta__title-highlight {
    color: #fff;
    font-weight: 700;
    font-family: var(--pa-font-headline);
}

.home-donation-cta__desc {
    font-size: 1.8rem;
    line-height: 1.6;
    color: #fff;
    font-weight: 400;
    max-width: 60rem;
    margin: 0;
}

/* Pill submit button — green, left-aligned, sits beneath the desc */
.home-donation-cta__submit {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40rem;
    padding: 1.4rem 2.4rem;
    margin-top: 1rem;
    background: var(--pa-primary);
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0.01em;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    font-family: inherit;
}

.home-donation-cta__submit:hover {
    background: white;
    color: var(--pa-primary);
}

.home-donation-cta__submit:active {
    transform: translateY(0) scale(0.98);
}

@media (max-width: 1230px) {
    .home-donation-cta__content {
        max-width: 52rem;
        padding: 5rem 0;
    }

    .home-donation-cta__title {
        font-size: 3.2rem;
    }
}

@media (max-width: 1230px) {
    .home-donation-cta {
        padding: 4rem 0 2rem;
    }

    .home-donation-cta__card {
        min-height: 87rem;
        border-radius: 0;
        background-size: cover;
        background-position: 48% 25%;
    }

    .home-donation-cta__card::before {
        inset: auto 0 0 0;
        height: 60%;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0) 100%);
    }

    .home-donation-cta__card>.pa-container {
        align-items: flex-end;
    }

    .home-donation-cta__content {
        max-width: 100%;
        padding: 0 0 3rem;
        gap: 1.4rem;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    /* White badge, centered */
    /* Use the same look as `.home-badge` (gallery badge); just center it */
    .home-donation-cta__badge {
        align-self: center;
    }

    .home-donation-cta__title {
        font-size: 2.4rem;
        text-align: center;
        color: #18D660;
        font-weight: 500;
    }

    .home-donation-cta__desc {
        font-size: 1.6rem;
        text-align: center;
    }

    .home-donation-cta__submit {
        display: flex;
        width: 100%;
        min-width: 0;
        padding: 1.2rem 2rem;
        font-size: 1.6rem;
        margin-top: 0.5rem;
    }
}

/* --- MESSAGES SECTION --- */
.home-messages {
    padding: 6rem 0 22rem;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

.home-messages__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
    gap: 1rem;
}

@media (min-width: 1230px) {
    .home-messages__header {
        margin-bottom: 3rem;
    }
}

.home-messages__header-left {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.home-messages__badge {
    color: var(--pa-primary);
}

@media (min-width: 1230px) {
    .home-messages__badge {
        width: 30%;
    }
}

.home-messages__badge .home-badge__dot {
    background-color: var(--pa-primary);
}

.pesan-page__title-highlight {
    color: var(--pa-primary);
    font-family: var(--pa-font-headline) !important;
    font-weight: 500;
}

.home-messages__title {
    color: #1f2937;
    margin-top: 0;
    font-size: 24px;
    line-height: 1.2;
}

@media (min-width: 1230px) {
    .home-messages__title {
        font-size: 40px;
    }
}

.home-messages__title-highlight {
    color: var(--pa-primary);
    font-family: var(--pa-font-headline) !important;
}

.home-messages__cta {
    display: inline-flex;
    align-items: center;
    padding: 14px 24px;
    border: 1.5px solid var(--pa-primary);
    border-radius: 999px;
    color: var(--pa-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
    margin-bottom: 4px;
}

@media (min-width: 1230px) {
    .home-messages__cta {
        padding: 14px 24px;
        font-size: 16px;
        margin-bottom: 0;
    }
}

.home-messages__cta:hover {
    background-color: var(--pa-primary);
    color: #fff;
}

.home-messages__cta:focus:not(:hover) {
    color: var(--pa-primary);
    text-decoration: none;
}

@media (min-width: 1230px) {
    .home-messages__grid {
        display: grid !important;
        grid-template-columns: 1fr;
        transform: none !important;
        width: auto !important;
    }

    .home-messages__grid .swiper-slide {
        width: auto !important;
    }
}

@media (min-width: 1230px) {
    .home-messages__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile-only carousel controls (prev | dots | next) — hidden on desktop */
.home-messages__controls {
    display: none;
}

.home-messages-card {
    background-color: #f2faf3;
    border: 1px solid #d6ecd9;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    min-height: 16.25rem;
}

/* Swiper's own stylesheet gives every slide `display: block; height: 100%`.
   The display reset is why the card needs `flex` back, and the height is why the
   cards came out uneven on mobile: a slide pinned to 100% never stretches to the
   height of the flex line, so each card only ever grew as tall as its own quote.
   `height: auto` hands it back to the default stretch, which sizes every slide to
   the tallest one — the same fix the campaigns carousel uses further down. */
.home-messages-card.swiper-slide {
    display: flex;
    height: auto;
}

@media (min-width: 1230px) {
    .home-messages-card {
        flex-direction: row;
        padding-right: 3rem;
    }
}

.home-messages-card__visual {
    width: 100%;
    height: 15.625rem;
    align-self: stretch;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

@media (min-width: 1230px) {
    .home-messages-card__visual {
        width: 220px;
        height: auto;
    }
}

.home-messages-card__img {
    position: absolute;
    top: 2.5rem;
    left: 50%;
    width: 17.5rem;
    max-width: none;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
    transform: translateX(-80%) scale(1.3);
    transform-origin: top center;
}

@media (min-width: 1230px) {
    .home-messages-card__img {
        top: 1.5rem;
        left: 50%;
        /* Still centered on desktop? Or reset to side? */
        width: 21.875rem;
        transform: translateX(-50%) scale(1);
    }
}

/* Nining card: zoom in so only upper body / face is shown */
.home-messages-card__img--zoom {
    width: 28rem;
    top: -6rem;
    transform: translateX(-70%) scale(3);
    transform-origin: top center;
}

@media (min-width: 1230px) {
    .home-messages-card__img--zoom {
        width: 32rem;
        top: -5rem;
        transform: translateX(-50%) scale(3);
    }
}

/* Cut-out portrait: the subject's opaque box is measured server-side
   (pa_v2_subject_fit_vars) and mapped onto the frame, so every person renders at
   the same size regardless of how much transparent margin their file carries.

   This supersedes the hand-tuned per-image transforms above — including --zoom —
   at every breakpoint, because a two-class selector outranks them on specificity
   wherever they are declared. Those rules stay put as the path for images the
   measurement cannot read (no alpha channel, or hosted off-site).

   --pa-fit-h is a percentage of the frame's HEIGHT and the offsets are
   percentages of the image's own box, so the same values work for the square
   desktop frame and the wide, short mobile one alike. */
.home-messages-card__visual--fit .home-messages-card__img {
    position: absolute;
    top: 0;
    left: 50%;
    height: var(--pa-fit-h, 100%);
    width: auto;
    max-width: none;
    object-fit: contain;
    transform: translate(var(--pa-fit-tx, -50%), var(--pa-fit-ty, 0%));
}

.home-messages-card__content {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Author pinned to the bottom of the card, as on the Pesan-Pesan page
       (.pesan-card__content), so names line up across cards whose quotes
       differ in length. */
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 2rem 2rem 2rem;
    position: relative;
    z-index: 10;
}

@media (min-width: 1230px) {
    .home-messages-card__content {
        width: auto;
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
        padding-left: 0.5rem;
    }
}

.home-messages-card__quote {
    color: #333;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
}

.home-messages-card__author {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.home-messages-card__name {
    font-weight: 700;
    color: #1f2937;
    font-size: 16px;
    margin: 0;
}

.home-messages-card__role {
    color: #666;
    font-size: 16px;
}

@media (max-width: 1230px) {
    .home-messages-card__role {
        font-size: 14px;
    }
}

.home-messages__cta-wrap-mobile {
    display: none;
}

@media (max-width: 1230px) {
    .home-messages {
        padding: 3rem 0 18rem;
    }

    /* Header: stack & center, hide top-right CTA */
    .home-messages__header {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-bottom: 2rem;
        gap: 0.6rem;
    }

    .home-messages__header-left {
        align-items: center;
        text-align: center;
        gap: 1.2rem;
    }

    .home-messages__cta--desktop {
        display: none;
    }

    /* Card layout — photo overlaps above the card, content below */
    .home-messages-card {
        position: relative;
        overflow: visible;
        margin-top: 8rem;
        flex-direction: column;
    }

    .home-messages-card__visual {
        position: absolute;
        left: 50%;
        top: -8rem;
        transform: translateX(-50%);
        width: 14rem;
        height: 10rem;
        overflow: hidden;
        z-index: 5;
    }

    .home-messages-card__img,
    .home-messages-card__img--zoom {
        position: absolute;
        top: 0;
        left: 50%;
        width: 20rem;
        max-width: 20rem;
        height: auto;
        transform: translateX(-50%);
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
    }

    .home-messages-card__content {
        padding: 8rem 2rem 2rem;
    }

    .home-messages-card__quote {
        font-weight: 400;
        font-size: 15px;
        line-height: 1.55;
    }

    .home-messages__controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-top: 1.6rem;
        padding: 0 0.5rem;
    }

    .home-messages__nav {
        all: unset;
        box-sizing: border-box;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: white;
        color: var(--pa-primary);
        background-color: var(--pa-primary-light);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        transition: background-color 0.2s ease;
    }

    .home-messages__nav:hover {
        background-color: rgba(14, 138, 63, 0.2);
    }

    .home-messages__nav.swiper-button-disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .home-messages__pagination {
        position: relative !important;
        bottom: auto !important;
        width: auto !important;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .home-messages__pagination .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        background: #cbd5e1;
        opacity: 1;
        margin: 0 !important;
        transition: all 0.2s;
    }

    .home-messages__pagination .swiper-pagination-bullet-active {
        background: var(--pa-primary);
        width: 16px;
        height: 16px;
    }

    /* Mobile CTA wrap below carousel */
    .home-messages__cta-wrap-mobile {
        display: flex;
        justify-content: center;
        margin-top: 2.4rem;
    }

    .home-messages__cta--mobile {
        padding: 1.2rem 2rem;
        font-size: 1.6rem;
    }
}

/* Evolution SVG — absolute, bottom-right of section */
.home-messages__evolution {
    position: absolute;
    bottom: 0;
    right: 5%;
    pointer-events: none;
    opacity: 0.85;
    line-height: 0;
}

@media (max-width: 1230px) {
    .home-messages__evolution {
        width: 100%;
        right: 0;
    }

    .home-messages__evolution svg {
        height: 156px;
    }
}

.home-messages__evolution svg {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 1230px) {
    .home-messages__grid {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 2rem;
        row-gap: 2rem;
        padding-top: 14rem;
    }

    .home-messages-card {
        flex-direction: column;
        align-items: stretch;
        padding-right: 0;
        position: relative;
        overflow: visible;
        background-color: #ECF6EE;
        border: 1px solid #d6ecd9;
        border-radius: 2rem;
        min-height: auto;
    }

    /* Photo sits absolutely above the card, overflowing its top edge */
    .home-messages-card__visual {
        position: absolute;
        left: 50%;
        top: -12rem;
        transform: translateX(-50%);
        width: 18rem;
        height: 18rem;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        background: transparent;
        z-index: 5;
    }

    .home-messages-card__img,
    .home-messages-card__img--zoom {
        position: absolute;
        top: 0;
        left: 50%;
        width: 18rem;
        max-width: 18rem;
        height: auto;
        transform: translateX(-50%);
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.12));
    }

    /* Content block: quote + author stacked below the photo overlap */
    .home-messages-card__content {
        width: 100%;
        padding: 8rem 2.4rem 2.4rem;
        gap: 1.5rem;
    }

    .home-messages-card__quote {
        font-size: 18px;
        font-weight: 400;
        color: #333;
        line-height: 1.6;
    }

    .home-messages-card__name {
        font-size: 16px;
        font-weight: 700;
        color: #1f2937;
    }

    .home-messages-card__role {
        font-size: 16px;
        color: #1f2937;
    }
}

/* ============================================================
   CAMPAIGNS SECTION — "Campaign Terbaru Kami"
   ============================================================ */
.home-campaigns {
    padding: 6rem 0;
    background-color: var(--pa-primary-light);
}

@media (max-width: 1230px) {
    .home-campaigns {
        padding: 4rem 0;
    }
}

/* ── Header: centered ── */
.home-campaigns__header {
    margin-bottom: 4.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2.4rem;
}

@media (max-width: 1230px) {
    .home-campaigns__header {
        margin-bottom: 2.4rem;
        gap: 1.2rem;
    }
}

.home-campaigns__badge {
    color: var(--pa-primary);
}

.home-campaigns__badge .home-badge__dot {
    background-color: var(--pa-primary);
}

.home-campaigns__title {
    color: var(--pa-text-primary);
    line-height: 1.2;
}

.home-campaigns__title-highlight {
    color: var(--pa-primary);
    font-family: var(--pa-font-headline) !important;
}

/* ═══════════════════════════════════════════════════════════════
   FEATURED CAMPAIGN CARD
   ═══════════════════════════════════════════════════════════════ */
.home-campaigns-featured {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 4.8rem;
    overflow: hidden;
    margin-bottom: 3rem;
}

/* Image */
.home-campaigns-featured__img-wrap {
    overflow: hidden;
    width: 100%;
    padding: 2rem 2rem 0;
    height: 428px;
}

@media (max-width: 1230px) {
    .home-campaigns-featured__img-wrap {
        aspect-ratio: 16 / 10;
        height: auto;
    }
}

.home-campaigns-featured__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
    border-radius: 2.4rem;
}

/* Body */
.home-campaigns-featured__body {
    padding: 1.75rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (min-width: 1230px) {
    .home-campaigns-featured__body {
        padding: 2.4rem;
    }
}

.home-campaigns-featured__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--pa-text-primary);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 1230px) {
    .home-campaigns-featured__title {
        font-size: 24px;
    }
}

@media (min-width: 1230px) {
    .home-campaigns-featured__title {
        font-size: 32px;
    }
}

/* Info row: amounts + CTA side by side on desktop */
.home-campaigns-featured__info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 1230px) {
    .home-campaigns-featured__info {
        flex-direction: row;
        align-items: flex-end;
        gap: 2.5rem;
    }
}

.home-campaigns-featured__info-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

@media (max-width: 1230px) {
    .home-campaigns-featured__info-left {
        gap: 1.2rem;
    }
}

/* Amounts: collected left, target right */
.home-campaigns-featured__amounts-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.home-campaigns-featured__amount {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.home-campaigns-featured__amount--right {
    text-align: right;
}

.home-campaigns-featured__amount-label {
    font-size: 16px;
    color: var(--pa-text-secondary);
    font-weight: 400;
}

.home-campaigns-featured__amount-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-primary);
}

@media (min-width: 1230px) {
    .home-campaigns-featured__amount-value {
        font-size: 24px;
    }
}

.home-campaigns-featured__amount-value--green {
    color: var(--pa-primary);
}

/* Progress bar */
.home-campaigns-featured__progress {
    width: 100%;
    height: 12px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.home-campaigns-featured__progress-bar {
    height: 100%;
    background: linear-gradient(270deg, #14A24A 0%, #18D660 100%);
    border-radius: 3px;
    transition: width 0.6s ease;
}

/* Meta: donors + days */
.home-campaigns-featured__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.home-campaigns-featured__meta-item {
    font-size: 16px;
    color: #333;
}

.home-campaigns-featured__meta-item strong {
    font-weight: 700;
    color: var(--pa-text-primary);
}

/* CTA Buttons */
.home-campaigns-featured__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    flex-shrink: 0;
}

@media (min-width: 1230px) {
    .home-campaigns-featured__cta {
        align-items: center;
    }
}

.home-campaigns-featured__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pa-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 1.2rem 2rem;
    border-radius: 999px;
    border: 2px solid var(--pa-primary);
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    white-space: nowrap;
    width: 100%;
}

.home-campaigns-featured__btn:hover {
    color: var(--pa-primary);
    background: white;
    border: 2px solid var(--pa-primary);
}

.home-campaigns-featured__btn:focus:not(:hover) {
    color: #fff;
    text-decoration: none;
}

.home-campaigns-featured__link {
    font-size: 16px;
    font-weight: 600;
    color: var(--pa-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.home-campaigns-featured__link:hover {
    color: var(--pa-primary-hover);
}

.home-campaigns-featured__link:focus:not(:hover) {
    color: var(--pa-primary);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   CAMPAIGN LAINNYA
   ═══════════════════════════════════════════════════════════════ */
.home-campaigns__others {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.home-campaigns__others-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.home-campaigns__others-title {
    font-size: 32px;
    font-weight: 500;
    color: var(--pa-text-primary);
    margin-bottom: 0;
}

.home-campaigns__others-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border: 2px solid var(--pa-primary);
    border-radius: 999px;
    color: var(--pa-primary);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    background: white;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

@media (max-width: 1230px) {
    .home-campaigns__others-btn {
        padding: 8px 12px;
    }
}

.home-campaigns__others-btn:hover {
    background: var(--pa-primary);
    color: #fff;
}

.home-campaigns__others-btn:focus:not(:hover) {
    color: var(--pa-primary);
    text-decoration: none;
}

.home-campaigns__grid {
    gap: 1.5rem;
}

@media (min-width: 1230px) {
    .home-campaigns__grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        transform: none !important;
        width: auto !important;
    }

    .home-campaigns__grid .swiper-slide {
        width: auto !important;
    }
}

@media (min-width: 1230px) {
    .home-campaigns__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.home-campaigns__controls,
.home-campaigns__cta-wrap-mobile {
    display: none;
}

.home-campaigns-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 1.25rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.25s, transform 0.25s;
    border: 1px solid #04955133;
    border-radius: 24px;
}

.home-campaigns-card__img-wrap {
    overflow: hidden;
    background: linear-gradient(135deg, #e8f5ec 0%, #c4dec9 100%);
    height: 248px;
}

@media (max-width:1230px) {
    .home-campaigns-card__img-wrap {
        height: 174px;
    }
}

.home-campaigns-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.35s ease;
}

.home-campaigns-card:hover .home-campaigns-card__img {
    transform: scale(1.04);
}

.home-campaigns-card__body {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 20px;
    flex: 1;
}

.home-campaigns-card__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--pa-text-primary);
    line-height: 1.45;
    margin-bottom: 0.125rem;
}

/* Amounts: Terkumpul left, Target right */
.home-campaigns-card__amounts {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}

.home-campaigns-card__amount {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.home-campaigns-card__amount--right {
    text-align: right;
}

.home-campaigns-card__amount-label {
    font-size: 16px;
    color: var(--pa-text-secondary);
    font-weight: 400;
}

.home-campaigns-card__amount-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--pa-text-primary);
}

.home-campaigns-card__amount-value--green {
    color: var(--pa-primary);
}

/* Progress bar */
.home-campaigns-card__progress {
    width: 100%;
    height: 15px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.home-campaigns-card__progress-bar {
    height: 100%;
    background: linear-gradient(270deg, #14A24A 0%, #18D660 100%);
    border-radius: 3px;
    transition: width 0.6s ease;
}

/* Meta: donors + days */
.home-campaigns-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: var(--pa-text-secondary);
}

.home-campaigns-card__meta strong {
    font-weight: 700;
    color: var(--pa-text-primary);
}

@media (max-width: 1230px) {
    .home-campaigns__carousel.swiper {
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .home-campaigns__others-header {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0.6rem;
        margin-bottom: 1.6rem;
    }

    .home-campaigns__others-btn--desktop {
        display: none;
    }

    .home-campaigns__grid.swiper-wrapper {
        display: flex !important;
        gap: 0;
        grid-template-columns: none;
    }

    .home-campaigns__grid.swiper-wrapper .swiper-slide {
        flex-shrink: 0;
        height: auto;
        width: 280px;
    }

    .home-campaigns__controls {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 1.2rem;
        margin: 1.6rem 0.5rem 0;
    }

    .home-campaigns__nav,
    .home-campaigns__nav.swiper-button-lock {
        display: inline-flex !important;
    }

    .home-campaigns__pagination,
    .home-campaigns__pagination.swiper-pagination-lock {
        display: inline-flex !important;
    }

    .home-campaigns__nav {
        all: unset;
        box-sizing: border-box;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        color: var(--pa-primary);
        background-color: white;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        transition: background-color 0.2s ease;
    }

    .home-campaigns__nav:hover:not(.swiper-button-disabled) {
        background-color: rgba(14, 138, 63, 0.2);
    }

    .home-campaigns__nav.swiper-button-disabled {
        opacity: 0.4;
    }

    .home-campaigns__nav svg {
        width: 20px;
        height: 20px;
    }

    .home-campaigns__pagination {
        position: relative !important;
        bottom: auto !important;
        width: auto !important;
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        flex: 1;
        justify-content: center;
    }

    .home-campaigns__pagination .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        background: #cbd5e1;
        opacity: 1;
        margin: 0 !important;
        transition: all 0.2s;
    }

    .home-campaigns__pagination .swiper-pagination-bullet-active {
        background: var(--pa-primary);
        width: 16px;
        height: 16px;
    }

    /* Mobile CTA below the carousel */
    .home-campaigns__cta-wrap-mobile {
        display: flex;
        justify-content: center;
        margin-top: 1.6rem;
    }

    .home-campaigns__others-btn--mobile {
        display: inline-flex;
        align-items: center;
        padding: 1.2rem 2.8rem;
        border: 1.5px solid var(--pa-primary);
        border-radius: 999px;
        color: var(--pa-primary);
        font-size: 1.5rem;
        font-weight: 600;
        text-decoration: none;
        background: white;
        transition: background 0.2s, color 0.2s;
    }

    .home-campaigns__others-btn--mobile:hover {
        background: var(--pa-primary);
        color: #fff;
    }
}

.home-sponsors {
    padding: 6rem 0;
    background: #fff;
    overflow: hidden;
}

@media (max-width: 1230px) {
    .home-sponsors {
        padding: 4rem 0 2rem;
    }
}

/* Title */
.home-sponsors__title {
    font-size: 20px;
    font-weight: 500;
    color: var(--pa-text-primary);
    margin-bottom: 4rem;
}

@media (min-width: 1230px) {
    .home-sponsors__title {
        font-size: 24px;
    }
}

/* ── Carousel Wrapper ── */
.home-sponsors__carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            black 8%,
            black 92%,
            transparent 100%);
    mask-image: linear-gradient(to right,
            transparent 0%,
            black 8%,
            black 92%,
            transparent 100%);
}

/* ── Track: infinite scroll ── */
.home-sponsors__track {
    display: flex;
    align-items: center;
    gap: 3rem;
    width: max-content;
    animation: sponsorScroll 30s linear infinite;
}

.home-sponsors__track:hover {
    animation-play-state: paused;
}

@keyframes sponsorScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Translate by exactly half (one set of logos) */
        transform: translateX(-50%);
    }
}

/* ── Individual Logo Item ── */
.home-sponsors__item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    min-width: 140px;
}

@media (min-width: 1230px) {
    .home-sponsors__item {
        height: 70px;
        min-width: 160px;
    }
}

.home-sponsors__logo {
    display: block;
    max-height: 100%;
    max-width: 160px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.65;
    transition: filter 0.3s, opacity 0.3s;
}

@media (min-width: 1230px) {
    .home-sponsors__logo {
        max-width: 180px;
    }
}

.home-sponsors__logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* ── CTA Button ── */
.home-sponsors__cta {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
}

.home-sponsors__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border: 2px solid var(--pa-primary);
    border-radius: 999px;
    color: var(--pa-primary);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    white-space: nowrap;
}

@media (max-width: 1230px) {
    .home-sponsors__btn {
        padding: 12px 20px;
        font-size: 16px;
        font-weight: 700;
    }
}

@media (max-width: 1230px) {
    .home-sponsors__title {
        text-align: center;
        margin-bottom: 2.5rem;
        font-size: 24px;
        font-weight: 500;
    }

    .home-sponsors__carousel {
        -webkit-mask-image: none;
        mask-image: none;
        overflow: visible;
    }

    .home-sponsors__track {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem 0rem;
        width: 100%;
        animation: none;
        justify-items: center;
        align-items: center;
    }

    .home-sponsors__track:hover {
        animation: none;
    }

    .home-sponsors__item:nth-child(n+7) {
        display: none;
    }

    .home-sponsors__item {
        min-width: 0;
        width: 100%;
        height: 5rem;
    }

    .home-sponsors__item:nth-child(odd) {
        justify-content: flex-end;
    }

    .home-sponsors__item:nth-child(even) {
        justify-content: flex-start;
    }

    .home-sponsors__logo {
        max-width: 100%;
        max-height: 8rem;
        opacity: 1;
    }

    .home-sponsors__cta {
        margin-top: 2.5rem;
    }
}

.home-sponsors__btn:hover {
    background: var(--pa-primary);
    color: #fff;
}

.home-sponsors__btn:focus:not(:hover) {
    color: var(--pa-primary);
    text-decoration: none;
}

/* ============================================================
   FAQ SECTION — "Pertanyaan Umum"
   ============================================================ */
.home-faq {
    padding: 5rem 0 3rem;
    background: #fff;
    position: relative;
    overflow: hidden;
}

/* Decorative Clouds */
.home-faq__cloud {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.home-faq__cloud--top {
    top: 0%;
    left: 55%;
    transform: translateX(-50%);
}

@media (max-width: 1230px) {
    .home-faq__cloud--top {
        top: 13rem;
        left: 20%;
    }

    .home-faq__cloud--top svg {
        width: 132px;
    }
}

.home-faq__cloud--bottom {
    top: 40%;
    right: -2%;
}

@media (min-width: 1230px) {
    .home-faq__cloud--bottom {
        top: 24rem;
    }
}

@media (max-width: 1230px) {
    .home-faq__cloud--bottom {
        top: 24rem;
    }
}

.home-faq .home-v2-container {
    position: relative;
    z-index: 1;
}

/* Grid Layout */
.home-faq__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1230px) {
    .home-faq__grid {
        grid-template-columns: 1.2fr 1fr;
        gap: 4rem;
        align-items: start;
    }
}

/* Left Content */
.home-faq__left {
    display: flex;
    flex-direction: column;
}

.home-faq__badge {
    color: var(--pa-primary);
    margin-bottom: 2.4rem;
    width: 34%;
}

.home-faq__badge .home-badge__dot {
    background-color: var(--pa-primary);
}

.home-faq__title {
    font-size: 40px;
    font-weight: 500;
    color: var(--pa-text-primary);
    margin-bottom: 2.4rem;
    line-height: 1.2;
    margin-top: 0;
}

.home-faq__desc {
    color: #333;
    font-size: 16px;
    margin-bottom: 2.4rem;
    line-height: 1.6;
    max-width: 90%;
}

/* Accordion */
.home-faq__accordion {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #e5e7eb;
}

.home-faq__item {
    border-bottom: 1px solid #e5e7eb;
}

.home-faq__question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 0;
    background: transparent;
    border: none;
    font-weight: 700;
    font-size: 20px;
    color: var(--pa-primary);
    cursor: pointer;
    text-align: left;
    transition: color 0.3s;
}

.home-faq__question:hover {
    color: var(--pa-primary);
}

.home-faq__chevron {
    transition: transform 0.3s ease;
    color: var(--pa-primary);
    flex-shrink: 0;
    margin-left: 1rem;
}

.home-faq__item--open .home-faq__chevron {
    transform: rotate(180deg);
}

.home-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.home-faq__item--open .home-faq__answer {
    max-height: 500px;
    /* Adjust if content is extremely long */
}

.home-faq__answer-inner {
    padding-bottom: 1.25rem;
    color: var(--pa-text-secondary);
    line-height: 1.6;
    font-size: 0.9375rem;
}

/* Right Image */
.home-faq__right {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.home-faq__image {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

@media (max-width: 1230px) {
    .home-faq {
        padding: 2rem 0 2rem;
    }

    .home-faq__grid {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        align-items: center;
    }

    .home-faq__left {
        display: contents;
    }

    .home-faq__badge {
        order: 1;
        align-self: center;
        justify-content: center;
        margin-bottom: 0;
        width: auto;
    }

    .home-faq__title {
        order: 2;
        font-size: 2rem;
        text-align: center;
        margin: 0.4rem 0 0.2rem;
    }

    .home-faq__desc {
        order: 3;
        font-size: 1.4rem;
        text-align: center;
        color: #4b5563;
        max-width: 100%;
        margin: 0;
    }

    .home-faq__right {
        order: 4;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        /* anchor image TOP → bottom overflows & gets cropped */
        margin: 1.5rem 0;
        min-height: auto;
        max-height: 26.4rem;
        overflow: hidden;
    }

    .home-faq__image {
        display: block;
        width: auto;
        max-width: 80%;
        max-height: none;
        height: auto;
        object-fit: contain;
    }

    .home-faq__accordion {
        order: 5;
        width: 100%;
        text-align: left;
    }

    /* All question text is green on mobile (matches the screenshot) */
    .home-faq__question {
        font-size: 1.5rem;
        padding: 1.6rem 0;
        color: var(--pa-primary);
        font-weight: 700;
    }

    .home-faq__chevron {
        color: var(--pa-primary);
    }

    .home-faq__answer-inner {
        font-size: 1.4rem;
        color: #4b5563;
    }
}

/* ============================================================
   BERITA SECTION — "Berita dari Kami"
   ============================================================ */
.home-berita {
    padding: 2rem 0;
    background-color: #fff;
}

/* Header */
.home-berita__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 4.8rem;
}

@media (min-width: 1230px) {
    .home-berita {
        padding: 3rem 0;
        background-color: #fff;
    }

    .home-berita__header {
        margin-bottom: 3rem;
    }
}

.home-berita__header-left {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.home-berita__badge {
    color: var(--pa-primary);
}

@media (min-width: 1230px) {
    .home-berita__badge {
        width: 70%;
    }
}

.home-berita__badge .home-badge__dot {
    background-color: var(--pa-primary);
}

.home-berita__title {
    color: var(--pa-text-primary);
    line-height: 1.2;
    margin-top: 0;
    font-size: 20px;
}

@media (min-width: 1230px) {
    .home-berita__title {
        font-size: 35px;
    }
}

.home-berita__title-highlight {
    color: var(--pa-primary);
}

.home-berita__see-all {
    display: inline-flex;
    align-items: center;
    padding: 14px 24px;
    border: 1.5px solid var(--pa-primary);
    border-radius: 999px;
    color: var(--pa-primary);
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: end;
    transition: background 0.2s, color 0.2s;
    margin-bottom: 4px;
    /* Align with title baseline */
}

@media (min-width: 1230px) {
    .home-berita__see-all {
        align-self: auto;
        padding: 16px 24px;
        font-size: 16px;
        margin-bottom: 0;
    }
}

.home-berita__see-all:hover {
    background-color: var(--pa-primary);
    color: #fff;
}

.home-berita__see-all:focus:not(:hover) {
    color: var(--pa-primary);
    text-decoration: none;
}

.home-berita__grid.swiper-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1230px) {
    .home-berita__grid.swiper-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1230px) {
    .home-berita__grid.swiper-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1230px) {
    .home-berita-card.swiper-slide {
        width: auto;
        flex-shrink: 1;
    }
}

/* Card */
.home-berita-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 2.4rem;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 0.25s, transform 0.25s;
    border: 1px solid #e5e7eb;
}

.home-berita-card__img-wrap {
    height: 261px;
    overflow: hidden;
}

.home-berita-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.home-berita-card__content {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 20px;
    flex: 1;
}

.home-berita-card:hover {
    background-color: #EDF6EE;
    border: 1px solid #049551;
    border-radius: 24px;
}

.home-berita-card__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--pa-text-primary);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}

.home-berita-card__desc {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.home-berita-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0.5rem;
}

.home-berita-card__more:hover,
.home-berita-card:hover .home-berita-card__more,
.home-berita-card:focus-visible .home-berita-card__more {
    background-color: var(--pa-primary);
    color: #fff;
    border-color: #fff;
}

.home-berita-card:hover .home-berita-card:focus-visible {
    background-color: #EDF6EE;
    border: 1px solid #049551;
    border-radius: 0 0 24px 24px;
}

.home-berita-card__more:hover svg,
.home-berita-card:hover .home-berita-card__more svg,
.home-berita-card:focus-visible .home-berita-card__more svg {
    stroke: #fff;
}

.home-berita-card__date {
    font-size: 16px;
    color: #333;
}

.home-berita-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 16px;
    font-weight: 600;
    color: var(--pa-primary);
    background-color: transparent;
    border: 1px solid var(--pa-primary);
    padding: 14px 24px;
    border-radius: 999px;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.home-berita-card__more svg {
    width: 24px;
    height: 24px;
    stroke: var(--pa-primary);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-berita-card__title {
    order: 1;
}

.home-berita-card__date {
    order: 2;
}

.home-berita-card__desc {
    order: 3;
}

.home-berita-card__footer {
    order: 4;
}

@media (max-width: 1230px) {
    .home-berita-card__desc {
        order: 2;
    }

    .home-berita-card__date {
        order: 3;
    }
}

.home-berita__carousel {
    width: 100%;
}

.home-berita__controls {
    display: none;
}

.home-berita__cta-wrap-mobile {
    display: none;
}

@media (max-width: 1230px) {
    .home-berita__carousel {
        overflow: hidden;
    }

    .home-berita__header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.6rem;
        margin-bottom: 2.4rem;
    }

    .home-berita__header-left {
        align-items: center;
        text-align: center;
        gap: 1.2rem;
    }

    .home-berita__grid.swiper-wrapper {
        display: flex;
        gap: 0;
    }

    .home-berita__see-all--desktop {
        display: none;
    }

    .home-berita-card__footer {
        display: none;
    }

    .home-berita__controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.2rem;
        margin: 1.6rem 0 0;
    }

    .home-berita__nav {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;
        background-color: var(--pa-primary-light);
        color: var(--pa-primary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
        transition: background-color 0.2s ease;
    }

    .home-berita__nav:hover:not(.swiper-button-disabled) {
        background-color: rgba(14, 138, 63, 0.2);
        color: var(--pa-primary);
    }

    .home-berita__nav.swiper-button-disabled {
        opacity: 0.4;
    }

    .home-berita__nav svg {
        width: 20px;
        height: 20px;
    }

    .home-berita__pagination {
        position: relative !important;
        bottom: auto !important;
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        width: auto !important;
        flex: 1;
        justify-content: center;
    }

    .home-berita__pagination .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        background: #94a3b8;
        opacity: 1;
        margin: 0 !important;
        border-radius: 50%;
        transition: all 0.2s;
    }

    .home-berita__pagination .swiper-pagination-bullet-active {
        background: var(--pa-primary);
        border-radius: 999px;
        width: 16px;
        height: 16px;
    }

    /* Mobile CTA centered below carousel */
    .home-berita__cta-wrap-mobile {
        display: flex;
        justify-content: center;
        margin-top: 1.6rem;
    }

    .home-berita__see-all--mobile {
        display: inline-flex;
        padding: 1.2rem 2rem;
        font-size: 1.6rem;
    }
}

.home-cta-banner-wrap {
    padding: 3rem 0 6rem;
}

.home-cta-banner {
    position: relative;
    border-radius: 4.8rem;
    overflow: hidden;
    height: 16rem;
}

@media (min-width: 1230px) {
    .home-cta-banner {
        height: 48rem;
    }
}

.home-cta-banner__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1.3) translateX(10%) translateY(10%);
}

.home-cta-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
            rgba(8, 38, 20, 0.93) 0%,
            rgba(8, 38, 20, 0.93) 20%,
            rgba(8, 38, 20, 0.65) 28%,
            rgba(8, 38, 20, 0) 60%);
}

.home-cta-banner__content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4rem;
    padding: 2.5rem 2rem;
    max-width: 50%;
}

@media (min-width: 1230px) {
    .home-cta-banner__content {
        padding: 6rem 8rem;
    }
}

.home-cta-banner__quote {
    font-size: 36px;
    font-weight: 500;
    color: #fff;
    line-height: 1.2;
    margin: 0;
    border: none;
    padding: 0;
    min-height: 40px;
}

@media (min-width: 1230px) {
    .home-cta-banner__quote {
        font-size: 36px;
    }
}

.home-cta-banner__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 14px 24px;
    border-radius: 999px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
    width: 325px;
    background-color: var(--pa-primary);
}

.home-cta-banner__btn:hover {
    background: white;
    color: var(--pa-primary);
}

.home-cta-banner__btn:focus:not(:hover) {
    color: #fff;
    text-decoration: none;
}

@media (max-width: 1230px) {
    .home-cta-banner-wrap {
        padding: 2rem 0 4rem;
    }

    .home-cta-banner {
        height: 48rem;
        border-radius: 3.2rem;
    }

    .home-cta-banner__bg {
        object-position: center top;
        transform: scale(1.4);
    }

    .home-cta-banner__overlay {
        background: linear-gradient(180deg,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0) 35%,
                rgba(0, 0, 0, 0.25) 55%,
                rgba(0, 0, 0, 0.55) 80%,
                rgba(0, 0, 0, 0.7) 100%);
    }

    .home-cta-banner__content {
        max-width: 100%;
        padding: 0 1.6rem 1.6rem;
        justify-content: flex-end;
        align-items: center;
        text-align: center;
        gap: 2.4rem;
    }

    .home-cta-banner__quote {
        font-size: 2.4rem;
        line-height: 1.3;
        min-height: 0;
        font-weight: 700;
        text-align: center;
        font-family: var(--pa-font-default) !important;
    }

    .home-cta-banner__btn {
        width: 100%;
        background: var(--pa-primary);
        color: #fff;
        border-color: transparent;
        font-weight: 700;
        padding: 1.2rem 2rem;
        align-self: stretch;
        font-size: 16px;
    }
}

.site-footer-v2 {
    position: relative;
    overflow: hidden;
    background-color: var(--pa-primary);
    color: #fff;
}

.site-footer-v2::before {
    content: "";
    position: absolute;
    top: 78%;
    right: -40%;
    transform: translateY(-50%);
    width: 150%;
    aspect-ratio: 1 / 1;
    background-image: url("/wp-content/themes/pedulianak-v2/assets/images/footer-logo.png");
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

@media (min-width: 1230px) {
    .site-footer-v2::before {
        top: 80%;
        right: 0%;
        width: 65%;
    }
}

.site-footer-v2>* {
    position: relative;
    z-index: 1;
}

/* ── Main grid ── */
.site-footer-v2__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 7rem 0 3rem;
}

@media (min-width: 1230px) {
    .site-footer-v2__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1230px) {
    .site-footer-v2__grid {
        grid-template-columns: 1.6fr 1fr 1.4fr 1.4fr;
        gap: 2rem;
    }
}

/* ── Col title ── */
.site-footer-v2__col-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2.4rem;
    line-height: 1.3;
}

/* ── Column 1: Brand ── */
.site-footer-v2__brand {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    margin-top: -3%;
}

.site-footer-v2__logo {
    filter: brightness(0) invert(1);
    height: 64px;
    width: auto;
    object-fit: contain;
    display: block;
}

.site-footer-v2__desc {
    font-size: 16px;
    line-height: 1.4;
    color: white;
    max-width: 38rem;
}

@media (max-width: 1230px) {
    .site-footer-v2__desc {
        max-width: 30rem;
    }
}

/* Social icons row */
.site-footer-v2__socials {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 7rem;
}

.site-footer-v2__social {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0.85;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.site-footer-v2__social:hover {
    opacity: 1;
}

.site-footer-v2__social[data-social="instagram"]:hover {
    color: #E4405F;
}

.site-footer-v2__social[data-social="facebook"]:hover {
    color: #1877F2;
}

.site-footer-v2__social[data-social="x"]:hover {
    color: #000;
}

.site-footer-v2__social[data-social="linkedin"]:hover {
    color: #0A66C2;
}

.site-footer-v2__social[data-social="youtube"]:hover {
    color: #FF0000;
}

.site-footer-v2__social[data-social="youtube"]:hover svg polygon {
    fill: #fff;
}

.site-footer-v2__social svg {
    width: 36px;
    height: 36px;
    transition: fill 0.2s ease;
}

/* ── Column 2: Navigation ── */
.site-footer-v2__nav-links {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.site-footer-v2__nav-link {
    font-size: 16px;
    color: white;
    text-decoration: none;
    transition: color 0.2s;
}

.site-footer-v2__nav-link:hover {
    color: #fff;
}

.site-footer-v2__nav-link:focus:not(:hover) {
    color: white;
    text-decoration: none;
}

/* ── Columns 3 & 4: Contact ── */
.site-footer-v2__col {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: 110%;
}

.site-footer-v2__office {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.site-footer-v2__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 16px;
    color: white;
    line-height: 1.6;
}

.site-footer-v2__contact-icon {
    flex-shrink: 0;
    margin-top: 0.4rem;
}

@media (max-width: 1230px) {
    .site-footer-v2__contact-icon {
        margin-top: 0.1;
    }
}

.site-footer-v2__contact-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.site-footer-v2__email-link,
.site-footer-v2__phone-link {
    color: white;
    text-decoration: none;
    font-size: 16px;
}

.site-footer-v2__email-link:hover,
.site-footer-v2__phone-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* Override Bootstrap a:focus (#2a6496) after click + unhover. */
.site-footer-v2__email-link:focus:not(:hover),
.site-footer-v2__phone-link:focus:not(:hover) {
    color: #fff;
    text-decoration: none;
}

/* ── Newsletter ── */
.site-footer-v2__newsletter {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    grid-column: 1 / -1;
}

.site-footer-v2__newsletter h4 {
    margin-top: 0;
}

@media (min-width: 1230px) {
    .site-footer-v2__newsletter {
        grid-column: 3 / span 3;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        margin-top: -7rem;
    }
}

.site-footer-v2__newsletter-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 0;
}

@media (min-width: 1230px) {
    .site-footer-v2__newsletter-title {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 35%;
    }
}

.site-footer-v2__newsletter-form {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    max-width: 400px;
}

@media (max-width: 1230px) {
    .site-footer-v2__newsletter-form {
        max-width: 85%;
    }
}

.site-footer-v2__newsletter-input {
    flex: 1;
    min-width: 0;
    padding: 12px 24px;
    border: none;
    border-radius: 999px;
    background: #fff;
    color: var(--pa-text-primary);
    font-size: 16px;
    outline: none;
}

@media (max-width: 1230px) {
    .site-footer-v2__newsletter-input {
        text-align: center;
    }
}

.site-footer-v2__newsletter-input::placeholder {
    color: var(--pa-text-muted);
}

.site-footer-v2__newsletter-btn {
    flex-shrink: 0;
    padding: 1.25rem 2.5rem;
    background: #fff;
    color: var(--pa-primary);
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: opacity 0.2s;
    border: 1px solid var(--pa-primary);
}

.site-footer-v2__newsletter-btn:hover {
    opacity: 0.9;
    background: var(--pa-primary);
    color: white;
    border: 1px solid white;
}

.site-footer-v2__newsletter-form--mc4wp .mc4wp-form {
    width: 100%;
    margin: 0;
}

.site-footer-v2__newsletter-form--mc4wp .mc4wp-form-fields {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
}

.site-footer-v2__newsletter-form--mc4wp .mc4wp-form-fields>p {
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}

.site-footer-v2__newsletter-form--mc4wp .mc4wp-form-fields>p:last-child {
    flex: 0 0 auto;
}

.site-footer-v2__newsletter-form--mc4wp input.site-footer-v2__newsletter-input {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    padding: 12px 24px;
    margin: 0;
    height: auto;
    border: none;
    border-radius: 999px !important;
    background: #fff;
    color: var(--pa-text-primary);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.site-footer-v2__newsletter-form--mc4wp .mc4wp-form-fields input[type="email"].site-footer-v2__newsletter-input {
    float: none;
    height: auto;
    border-radius: 999px !important;
}

.site-footer-v2__newsletter-form--mc4wp button.site-footer-v2__newsletter-btn {
    flex: 0 0 auto;
    margin: 0;
}

/* Response box dari plugin (success/error) */
.site-footer-v2__newsletter-form--mc4wp .mc4wp-alert,
.site-footer-v2__newsletter-form--mc4wp .mc4wp-response {
    margin-top: 0.875rem;
    padding: 5px 0;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
}

.site-footer-v2__newsletter-form--mc4wp .mc4wp-alert.mc4wp-error {
    background: rgba(220, 38, 38, 0.22);
}

@media (max-width: 1230px) {
    .site-footer-v2__newsletter-form--mc4wp .mc4wp-form-fields {
        flex-wrap: wrap;
    }

    .site-footer-v2__newsletter-form--mc4wp .mc4wp-form-fields .site-footer-v2__newsletter-btn {
        flex: 1 1 100%;
    }
}

/* Legacy — disisakan untuk fallback static dan response listener manual lama */
.site-footer-v2__newsletter-form .mc4wp-response,
.site-footer-v2__newsletter-form .mc4wp-alert {
    width: 100%;
    margin-top: 0.75rem;
    font-size: 14px;
    color: #fff;
}

.site-footer-v2__newsletter-form .mc4wp-response,
.site-footer-v2__newsletter-form .mc4wp-alert p {
    color: #fff;
}

.site-footer-v2__newsletter-message {
    margin-top: 0.875rem;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
}

.site-footer-v2__newsletter-message--success {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.site-footer-v2__newsletter-message--error {
    background: rgba(220, 38, 38, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

/* ── Bottom bar: copyright ── */
.site-footer-v2__bottom {
    padding: 1.25rem 0;
}

.site-footer-v2__copyright {
    font-size: 16px;
    color: white;
}

@media (max-width: 1230px) {
    .site-footer-v2__grid {
        gap: 3.2rem;
        padding: 3.5rem 0 2rem;
    }

    .site-footer-v2__brand {
        gap: 1.4rem;
        margin-top: 0;
    }

    .site-footer-v2__logo {
        height: 48px;
    }

    .site-footer-v2__desc {
        font-size: 1.4rem;
        line-height: 1.5;
        max-width: 100%;
        margin: 0;
    }

    .site-footer-v2__socials {
        margin-top: 0.4rem;
        gap: 1.6rem;
    }

    .site-footer-v2__social svg {
        width: 24px;
        height: 24px;
    }

    .site-footer-v2__col-title {
        font-size: 1.6rem;
        margin-bottom: 1.4rem;
        font-weight: 700;
    }

    .site-footer-v2__nav-links {
        gap: 1.6rem;
    }

    .site-footer-v2__nav-link,
    .site-footer-v2__contact-item,
    .site-footer-v2__email-link,
    .site-footer-v2__phone-link {
        font-size: 1.4rem;
        line-height: 1.5;
    }

    .site-footer-v2__office {
        gap: 1rem;
    }

    .site-footer-v2__contact-item {
        align-items: flex-start;
        gap: 0.8rem;
    }

    .site-footer-v2__contact-icon svg {
        width: 18px;
        height: 18px;
    }

    /* Newsletter: stacked vertically, full-width input + button */
    .site-footer-v2__newsletter {
        gap: 1.2rem;
        grid-column: 1 / -1;
    }

    .site-footer-v2__newsletter-title {
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .site-footer-v2__newsletter-title br {
        content: " ";
        display: inline;
        white-space: normal;
    }

    .site-footer-v2__newsletter-form {
        flex-direction: column;
        gap: 1rem;
        max-width: 100%;
        align-items: stretch;
    }

    .site-footer-v2__newsletter-input {
        width: 100%;
        text-align: left;
        padding: 1.4rem 2rem;
        font-size: 1.4rem;
    }

    .site-footer-v2__newsletter-btn {
        width: 100%;
        background: white;
        color: var(--pa-primary);
        padding: 1.2rem 2rem;
        font-size: 1.6rem;
        font-weight: 700;
    }

    .site-footer-v2__newsletter-btn:hover {
        background: #06bc67;
        color: white;
    }

    .site-footer-v2__bottom {
        padding: 1rem 0 1.5rem;
    }

    .site-footer-v2__copyright {
        font-size: 1.6rem;
    }
}

.hv2-donate-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.hv2-donate-modal-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}

/* Modal — mobile: full-screen sheet that slides up from the bottom */
.hv2-donate-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    margin: 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #E4FFEE 100%);
    border-radius: 0;
    z-index: 10001;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.hv2-donate-modal.is-open {
    transform: translateY(0);
    pointer-events: auto;
}

/* Desktop: centered card with fade+scale */
@media (min-width: 1230px) {
    .hv2-donate-modal {
        bottom: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -44%) scale(0.97);
        width: 60rem;
        border-radius: 32px;
        max-height: 92vh;
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
    }

    .hv2-donate-modal.is-open {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        pointer-events: auto;
    }
}

/* Header */
.hv2-donate-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    background: #fff;
    flex-shrink: 0;
}

/* Badge pill */
.hv2-donate-modal__badge {
    background: var(--pa-primary-light);
    color: var(--pa-primary);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 999px;
    letter-spacing: 0.01em;
}

/* Back + Close icon buttons */
.hv2-donate-modal__back,
.hv2-donate-modal__close {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--pa-text-secondary);
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.hv2-donate-modal__back:hover,
.hv2-donate-modal__close:hover {
    background: var(--pa-primary-light);
    color: var(--pa-primary);
}

/* Body */
.hv2-donate-modal__body {
    padding: 0 20px 20px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Steps default to natural height (flex-shrink:0). Step 1 sponsor overrides to fill body. */
.hv2-donate-modal__body>[id^="hv2-step-"] {
    flex-shrink: 0;
}

/* Step 1 sponsor: flex column — sp-step1__body scrolls, header + cta + trust fixed */
#hv2-step-1-sponsor:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#hv2-step-1-sponsor>* {
    flex-shrink: 0;
}

#hv2-step-1-sponsor>.hv2-sp-step1__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: auto;
    scrollbar-color: rgba(4, 149, 81, 0.55) rgba(4, 149, 81, 0.08);
}

#hv2-step-1-sponsor>.hv2-sp-step1__body::-webkit-scrollbar {
    width: 10px;
}

#hv2-step-1-sponsor>.hv2-sp-step1__body::-webkit-scrollbar-track {
    background: rgba(4, 149, 81, 0.08);
    border-radius: 999px;
    margin: 4px 0;
}

#hv2-step-1-sponsor>.hv2-sp-step1__body::-webkit-scrollbar-thumb {
    background: rgba(4, 149, 81, 0.5);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

#hv2-step-1-sponsor>.hv2-sp-step1__body::-webkit-scrollbar-thumb:hover {
    background: rgba(4, 149, 81, 0.75);
    background-clip: padding-box;
    border: 2px solid transparent;
}

@media (max-width: 639px) {
    #hv2-step-1-sponsor>.hv2-sp-step1__body::-webkit-scrollbar {
        width: 8px;
    }
}

/* CTA (Lanjut ke Pembayaran) now flex child at step level — kill the old sticky positioning */
#hv2-step-1-sponsor>#hv2-sp-submit {
    position: static;
    bottom: auto;
    margin: 12px 20px 8px;
}

/* Trust info now flex child at step level */
#hv2-step-1-sponsor>.hv2-sp-trust {
    padding: 0 20px 16px;
    margin-top: 0;
}

/* === Generic .hv2-step-scroll: branded green scrollbar, used as middle scroll wrap === */
.hv2-step-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: auto;
    scrollbar-color: rgba(4, 149, 81, 0.55) rgba(4, 149, 81, 0.08);
}

.hv2-step-scroll::-webkit-scrollbar {
    width: 10px;
}

.hv2-step-scroll::-webkit-scrollbar-track {
    background: rgba(4, 149, 81, 0.08);
    border-radius: 999px;
    margin: 4px 0;
}

.hv2-step-scroll::-webkit-scrollbar-thumb {
    background: rgba(4, 149, 81, 0.5);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.hv2-step-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(4, 149, 81, 0.75);
    background-clip: padding-box;
    border: 2px solid transparent;
}

@media (max-width: 639px) {
    .hv2-step-scroll::-webkit-scrollbar {
        width: 8px;
    }
}

/* Modal body does NOT scroll — each step's __body handles its own scroll */
.hv2-donate-modal__body {
    overflow: hidden;
}

/* === Step 2: scroll on .hv2-sp-step2__body, header + footer fixed === */
#hv2-step-2>.hv2-sp-step2__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: auto;
    scrollbar-color: rgba(4, 149, 81, 0.55) rgba(4, 149, 81, 0.08);
}

#hv2-step-2>.hv2-sp-step2__body::-webkit-scrollbar {
    width: 10px;
}

#hv2-step-2>.hv2-sp-step2__body::-webkit-scrollbar-track {
    background: rgba(4, 149, 81, 0.08);
    border-radius: 999px;
    margin: 4px 0;
}

#hv2-step-2>.hv2-sp-step2__body::-webkit-scrollbar-thumb {
    background: rgba(4, 149, 81, 0.5);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

#hv2-step-2>.hv2-sp-step2__body::-webkit-scrollbar-thumb:hover {
    background: rgba(4, 149, 81, 0.75);
    background-clip: padding-box;
    border: 2px solid transparent;
}

@media (max-width: 639px) {
    #hv2-step-2>.hv2-sp-step2__body::-webkit-scrollbar {
        width: 8px;
    }
}

/* === Step 3 sponsor: scroll on .hv2-sp-step3__body, header fixed === */
#hv2-step-3-sponsor:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#hv2-step-3-sponsor>* {
    flex-shrink: 0;
}

#hv2-step-3-sponsor>.hv2-sp-step3__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: auto;
    scrollbar-color: rgba(4, 149, 81, 0.55) rgba(4, 149, 81, 0.08);
}

#hv2-step-3-sponsor>.hv2-sp-step3__body::-webkit-scrollbar {
    width: 10px;
}

#hv2-step-3-sponsor>.hv2-sp-step3__body::-webkit-scrollbar-track {
    background: rgba(4, 149, 81, 0.08);
    border-radius: 999px;
    margin: 4px 0;
}

#hv2-step-3-sponsor>.hv2-sp-step3__body::-webkit-scrollbar-thumb {
    background: rgba(4, 149, 81, 0.5);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

#hv2-step-3-sponsor>.hv2-sp-step3__body::-webkit-scrollbar-thumb:hover {
    background: rgba(4, 149, 81, 0.75);
    background-clip: padding-box;
    border: 2px solid transparent;
}

@media (max-width: 639px) {
    #hv2-step-3-sponsor>.hv2-sp-step3__body::-webkit-scrollbar {
        width: 8px;
    }
}

/* === Sponsor Picker: green scrollbar on .hv2-sponsor-picker__scroll-body === */
.hv2-sponsor-picker__scroll-body {
    scrollbar-width: auto;
    scrollbar-color: rgba(4, 149, 81, 0.55) rgba(4, 149, 81, 0.08);
}

.hv2-sponsor-picker__scroll-body::-webkit-scrollbar {
    width: 10px;
}

.hv2-sponsor-picker__scroll-body::-webkit-scrollbar-track {
    background: rgba(4, 149, 81, 0.08);
    border-radius: 999px;
    margin: 4px 0;
}

.hv2-sponsor-picker__scroll-body::-webkit-scrollbar-thumb {
    background: rgba(4, 149, 81, 0.5);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.hv2-sponsor-picker__scroll-body::-webkit-scrollbar-thumb:hover {
    background: rgba(4, 149, 81, 0.75);
    background-clip: padding-box;
    border: 2px solid transparent;
}

@media (max-width: 639px) {
    .hv2-sponsor-picker__scroll-body::-webkit-scrollbar {
        width: 8px;
    }
}

#hv2-step-1:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#hv2-step-1>* {
    flex-shrink: 0;
}

#hv2-step-2:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#hv2-step-2>* {
    flex-shrink: 0;
}

#hv2-step-2>.hv2-donate-modal__submit,
#hv2-step-2>.hv2-donate-modal__secondary,
#hv2-step-2>.hv2-donate-modal__trust-text,
#hv2-step-2>.hv2-sp-trust {
    position: static;
    bottom: auto;
    z-index: auto;
}

.hv2-sponsor-picker__body {
    overflow-y: hidden;
}

.hv2-sponsor-picker__body>* {
    flex-shrink: 0;
}

/* Title */
.hv2-donate-modal__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--pa-text-primary);
    text-align: center;
    line-height: 1.25;
    margin-bottom: 12px;
    margin-top: 0;
    letter-spacing: -0.02em;
}

/* Jenis Donasi summary card */
.hv2-donate-modal__summary {
    background: var(--pa-primary-light);
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.hv2-donate-modal__summary-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hv2-donate-modal__summary-label {
    font-size: 11px;
    color: var(--pa-text-secondary);
    font-weight: 500;
}

.hv2-donate-modal__summary-type {
    font-size: 14px;
    font-weight: 600;
    color: var(--pa-text-primary);
}

.hv2-donate-modal__summary-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-primary);
    white-space: nowrap;
}

/* Section heading */
.hv2-donate-modal__section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-primary);
    margin-bottom: 8px;
}

.hv2-donate-modal__field-row {
    background: white;
    border: 1px solid var(--pa-border-color);
    border-radius: 12px;
    padding: 12px 12px 4px;
    margin-bottom: 12px;
}

/* Form fields */
.hv2-donate-modal__field {
    margin-bottom: 8px;
}

.hv2-donate-modal__field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pa-text-primary);
    margin-bottom: 4px;
    padding-left: 2px;
}

.hv2-donate-modal__input {
    width: 100%;
    padding: 10px 16px;
    border: 1.5px solid var(--pa-border-color);
    border-radius: 999px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 400;
    color: var(--pa-text-primary);
    background: #fff;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.hv2-donate-modal__input:focus {
    border-color: var(--pa-primary);
}

.hv2-donate-modal__input::placeholder {
    color: var(--pa-text-muted);
    font-weight: 400;
}

/* Country select */
.hv2-donate-modal__select-wrap {
    position: relative;
}

.hv2-donate-modal__select {
    width: 100%;
    padding: 10px 40px 10px 16px;
    border: 1.5px solid var(--pa-border-color);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 400;
    color: var(--pa-text-primary);
    background: #fff;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    cursor: pointer;
}

.hv2-donate-modal__select:focus {
    border-color: var(--pa-primary);
}

.hv2-donate-modal__select-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--pa-text-secondary);
}

#hv2-donate-modal .select2-selection--single {
    height: 100%;
    padding: 8px 30px 8px 16px;
    border: 1.5px solid var(--pa-border-color);
    border-radius: 999px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    outline: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.2s;
}

@media (max-width:1230px) {
    .hv2-sp-field__input {
        padding: 10px 16px;
    }
}

.InputContainer .ElementsApp {
    font-size: 13px !important;
}

@media (max-width: 1230px) {
    #hv2-donate-modal .select2-selection--single {
        font-size: 13px;
    }
}

#hv2-donate-modal .select2-container--default.select2-container--focus .select2-selection--single,
#hv2-donate-modal .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--pa-primary);
}

#hv2-donate-modal .select2-selection__rendered {
    color: var(--pa-text-primary);
    line-height: revert-rule;
    padding: 0;
}

#hv2-donate-modal .select2-selection__placeholder {
    color: #9ca3af;
}

#hv2-donate-modal .select2-selection__arrow {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

#hv2-donate-modal .select2-container~.hv2-donate-modal__select-chevron {
    display: none;
}

.hv2-country-dropdown {
    z-index: 10010 !important;
    border: 1px solid rgba(4, 149, 81, 0.12);
    border-radius: 18px !important;
    overflow: hidden;
    padding: 8px 6px;
    background: #fff;
}

.hv2-country-dropdown .select2-search--dropdown {
    padding: 8px 8px 10px;
}

.hv2-country-dropdown .select2-search--dropdown .select2-search__field {
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    padding: 10px 16px 10px 40px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 14px center;
    color: var(--pa-text-primary);
    transition: border-color 0.18s, box-shadow 0.18s;
}

.hv2-country-dropdown .select2-search--dropdown .select2-search__field:focus {
    border-color: rgba(4, 149, 81, 0.45);
}

.hv2-country-dropdown .select2-search--dropdown .select2-search__field::placeholder {
    color: #9CA3AF;
}

.hv2-country-dropdown .select2-results__options {
    max-height: 26vh !important;
    padding: 12px;
    margin: 6px 2px 2px;
    border: 1px solid rgba(4, 149, 81, 0.14);
    border-radius: 24px;
    overflow-y: auto;
}

.hv2-country-dropdown .select2-results__option {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--pa-text-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s;
}

.hv2-country-dropdown .select2-results__option>span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    line-height: 1.4;
}

.hv2-country-dropdown .select2-results__option--highlighted,
.hv2-country-dropdown .select2-results__option--highlighted[aria-selected] {
    background: rgba(4, 149, 81, 0.08) !important;
    color: var(--pa-primary) !important;
}

.hv2-country-dropdown .select2-results__option[aria-selected="true"] {
    background: rgba(4, 149, 81, 0.14);
    color: var(--pa-primary);
    font-weight: 600;
}

/* Flag emojis/icons: render as circular avatars */
.hv2-country-dropdown .fi {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background-size: cover !important;
    background-position: center !important;
    flex-shrink: 0;
    margin-right: 0 !important;
}

/* Green scrollbar inside the results list */
.hv2-country-dropdown .select2-results__options::-webkit-scrollbar {
    width: 8px;
}

.hv2-country-dropdown .select2-results__options::-webkit-scrollbar-track {
    background: rgba(4, 149, 81, 0.08);
    border-radius: 999px;
    margin: 6px 4px;
}

.hv2-country-dropdown .select2-results__options::-webkit-scrollbar-thumb {
    background: var(--pa-primary);
    border-radius: 999px;
}

.hv2-dial-dropdown {
    z-index: 10020 !important;
    border: 1px solid rgba(4, 149, 81, 0.12);
    border-radius: 18px;
    overflow: hidden;
    padding: 8px 6px;
    background: #fff;
    min-width: 260px;
}

.hv2-dial-dropdown .select2-search--dropdown {
    padding: 8px 8px 10px;
}

.hv2-dial-dropdown .select2-search--dropdown .select2-search__field {
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    padding: 10px 16px 10px 40px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 14px center;
    color: var(--pa-text-primary);
    transition: border-color 0.18s, box-shadow 0.18s;
}

.hv2-dial-dropdown .select2-search--dropdown .select2-search__field:focus {
    border-color: rgba(4, 149, 81, 0.45);
}

.hv2-dial-dropdown .select2-results__options {
    max-height: 60vh !important;
    padding: 20px;
    margin: 6px 2px 2px;
    border: 1px solid rgba(4, 149, 81, 0.14);
    border-radius: 24px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--pa-primary) transparent;
}

.hv2-dial-dropdown .select2-results__option {
    padding: 10px 14px;
    font-size: 14px;
    color: var(--pa-text-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s;
}

.hv2-dial-dropdown .select2-results__option>span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    line-height: 1.4;
}

.hv2-dial-dropdown .select2-results__option--highlighted,
.hv2-dial-dropdown .select2-results__option--highlighted[aria-selected] {
    background: rgba(4, 149, 81, 0.08) !important;
    color: var(--pa-primary) !important;
}

.hv2-dial-dropdown .select2-results__option[aria-selected="true"] {
    background: rgba(4, 149, 81, 0.14);
    color: var(--pa-primary);
    font-weight: 600;
}

.hv2-dial-dropdown .fi {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background-size: cover !important;
    background-position: center !important;
    flex-shrink: 0;
    margin-right: 0 !important;
}

.hv2-dial-dropdown .select2-results__options::-webkit-scrollbar {
    width: 8px;
}

.hv2-dial-dropdown .select2-results__options::-webkit-scrollbar-track {
    background: rgba(4, 149, 81, 0.08);
    border-radius: 999px;
    margin: 6px 4px;
}

.hv2-dial-dropdown .select2-results__options::-webkit-scrollbar-thumb {
    background: var(--pa-primary);
    border-radius: 999px;
}

/* Mobile — dial-code picker becomes a bottom-sheet, mirroring the country
   picker (slides up, full width, rounded top). Header + backdrop are shared. */
@media (max-width: 639.98px) {
    .hv2-dial-dropdown {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-radius: 18px 18px 0 0;
        padding-bottom: 16px;
        max-height: 80vh;
        animation: hv2CountrySlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hv2-dial-dropdown .select2-results__options {
        max-height: calc(80vh - 170px);
    }
}

/* Dial-code list row: flag + country name (fills width) + dial-code pill. */
.hv2-dial-dropdown .hv2-dial-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.hv2-dial-dropdown .hv2-dial-opt__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hv2-dial-dropdown .hv2-dial-opt__code {
    flex-shrink: 0;
    background: #F1F5F9;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
}

/* Collapsed Select2 trigger — pill-shaped, fits left side of phone-wrap. */
.hv2-sp-phone-wrap .select2-container.hv2-dial-container {
    flex-shrink: 0;
    margin: 2px;
    width: auto !important;
    min-width: 88px;
}

.hv2-sp-phone-wrap .select2-container.hv2-dial-container .select2-selection--single {
    height: 100%;
    min-height: 42px;
    background: #F9FAFB;
    border: none;
    border-right: 1px solid #E5E7EB;
    border-radius: 999px;
    padding: 0 30px 0 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.hv2-sp-phone-wrap .select2-container.hv2-dial-container .select2-selection__rendered {
    padding: 0;
    margin-right: 6px;
    line-height: 1.4;
    color: var(--pa-text-primary);
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hv2-sp-phone-wrap .select2-container.hv2-dial-container .select2-selection__rendered .fi {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background-size: cover !important;
    background-position: center !important;
    flex-shrink: 0;
}

.hv2-sp-phone-wrap .select2-container.hv2-dial-container .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 8px;
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hv2-sp-phone-wrap .select2-container.hv2-dial-container .select2-selection__arrow b {
    border-color: #6B7280 transparent transparent transparent;
}

.hv2-sp-phone-wrap .select2-container.hv2-dial-container.select2-container--open .select2-selection__arrow b,
.hv2-sp-phone-wrap .select2-container.hv2-dial-container.select2-container--focus .select2-selection--single {
    outline: none;
}

.hv2-sp-phone-wrap .select2-container.hv2-dial-container.select2-container--focus .select2-selection--single {
    box-shadow: none;
}

.hv2-country-dropdown .select2-results__options {
    scrollbar-width: none;
    scrollbar-color: var(--pa-primary) transparent;
}

@media (max-width: 639.98px) {
    .hv2-country-dropdown {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 18px 18px 0 0;
        padding-bottom: 16px;
        max-height: 80vh;
        animation: hv2CountrySlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hv2-country-dropdown .select2-results__options {
        /* Leave room for the injected header + search field inside the sheet. */
        max-height: calc(80vh - 170px);
    }
}

@keyframes hv2CountrySlideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.hv2-country-dropdown__header {
    display: none;
}

.hv2-country-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10005;
    background: rgba(15, 23, 42, 0.28);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.hv2-country-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 639.98px) {
    .hv2-country-dropdown__header {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 10px 44px 12px;
        margin-bottom: 6px;
        border-bottom: 1px solid rgba(4, 149, 81, 0.10);
    }

    .hv2-country-dropdown__title {
        font-size: 17px;
        font-weight: 700;
        color: var(--pa-text-primary);
        text-align: center;
    }

    .hv2-country-dropdown__close {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 50%;
        background: #F1F5F9;
        color: #334155;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        transition: background 0.15s;
    }

    .hv2-country-dropdown__close:hover {
        background: #E2E8F0;
    }
}

/* Checkboxes */
.hv2-donate-modal__check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--pa-text-secondary);
    line-height: 1.4;
}

.hv2-donate-modal__check input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--pa-primary);
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* Message textarea */
.hv2-donate-modal__message-wrap {
    display: none;
    margin-top: 6px;
    margin-bottom: 10px;
}

.hv2-donate-modal__message-wrap.is-visible {
    display: block;
}

.hv2-donate-modal__message-input {
    width: 100%;
    border: 1px solid var(--pa-border-color);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: var(--pa-font-default);
    color: var(--pa-text-primary);
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.hv2-donate-modal__message-input:focus {
    border-color: var(--pa-primary);
}

.hv2-donate-modal__message-count {
    display: block;
    text-align: right;
    font-size: 11px;
    color: var(--pa-text-muted);
    margin-top: 4px;
}

/* Submit button */
.hv2-donate-modal__submit {
    all: unset;
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 14px 24px;
    margin-top: 12px;
    background: var(--pa-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
}

.hv2-donate-modal__submit:hover {
    background: var(--pa-primary-hover);
}

.hv2-donate-modal__submit--disabled,
.hv2-donate-modal__submit:disabled {
    background: #B8E0CB;
    cursor: not-allowed;
    box-shadow: none;
}

.hv2-donate-modal__submit--disabled:hover,
.hv2-donate-modal__submit:disabled:hover {
    background: #B8E0CB;
}

/* Secondary action below the primary submit (e.g. "Pilih Metode Pembayaran Lainnya") */
.hv2-donate-modal__secondary {
    all: unset;
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 12px 24px;
    margin-top: 8px;
    background: #fff;
    color: var(--pa-primary);
    border: 1.5px solid var(--pa-primary);
    border-radius: 999px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    font-family: inherit;
}

.hv2-donate-modal__secondary:hover {
    background: #E5FFEF;
}

/* Keep the Step 2 pay button visible at the bottom of the modal while the form scrolls */
#hv2-stripe-pay-btn {
    position: sticky;
    bottom: 12px;
    z-index: 10;
}

.hv2-donate-modal__trust-text {
    text-align: center;
    font-size: 12px;
    color: #333;
    margin-top: 10px;
    margin-bottom: 0;
    line-height: 1.5;
}

/* ── Sponsor Picker Modal ── */
.hv2-sponsor-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 10002;
}

.hv2-sponsor-picker-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.hv2-sp-info-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 10004;
}

.hv2-sp-info-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.hv2-sp-info-sheet {
    position: fixed;
    inset: 0;
    margin: 0;
    z-index: 10005;
    background: linear-gradient(180deg, #FFFFFF 0%, #F4FBF6 100%);
    border-radius: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    display: flex;
    flex-direction: column;
}

.hv2-sp-info-sheet.is-open {
    transform: translateY(0);
    pointer-events: auto;
}

.hv2-sp-info-sheet__header {
    position: relative;
    padding: 20px 18px 14px;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.hv2-sp-info-sheet__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--pa-text-primary);
    margin: 0;
    line-height: 1.3;
}

.hv2-sp-info-sheet__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #F3F4F6;
    color: #6B7280;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.18s, color 0.18s;
}

.hv2-sp-info-sheet__close:hover {
    background: #E5E7EB;
    color: #333;
}

.hv2-sp-info-sheet__close svg {
    width: 18px;
    height: 18px;
}

.hv2-sp-info-sheet__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 22px 32px;
    color: #333;
    font-size: 14px;
    line-height: 1.6;
    -webkit-overflow-scrolling: touch;
}

.hv2-sp-info-sheet__body p {
    margin: 0 0 16px;
    color: #333;
}

.hv2-sp-info-sheet__body h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-primary);
    margin: 20px 0 10px;
    line-height: 1.3;
}

.hv2-sp-info-sheet__body ul {
    list-style: disc;
    padding-left: 22px;
    margin: 0 0 16px;
}

.hv2-sp-info-sheet__body li {
    margin-bottom: 8px;
    font-size: 16px;
    color: #333;
}

.hv2-sponsor-picker__campaign-only {
    display: none;
}

.hv2-sponsor-picker--campaign .hv2-sponsor-picker__campaign-only {
    display: block;
}

.hv2-sponsor-picker--campaign .hv2-donate-flat__impact-copy {
    display: none;
}

.hv2-sponsor-picker--campaign .hv2-sp-acc--upsell {
    background: linear-gradient(180deg, #fff 0%, #f0fbf3 100%);
    border: 1px solid rgba(4, 149, 81, 0.08);
    border-radius: 16px;
    padding: 14px 18px;
    margin-top: 16px;
}

.hv2-sponsor-picker--campaign .hv2-sp-acc--upsell {
    display: none;
}

.hv2-sponsor-picker--campaign .hv2-sp-acc--upsell .hv2-sp-acc__header {
    cursor: pointer;
    margin: 0;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}

.hv2-sponsor-picker--campaign .hv2-sp-acc--upsell .hv2-sp-acc__title {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-primary, #333);
    line-height: 1.4;
}

.hv2-sponsor-picker--campaign .hv2-sp-acc--upsell .hv2-sp-acc__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #333;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.hv2-sponsor-picker--campaign .hv2-sp-acc--upsell .hv2-sp-acc__chevron svg {
    width: 100%;
    height: 100%;
    display: block;
}

.hv2-sponsor-picker--campaign .hv2-sp-acc--upsell.hv2-sp-acc--open .hv2-sp-acc__chevron {
    transform: rotate(180deg);
}

.hv2-sponsor-picker--campaign .hv2-sp-acc--upsell .hv2-sp-acc__body {
    display: none;
    padding-top: 14px;
    margin-top: 12px;
    border-top: 1px solid rgba(4, 149, 81, 0.08);
}

.hv2-sponsor-picker--campaign .hv2-sp-acc--upsell.hv2-sp-acc--open .hv2-sp-acc__body {
    display: block;
}

.hv2-picker-rangkuman {
    background: #fff;
    border: 1px solid rgba(4, 149, 81, 0.12);
    border-radius: 14px;
    padding: 18px 20px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.hv2-picker-rangkuman__title {
    font-size: 16px;
    font-weight: 700;
    color: #101828;
    margin: 0 0 14px;
}

.hv2-picker-rangkuman__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #333;
    padding: 6px 0;
}

.hv2-picker-rangkuman__row strong {
    color: #333;
    font-weight: 700;
}

.hv2-picker-rangkuman__row>span:last-child {
    text-align: right;
    color: #333;
    font-size: 16px;
}

.hv2-picker-rangkuman__divider {
    height: 1px;
    background: rgba(4, 149, 81, 0.12);
    margin: 8px 0;
}

.hv2-picker-rangkuman__row--total {
    font-size: 16px;
    color: #101828;
}

.hv2-picker-rangkuman__row--total strong {
    color: #333;
    font-size: 30px;
    font-weight: 700;
}

.hv2-picker-rangkuman__row--recurring {
    flex-wrap: nowrap;
    gap: 16px;
}

.hv2-picker-rangkuman__row--recurring>span:first-child {
    flex: 0 0 auto;
    white-space: nowrap;
}

.hv2-picker-rangkuman__row--recurring>span:last-child {
    font-size: 16px;
    color: #333;
    white-space: nowrap;
}

.hv2-picker-rangkuman__row--recurring strong {
    color: #333;
    font-weight: 700;
    font-size: 18px;
}

@media (max-width: 1230px) {
    .hv2-picker-rangkuman__row--total strong {
        font-size: 20px;
    }

    .hv2-picker-rangkuman__row--recurring strong {
        color: #333;
        font-size: 20px;
    }

    .hv2-picker-rangkuman__row.hv2-picker-rangkuman__row--recurring {
        display: none;
    }
}

.hv2-sp-info-sheet__body a {
    color: inherit;
    text-decoration: underline;
    font-weight: 700;
    transition: color 0.18s ease;
}

.hv2-sp-info-sheet__body a:hover,
.hv2-sp-info-sheet__body a:focus-visible {
    color: #049551;
}

.hv2-sp-info-sheet__body strong {
    font-weight: 700;
    color: var(--pa-primary);
    text-decoration: underline;
}

/* Desktop — centered card with fade+scale */
@media (min-width: 1230px) {
    .hv2-sp-info-sheet {
        inset: auto;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -44%) scale(0.97);
        width: 650px;
        max-width: calc(100vw - 32px);
        height: auto;
        max-height: 100vh;
        border-radius: 24px;
        opacity: 0;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
    }

    .hv2-sp-info-sheet.is-open {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        pointer-events: auto;
    }

    .hv2-sp-info-sheet__header {
        padding: 22px 24px 14px;
    }

    .hv2-sp-info-sheet__close {
        top: 16px;
        right: 18px;
    }
}

.hv2-sponsor-picker {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    inset: 0;
    margin: 0;
    z-index: 10003;
    background: #fff;
    border-radius: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    display: flex;
    flex-direction: column;
}

.hv2-sponsor-picker.is-open {
    transform: translateY(0);
    pointer-events: auto;
}


.hv2-sponsor-picker__header {
    position: sticky;
    top: 0;
    background: linear-gradient(265.19deg, #06BC67 8.26%, #38D089 51.75%, #0BA95F 92.02%);
    color: #fff;
    padding: 20px 20px 16px;
    border-radius: 24px 24px 0 0;
    text-align: center;
    z-index: 6;
}

.hv2-sponsor-picker__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0000001A;
    border: none;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.18s;
}

.hv2-sponsor-picker__close:hover {
    background: rgba(255, 255, 255, 0.28);
}

.hv2-sponsor-picker__badge {
    display: inline-block;
    background: linear-gradient(180deg, #FFFFFF 0%, #E4FFEE 100%);
    border: 1px solid #04955133;
    color: var(--pa-primary);
    font-size: 12px;
    font-weight: 400;
    padding: 8px 16px;
    border-radius: 999px;
    margin-bottom: 10px;
}

.hv2-sponsor-picker__title {
    font-family: var(--pa-font-headline) !important;
    font-size: 32px;
    line-height: 1.25;
    color: #fff;
    margin: 0 0 5px;
    font-weight: 500;
}

@media (max-width:1230px) {
    .hv2-sponsor-picker__title {
        font-family: var(--pa-font-default) !important;
    }
}

.hv2-sponsor-picker__subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    line-height: 1.5;
}

.hv2-sponsor-picker__subtitle strong {
    font-weight: 700;
}

.hv2-sponsor-picker__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: linear-gradient(180deg, #FFFFFF 0%, #E4FFEE 100%);
}

/* Tabs */
.hv2-sponsor-picker__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: rgba(4, 149, 81, 0.06);
    border-radius: 999px;
    padding: 6px;
}

.hv2-sponsor-picker__tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    background: transparent;
    border: 1.5px solid transparent;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
    color: var(--pa-text-primary);
    justify-content: center;
}

.hv2-sponsor-picker__tab--active {
    background: #fff;
    border-color: var(--pa-primary);
}

.hv2-sponsor-picker__tab-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(4, 149, 81, 0.1);
    color: var(--pa-primary);
    display: grid;
    place-items: center;
}

.hv2-sponsor-picker__tab-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    align-items: center;
}

.hv2-sponsor-picker__tab-label {
    font-size: 20px;
    font-weight: 700;
    color: var(--pa-primary);
    line-height: 1.2;
    display: flex;
    gap: 8px;
}

.hv2-sponsor-picker__tab-sub {
    font-size: 14px;
    color: var(--pa-text-muted);
    line-height: 1.3;
    margin-top: 2px;
}

/* Selection panel */
.hv2-sponsor-picker__panel {
    background: #FFF;
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid #04955133;
}

.hv2-sponsor-picker__panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.hv2-sponsor-picker__panel-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-primary);
    margin: 0;
}

.hv2-sponsor-picker__count {
    color: var(--pa-primary);
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.hv2-sponsor-picker__count-check {
    color: var(--pa-primary);
}

.hv2-sponsor-picker__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 230px;
    overflow-y: auto;
    padding-right: 4px;
}

.hv2-sponsor-picker__list::-webkit-scrollbar {
    width: 6px;
}

.hv2-sponsor-picker__list::-webkit-scrollbar-track {
    background: transparent;
}

.hv2-sponsor-picker__list::-webkit-scrollbar-thumb {
    background: rgba(4, 149, 81, 0.25);
    border-radius: 3px;
}

.hv2-sponsor-picker__empty {
    margin: 0;
    padding: 20px;
    text-align: center;
    color: var(--pa-text-muted);
    font-size: 13px;
}

.hv2-sponsor-picker__card.hv2-sponsor-picker__card--recommend {
    position: relative;
    background: #fff;
    border-color: var(--pa-primary);
    padding: 35px 12px 12px;
}

.hv2-sponsor-picker__card-recommend-tab {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--pa-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 7px 16px 7px 14px;
    border-radius: 10px 0 14px 0;
    line-height: 1;
    white-space: nowrap;
}

/* Card */
.hv2-sponsor-picker__card {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 12px;
    background: #fff;
    border: 1.5px solid transparent;
    border-radius: 12px;
    padding: 12px;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    border: 1px solid #E2E2E2;
}

.hv2-sponsor-picker__card:hover {
    border-color: #CDEBD9;
}

.hv2-sponsor-picker__card--selected {
    border-color: var(--pa-primary);
    background: linear-gradient(215.08deg, #FFFFFF 45.87%, #D5FFE6 89.87%) !important;
    border: 1px solid #049551;
}

.hv2-sponsor-picker__card-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--pa-primary);
    background: #f3f4f6;
    flex-shrink: 0;
}

.hv2-sponsor-picker__card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: center 20%;
}

.hv2-sponsor-picker__card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.hv2-sponsor-picker__card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--pa-text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hv2-sponsor-picker__card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.hv2-sponsor-picker__card-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(4, 149, 81, 0.1);
    color: var(--pa-primary);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1.2;
}

.hv2-sponsor-picker__card-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.hv2-sponsor-picker__card-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--pa-text-primary);
    white-space: nowrap;
}

.hv2-sponsor-picker__card-check {
    width: 22px;
    height: 22px;
    border: 1.5px solid #CDCDCD;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.hv2-sponsor-picker__card-check.is-checked {
    background: var(--pa-primary);
    border-color: var(--pa-primary);
    color: #fff;
}

.hv2-sponsor-picker__panel-footer {
    display: flex;
    justify-content: flex-end;
}

.hv2-sponsor-picker__info-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--pa-primary);
    font-size: 12px;
    text-decoration: underline;
    font-weight: 500;
}

.hv2-sponsor-picker__info-link:hover {
    opacity: 0.85;
}

/* Total row */
.hv2-sponsor-picker__total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 4px 2px;
}

.hv2-sponsor-picker__total-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hv2-sponsor-picker__total-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.hv2-sponsor-picker__total-amount {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.hv2-sponsor-picker__total-amount>span:first-child {
    font-family: var(--pa-font-headline);
    font-size: 32px;
    font-weight: 700;
    color: var(--pa-text-primary);
    line-height: 1.1;
}

.hv2-sponsor-picker__total-suffix {
    font-size: 16px;
    color: #333;

}

.hv2-sponsor-picker__total-equiv {
    font-size: 14px;
    color: #333333;
}

.hv2-sponsor-picker__freq-row {
    display: inline-flex;
    background: rgba(4, 149, 81, 0.06);
    border-radius: 999px;
    padding: 6px;
    flex-shrink: 0;
}

.hv2-sponsor-picker__freq-btn {
    background: transparent;
    border: none;
    padding: 12px 24px;
    font-size: 20px;
    font-weight: 600;
    color: var(--pa-text-muted);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

.hv2-sponsor-picker__freq-btn--active {
    background: #fff;
    color: var(--pa-primary);
    border: 1.6px solid #049551;
}

.h2-sponsor-impact-container {
    background: #E5FFEF;
}

/* Impact note */
.hv2-sponsor-picker__impact {
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.hv2-sponsor-picker__impact-icon {
    color: var(--pa-primary);
    flex-shrink: 0;
    padding: 10px;
    border-radius: 999px;
    background: #04955133;
    width: 48px;
    height: 48px;
    text-align: center;
}

.hv2-sponsor-picker__impact-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 16px;
    color: var(--pa-text-primary);
    line-height: 1.45;
}

.hv2-sponsor-picker__impact-body strong {
    font-weight: 600;
}

.hv2-sponsor-picker__impact-link {
    color: var(--pa-primary);
    font-weight: 500;
}

/* Error + CTA + Trust */
.hv2-sponsor-picker__error {
    color: #c0392b;
    font-size: 12px;
    margin: 0;
    min-height: 16px;
    text-align: center;
}

.hv2-sponsor-picker__cta {
    background: var(--pa-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 14px 18px;
    font-weight: 600;
    font-size: 20px;
    width: 100%;
    cursor: pointer;
    transition: background 0.18s, opacity 0.18s, box-shadow 0.18s;
    font-family: inherit;
}

.hv2-sponsor-picker__cta:hover:not(:disabled) {
    background: #037a42;
}

.hv2-sponsor-picker__cta:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.hv2-sponsor-picker__trust {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    color: var(--pa-text-muted);
    font-size: 11px;
    margin-top: 2px;
    text-align: center;
}

.hv2-sponsor-picker__trust-row {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
}

/* Donate pane — amount presets */
.hv2-sponsor-picker__pane {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid #04955133;
}

.hv2-sponsor-picker__panel--donate {
    gap: 10px;
}

.hv2-sponsor-picker__donate-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--pa-text-primary);
    margin: 0;
}

.hv2-sponsor-picker__donate-presets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.hv2-sponsor-picker__donate-preset {
    position: relative;
    background: #fff;
    border: 1.5px solid #E2E2E2;
    border-radius: 999px;
    padding: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pa-text-primary);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, color 0.18s, box-shadow 0.18s;
    font-family: inherit;
    text-align: center;
}

.hv2-sponsor-picker__donate-preset:hover {
    border-color: #CDEBD9;
}

.hv2-sponsor-picker__donate-preset--active {
    background: #E5FFEF;
    border-color: var(--pa-primary);
    color: var(--pa-primary);
}

.hv2-sponsor-picker__donate-preset-value {
    display: inline-block;
}

.hv2-sponsor-picker__donate-popular {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pa-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    line-height: 1;
}

.hv2-sponsor-picker__donate-custom {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid #E2E2E2;
    border-radius: 999px;
    padding: 12px 18px;
    background: #fff;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.hv2-sponsor-picker__donate-custom:focus-within {
    border-color: var(--pa-primary);
}

.hv2-sponsor-picker__donate-custom-prefix {
    font-size: 14px;
    font-weight: 700;
    color: var(--pa-text-primary);
}

.hv2-sponsor-picker__donate-custom-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-align: right;
    min-width: 0;
    -moz-appearance: textfield;
}

.hv2-sponsor-picker__donate-custom-input::-webkit-outer-spin-button,
.hv2-sponsor-picker__donate-custom-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hv2-sponsor-picker__donate-helper {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    color: var(--pa-primary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 2px;
}

.hv2-sponsor-picker__donate-helper svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Desktop */
@media (min-width: 1230px) {
    .hv2-sponsor-picker {
        bottom: auto;
        top: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -44%) scale(0.97);
        width: 60rem;
        max-width: calc(100vw - 32px);
        border-radius: 32px;
        max-height: 93vh;
        opacity: 0;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    }

    .hv2-sponsor-picker.is-open {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    .hv2-sponsor-picker__header {
        border-radius: 24px 24px 0 0;
    }
}

/* ── Donate variant of the sponsor-styled modal — hide sponsor-only bits ── */
.hv2-donate-modal--donate .hv2-sp-summary__row--meta,
.hv2-donate-modal--donate #hv2-sp-step2-summary-avatars,
.hv2-donate-modal--donate #hv2-sp-step2-summary-names {
    display: none;
}

/* ── Donate once + ID: payment method picker (step 2) ── */
.hv2-donate-methods {
    padding: 0;
    margin: 0 0 12px;
}

.hv2-donate-methods__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    background: #fff;
    border: 1px solid #04955133;
    border-radius: 24px;
    padding: 12px 24px;
}

@media (max-width: 1230px) {
    .hv2-donate-methods__grid {
        grid-template-columns: 1fr 1fr;
        padding: 12px 16px;
    }
}

.hv2-donate-method {
    display: grid;
    grid-template-columns: 18px 1fr 14px;
    gap: 10px;
    align-items: center;
    background: #fff;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
    text-align: left;
    font-family: inherit;
}

@media (max-width:1230px) {
    .hv2-donate-method {
        padding: 10px;
    }
}

.hv2-donate-method:hover {
    border-color: #CDEBD9;
}

.hv2-donate-method--active {
    border-color: var(--pa-primary);
    background: #E5FFEF;
}

.hv2-donate-method__radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #CDCDCD;
    background: #fff;
    display: block;
    position: relative;
    flex-shrink: 0;
}

.hv2-donate-method--active .hv2-donate-method__radio {
    border-color: var(--pa-primary);
}

.hv2-donate-method--active .hv2-donate-method__radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--pa-primary);
}

.hv2-donate-method__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.hv2-donate-method__label {
    font-weight: 600;
    font-size: 13px;
    color: var(--pa-text-primary);
    line-height: 1.2;
}

.hv2-donate-method__logos {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.hv2-donate-method__logos svg {
    height: 24px;
    width: 24px;
}

.hv2-donate-method__chev {
    color: var(--pa-text-muted);
    flex-shrink: 0;
}

.hv2-donate-method__chev svg {
    height: 20px;
    width: 20px;
    color: #333;
}

.hv2-donate-method--active .hv2-donate-method__chev {
    color: var(--pa-primary);
}

/* Payment-brand badges (text-based, no image assets needed) */
.hv2-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 5px;
    border-radius: 3px;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.3px;
    min-width: 40px;
    height: 20px;
    box-sizing: border-box;
}

.hv2-logo-bca {
    background: #0070C0;
}

.hv2-logo-bni {
    background: #F08000;
}

.hv2-logo-mandiri {
    background: #003F87;
    font-style: italic;
    padding: 3px 6px;
}

.hv2-logo-bri {
    background: #003D7A;
    padding: 3px 6px;
}

.hv2-logo-cimb {
    background: #B4172E;
    padding: 3px 6px;
}

.hv2-logo-permata {
    background: #00A14B;
    padding: 3px 6px;
}

.hv2-logo-bank {
    background: #E5E7EB;
    color: #4B5563;
}

.hv2-logo-gopay {
    background: linear-gradient(90deg, #0074D9, #00C2D9);
    padding: 3px 8px;
}

.hv2-logo-dana {
    background: #118EEA;
    padding: 3px 6px;
}

.hv2-logo-ovo {
    background: #4E2A7F;
    padding: 3px 6px;
}

.hv2-logo-spay {
    background: #EE4D2D;
    padding: 3px 6px;
}

.hv2-logo-qris {
    background: #1F1F1F;
    padding: 3px 6px;
}

/* ── Donate once + ID: Virtual Account list (step 2) ── */
.hv2-va-list {
    background: #fff;
    border: 1px solid #04955133;
    border-radius: 24px;
    padding: 12px;
    margin: 0 0 12px;
}

.hv2-va-list__title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--pa-text-primary);
}

.hv2-va-list__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.hv2-va-bank {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: 10px;
    align-items: center;
    background: #fff;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
    text-align: left;
    font-family: inherit;
}

.hv2-va-bank:hover {
    border-color: #CDEBD9;
}

.hv2-va-bank--active {
    border-color: var(--pa-primary);
    background: #E5FFEF;
}

.hv2-va-bank__radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #CDCDCD;
    background: #fff;
    display: block;
    position: relative;
    flex-shrink: 0;
}

.hv2-va-bank--active .hv2-va-bank__radio {
    border-color: var(--pa-primary);
}

.hv2-va-bank--active .hv2-va-bank__radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--pa-primary);
}

.hv2-va-bank__label {
    font-weight: 600;
    font-size: 13px;
    color: var(--pa-text-primary);
    min-width: 0;
}

.hv2-va-bank__logo {
    display: inline-flex;
    align-items: center;
}

/* ── Donate once + ID: VA payment instruction (step 2) ── */
.hv2-va-instruction {
    margin: 0 0 12px;
}

/* Combined card wrapping deadline + amounts (light green) */
.hv2-va-instruction__card {
    background: #E7F5EC;
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 12px;
}

.hv2-va-instruction__divider {
    height: 1px;
    background: rgba(4, 149, 81, 0.18);
    margin: 14px 0;
}

.hv2-va-instruction__deadline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
}

.hv2-va-instruction__deadline-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.hv2-va-instruction__deadline-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-primary);
}

.hv2-va-instruction__deadline-time {
    font-size: 13px;
    font-weight: 400;
    color: var(--pa-text-secondary);
}

.hv2-va-instruction__deadline-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #C9EBD3;
    border: none;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    align-self: flex-start;
}

.hv2-va-instruction__deadline-right svg {
    width: 14px;
    height: 14px;
    color: var(--pa-primary);
}

.hv2-va-instruction__amounts {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
    margin-bottom: 0;
}

.hv2-va-instruction__amount {
    background: transparent;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hv2-va-instruction__amount-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-primary);
}

.hv2-va-instruction__amount-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--pa-text-primary);
    flex-wrap: wrap;
}

.hv2-va-copy {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--pa-text-muted);
    display: inline-flex;
    align-items: center;
    transition: color 0.18s;
}

.hv2-va-copy svg {
    height: 20px;
    width: 20px;
}

.hv2-va-copy:hover {
    color: var(--pa-primary);
}

.hv2-va-copy--copied {
    color: var(--pa-primary);
}

.hv2-va-instruction__section-title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-primary);
}

/* Single white card wrapping all accordion items */
.hv2-va-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 24px;
    padding: 12px;
}

.hv2-va-accordion__item {
    background: transparent;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #F0F0F0;
    overflow: hidden;
}

.hv2-va-accordion__item:last-child {
    border-bottom: none;
}

.hv2-va-accordion__head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: transparent;
    border: 0;
    padding: 12px 4px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-primary);
}

@media (max-width:1230px) {
    .hv2-va-accordion__head {
        font-size: 13px;
    }
}

.hv2-va-accordion__chev {
    transition: transform 0.18s;
    color: var(--pa-text-muted);
    font-size: 14px;
    line-height: 1;
}

.hv2-va-accordion__item--open .hv2-va-accordion__chev {
    transform: rotate(180deg);
}

.hv2-va-accordion__body {
    padding: 0 14px 12px;
}

.hv2-va-accordion__body ol {
    margin: 10px 0 0;
    padding-left: 20px;
    color: var(--pa-text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.hv2-va-accordion__body ol li {
    color: #333;
}

.hv2-va-accordion__body ol li+li {
    margin-top: 4px;
}

@media (max-width: 480px) {
    .hv2-va-list__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 639.98px) {
    .hv2-va-instruction__card {
        padding: 12px 16px;
    }

    .hv2-va-instruction__deadline {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 12px;
    }

    .hv2-va-instruction__deadline-left {
        align-items: center;
    }

    .hv2-va-instruction__deadline-right {
        align-self: center;
        margin-top: 4px;
    }

    .hv2-va-instruction__amounts {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }

    .hv2-va-instruction__amount {
        align-items: center;
        gap: 10px;
    }

    .hv2-va-instruction__amount-value {
        justify-content: center;
    }

    .hv2-va-instruction__divider {
        margin: 12px 0;
    }
}

/* ── Donate once + ID: QRIS instruction (step 2) ── */
.hv2-qris-instruction {
    margin: 0 0 12px;
}

.hv2-qris-instruction__qr-wrap {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.hv2-qris-instruction__hint {
    margin: 0;
    font-size: 12px;
    color: var(--pa-text-muted);
    text-align: center;
}

.hv2-qris-instruction__qr {
    width: 240px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    background: #F9FAFB;
    border-radius: 8px;
    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;
}

.hv2-qris-instruction__amount {
    width: 100%;
    background: #F3F4F6;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.hv2-qris-instruction__amount-label {
    font-size: 12px;
    color: var(--pa-text-muted);
}

.hv2-qris-instruction__amount-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-primary);
}

.hv2-logo-more {
    font-size: 10px;
    font-weight: 600;
    color: var(--pa-text-muted);
    padding: 0 2px;
}

/* ── Sponsor Step 1 (Data Diri) ── */
.hv2-donate-modal--sponsor .hv2-donate-modal__header {
    display: none;
}

.hv2-donate-modal--sponsor .hv2-donate-modal__body {
    padding: 0;
}

.hv2-sp-step1__header {
    position: sticky;
    top: 0;
    z-index: 6;
    background: linear-gradient(265.19deg, #06BC67 8.26%, #38D089 51.75%, #0BA95F 92.02%);
    color: #fff;
    padding: 22px 22px 26px;
    border-radius: 24px 24px 0 0;
    text-align: center;
}

.hv2-sp-step1__back,
.hv2-sp-step1__close {
    position: absolute;
    top: 19px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.18s;
}

.hv2-sp-step1__back {
    left: 14px;
}

.hv2-sp-step1__close {
    right: 14px;
}

.hv2-sp-step1__back:hover,
.hv2-sp-step1__close:hover {
    background: rgba(255, 255, 255, 0.28);
}

.hv2-sp-step1__badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 10px;
}

.hv2-sp-step1__title {
    font-family: var(--pa-font-headline);
    font-size: 22px;
    line-height: 1.25;
    color: #fff;
    margin: 0 0 8px;
    font-weight: 700;
}

.hv2-sp-step1__subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    line-height: 1.5;
}

.hv2-sp-step1__subtitle strong {
    font-weight: 700;
}

.hv2-sp-step1__body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #FFFFFF 0%, #E4FFEE 100%);
}

.hv2-sp-stepper {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hv2-sp-stepper__item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.hv2-sp-stepper__num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #E5E7EB;
    color: var(--pa-text-muted);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.hv2-sp-stepper__item--active .hv2-sp-stepper__num {
    background: var(--pa-primary);
    color: #fff;
}

.hv2-sp-stepper__label {
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-muted);
    white-space: nowrap;
}

.hv2-sp-stepper__item--active .hv2-sp-stepper__label {
    color: var(--pa-text-primary);
    font-weight: 700;
}

.hv2-sp-stepper__line {
    flex: 0.5;
    height: 1.5px;
    background: #E5E7EB;
    min-width: 10px;
}

.hv2-sp-summary {
    background: #EAF8EF;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hv2-sp-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.hv2-sp-summary__row--meta {
    justify-content: flex-start;
}

.hv2-sp-summary__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--pa-text-primary);
}

.hv2-sp-summary__amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-primary);
    white-space: nowrap;
}

.hv2-sp-summary__avatars {
    display: inline-flex;
    align-items: center;
}

.hv2-sp-summary__avatar {
    width: 45px;
    height: 45px;
    overflow: hidden;
    margin-left: -10px;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--pa-primary);
    border: 1px solid #049551;
    border-radius: 12px;
}

@media (min-width: 1230px) {
    .hv2-sp-summary__avatar {
        width: 40px;
        height: 40px;
    }
}

.ElementsApp,
.ElementsApp .InputElement {
    font-size: 18px !important;
}

.hv2-sp-summary__avatar:first-child {
    margin-left: 0;
}

.hv2-sp-summary__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hv2-sp-summary__avatar--more {
    background: white;
    color: var(--pa-primary);
}

.hv2-sp-summary__names {
    font-size: 12px;
    color: var(--pa-text-secondary);
    line-height: 1.4;
    flex: 1;
    min-width: 0;
    margin-left: 10px;
}

.hv2-sp-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1.5px solid var(--pa-border-color);
    border-radius: 14px;
    padding: 16px;
}

@media (max-width:1230px) {
    .hv2-sp-form {
        margin-bottom: 10px;
    }
}

.hv2-sp-form__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--pa-text-primary);
    margin: 0 0 4px;
}

.hv2-sp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hv2-sp-field__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--pa-text-primary);
}

.hv2-sp-field__input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--pa-border-color);
    border-radius: 999px;
    font-size: 16px;
    font-family: inherit;
    color: var(--pa-text-primary);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.18s, box-shadow 0.18s;
    outline: none;
}

.hv2-sp-field__input:focus {
    border-color: var(--pa-primary);
}

.hv2-sp-field__input::placeholder {
    color: #9ca3af;
}

.hv2-sp-phone-wrap {
    display: flex;
    gap: 8px;
}

.hv2-sp-phone-prefix {
    flex-shrink: 0;
    width: auto;
    padding: 16px;
    border: 1.5px solid var(--pa-border-color);
    border-radius: 12px;
    font-size: 18px;
    font-family: inherit;
    color: var(--pa-text-primary);
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'><path d='M4 6l4 4 4-4' stroke='%23374151' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 10px center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-size: 12px 12px;
    cursor: pointer;
}

.hv2-sp-phone-prefix:focus {
    outline: none;
    border-color: var(--pa-primary);
}

.hv2-sp-field__input--phone {
    flex: 1;
}

.hv2-sp-select-wrap {
    position: relative;
}

.hv2-sp-select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px;
    cursor: pointer;
}

.hv2-sp-select-chevron {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6b7280;
}

.hv2-sp-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--pa-text-primary);
    cursor: pointer;
    user-select: none;
}

.hv2-sp-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--pa-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.hv2-sp-check.hv2-sp-gift-check {
    display: none;
}

.hv2-donate-modal--sponsor .hv2-sp-check.hv2-sp-gift-check {
    display: none;
}

.hv2-donate-modal--present .hv2-sp-check.hv2-sp-gift-check {
    display: flex;
}

.hv2-sp-message-wrap {
    position: relative;
    display: none;
    margin-top: -6px;
}

.hv2-sp-message-wrap.is-visible {
    display: block;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
    padding: 12px;
}

.hv2-sp-message-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--pa-border-color);
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--pa-text-primary);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.18s;
    outline: none;
    resize: vertical;
}

.hv2-sp-message-input:focus {
    border-color: var(--pa-primary);
}

.hv2-sp-message-count {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: 11px;
    color: var(--pa-text-muted);
    pointer-events: none;
    background: #fff;
    padding: 0 4px;
}

.hv2-sp-impact {
    background: transparent;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.hv2-sp-impact__icon {
    color: var(--pa-primary);
    flex-shrink: 0;
    padding: 10px;
    border-radius: 999px;
    background: #04955133;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
}

.hv2-sp-impact__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 14px;
    color: var(--pa-text-primary);
    line-height: 1.45;
}

.hv2-sp-impact__body strong {
    font-weight: 600;
}

.hv2-sp-impact__link {
    color: var(--pa-primary);
    font-weight: 500;
}

.hv2-sp-cta {
    background: var(--pa-primary);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px 18px;
    font-weight: 600;
    font-size: 15px;
    width: 100%;
    cursor: pointer;
    transition: background 0.18s, opacity 0.18s;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hv2-sp-cta:hover:not(:disabled) {
    background: #037a42;
}

.hv2-sp-cta:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Sticky Step 1 CTA (sponsor variant — "Lanjut ke Pembayaran") */
#hv2-sp-submit {
    position: sticky;
    bottom: 12px;
    z-index: 10;
}

.hv2-sp-trust {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    color: var(--pa-text-muted);
    font-size: 11px;
    margin-top: 2px;
    text-align: center;
}

.hv2-sp-trust__row {
    display: block;
    text-align: center;
    line-height: 1.4;
}

/* Icon flows inline with the (centered) text so it hugs the first line even
   when the copy wraps onto two lines — instead of sitting far to the left. */
.hv2-sp-trust__row svg {
    display: inline;
    vertical-align: middle;
    margin-right: 6px;
}

/* ── Sponsor Step 2 (Pembayaran) ── */
/* Sponsor-only elements: hidden by default, shown when modifier active */
.hv2-sp-step2__header,
.hv2-sp-step2__intro,
.hv2-sp-step2__impact,
.hv2-sp-step2__trust,
.hv2-sp-cardmock {
    display: none;
}

.hv2-donate-modal--sponsor .hv2-sp-step2__header {
    display: block;
    margin: 0;
}

.hv2-donate-modal--sponsor .hv2-sp-step2__intro {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 0 4px;
}

.hv2-donate-modal--sponsor .hv2-sp-step2__impact {
    display: flex;
}

.hv2-donate-modal--sponsor .hv2-sp-step2__trust {
    display: flex;
}

.hv2-donate-modal--sponsor .hv2-sp-cardmock {
    display: block;
}

/* Hide default step-2 elements when sponsor modifier active */
.hv2-donate-modal--sponsor #hv2-step-2 .hv2-donate-modal__title,
.hv2-donate-modal--sponsor #hv2-step-2 .hv2-donate-modal__summary,
.hv2-donate-modal--sponsor #hv2-step-2 .hv2-donate-modal__section-title,
.hv2-donate-modal--sponsor #hv2-step-2 .hv2-step2-terms,
.hv2-donate-modal--sponsor #hv2-step-2 .hv2-donate-modal__trust-text,
.hv2-donate-modal--sponsor #hv2-step-2 .hv2-security-badge__title,
.hv2-donate-modal--sponsor #hv2-step-2 .hv2-security-badge__desc {
    display: none;
}

/* Step 2 outer wrapper — header/body/footer handle their own padding/bg */
.hv2-donate-modal--sponsor #hv2-step-2 {
    padding: 0;
    background: transparent;
}

/* Section title for sponsor step-2 */
.hv2-sp-step2__section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--pa-text-primary);
    margin: 4px 0 0;
}

/* Hide radio for sponsor (single payment method shown) */
.hv2-donate-modal--sponsor #hv2-step-2 .hv2-payment-option__radio {
    display: none;
}

/* Step 2 Pay button restyle */
.hv2-donate-modal--sponsor #hv2-stripe-pay-btn {
    background: var(--pa-primary);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px 18px;
    font-weight: 600;
    font-size: 15px;
    width: 100%;
    cursor: pointer;
    margin-top: 4px;
}

.hv2-donate-modal--sponsor #hv2-stripe-pay-btn:hover {
    background: #037a42;
}

/* Sectigo badge compact */
.hv2-donate-modal--sponsor #hv2-step-2 .hv2-security-badge {
    padding: 10px 0 0;
    border-top: none;
    margin-top: 6px;
}

.hv2-donate-modal--sponsor #hv2-step-2 .hv2-security-badge img {
    width: 80px !important;
}

/* Stepper: completed state */
.hv2-sp-stepper__item--done .hv2-sp-stepper__num--done {
    background: var(--pa-primary);
    color: #fff;
}

.hv2-sp-stepper__item--done .hv2-sp-stepper__label {
    color: var(--pa-primary);
}

/* Credit card mockup */
.hv2-sp-cardmock {
    position: relative;
    background: linear-gradient(135deg, #0AAE59 0%, #049551 60%, #037a42 100%);
    color: #fff;
    border-radius: 14px;
    padding: 18px 18px 16px;
    margin: 0 0 16px;
    overflow: hidden;
    min-height: 140px;
}

.hv2-sp-cardmock::before {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    top: -30px;
    right: -40px;
}

.hv2-sp-cardmock::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    bottom: -30px;
    right: 30px;
}

.hv2-sp-cardmock__chip {
    display: block;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.hv2-sp-cardmock__number {
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.hv2-sp-cardmock__row {
    display: flex;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.hv2-sp-cardmock__col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hv2-sp-cardmock__col-label {
    font-size: 9px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.5px;
}

.hv2-sp-cardmock__col-value {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Mobile adjustments for sponsor step-2 */
@media (max-width: 1230px) {
    .hv2-sp-cardmock {
        padding: 14px 14px 12px;
        min-height: 120px;
    }

    .hv2-sp-cardmock__number {
        font-size: 15px;
        letter-spacing: 1.5px;
    }

    .hv2-sp-stepper--step2 .hv2-sp-stepper__label {
        font-size: 13px;
    }
}

/* ── Step 2: Payment method option boxes ── */
.hv2-payment-option {
    border: 1.5px solid var(--pa-border-color);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 10px;
    transition: border-color 0.18s;
    background: white;
}

.hv2-payment-option--active {
    border-color: var(--pa-primary);
}

.hv2-payment-option__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
}

.hv2-payment-option__radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.18s;
}

.hv2-payment-option--active .hv2-payment-option__radio {
    border-color: var(--pa-primary);
}

.hv2-payment-option--active .hv2-payment-option__radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--pa-primary);
}

.hv2-payment-option__icon {
    flex-shrink: 0;
}

.hv2-payment-option__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--pa-text-primary);
    flex: 1;
}

.hv2-payment-option__logos {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

.hv2-payment-option__body {
    padding: 0 16px 16px;
}

/* Card fields */
.hv2-card-field {
    margin-bottom: 12px;
}

.hv2-card-field:last-child {
    margin-bottom: 0;
}

.hv2-card-field__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pa-text-primary);
    margin-bottom: 6px;
}

/* "i" info button next to the CVV label — opens the CVV info bottom-sheet */
.hv2-cvv-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0;
    background: var(--pa-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-family: serif;
    font-size: 12px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.18s, transform 0.18s;
}

.hv2-cvv-info-btn:hover {
    background: var(--pa-primary-hover);
}

/* ── CVV info bottom-sheet modal ─────────────────────────────── */
.hv2-cvv-info {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

.hv2-cvv-info.is-open {
    display: flex;
}

.hv2-cvv-info__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.hv2-cvv-info__sheet {
    position: relative;
    width: 100%;
    max-width: 44rem;
    background: #fff;
    border-top-left-radius: 2.4rem;
    border-top-right-radius: 2.4rem;
    padding: 2.4rem 2rem 3rem;
    animation: hv2CvvInfoSlideUp 0.25s ease-out;
}

@keyframes hv2CvvInfoSlideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.hv2-cvv-info__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.6rem;
}

.hv2-cvv-info__title {
    margin: 0;
    flex: 1;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--pa-text-primary);
}

.hv2-cvv-info__close {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    width: 3rem;
    height: 3rem;
    background: #f1f5f9;
    color: #64748b;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s;
}

.hv2-cvv-info__close:hover {
    background: #e2e8f0;
}

.hv2-cvv-info__illustration {
    display: flex;
    justify-content: center;
    padding: 1.4rem 0;
    background: #eef7ee;
    border-radius: 1.6rem;
    margin-bottom: 1.6rem;
}

.hv2-cvv-info__desc {
    margin: 0;
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.55;
    color: #333;
}

@media (min-width: 1230px) {
    .hv2-cvv-info {
        align-items: center;
    }

    .hv2-cvv-info__sheet {
        max-width: 38rem;
        border-radius: 2rem;
        animation: hv2CvvInfoFadeIn 0.2s ease-out;
    }

    @keyframes hv2CvvInfoFadeIn {
        from {
            opacity: 0;
            transform: scale(0.96);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }
}

.hv2-card-field__input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--pa-border-color);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--pa-text-primary);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.18s, box-shadow 0.18s;
    outline: none;
}

.hv2-card-field__input:focus {
    border-color: var(--pa-primary);
}

.hv2-card-field__input::placeholder {
    color: #9ca3af;
}

.hv2-card-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 0;
}

.hv2-stripe-element {
    padding: 10px 14px;
    border: 1.5px solid var(--pa-border-color);
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.18s;
    min-height: 42px;
}

.hv2-stripe-errors {
    color: #e53e3e;
    font-size: 13px;
    min-height: 18px;
    margin-bottom: 4px;
    display: none;
}

@media (max-width: 639.98px) {
    .hv2-stripe-errors {
        display: none;
    }
}

/* Terms text */
.hv2-step2-terms {
    font-size: 12px;
    color: #333333;
    text-align: center;
    margin: 14px 0 14px;
    line-height: 1.6;
}

.hv2-step2-terms a {
    color: var(--pa-primary);
    text-decoration: underline;
}

/* Security / Sectigo badge */
.hv2-security-badge {
    margin-top: 20px;
    padding: 16px;
    border-top: 1px solid var(--pa-border-color);
    text-align: center;
}

.hv2-security-badge .sectigo-wrapper {
    margin-bottom: 10px;
}

.hv2-security-badge__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--pa-text-primary);
    margin: 0 0 6px;
}

.hv2-security-badge__desc {
    font-size: 12px;
    color: #333;
    margin: 0;
    line-height: 1.6;
}

.hv2-security-badge__desc a {
    color: var(--pa-primary);
    text-decoration: underline;
}

/* ── Hero card: Sponsor Anak panel ── */
.home-hero__sponsor-panel {
    margin-bottom: 2rem;
}

.home-hero__sponsor-desc {
    font-size: 1.6rem;
    color: #333;
    text-align: center;
    margin: 0 0 1.4rem;
    line-height: 1.5;
}

.home-hero__sponsor-desc strong {
    color: var(--pa-text-primary);
    font-weight: 700;
}

/* Carousel */
.home-hero__sponsor-carousel {
    margin-bottom: 1.4rem;
}

.home-hero__sponsor-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.home-hero__sponsor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.home-hero__sponsor-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}

.home-hero__sponsor-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db;
    cursor: pointer;
    transition: background 0.18s, transform 0.18s;
    display: inline-block;
}

.home-hero__sponsor-dot--active {
    background: var(--pa-primary);
    transform: scale(1.25);
}

.home-hero__sponsor-nav {
    display: flex;
    gap: 8px;
}

.home-hero__sponsor-nav-btn {
    all: unset;
    box-sizing: border-box;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--pa-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s;
    font-family: inherit;
}

.home-hero__sponsor-nav-btn:hover:not(:disabled) {
    background: var(--pa-primary-hover);
}

.home-hero__sponsor-nav-btn:disabled {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: default;
}

.home-hero__sponsor-empty {
    text-align: center;
    color: #9ca3af;
    font-size: 1.3rem;
    padding: 2rem 0;
}

/* Child cards */
.home-hero__sponsor-card {
    background: #fff;
    border: 1.5px solid var(--pa-border-color);
    border-radius: 1.2rem;
    padding: 1rem 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s;
    text-align: center;
    gap: 0;
    flex: 1;
}

.home-hero__sponsor-card:hover {
    border-color: var(--pa-primary);
}

.home-hero__sponsor-card--selected {
    border-color: var(--pa-primary);
    background: rgba(4, 149, 81, 0.04);
}

.home-hero__sponsor-card__img-wrap {
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--pa-primary);
    margin-bottom: 0.8rem;
    flex-shrink: 0;
    background: #f3f4f6;
}

.home-hero__sponsor-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-hero__sponsor-card__name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--pa-text-primary);
    line-height: 1.3;
    margin-bottom: 0.3rem;
}

.home-hero__sponsor-card__price {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--pa-text-primary);
    margin-bottom: 0.6rem;
}

.home-hero__sponsor-card__tags {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin-bottom: 0.8rem;
    flex-grow: 1;
}

.home-hero__sponsor-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: var(--pa-primary);
    color: #fff;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}

.home-hero__sponsor-tag svg {
    flex-shrink: 0;
}

.home-hero__sponsor-card__check {
    width: 2rem;
    height: 2rem;
    border-radius: 5px;
    border: 1.5px solid #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, border-color 0.18s;
    background: #fff;
    flex-shrink: 0;
}

.home-hero__sponsor-card__check.is-checked {
    background: var(--pa-primary);
    border-color: var(--pa-primary);
}

/* Total section */
.home-hero__sponsor-total {
    border-radius: 1.4rem;
    margin-bottom: 0;
    text-align: center;
}

.home-hero__sponsor-total-label {
    font-size: 1.3rem;
    color: #333;
    margin: 0 0 1rem;
    font-weight: 500;
}

.home-hero__sponsor-freq-row {
    display: inline-flex;
    background: #0495510F;
    border: 1px solid var(--pa-border-color);
    border-radius: 999px;
    padding: 6px;
    gap: 2px;
    margin-top: 1.2rem;
    margin-bottom: 0;
}

.home-hero__sponsor-freq-btn {
    all: unset;
    box-sizing: border-box;
    padding: 0.6rem 1.6rem;
    border-radius: 999px;
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--pa-text-secondary);
    transition: background 0.18s, color 0.18s;
    font-family: inherit;
}

.home-hero__sponsor-freq-btn--active {
    background: linear-gradient(90deg, #FFFFFF 0%, #E4FFEE 100%);
    color: var(--pa-primary);
}

.home-hero__sponsor-amount {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--pa-text-primary);
    background: #0495511A;
    border-radius: 2.4rem;
    padding: 2.4rem 4.8rem;
    border: 1px solid var(--pa-border-color);
}

/* ────────────────────────────────────────────────────────────
   Hero modal: Step 3 sponsor (Thank You)
   ──────────────────────────────────────────────────────────── */

.hv2-sp-step3__header {
    padding-top: 26px;
    padding-bottom: 18px;
}

.hv2-sp-step3__avatars {
    display: flex;
    justify-content: center;
    margin: 8px 0 12px;
}

.hv2-sp-step3__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #f3f4f6;
    overflow: hidden;
    margin-left: -10px;
}

.hv2-sp-step3__avatar:first-child {
    margin-left: 0;
}

.hv2-sp-step3__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hv2-sp-step3__title {
    font-family: var(--pa-font-headline);
    font-size: 22px;
    line-height: 1.25;
    color: #fff;
    margin: 0 0 8px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hv2-sp-step3__title-heart {
    display: inline-flex;
    width: 22px;
    height: 22px;
    color: #04391c;
}

.hv2-sp-step3__title-heart svg {
    width: 100%;
    height: 100%;
}

.hv2-sp-step3__subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 auto;
    line-height: 1.5;
    max-width: 320px;
    text-align: center;
}

.hv2-sp-step3__body {
    background: linear-gradient(180deg, #FFFFFF 0%, #F4FBF6 100%);
}

/* Stepper variant — center on body */
.hv2-sp-stepper--step3 {
    justify-content: center;
}

.hv2-sp-step3__badge-wrap {
    display: flex;
    justify-content: center;
    margin: 4px 0 10px;
}

.hv2-sp-step3__check-badge,
.hv2-sp-step3__pending-badge {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin: 0 auto;
}

.hv2-sp-step3__check-badge svg,
.hv2-sp-step3__pending-badge svg {
    width: 100%;
    height: 100%;
}

.hv2-sp-step3__pending-badge {
    background: #f59e0b;
}

.hv2-sp-step3__confirm-text {
    text-align: center;
    font-size: 14px;
    color: var(--pa-text-primary);
    line-height: 1.55;
    margin: 0;
}

.hv2-sp-step3__confirm-text strong {
    color: var(--pa-primary);
    font-weight: 700;
}

.hv2-sp-step3__tags-label {
    text-align: center;
    color: var(--pa-primary);
    font-size: 13px;
    font-weight: 600;
    margin: 6px 0 4px;
}

.hv2-sp-step3__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.hv2-sp-step3__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F1FBF4;
    color: var(--pa-primary);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(4, 149, 81, 0.18);
}

.hv2-sp-step3__tag svg {
    width: 16px;
    height: 16px;
}

.hv2-sp-step3__info-box {
    background: #E8F5EE;
    color: #0c4a2e;
    padding: 12px 14px;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    line-height: 1.5;
}

.hv2-sp-step3__info-icon {
    flex-shrink: 0;
    color: var(--pa-primary);
    display: inline-flex;
    margin-top: 1px;
}

.hv2-sp-step3__info-icon svg {
    width: 16px;
    height: 16px;
}

.hv2-sp-step3__receipt-card {
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hv2-sp-step3__receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 14px;
    color: var(--pa-text-secondary);
}

.hv2-sp-step3__receipt-value {
    color: var(--pa-text-primary);
    font-weight: 700;
    text-align: right;
}

.hv2-sp-step3__email-text {
    text-align: center;
    font-size: 13px;
    color: var(--pa-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.hv2-sp-step3__email-text strong {
    color: var(--pa-primary);
    font-weight: 700;
}

.hv2-sp-step3__more-card {
    background: #F4FBF6;
    border-radius: 14px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.hv2-sp-step3__more-avatars {
    display: inline-flex;
    align-items: center;
}

.hv2-sp-step3__more-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 2px solid #fff;
    background: #f3f4f6;
    overflow: hidden;
    margin-left: -8px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--pa-primary);
}

.hv2-sp-step3__more-avatar:first-child {
    margin-left: 0;
}

.hv2-sp-step3__more-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hv2-sp-step3__more-avatar--more {
    background: rgba(4, 149, 81, 0.12);
    color: var(--pa-primary);
}

.hv2-sp-step3__more-text {
    text-align: center;
    font-size: 13px;
    color: var(--pa-text-primary);
    margin: 0;
    line-height: 1.5;
}

.hv2-sp-step3__more-text strong {
    color: var(--pa-primary);
    font-weight: 700;
}

.hv2-sp-step3__cta-primary {
    width: 100%;
    background: var(--pa-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s, transform 0.1s;
}

.hv2-sp-step3__cta-primary:hover {
    background: #037a42;
}

.hv2-sp-step3__cta-secondary {
    width: 100%;
    background: transparent;
    color: var(--pa-primary);
    border: 1.5px solid var(--pa-primary);
    border-radius: 999px;
    padding: 13px 18px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s;
    margin-top: -4px;
}

.hv2-sp-step3__cta-secondary:hover {
    background: #F4FBF6;
}

#hv2-step-3-sponsor[data-mode="donate"] .hv2-sp-step3__cta-secondary {
    margin-top: 0;
}

.hv2-sp-step3__share-section {
    display: flex;
    flex-direction: column;
}

@media (max-width: 1230px) {
    .hv2-sp-step3__share-section {
        margin-top: 6px;
    }
}

.hv2-sp-step3__share-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--pa-text-muted);
    font-size: 12px;
}

.hv2-sp-step3__share-divider::before,
.hv2-sp-step3__share-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--pa-border-color);
}

.hv2-sp-step3__share-text {
    text-align: center;
    color: var(--pa-primary);
    font-size: 13px;
    font-weight: 600;
    margin: 4px 0 0;
}

.hv2-sp-step3__share-row {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 4px 0;
}

.hv2-sp-step3__share-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--pa-border-color);
    background: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.18s, transform 0.1s, box-shadow 0.18s;
    padding: 0;
}

.hv2-sp-step3__share-btn:hover {
    background: #F4FBF6;
}

.hv2-sp-step3__share-btn:active {
    transform: scale(0.95);
}

.hv2-sp-step3__share-btn svg {
    width: 22px;
    height: 22px;
}

.hv2-sp-step3__share-btn svg path,
.hv2-sp-step3__share-btn svg rect {
    transition: fill 0.18s ease;
}

.hv2-sp-step3__share-btn[data-share="whatsapp"]:hover svg path {
    fill: #25D366;
}

.hv2-sp-step3__share-btn[data-share="instagram"]:hover svg path {
    fill: #E4405F;
}

.hv2-sp-step3__share-btn[data-share="facebook"]:hover svg path {
    fill: #1877F2;
}

.hv2-sp-step3__share-btn[data-share="twitter"]:hover svg path {
    fill: #000;
}

.hv2-sp-step3__share-btn[data-share="linkedin"]:hover svg path {
    fill: #0A66C2;
}

.hv2-sp-step3__share-tagline {
    text-align: center;
    font-size: 12px;
    color: var(--pa-text-secondary);
    line-height: 1.5;
    margin: 4px 0 0;
}

.hv2-sp-step3__share-tagline strong {
    color: var(--pa-primary);
    font-weight: 700;
}

.hv2-sp-step3__toast {
    position: fixed;
    left: 50%;
    top: 24px;
    transform: translateX(-50%) translateY(-8px);
    background: #111;
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 2300;
    pointer-events: none;
}

.hv2-sp-step3__toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.hv2-sp-step3--donate .hv2-sp-step3__subtitle {
    max-width: 100%;
}

@media (max-width: 1230px) {

    .home-messages-card__visual {
        height: 148px;
        width: 100%;
    }

    /* ── Berita: single column on very small screens ── */
    .home-berita__grid {
        grid-template-columns: 1fr;
    }

    .home-gallery__title,
    .home-donation-cta__title,
    .home-children__title,
    .home-sponsor-cta__title {
        font-size: 24px;
        line-height: 1.25;
        margin-bottom: 1.5rem;
    }

    .home-sponsor-cta__title-highlight,
    .home-sponsor-cta__title-text {
        font-weight: 500;
        line-height: 1.3;
        display: inline;
        font-family: var(--pa-font-headline) !important;
    }

    .home-sponsor-cta__desc {
        font-size: 16px;
        line-height: 1.6;
    }

    .home-stories__card-text {
        padding: 0;
    }

    .home-stories__card-title {
        font-size: 18px;
        margin-bottom: 1.4rem;
    }

    .home-stories__card-desc {
        font-size: 14px;
        line-height: 1.65;
        gap: 1.2rem;
        margin-bottom: 1.6rem;
    }

    .home-messages-card__quote {
        font-size: 16px;
        line-height: 1.55;
    }

    .home-campaigns-featured__amount-label {
        font-size: 12px;
    }

    .home-campaigns-featured__amount-value {
        font-size: 16px;
    }

    .home-campaigns-featured__meta-item {
        font-size: 13px;
    }

    .home-campaigns-featured__title {
        font-size: 18px;
        line-height: 1.35;
    }

    .home-campaigns__others-header {
        flex-wrap: nowrap;
        align-items: center;
        margin-bottom: 1.5rem;
    }

    .home-campaigns__others-title {
        font-size: 20px;
    }

    .home-campaigns__others-btn {
        padding: 12px 16px;
        font-size: 16px;
        border-width: 1.5px;
    }

    .home-campaigns-card__title {
        font-size: 18px;
    }

    .home-campaigns-card__amount-value {
        font-size: 16px;
    }

    .home-campaigns-card__amount-label {
        font-size: 14px;
    }

    .home-campaigns-card__meta {
        font-size: 14px;
    }

    .home-faq__title {
        font-size: 20px;
        font-weight: 500;
    }

    .home-faq__desc {
        font-size: 16px;
        max-width: 100%;
    }

    .home-faq__question {
        font-size: 18px;
        padding: 14px 0;
    }

    .home-berita-card__title {
        font-size: 18px;
    }

    .home-berita-card__more {
        padding: 10px 16px;
        font-size: 14px;
    }

    .home-berita-card__date {
        font-size: 13px;
    }

    .home-contact-cta__arrow-area {
        display: none;
    }

    .home-contact-cta__card {
        gap: 1.5rem;
        padding: 4rem 2rem;
    }

    /* ── Donate modal mobile tweaks ── */
    .hv2-donate-modal__title {
        font-size: 18px;
    }

    /* ── Hero card sponsor panel mobile tweaks ── */
    .home-hero__sponsor-track {
        gap: 6px;
    }

    .home-hero__sponsor-card__img-wrap {
        width: 4.4rem;
        height: 4.4rem;
    }

    .home-hero__sponsor-card__name {
        font-size: 1.1rem;
    }

    .home-hero__sponsor-card__price {
        font-size: 1rem;
    }

    .home-hero__sponsor-tag {
        font-size: 0.9rem;
        padding: 2px 5px;
    }

    .home-hero__sponsor-amount {
        font-size: 1.8rem;
    }

    /* ── Sponsor Picker Modal mobile tweaks ── */
    .hv2-sponsor-picker__title {
        font-size: 20px;
    }

    .hv2-sponsor-picker__total-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .hv2-sponsor-picker__freq-row {
        align-self: stretch;
        justify-content: center;
    }

    .hv2-sponsor-picker__card {
        padding: 10px;
    }

    .hv2-sponsor-picker__card-head {
        gap: 10px;
    }

    .hv2-sponsor-picker__card-avatar {
        width: 60px;
        height: 60px;
    }

    .hv2-sponsor-picker__tab-sub {
        display: none;
    }

    .hv2-sponsor-picker__list {
        max-height: 280px;
    }

    /* ── Step 3 (Thank You) ── */
    .hv2-sp-step3__title {
        font-size: 19px;
    }

    .hv2-sp-step3__avatar {
        width: 34px;
        height: 34px;
        margin-left: -8px;
    }

    .hv2-sp-step3__check-badge,
    .hv2-sp-step3__pending-badge {
        width: 50px;
        height: 50px;
    }

    .hv2-sp-step3__check-badge svg,
    .hv2-sp-step3__pending-badge svg {
        width: 26px;
        height: 26px;
    }

    .hv2-sp-step3__share-row {
        gap: 10px;
    }

    .hv2-sp-step3__share-btn {
        width: 40px;
        height: 40px;
    }

    .hv2-sp-step3__share-btn svg {
        width: 20px;
        height: 20px;
    }

    .hv2-sp-stepper--step3 .hv2-sp-stepper__label {
        font-size: 11px;
    }

    .hv2-sp-step3__receipt-row {
        font-size: 13px;
    }

    .hv2-sp-step3__more-avatar {
        width: 28px;
        height: 28px;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   ── Sponsor Picker v2 (block redesign) ──
   Pixel-perfect to design screenshots: stepped accordion, white modal,
   fixed footer with pill CTA + progress dot, light-green BG.
   ════════════════════════════════════════════════════════════════════════ */

/* Modal container — shape, white background, flex column for header/body/footer */
.hv2-sponsor-picker {
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
}

/* Header — white background, centered badge + title, top-right close */
.hv2-sponsor-picker__header {
    position: relative;
    background: #fff;
    padding: 24px 24px 12px 24px;
    text-align: center;
    border-radius: 24px 24px 0 0;
    flex-shrink: 0;
    z-index: 4;
    color: var(--pa-text-primary);
    background-image: none;
}

.hv2-sponsor-picker__badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, #FFFFFF 0%, #E4FFEE 100%);
    border: 1px solid #04955133;
    color: var(--pa-primary);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
}

@media (max-width:1230px) {
    .hv2-sponsor-picker__badge {
        font-size: 12px;
        padding: 6px 12px;
    }
}

.hv2-sponsor-picker__title {
    font-family: var(--pa-font-headline);
    font-size: 25px;
    font-weight: 500;
    color: var(--pa-text-primary);
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

.hv2-sponsor-picker__close {
    position: absolute;
    top: 25px;
    right: 36px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #F3F4F6;
    color: #6B7280;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.18s, color 0.18s;
}

.hv2-sponsor-picker__close:hover {
    background: #E5E7EB;
    color: #333;
}

.hv2-sponsor-picker__close svg {
    width: 18px;
    height: 18px;
}

/* Mobile (full-screen modal) — header flush with viewport top: no rounded
   corners, no negative margin overhang from the older bottom-sheet styles. */
@media (max-width: 1230px) {
    .hv2-sponsor-picker__header {
        margin: 0;
        border-radius: 0;
        padding: 20px 18px 12px;
    }

    .hv2-sponsor-picker__title {
        font-size: 22px;
        font-weight: 700;
        margin-top: 4px;
    }

    .hv2-sponsor-picker__badge {
        margin-bottom: 8px;
    }

    .hv2-sponsor-picker__close {
        top: 20px;
        right: 18px;
    }
}

/* Scroll body — gradient bg, content scrolls between header & footer */
.hv2-sponsor-picker__scroll-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0px 32px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F4FBF6 100%);
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(180deg, #FFFFFF 0%, #E4FFEE 100%);
}

@media (max-width: 1230px) {
    .hv2-sponsor-picker__scroll-body {
        padding: 0 20px;
    }
}

/* Stepped Tabs — pill toggle with icon + label */
.hv2-sp-stepped-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: #04955114;
    border-radius: 999px;
    padding: 6px;
    margin: 0 80px 16px;
}

@media (max-width: 1230px) {
    .hv2-sp-stepped-tabs {
        margin: 0 0px 16px;
    }
}

.hv2-sp-stepped-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #6B7280;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    font-family: inherit;
}

.hv2-sp-stepped-tab--active {
    background: var(--pa-primary);
    color: #fff;
}

@media (max-width:1230px) {
    .hv2-sp-stepped-tab--active {
        box-shadow: none;
    }

    .hv2-sp-stepped-tabs {
        padding: 0;
    }
}

.hv2-sp-stepped-tab__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hv2-sp-stepped-tab__icon svg {
    width: 20px;
    height: 20px;
}

.hv2-sp-stepped-tab--active .hv2-sp-stepped-tab__icon {
    color: #fff;
}

/* SVGs hardcode fill="#049551" — force white when tab is active */
.hv2-sp-stepped-tab--active .hv2-sp-stepped-tab__icon svg path {
    fill: #fff;
}

.hv2-sponsor-picker--no-donate .hv2-sp-stepped-tabs {
    display: none !important;
}

/* Sponsor & dox`ate panes share styling */
.hv2-sponsor-picker__pane {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Accordion — wraps 3 steps (child select / period / summary) */
.hv2-sp-accordion {
    display: flex;
    flex-direction: column;
    padding: 12px 0 0;
}

.hv2-sp-accordion__step {
    background: #fff;
    border-radius: 24px;
    border: 1.5px solid #E5E7EB;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.hv2-sp-accordion__step--active {
    border-color: rgba(4, 149, 81, 0.35);
}

/* Accordion step header (the clickable row with number + title + chevron) */
.hv2-sp-accordion__header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--pa-text-primary);
    transition: background 0.15s;
}

.hv2-sp-accordion__header:hover {
    background: rgba(4, 149, 81, 0.02);
}

.hv2-sp-accordion__num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0495511A;
    color: #049551;
    font-size: 14px;
    font-weight: 700;
    display: grid;
    place-items: center;
    transition: all 0.2s;
}

.hv2-sp-accordion__step--active .hv2-sp-accordion__num {
    background: #E8F5EE;
    border-color: var(--pa-primary);
    color: var(--pa-primary);
}

.hv2-sp-accordion__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hv2-sp-accordion__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--pa-text-primary);
    line-height: 1.35;
    margin: 0;
}

@media (max-width: 1230px) {
    .hv2-sp-accordion__title {
        font-size: 15px;
    }
}

.hv2-sp-accordion__sub {
    font-size: 13px;
    color: var(--pa-text-primary);
    line-height: 1.4;
    margin: 0;
}

.hv2-sp-accordion__step--active .hv2-sp-accordion__sub {
    display: none;
}

.hv2-sp-accordion__chevron {
    flex-shrink: 0;
    color: #9CA3AF;
    transform: rotate(90deg);
    transition: transform 0.25s;
    display: inline-flex;
}

.hv2-sp-accordion__chevron svg {
    width: 20px;
    height: 20px;
    color: #333;
}

.hv2-sp-accordion__step--active .hv2-sp-accordion__chevron {
    transform: rotate(-90deg);
    color: var(--pa-primary);
}

/* Step body (collapsible) */
.hv2-sp-accordion__body {
    display: none;
    padding: 0 18px 18px;
    animation: hv2AccordionSlideDown 0.25s ease;
}

.hv2-sp-accordion__step--active .hv2-sp-accordion__body {
    display: block;
}

@keyframes hv2AccordionSlideDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Step 1 footer (info-link + count) */
.hv2-sp-accordion__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #F0F0F0;
}

.hv2-sp-accordion__footer--outside {
    display: none;
    margin-top: 14px;
    padding: 0 6px;
    border-top: none;
}

.hv2-sp-accwiz .hv2-sp-accordion__step--active[data-accordion-step="1"]+.hv2-sp-accordion__footer--outside {
    display: flex;
}

@media (max-width: 1230px) {
    .hv2-sp-accordion__footer {
        align-content: flex-start;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        gap: 5px;
        align-items: flex-start;
    }
}

.hv2-sp-accordion__info-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pa-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}

.hv2-sp-accordion__info-link:hover {
    opacity: 0.78;
    color: var(--pa-primary) !important;
    text-decoration: underline;
}

.hv2-sp-accordion__info-link:focus:not(:hover) {
    color: var(--pa-primary);
    text-decoration: none;
}

.hv2-sp-accordion__info-link svg {
    width: 20px;
    height: 20px;
}

.hv2-sp-accordion__count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: black;
}

.hv2-sp-accordion__count-check {
    width: 12px;
    height: 12px;
}

/* Step 2 — Period row (Bulanan/Tahunan + value) */
.hv2-sp-accordion__period-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

@media (max-width: 1230px) {
    .hv2-sp-accordion__period-row {
        justify-content: center;
        flex-direction: column;
    }
}

.hv2-sp-accordion__freq-wrap {
    display: inline-flex;
    background: #F3F4F6;
    border-radius: 999px;
    padding: 4px;
    flex-shrink: 0;
}

.hv2-sp-accordion__freq-btn {
    padding: 12px 16px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #6B7280;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    font-family: inherit;
}

.hv2-sp-accordion__freq-btn--active {
    background: var(--pa-primary);
    color: #fff;
}

.hv2-sp-accordion__period-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}

@media (max-width: 1230px) {
    .hv2-sp-accordion__period-value {
        align-items: center;
    }
}

.hv2-sp-accordion__period-label {
    font-size: 16px;
    color: var(--pa-text-primary);
    font-weight: 500;
}

.hv2-sp-accordion__period-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--pa-text-primary);
}

.hv2-sp-accordion__period-amount strong {
    font-weight: 700;
}

/* Step 3 — summary card with overlapping avatars + total */
.hv2-sp-accordion__summary {
    background: #0495510A;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    border: 1px solid #04955133;
}

.hv2-sp-accordion__summary-avatars {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.hv2-sp-accordion__summary-avatars img {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    border: 1px solid #04955133;
    margin-left: -10px;
    background: #fff;
    object-fit: cover;
    object-position: center 10%;
    border: 1px solid #049551;
}

@media (max-width: 1230px) {
    .hv2-sp-accordion__summary-avatars img {
        width: 60px;
        height: 60px;
    }
}

.hv2-sp-accordion__summary-avatars img:first-child {
    margin-left: 0;
}

/* "+N" overflow badge shown when more than 3 children are selected */
.hv2-sp-accordion__summary-avatars .hv2-sp-accordion__summary-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    border: 1px solid #049551;
    margin-left: -10px;
    background: white;
    color: var(--pa-primary);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 1230px) {
    .hv2-sp-accordion__summary-avatars .hv2-sp-accordion__summary-more {
        width: 60px;
        height: 60px;
    }
}

.hv2-sp-accordion__summary-children {
    font-size: 13px;
    color: #6B7280;
    margin: 0 0 8px;
}

.hv2-sp-accordion__summary-children strong {
    color: var(--pa-text-primary);
    font-weight: 700;
}

.hv2-sp-accordion__summary-total-amount {
    font-family: var(--pa-font-headline);
    font-size: 28px;
    font-weight: 700;
    color: var(--pa-text-primary);
    line-height: 1;
}

.hv2-sp-accordion__summary-total-suffix {
    font-size: 16px;
    font-weight: 500;
    color: #6B7280;
}

/* Step 3 (donate variant) — single row with helper */
.hv2-sp-accordion__summary-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hv2-sp-accordion__summary-label {
    font-size: 13px;
    color: #6B7280;
    font-weight: 500;
}

.hv2-sp-accordion__summary-amount {
    font-size: 22px;
    font-weight: 700;
    color: var(--pa-text-primary);
}

.hv2-sp-accordion__summary-helper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pa-primary);
    font-size: 12.5px;
    margin-top: 6px;
}

.hv2-sp-accordion__summary-helper svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Custom amount label under presets (donate pane Step 1) */
.hv2-sp-accordion__custom-label {
    display: block;
    font-size: 12px;
    color: #6B7280;
    margin: 12px 0 6px;
    font-weight: 500;
}

/* ── Sponsor children cards (new layout) ── */
.hv2-sponsor-picker__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 230px;
    overflow-y: auto;
    padding-right: 4px;
}

@media (max-width: 1230px) {
    .hv2-sponsor-picker__list {
        max-height: 210px;
    }
}

.hv2-sponsor-picker__list::-webkit-scrollbar {
    width: 4px;
}

.hv2-sponsor-picker__list::-webkit-scrollbar-thumb {
    background: rgba(4, 149, 81, 0.35);
    border-radius: 999px;
}

.hv2-sponsor-picker__card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 16px 8px 8px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid #E5E7EB;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

.hv2-sponsor-picker__card-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}

.hv2-sponsor-picker__card:hover {
    border-color: rgba(4, 149, 81, 0.35);
}

.hv2-sponsor-picker__card--selected {
    border-color: var(--pa-primary);
    background: #F1FBF4;
}

.hv2-sponsor-picker__card-avatar {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background: #F3F4F6;
}

.hv2-sponsor-picker__card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hv2-sponsor-picker__card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hv2-sponsor-picker__card-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-primary);
    line-height: 1.2;
}

.hv2-sponsor-picker__card-sub {
    font-size: 16px;
    color: var(--pa-text-primary);
    line-height: 1.35;
}

.hv2-sponsor-picker__card-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-primary);
}

/* ── Per-need toggle rows (right side of the card head) ── */
.hv2-sponsor-picker__card-needs {
    flex-shrink: 0;
    align-self: center;
}

.hv2-sponsor-picker__card-needs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Mobile-only pieces — hidden on desktop where the toggles live in the head. */
.hv2-sponsor-picker__needs-head,
.hv2-sponsor-picker__card-age--inline,
.hv2-sponsor-picker__card-foot-label--mobile {
    display: none;
}

.hv2-sponsor-picker__need.hv2-sponsor-picker__need--fulfilled {
    display: none;
}

.hv2-sponsor-picker__need {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.hv2-sponsor-picker__need-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--pa-primary);
    transition: color .15s ease;
}

.hv2-sponsor-picker__need-icon svg {
    width: 15px;
    height: 15px;
}

.hv2-sponsor-picker__need.is-active .hv2-sponsor-picker__need-icon {
    color: var(--pa-primary);
}

.hv2-sponsor-picker__need-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--pa-text-primary);
    line-height: 1.2;
    margin-right: 2px;
    white-space: nowrap;
}

/* Toggle switch */
.hv2-sponsor-picker__need-switch {
    flex-shrink: 0;
    margin-inline-start: auto;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #D1D5DB;
    position: relative;
    transition: background .18s ease;
}

.hv2-sponsor-picker__need.is-active .hv2-sponsor-picker__need-switch {
    background: var(--pa-primary);
}

.hv2-sponsor-picker__need-knob {
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform .18s ease;
}

.hv2-sponsor-picker__need.is-active .hv2-sponsor-picker__need-knob {
    transform: translateX(16px);
}

.hv2-sponsor-picker__fulfilled {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--pa-text-primary);
    line-height: 1.2;
}

.hv2-sponsor-picker__fulfilled-icon {
    display: inline-flex;
    flex-shrink: 0;
}

.hv2-sponsor-picker__fulfilled-icon svg,
.hv2-sponsor-picker__fulfilled-icon img {
    display: block;
    width: 20px;
    height: 16px;
}

.hv2-sponsor-picker__fulfilled-text b {
    color: #049551;
    font-weight: 700;
}

.hv2-sponsor-picker__need-fulfilled {
    display: flex;
    align-items: center;
    padding-top: 4px;
}

.hv2-sponsor-picker__card-check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1.8px solid #D1D5DB;
    background: #fff;
    display: grid;
    place-items: center;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    color: #fff;
}

.hv2-sponsor-picker__card-check.is-checked {
    background: var(--pa-primary);
    border-color: var(--pa-primary);
}

.hv2-sponsor-picker__card-check svg {
    width: 12px;
    height: 12px;
}

/* ── Footer: fulfilled needs (left) + monthly-support total (right) ── */
.hv2-sponsor-picker__card-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid #E5E7EB;
}

.hv2-sponsor-picker__card--selected .hv2-sponsor-picker__card-foot {
    border-top-color: rgba(4, 149, 81, 0.18);
}

.hv2-sponsor-picker__card-fulfilled {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
}

/* Total sticks to the right even when there is no fulfilled block on the left. */
.hv2-sponsor-picker__card-support {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.hv2-sponsor-picker__card-foot-label {
    font-size: 14px;
    color: var(--pa-text-secondary, #6b7280);
}

.hv2-sponsor-picker__card-foot-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-primary);
}

@media (max-width: 1230px) {

    .hv2-sponsor-picker__card-age--inline {
        display: inline;
        font-weight: 400;
        color: var(--pa-text-secondary, #6b7280);
    }

    .hv2-sponsor-picker__card-age--sub,
    .hv2-sponsor-picker__card-sub-sep {
        display: none;
    }

    .hv2-sponsor-picker__card-sub:not(.has-wish) {
        display: none;
    }

    .hv2-sponsor-picker__card-needs {
        order: 3;
        width: 100%;
        align-self: stretch;
        padding-top: 12px;
        border-top: 1px solid #E5E7EB;
    }

    .hv2-sponsor-picker__card--selected .hv2-sponsor-picker__card-needs {
        border-top-color: rgba(4, 149, 81, 0.18);
    }

    .hv2-sponsor-picker__needs-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 8px;
        padding: 0;
        margin-bottom: 12px;
        background: none;
        border: 0;
        cursor: pointer;
        font-family: inherit;
    }

    .hv2-sponsor-picker__needs-head-label {
        font-size: 15px;
        font-weight: 600;
        color: var(--pa-text-primary);
    }

    .hv2-sponsor-picker__needs-head-label::after {
        content: ':';
    }

    .hv2-sponsor-picker__needs-head-right {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    /* Running total shown in the header only while collapsed (footer hides then). */
    .hv2-sponsor-picker__needs-head-amount {
        display: none;
        font-size: 15px;
        font-weight: 700;
        color: var(--pa-text-primary);
    }

    .hv2-sponsor-picker__needs-head-chevron {
        display: inline-flex;
        color: #333;
        transform: rotate(180deg);
        transition: transform .2s ease;
    }

    /* Collapsed state (class on the card so the footer, a sibling, can react too). */
    .hv2-sponsor-picker__card--needs-collapsed .hv2-sponsor-picker__needs-head {
        margin-bottom: 0;
    }

    .hv2-sponsor-picker__card--needs-collapsed.hv2-sponsor-picker__card--selected .hv2-sponsor-picker__needs-head-amount {
        display: inline;
    }

    .hv2-sponsor-picker__card--needs-collapsed .hv2-sponsor-picker__needs-head-chevron {
        transform: rotate(0deg);
    }

    .hv2-sponsor-picker__card--needs-collapsed .hv2-sponsor-picker__card-needs-list {
        display: none;
    }

    .hv2-sponsor-picker__card--needs-collapsed .hv2-sponsor-picker__card-foot {
        display: none;
    }

    .hv2-sponsor-picker__card-needs-list {
        gap: 14px;
    }

    .hv2-sponsor-picker__need {
        width: 100%;
    }

    .hv2-sponsor-picker__need-icon {
        width: 20px;
        height: 20px;
    }

    .hv2-sponsor-picker__need-icon svg {
        width: 17px;
        height: 17px;
    }

    .hv2-sponsor-picker__need-label {
        font-size: 15px;
    }

    .hv2-sponsor-picker__need.hv2-sponsor-picker__need--fulfilled {
        display: flex;
        cursor: default;
    }

    .hv2-sponsor-picker__need-done {
        margin-inline-start: auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        font-weight: 600;
        color: #049551;
    }

    .hv2-sponsor-picker__need-done-icon {
        display: inline-flex;
    }

    .hv2-sponsor-picker__need-done-icon img {
        display: block;
        width: 16px;
        height: 16px;
    }

    .hv2-sponsor-picker__card-fulfilled {
        display: none;
    }

    .hv2-sponsor-picker__card-support {
        margin-inline-start: 0;
        width: 100%;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }

    .hv2-sponsor-picker__card-foot-label:not(.hv2-sponsor-picker__card-foot-label--mobile) {
        display: none;
    }

    .hv2-sponsor-picker__card-foot-label--mobile {
        display: inline;
        font-size: 15px;
        font-weight: 600;
        color: var(--pa-text-primary);
    }

    .hv2-sponsor-picker__card-foot-amount {
        font-size: 17px;
    }
}

.hv2-sponsor-picker__donate-presets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.hv2-sponsor-picker__donate-preset {
    position: relative;
    padding: 12px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid #E5E7EB;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.18s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.hv2-sponsor-picker__donate-preset:hover {
    border-color: rgba(4, 149, 81, 0.35);
}

.hv2-sponsor-picker__donate-preset--active {
    border-color: var(--pa-primary);
    background: #F1FBF4;
    color: var(--pa-primary);
}

.hv2-sponsor-picker__donate-preset-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--pa-text-primary);
}

.hv2-sponsor-picker__donate-preset--active .hv2-sponsor-picker__donate-preset-value {
    color: var(--pa-primary);
}

.hv2-sponsor-picker__donate-popular {
    position: absolute;
    left: auto;
    transform: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--pa-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.hv2-sponsor-picker__donate-popular svg {
    width: 10px;
    height: 10px;
}

/* ── Flat donate pane layout (cards) ── */
.hv2-sponsor-picker__pane--donate {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0 0;
}

.hv2-donate-flat__card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 24px;
    padding: 12px 24px;
}

.hv2-donate-flat__card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-primary);
    margin: 0 0 14px;
}

.hv2-donate-flat__custom-label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-primary);
    margin: 16px 0 8px;
}

/* Summary card (Donasi Anda + freq toggle + impact copy) */
.hv2-donate-flat__summary-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 24px;
}

.hv2-donate-flat__summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hv2-donate-flat__impact-copy {
    display: none;
}

.hv2-donate-flat__impact-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-primary);
    margin: 0 0 6px;
    line-height: 1.35;
}

.hv2-donate-flat__impact-body {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    margin: 0;
}

.hv2-donate-flat__impact-body strong {
    color: var(--pa-primary);
    font-weight: 700;
}

.hv2-donate-flat__acc-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    color: var(--pa-text-secondary);
    transition: background 0.18s;
}

.hv2-donate-flat__acc-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.hv2-donate-flat__acc-toggle svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.hv2-donate-flat__acc-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.hv2-donate-flat__acc-body {
    display: none;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--pa-primary-soft, #EAF7EF);
}

.hv2-donate-flat__summary-card.hv2-donate-flat__acc--open .hv2-donate-flat__acc-body {
    display: flex;
}

.hv2-donate-flat__acc-body-icon {
    flex-shrink: 0;
    display: inline-flex;
    line-height: 0;
    margin-top: 1px;
}

.hv2-donate-flat__acc-body-icon svg {
    width: 16px;
    height: 16px;
    color: var(--pa-primary);
}

.hv2-donate-flat__acc-body-text {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--pa-text-secondary, #4B5563);
}

[dir="rtl"] .hv2-donate-flat__acc-body {
    text-align: right;
}

.hv2-sp-accordion__note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--pa-primary-soft, #EAF7EF);
}

.hv2-sp-accordion__note--outside {
    display: none;
    margin-top: 10px;
    margin-inline: 6px;
}

.hv2-sp-accwiz .hv2-sp-accordion__step--active[data-accordion-step="1"]~.hv2-sp-accordion__note--outside {
    display: flex;
}

.hv2-sp-accordion__note-icon {
    flex-shrink: 0;
    display: inline-flex;
    line-height: 0;
    margin-top: 1px;
}

.hv2-sp-accordion__note-icon svg {
    width: 16px;
    height: 16px;
    color: var(--pa-primary);
}

.hv2-sp-accordion__note-text {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--pa-text-secondary, #4B5563);
}

[dir="rtl"] .hv2-sp-accordion__note {
    text-align: right;
}

.hv2-donate-flat__summary-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.hv2-donate-flat__summary-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;

}

.hv2-donate-flat__summary-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--pa-text-primary);
    line-height: 1.2;
}

.hv2-donate-flat__freq-wrap {
    display: inline-flex;
    background: #F3F4F6;
    border-radius: 999px;
    flex-shrink: 0;
}

.hv2-donate-flat__freq-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--pa-text-secondary);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    font-family: inherit;
    white-space: nowrap;
}

.hv2-donate-flat__freq-btn.hv2-sponsor-picker__freq-btn--active {
    background: var(--pa-primary);
    color: #fff;
}

@media (max-width: 1230px) {
    .hv2-sponsor-picker__donate-preset {
        padding: 12px;
    }

    .hv2-sponsor-picker__donate-preset-value {
        font-size: 13px;
    }

    .hv2-sponsor-picker__donate-popular {
        font-size: 12px;
        padding: 6px 12px;
    }

    .hv2-sponsor-picker__donate-custom {
        padding: 14px 14px;
    }

    .hv2-donate-flat__card {
        padding: 12px;
    }

    .hv2-donate-flat__summary-card {
        padding: 12px 16px;
        gap: 10px;
    }

    .hv2-donate-flat__summary-amount {
        font-size: 20px;
    }

    .hv2-donate-flat__freq-btn {
        padding: 7px 12px;
        font-size: 12.5px;
    }

    .hv2-sp-stepped-tab__icon svg {
        width: 16px;
        height: 16px;
    }

    .hv2-sp-accordion__cta {
        padding: 14px 24px;
        font-size: 15px;
    }
}

.hv2-sponsor-picker__donate-custom {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid #E5E7EB;
}

.hv2-sponsor-picker__donate-custom-prefix {
    color: #333;
    font-weight: 700;
    font-size: 14px;
}

.hv2-sponsor-picker__donate-custom-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--pa-text-primary);
    background: transparent;
    font-family: inherit;
    padding: 0;
}

.hv2-sponsor-picker__donate-custom.is-below-min,
.hv2-sponsor-picker__donate-custom.is-below-min:focus-within {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.hv2-sponsor-picker__donate-custom.is-below-min .hv2-sponsor-picker__donate-custom-prefix,
.hv2-sponsor-picker__donate-custom.is-below-min .hv2-sponsor-picker__donate-custom-input {
    color: #dc2626;
}

/* ── Sponsor Picker Footer (fixed) ── */
.hv2-sponsor-picker__footer {
    flex-shrink: 0;
    padding: 0 30px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 5;
    background: #E5FFEF;
}

@media (max-width: 1230px) {
    .hv2-sponsor-picker__footer {
        padding: 0 24px 5px;
        gap: 10px;
    }
}

.hv2-sponsor-picker__error {
    color: #c0392b;
    font-size: 12px;
    margin: 0;
    text-align: center;
    min-height: 0;
}

.hv2-sponsor-picker__error:empty {
    display: none;
}

.hv2-sp-accordion__cta {
    position: relative;
    width: 100%;
    padding: 12px 24px;
    border: none;
    border-radius: 999px;
    background: var(--pa-primary);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s, opacity 0.18s, box-shadow 0.18s;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1230px) {
    .hv2-sp-accordion__cta {
        padding: 10px 20px;
        font-size: 16px;
    }
}

.hv2-sp-accordion__cta:hover:not(:disabled) {
    background: var(--pa-primary);
    color: white;
}

.hv2-sp-accordion__cta:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.hv2-sp-accordion__cta-text {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.hv2-cta-arrow {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    vertical-align: -0.15em;
    transition: transform 0.2s ease;
}

.hv2-sp-accordion__cta-dot {
    position: absolute;
    top: 50%;
    right: 88%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FFB020;
    transition: right 0.32s cubic-bezier(0.4, 0.0, 0.2, 1), background 0.18s, box-shadow 0.18s;
}

.hv2-sp-accordion__trust {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #333;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}

.hv2-sp-accordion__trust svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--pa-primary);
}

/* Hide legacy sponsor-picker subtitle/total-row/impact (no longer used in v2 layout) */
.hv2-sponsor-picker__subtitle,
.hv2-sponsor-picker__total-row,
.hv2-sponsor-picker__impact,
.hv2-sponsor-picker__panel,
.hv2-sponsor-picker__count,
.hv2-sponsor-picker__panel-header,
.hv2-sponsor-picker__panel-footer {
    /* Used only by legacy hero.php template-part; harmless if absent in render.php */
}

/* ════════════════════════════════════════════════════════════════════════
   ── Step 1 Sponsor (Data Diri form) — white modal redesign ──
   ════════════════════════════════════════════════════════════════════════ */

.hv2-donate-modal--sponsor .hv2-sp-step1__header,
.hv2-donate-modal--sponsor .hv2-sp-step2__header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    background-image: none;
    color: var(--pa-text-primary);
    padding: 24px 24px 14px;
    border-radius: 24px 24px 0 0;
    text-align: center;
    border-bottom: 1px solid #04955133;
}

@media (max-width: 1230px) {

    .hv2-donate-modal--sponsor .hv2-sp-step1__header,
    .hv2-donate-modal--sponsor .hv2-sp-step2__header {
        padding: 12px 24px 12px;
    }
}

/* Stepper inside sticky header — no extra bottom margin */
.hv2-donate-modal--sponsor .hv2-sp-step1__header .hv2-sp-stepper {
    margin: 14px 100px 0;
}

@media (max-width: 1230px) {
    .hv2-donate-modal--sponsor .hv2-sp-step1__header .hv2-sp-stepper {
        margin: 12px 100px 0;
    }

    .hv2-sp-form {
        gap: 0;
    }

    .hv2-sp-form__title {
        margin: 0 0 12px;
    }
}

.hv2-donate-modal--sponsor .hv2-sp-step1__back,
.hv2-donate-modal--sponsor .hv2-sp-step1__close {
    position: absolute;
    top: 25px;
    /* aligned with badge vertical center */
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 50%;
    background: #0000000A;
    color: #6B7280;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.18s, color 0.18s;
}

@media (max-width: 1230px) {

    .hv2-donate-modal--sponsor .hv2-sp-step1__back,
    .hv2-donate-modal--sponsor .hv2-sp-step1__close {
        top: 10px;
    }
}

.hv2-donate-modal--sponsor .hv2-sp-step1__back {
    left: 16px;
}

.hv2-donate-modal--sponsor .hv2-sp-step1__close {
    right: 16px;
}

.hv2-donate-modal--sponsor .hv2-sp-step1__back:hover,
.hv2-donate-modal--sponsor .hv2-sp-step1__close:hover {
    background: #E5E7EB;
    color: #333;
}

.hv2-donate-modal--sponsor .hv2-sp-step1__back svg,
.hv2-donate-modal--sponsor .hv2-sp-step1__close svg {
    width: 20px;
    height: 20px;
}

.hv2-donate-modal--sponsor .hv2-sp-step1__badge {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, #FFFFFF 0%, #E4FFEE 100%);
    color: var(--pa-primary);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(4, 149, 81, 0.18);
    margin-bottom: 12px;
}

@media (max-width:1230px) {
    .hv2-donate-modal--sponsor .hv2-sp-step1__badge {
        font-size: 12px;
        padding: 6px 12px;
    }
}

.hv2-donate-modal--sponsor .hv2-sp-step1__title {
    font-size: 25px;
    font-weight: 700;
    color: var(--pa-text-primary);
    line-height: 1.2;
    margin: 0;
}

@media (max-width: 1230px) {
    .hv2-donate-modal--sponsor .hv2-sp-step1__title {
        font-size: 20px;
    }
}

/* Body wrapper — gradient background */
.hv2-donate-modal--sponsor .hv2-sp-step1__body,
.hv2-donate-modal--sponsor .hv2-sp-step2__body {
    background: linear-gradient(180deg, #FFFFFF 0%, #E4FFEE 100%);
    padding: 12px 32px 0;
}

@media (max-width: 1230px) {

    .hv2-donate-modal--sponsor .hv2-sp-step1__body,
    .hv2-donate-modal--sponsor .hv2-sp-step2__body {
        padding: 12px 20px 0;
    }
}

/* Footer — sticky bottom, holds CTA + trust */
.hv2-donate-modal--sponsor .hv2-sp-step1__footer,
.hv2-donate-modal--sponsor .hv2-sp-step2__footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    padding: 0 32px 24px;
}

@media (max-width: 1230px) {

    .hv2-donate-modal--sponsor .hv2-sp-step1__footer,
    .hv2-donate-modal--sponsor .hv2-sp-step2__footer {
        padding: 0 24px 12px;
    }
}

.hv2-donate-modal--sponsor .hv2-sp-step1__footer .hv2-sp-cta {
    margin-bottom: 10px;
}

.hv2-donate-modal--sponsor .hv2-sp-step1__footer .hv2-sp-trust,
.hv2-donate-modal--sponsor .hv2-sp-step2__footer .hv2-donate-modal__trust-text {
    margin: 10px 0 0;
    border-top: none !important;
    padding-top: 0;
}

.hv2-donate-modal--sponsor .hv2-sp-step2__footer #hv2-stripe-pay-btn {
    position: static;
    bottom: auto;
    margin: 0;
}

/* Stepper — used in step 1 sponsor + step 2 sponsor */
.hv2-sp-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.hv2-sp-stepper__item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.hv2-sp-stepper__num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #E5E7EB;
    color: #9CA3AF;
    font-size: 12px;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.hv2-sp-stepper__item--active .hv2-sp-stepper__num {
    background: var(--pa-primary);
    color: #fff;
}

.hv2-sp-stepper__item--done .hv2-sp-stepper__num,
.hv2-sp-stepper__num--done {
    background: var(--pa-primary);
    color: #fff;
}

.hv2-sp-stepper__num--done svg {
    width: 14px;
    height: 14px;
}

.hv2-sp-stepper__label {
    font-size: 13px;
    font-weight: 400;
    color: #333;
}

.hv2-sp-stepper__item--active .hv2-sp-stepper__label {
    color: var(--pa-primary);
}

.hv2-sp-stepper__item--done .hv2-sp-stepper__label {
    color: var(--pa-text-primary);
}

.hv2-sp-stepper__line {
    width: 36px;
    height: 1.5px;
    background: #E5E7EB;
    border-radius: 1px;
    list-style: none;
    align-self: center;
    margin-top: 11px;
}

@media (max-width: 639.98px) {
    .hv2-sp-stepper__line {
        background: #FFF;
        min-width: 0;
    }
}

/* Form card wrapper — rounded card with shadow around form fields */
.hv2-donate-modal--sponsor .hv2-sp-form {
    display: block;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
    padding: 12px 16px;
    margin-bottom: 12px;
}

@media (max-width:1230px) {
    .hv2-donate-modal--sponsor .hv2-sp-form {
        padding: 13px;
    }
}

.hv2-sp-form__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-primary);
    margin: 0 0 14px;
}

@media (max-width: 1230px) {
    .hv2-sp-form__title {
        margin: 0 0 10px;
    }
}

.hv2-sp-field {
    margin-bottom: 12px;
    gap: 0;
}

.hv2-sp-field:last-child {
    margin-bottom: 0;
}

.hv2-sp-field__label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--pa-text-primary);
    margin-bottom: 6px;
}

.hv2-sp-field__input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    font-size: 13px;
    font-family: inherit;
    color: var(--pa-text-primary);
    background: #fff;
    transition: border-color 0.18s, box-shadow 0.18s;
}

@media (max-width: 1230px) {
    .hv2-sp-field__input {
        padding: 10px 16px;
    }
}

.hv2-sp-field__input::placeholder {
    color: #9CA3AF;
}

.hv2-sp-field__input:focus {
    border-color: var(--pa-primary);
    outline: none;
}

/* 2-column grid for email + phone */
.hv2-sp-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

@media (max-width: 1230px) {
    .hv2-sp-field-grid {
        grid-template-columns: 1fr;
    }
}

.hv2-sp-field-grid>.hv2-sp-field {
    margin-bottom: 0;
}

/* Phone wrap (prefix select + phone input) */
.hv2-sp-phone-wrap {
    display: flex;
    gap: 0;
    align-items: stretch;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.hv2-sp-phone-wrap:focus-within {
    border-color: var(--pa-primary);
}

.hv2-sp-phone-prefix {
    border: none;
    background: #F9FAFB url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='none'><path d='M4 6l4 4 4-4' stroke='%23374151' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 10px center;
    background-size: 10px 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 18px;
    font-weight: 600;
    color: var(--pa-text-primary);
    cursor: pointer;
    font-family: inherit;
    border-right: 1px solid #E5E7EB;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin: 2px;
    padding: 0 24px 0 14px;
    border-radius: 999px;
    justify-content: center;
    outline: none;
}

.hv2-sp-field__input--phone {
    border: none;
    border-radius: 0;
    flex: 1;
}

.hv2-sp-field__input--phone:focus {
    box-shadow: none;
}

/* Country select wrap */
.hv2-sp-select-wrap {
    position: relative;
}

.hv2-sp-select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px;
    cursor: pointer;
}

.hv2-sp-select-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: #6B7280;
    pointer-events: none;
}

/* Checkboxes */
.hv2-donate-modal--sponsor .hv2-sp-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--pa-text-primary);
    font-weight: 500;
}

.hv2-sp-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid #D1D5DB;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    transition: background 0.18s, border-color 0.18s;
    margin: 0 !important;
}

.hv2-sp-check input[type="checkbox"]:checked {
    background: var(--pa-primary);
    border-color: var(--pa-primary);
}

.hv2-sp-check input[type="checkbox"]:checked::before {
    content: '';
    width: 10px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2 7l3 3 7-7' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Message textarea wrap */
.hv2-sp-message-wrap {
    margin: 8px 0 14px;
    position: relative;
    display: none;
}

.hv2-sp-message-wrap.is-visible,
.hv2-sp-message-wrap.is-open {
    display: block;
}

.hv2-sp-message-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    color: var(--pa-text-primary);
    background: #fff;
    resize: vertical;
    min-height: 80px;
}

.hv2-sp-message-input:focus {
    border-color: var(--pa-primary);
    outline: none;
}

.hv2-sp-message-count {
    position: absolute;
    right: 12px;
    bottom: 8px;
    font-size: 11px;
    color: #9CA3AF;
}

/* Step-1 sponsor CTA (Lanjut ke Pembayaran) */
.hv2-donate-modal--sponsor .hv2-sp-cta {
    width: 100%;
    padding: 16px 24px;
    border: none;
    border-radius: 999px;
    background: var(--pa-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s, opacity 0.18s;
    font-family: inherit;
    margin-top: 8px;
    position: static;
    /* override legacy sticky */
    bottom: auto;
}

@media (max-width: 1230px) {
    .hv2-donate-modal--sponsor .hv2-sp-cta {
        padding: 10px 16px;
    }
}

.hv2-donate-modal--sponsor .hv2-sp-cta:hover:not(:disabled) {
    background: #037a42;
}

.hv2-donate-modal--sponsor .hv2-sp-cta:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.hv2-sp-cta__arrow {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 6px;
    transition: transform 0.2s ease;
}

.hv2-sp-cta__arrow svg {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.15em;
    flex-shrink: 0;
}

/* Trust footer (single row with lock icon) */
.hv2-donate-modal--sponsor .hv2-sp-trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #333;
    font-size: 13px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.hv2-donate-modal--sponsor .hv2-sp-trust__row {
    display: block;
    text-align: center;
    line-height: 1.4;
}

.hv2-donate-modal--sponsor .hv2-sp-trust__row svg {
    width: 20px;
    height: 20px;
    color: var(--pa-primary);
    display: inline;
    vertical-align: middle;
    margin-right: 6px;
}

/* Hide elements that are not in the new design when in sponsor mode */
.hv2-donate-modal--sponsor .hv2-sp-step2__impact,
.hv2-donate-modal--sponsor .hv2-step2-terms,
.hv2-donate-modal--sponsor .hv2-sp-step2__trust,
.hv2-donate-modal--sponsor .hv2-security-badge,
.hv2-donate-modal--sponsor .hv2-donate-modal__title,
.hv2-donate-modal--sponsor .hv2-donate-modal__summary,
.hv2-donate-modal--sponsor .hv2-donate-modal__section-title {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   ── Step 2 (Pembayaran) — sponsor mode redesign ──
   ════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1230px) {
    .hv2-donate-modal--sponsor .hv2-donate-modal__section-title {
        display: block !important;
    }
}

/* Show single-line trust under the pay button — !important beats legacy hide rule at line 6198 */
.hv2-donate-modal--sponsor #hv2-step-2 .hv2-donate-modal__trust-text {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    color: #333;
    text-align: center;
    margin: 10px auto 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%;
    box-sizing: border-box;
}

.hv2-donate-modal--sponsor #hv2-step-2 .hv2-donate-modal__trust-text svg {
    width: 20px;
    height: 20px;
    color: var(--pa-primary);
}

/* Sponsor stepper (Step 2 variant) — keep flex */
.hv2-donate-modal--sponsor .hv2-sp-step2__intro {
    margin-bottom: 16px;
}

.hv2-sp-stepper--step2 {
    margin-bottom: 0;
}

/* Payment options — header floats above form card (per design) */
.hv2-donate-modal--sponsor .hv2-payment-option {
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 14px;
    overflow: visible;
}

.hv2-donate-modal--sponsor .hv2-payment-option--active {
    border: none;
}

.hv2-donate-modal--sponsor .hv2-payment-option__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 4px 12px;
    margin-bottom: 0;
    cursor: pointer;
    border-bottom: 1px dashed #D1FAE0;
}

.hv2-donate-modal--sponsor .hv2-payment-option__header .hv2-payment-option__radio {
    display: none;
}

.hv2-donate-modal--sponsor .hv2-payment-option__icon {
    width: 24px;
    height: 24px;
    color: var(--pa-text-primary);
    flex-shrink: 0;
}

.hv2-payment-option__label {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-text-primary);
}

@media (max-width: 1230px) {
    .hv2-payment-option__label {
        font-size: 13px;
    }
}

.hv2-payment-option__logos {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hv2-payment-option__logos svg {
    width: 48px;
    height: 24px;
}

.hv2-payment-option__logos img {
    height: 18px;
    width: auto;
    object-fit: contain;
}

.hv2-payment-option__body {
    padding: 0 16px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    padding-top: 16px;
}

.hv2-donate-modal--sponsor .hv2-payment-option__body {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 24px;
    padding: 12px 24px;
    margin-top: 12px;
}

@media (max-width: 1230px) {
    .hv2-donate-modal--sponsor .hv2-payment-option__body {
        padding: 12px;
        border-radius: 16px;
    }
}

.hv2-donate-modal--sponsor .hv2-payment-option__body .hv2-sp-cardmock {
    display: none;
}

.hv2-donate-modal--sponsor .hv2-pmt-tabs-wrap {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 12px;
    margin-bottom: 0;
}

/* Add bottom margin only when at least one panel inside is visible */
.hv2-donate-modal--sponsor .hv2-pmt-tabs-wrap:has(> .hv2-payment-option:not([style*="none"])) {
    margin-bottom: 12px;
}

/* Panel becomes display:contents so its children participate in the wrap's flex layout */
.hv2-donate-modal--sponsor .hv2-pmt-tabs-wrap .hv2-payment-option {
    display: contents;
}

/* Headers act as pill tabs in row 1 */
.hv2-donate-modal--sponsor .hv2-pmt-tabs-wrap .hv2-payment-option__header {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    margin: 0;
    background: #fff;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    cursor: pointer;
    color: var(--pa-text-secondary);
    font-weight: 600;
    font-size: 14px;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}

@media (max-width: 1230px) {
    .hv2-donate-modal--sponsor .hv2-pmt-tabs-wrap .hv2-payment-option__header {
        padding: 0;
    }
}

.hv2-donate-modal--sponsor .hv2-pmt-tabs-wrap .hv2-payment-option__header .hv2-payment-option__logos {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

.hv2-donate-modal--sponsor .hv2-pmt-tabs-wrap .hv2-payment-option__header .hv2-payment-option__logos svg {
    height: 24px;
    width: 24px;
}

/* Label inside tab — sits left of logos */
.hv2-donate-modal--sponsor .hv2-pmt-tabs-wrap .hv2-payment-option__header .hv2-payment-option__label {
    flex: 0 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hv2-donate-modal--sponsor .hv2-pmt-tabs-wrap .hv2-payment-option--active .hv2-payment-option__header {
    color: var(--pa-primary);
}

@media (min-width: 1230px) {
    .hv2-donate-modal--sponsor .hv2-pmt-tabs-wrap .hv2-payment-option--active .hv2-payment-option__header {
        background: #E8F5EE;
        border-color: var(--pa-primary);
    }
}

/* Bodies wrap to row 2 — full width below tabs */
.hv2-donate-modal--sponsor .hv2-pmt-tabs-wrap .hv2-payment-option__body {
    order: 2;
    flex: 0 0 100%;
    margin-top: 0;
}

/* Card form fields */
.hv2-card-field {
    display: block;
    margin-bottom: 12px;
}

.hv2-card-field__label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pa-text-primary);
    margin-bottom: 6px;
}

.hv2-card-field__input,
.hv2-stripe-element {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--pa-text-primary);
    background: #fff;
    transition: border-color 0.18s, box-shadow 0.18s;
    box-sizing: border-box;
}

.hv2-card-field__input:focus,
.hv2-stripe-element--focus {
    border-color: var(--pa-primary);
    outline: none;
}

.hv2-card-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.hv2-card-field-row .hv2-card-field {
    margin-bottom: 0;
}

.hv2-donate-modal--sponsor .hv2-card-field__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--pa-text-primary);
    margin-bottom: 8px;
}

.hv2-donate-modal--sponsor .hv2-card-field__input,
.hv2-donate-modal--sponsor .hv2-stripe-element {
    border-radius: 999px;
    padding: 12px 16px;
    border: 1px solid #E5E7EB;
    font-size: 13px;
}

.hv2-donate-modal--sponsor .hv2-card-field__input:focus,
.hv2-donate-modal--sponsor .hv2-stripe-element--focus {
    border-color: rgba(4, 149, 81, 0.45);
}

.hv2-donate-modal--sponsor .hv2-card-field-row {
    gap: 14px;
}

/* Sponsor summary row (just before pay button) */
.hv2-sp-step2__pre-cta-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 24px;
}

@media (max-width:1230px) {
    .hv2-sp-step2__pre-cta-summary {
        gap: 0;
    }
}

.hv2-sp-step2__pcs-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.hv2-sp-step2__pcs-left .hv2-sp-summary__avatars {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
}

.hv2-sp-step2__pcs-left .hv2-sp-summary__avatars img,
.hv2-sp-step2__pcs-left .hv2-sp-summary__avatars span img {
    width: 40px;
    height: 40px;
    background: #fff;
    object-fit: cover;
    object-position: center top;
    /* keep the head fully visible (was cropping the top) */
}

.hv2-sp-step2__pcs-left .hv2-sp-summary__avatars> :first-child img,
.hv2-sp-step2__pcs-left .hv2-sp-summary__avatars> :first-child {
    margin-left: 0;
}

.hv2-sp-step2__pcs-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--pa-text-primary);
}

.hv2-sp-step2__pcs-count::before {
    content: '(';
}

.hv2-sp-step2__pcs-count::after {
    content: ')';
}

.hv2-sp-step2__pcs-count {
    font-size: 14px;
    font-weight: 700;
    color: var(--pa-text-primary);
    margin-left: 2px;
}

.hv2-sp-step2__pcs-count:empty::before,
.hv2-sp-step2__pcs-count:empty::after {
    content: '';
}

/* Mode donasi umum/campaign: avatars div kosong (tidak ada anak yang dipilih).
   Sembunyikan supaya layout-nya bersih: hanya label kiri + amount kanan. */
.hv2-sp-step2__pcs-left .hv2-sp-summary__avatars:empty {
    display: none;
}

.hv2-sp-step2__pre-cta-summary .hv2-sp-summary__amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--pa-text-primary);
    text-align: right;
}

.hv2-sp-summary__amount-suffix {
    font-size: 14px;
    font-weight: 400;
}

/* Pay button (Bayar Sekarang - Rp X) */
.hv2-donate-modal--sponsor #hv2-stripe-pay-btn,
.hv2-donate-modal--sponsor .hv2-donate-modal__submit {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 999px;
    background: var(--pa-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s, opacity 0.18s;
    font-family: inherit;
    margin-top: 4px;
}

.hv2-donate-modal--sponsor #hv2-stripe-pay-btn:hover:not(:disabled),
.hv2-donate-modal--sponsor .hv2-donate-modal__submit:hover:not(:disabled) {
    background: #037a42;
}

.hv2-donate-modal--sponsor #hv2-stripe-pay-btn:disabled,
.hv2-donate-modal--sponsor .hv2-donate-modal__submit--disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

@media (max-width: 1230px) {
    .hv2-donate-modal--sponsor .hv2-sp-step2__pre-cta-summary {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 12px;
        border-radius: 16px;
    }

    .hv2-donate-modal--sponsor .hv2-sp-step2__pcs-left {
        flex-direction: column;
        align-items: center;
        gap: 3px;
        width: 100%;
    }

    .hv2-donate-modal--sponsor .hv2-sp-step2__pcs-left .hv2-sp-summary__avatars img,
    .hv2-donate-modal--sponsor .hv2-sp-step2__pcs-left .hv2-sp-summary__avatars span img {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        border: 1px solid #049551;
    }

    .hv2-donate-modal--sponsor .hv2-sp-step2__pre-cta-summary .hv2-sp-summary__amount {
        text-align: center;
        font-size: 20px;
    }

    .hv2-donate-modal--sponsor.hv2-donate-modal--donate .hv2-sp-step2__pre-cta-summary {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 12px;
        padding: 12px 20px;
        justify-content: space-between;
    }

    .hv2-donate-modal--sponsor.hv2-donate-modal--donate .hv2-sp-step2__pcs-left {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        flex: 1 1 auto;
        width: auto;
    }

    .hv2-donate-modal--sponsor.hv2-donate-modal--donate .hv2-sp-step2__pre-cta-summary .hv2-sp-summary__amount {
        text-align: right;
        font-size: 18px;
    }

    .hv2-donate-modal--sponsor .hv2-card-field-row .hv2-card-field:last-child .hv2-card-field__label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .hv2-donate-modal--sponsor .hv2-card-field__input,
    .hv2-donate-modal--sponsor .hv2-stripe-element {
        border-radius: 999px;
        padding: 10px 16px;
        font-size: 13px;
        height: 35px;
        min-height: 35px;
        max-height: 35px;
        box-sizing: border-box;
    }

    .hv2-donate-modal--sponsor .hv2-pmt-tabs-wrap {
        flex-direction: column;
        row-gap: 8px;
    }

    .hv2-donate-modal--sponsor .hv2-pmt-tabs-wrap .hv2-payment-option__header {
        flex: 0 0 auto;
        width: 100%;
        padding: 12px 14px;
        justify-content: flex-start;
        gap: 10px;
        font-size: 15px;
    }

    .hv2-donate-modal--sponsor .hv2-pmt-tabs-wrap .hv2-payment-option--active .hv2-payment-option__header {
        background: #E8F5EE;
        border-color: var(--pa-primary);
        color: var(--pa-primary);
    }

    .hv2-donate-modal--sponsor .hv2-pmt-tabs-wrap .hv2-payment-option__body {
        flex: 0 0 auto;
        width: 100%;
        margin-top: 6px;
    }

}

#hv2-step-3-sponsor {
    background: linear-gradient(180deg, #FFFFFF 0%, #E4FFEE 100%);
    padding-bottom: 0;
}

@media (max-width:1230px) {
    #hv2-step-3-sponsor {
        padding-bottom: 0;
    }
}

.hv2-sp-step3__header {
    position: relative;
    background: transparent;
    padding: 18px 18px 0;
    border-radius: 24px 24px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hv2-sp-step3__sponsor-badge {
    display: none;
    align-items: center;
    padding: 8px 18px;
    border-radius: 999px;
    background: #fff;
    color: var(--pa-primary);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(4, 149, 81, 0.25);
}

@media (max-width: 1230px) {
    .hv2-sp-step3__sponsor-badge {
        display: inline-flex;
    }
}

.hv2-sp-step3__close {
    position: absolute;
    top: 20px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #F3F4F6;
    color: #6B7280;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.18s, color 0.18s;
}

.hv2-sp-step3__close:hover {
    background: #E5E7EB;
    color: #333;
}

.hv2-sp-step3__close svg {
    width: 18px;
    height: 18px;
}

.hv2-sp-step3__body {
    padding: 8px 22px;
    text-align: center;
    background: linear-gradient(180deg, #FFFFFF 0%, #E4FFEE 100%);
}

.hv2-sp-step3__hero-image {
    width: 100%;
    max-width: 19.4rem;
    height: 8.5rem;
    margin: 0px auto 4px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

@media (max-width:1230px) {
    .hv2-sp-step3__hero-image {
        height: 8rem;
    }
}

.hv2-sp-step3__hero-image-img {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transform: scale(2) translate(-10px, 20px);
}

.hv2-sp-step3__check-badge {
    width: 72px;
    height: 72px;
    margin: 5px auto 5px;
    display: grid;
    place-items: center;
    color: var(--pa-primary);
}

.hv2-sp-step3__check-badge svg {
    width: 100%;
    height: 100%;
}

.hv2-sp-step3__title {
    font-family: var(--pa-font-headline);
    font-size: 25px;
    font-weight: 700;
    color: var(--pa-text-primary);
    margin: 0 0 10px;
    line-height: 1.2;
}


@media (min-width:1230px) {
    .hv2-sp-step3__title {
        margin: 0 0 6px;
    }
}

.hv2-sp-step3__subtitle {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.55;
    margin: 0 0 12px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1230px) {
    .hv2-sp-step3__subtitle {
        font-size: 14px;
    }
}

/* Receipt card */
.hv2-sp-step3__receipt-card {
    text-align: left;
    margin: 0 0 12px;
}

@media (min-width: 1230px) {
    .hv2-sp-step3__receipt-card {
        border: 1px solid #E2E2E2;
        padding: 12px;
        background: white;
        border-radius: 24px;
    }
}

.hv2-sp-step3__receipt-helps {
    font-size: 14px;
    font-weight: 700;
    color: var(--pa-text-primary);
    text-align: center;
    margin: 0 0 5px;
}

@media (min-width: 1230px) {
    .hv2-sp-step3__receipt-helps {
        font-size: 14px;
    }
}

.hv2-sp-step3__receipt-tags {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
    gap: 12px;
}

.hv2-sp-step3__receipt-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 999px;
    background: white;
    color: var(--pa-primary);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(4, 149, 81, 0.18);
}

@media (max-width: 1230px) {
    .hv2-sp-step3__receipt-tag {
        font-size: 13px;
        padding: 8px 14px;
    }
}

.hv2-steps {
    background: white;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid #E2E2E2;
}

.hv2-sp-step3__receipt-tag svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (min-width: 1230px) {
    .hv2-sp-step3__receipt-tag svg {
        width: 20px;
        height: 20px;
    }
}

.hv2-sp-step-body {
    background: white;
    border: 1px solid #04955133;
    border-radius: 16px;
    padding: 0 24px;
}

@media (min-width: 1230px) {
    .hv2-sp-step-body {
        border-radius: 24px;
    }
}

.hv2-sp-step3__receipt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 2.5px dashed #E5E7EB;
}

@media (max-width: 1230px) {
    .hv2-sp-step3__receipt-row {
        padding: 12px 0;
    }
}

.hv2-sp-step3__receipt-row:last-of-type {
    border-bottom: none;
}

.hv2-sp-step3__receipt-label {
    font-size: 14px;
    color: var(--pa-text-primary);
    font-weight: 500;
}

@media (max-width: 1230px) {
    .hv2-sp-step3__receipt-label {
        font-size: 14px;
    }
}

.hv2-sp-step3__receipt-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--pa-text-primary);
    text-align: right;
}

@media (max-width: 1230px) {
    .hv2-sp-step3__receipt-value {
        font-size: 14px;
    }
}

.hv2-sp-step3__receipt-suffix {
    font-weight: 400;
}

.hv2-sp-step3__receipt-email-text {
    font-size: 14px;
    color: #4B5563;
    text-align: center;
    margin: 12px 0 0;
    line-height: 1.5;
}

@media (max-width: 1230px) {
    .hv2-sp-step3__receipt-email-text {
        font-size: 13px;
        margin: 8px 0 0;
    }
}

.hv2-sp-step3__receipt-email-text strong {
    display: block;
    color: var(--pa-text-primary);
    font-weight: 700;
    margin-top: 2px;
}

/* "X anak lainnya" row */
.hv2-sp-step3__more-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 4px 16px;
    text-align: left;
}

.hv2-sp-step3__more-avatars {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.hv2-sp-step3__more-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid #fff;
    margin-left: -8px;
    background: #fff;
    overflow: hidden;
    display: inline-grid;
    place-items: center;
}

.hv2-sp-step3__more-avatar:first-child {
    margin-left: 0;
}

.hv2-sp-step3__more-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hv2-sp-step3__more-avatar--more {
    background: #E8F5EE;
    color: var(--pa-primary);
    font-size: 11px;
    font-weight: 700;
}

.hv2-sp-step3__more-text {
    font-size: 13.5px;
    color: var(--pa-text-primary);
    line-height: 1.45;
    margin: 0;
}

.hv2-sp-step3__more-text strong {
    font-weight: 700;
}

/* CTA buttons */
.hv2-sp-step3__cta-primary,
.hv2-sp-step3__cta-secondary {
    width: 100%;
    padding: 12px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    margin-bottom: 12px;
}

.hv2-sp-step3__cta-primary {
    background: var(--pa-primary);
    color: #fff;
    border: none;
}

.hv2-sp-step3__cta-primary:hover {
    background: #037a42;
}

.hv2-sp-step3__cta-secondary {
    background: #fff;
    color: var(--pa-primary);
    border: 1.5px solid var(--pa-primary);
}

.hv2-sp-step3__cta-secondary:hover {
    background: rgba(4, 149, 81, 0.06);
}

.hv2-sp-step3__share-divider {
    text-align: center;
    margin-bottom: 12px;
    position: relative;
    color: #9CA3AF;
    font-size: 12.5px;
}

.hv2-sp-step3__share-divider::before,
.hv2-sp-step3__share-divider::after {
    content: '';
    display: inline-block;
    width: 28%;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    vertical-align: middle;
    margin: 0 8px;
}

.hv2-sp-step3__share-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--pa-text-primary);
    text-align: center;
    margin: 0;
    line-height: 1.45;
}

@media (max-width: 1230px) {
    .hv2-sp-step3__share-text {
        font-size: 14px;
        font-weight: 400;
    }

    #hv2-sp-step3-dashboard-btn {
        margin-bottom: 10px;
    }
}

.hv2-sp-step3__share-row {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.hv2-sp-step3__share-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--pa-primary);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.18s, transform 0.15s;
}

.hv2-sp-step3__share-btn:hover {
    background: rgba(4, 149, 81, 0.08);
}

.hv2-sp-step3__share-btn svg {
    width: 24px;
    height: 24px;
}

.hv2-sp-step3__share-row .hv2-sp-step3__share-btn svg {
    width: 35px;
    height: 35px;
}

@media (max-width: 1230px) {
    .hv2-sp-step3__share-row .hv2-sp-step3__share-btn svg {
        width: 24px;
        height: 24px;
    }
}

.hv2-sp-step3__toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 18px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    border-radius: 999px;
    font-size: 13px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.hv2-sp-step3__toast.is-visible {
    opacity: 1;
}

/* Mobile responsive — bottom sheet on narrow viewports */
@media (max-width: 1230px) {
    .hv2-sponsor-picker__title {
        font-size: 20px;
    }

    .hv2-sponsor-picker__header {
        padding: 20px 18px 14px;
    }

    .hv2-sp-stepped-tab {
        font-size: 16px;
        padding: 10px 16px;
    }

    .hv2-sp-accordion__header {
        padding: 14px 14px;
    }

    .hv2-sp-accordion__body {
        padding: 0 14px 14px;
    }

    .hv2-sponsor-picker__card-avatar {
        width: 60px;
        height: 60px;
    }

    .hv2-sp-step3__title {
        font-size: 20px;
    }

    .hv2-sp-step3__check-badge {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 400px) {
    .hv2-sp-stepped-tab {
        font-size: 14px;
    }
}

.hv2-sp-acc__header {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 13px;
    font-weight: 700;
    color: var(--pa-text-primary);
    line-height: 1.35;
    cursor: default;
    padding: 0;
    margin: 0 0 12px;
    box-sizing: border-box;
    align-items: flex-start;
}

.hv2-sp-acc__title {
    flex: 1;
}

.hv2-sp-acc__chevron {
    display: none;
    width: 18px;
    height: 18px;
    color: #6b7280;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.hv2-sp-acc__chevron svg {
    width: 100%;
    height: 100%;
    display: block;
}

.hv2-sp-acc__body {
    display: block;
}

/* Default-mode upsell accordion is hidden — only campaign mode reveals it. */
.hv2-sp-acc--upsell {
    display: none;
}

.hv2-donate-modal--campaign #hv2-step-1-sponsor .hv2-sp-acc__header {
    cursor: pointer;
    margin: 0;
    padding: 4px 0;
}

.hv2-donate-modal--campaign #hv2-step-1-sponsor .hv2-sp-acc__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hv2-donate-modal--campaign #hv2-step-1-sponsor .hv2-sp-acc--open>.hv2-sp-acc__header .hv2-sp-acc__chevron {
    transform: rotate(180deg);
}

.hv2-donate-modal--campaign #hv2-step-1-sponsor .hv2-sp-acc__body {
    display: none;
    padding-top: 14px;
    margin-top: 12px;
    border-top: 1px solid rgba(4, 149, 81, 0.08);
}

.hv2-donate-modal--campaign #hv2-step-1-sponsor .hv2-sp-acc--open>.hv2-sp-acc__body {
    display: block;
}

/* Campaign mode: reveal the upsell accordion + style its background */
.hv2-donate-modal--campaign #hv2-step-1-sponsor .hv2-sp-acc--upsell {
    display: block;
    background: linear-gradient(180deg, #fff 0%, #f0fbf3 100%);
}

/* Upsell Yes/No buttons */
.hv2-sp-upsell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}

.hv2-sp-upsell-btn {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid #e5e7eb;
    color: #333;
    background: #fff;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
    text-align: center;
}

.hv2-sp-upsell-btn--no:hover {
    border-color: #9ca3af;
}

.hv2-sp-upsell-btn--yes {
    background: var(--pa-primary);
    color: #fff;
    border-color: var(--pa-primary);
}

.hv2-sp-upsell-btn--yes:hover {
    background: var(--pa-primary-hover);
    border-color: var(--pa-primary-hover);
}

.hv2-donate-modal--campaign #hv2-step-1-sponsor .hv2-sp-step1__badge {
    color: var(--pa-primary);
}

.hv2-donate-modal--campaign #hv2-step-1-sponsor .hv2-sp-step1__title {
    color: #333;
}

.hv2-sp-inline-sponsor {
    display: none;
}

.hv2-donate-modal--upsell-yes .hv2-sp-inline-sponsor {
    display: block;
}

.hv2-donate-modal--upsell-yes .hv2-sp-acc--upsell .hv2-sp-upsell {
    display: none;
}

.hv2-donate-modal--present #hv2-step-1-sponsor .hv2-sp-acc__header {
    cursor: default;
    margin: 0;
    padding: 4px 0;
}

.hv2-donate-modal--present #hv2-step-1-sponsor .hv2-sp-acc__chevron {
    display: none;
}

.hv2-donate-modal--present #hv2-step-1-sponsor .hv2-sp-acc__body {
    display: block;
    padding-top: 10px;
    margin-top: 0;
    border-top: none;
}


.hv2-donate-modal--present #hv2-step-1-sponsor .hv2-sp-acc--upsell {
    display: none;
}

.hv2-donate-modal--present #hv2-step-1-sponsor .hv2-sp-step1__title {
    color: #333;
}

.hv2-donate-modal--college #hv2-step-1-sponsor .hv2-sp-acc__header {
    cursor: default;
    margin: 0;
    padding: 4px 0;
}

.hv2-donate-modal--college #hv2-step-1-sponsor .hv2-sp-acc__chevron {
    display: none;
}

.hv2-donate-modal--college #hv2-step-1-sponsor .hv2-sp-acc__body {
    display: block;
    padding-top: 10px;
    margin-top: 0;
    border-top: none;
}

.hv2-donate-modal--college #hv2-step-1-sponsor .hv2-sp-acc--upsell {
    display: none;
}

.hv2-donate-modal--college #hv2-step-1-sponsor .hv2-sp-step1__title {
    color: #333;
}

.hv2-donate-modal--campaign #hv2-step-1-sponsor .hv2-sp-acc--step .hv2-sp-acc__header {
    gap: 12px;
}

.hv2-sp-acc__num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--pa-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Inline children list — scrollable */
.hv2-sp-inline-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
    margin-bottom: 12px;
}

.hv2-sp-inline-list::-webkit-scrollbar {
    width: 6px;
}

.hv2-sp-inline-list::-webkit-scrollbar-thumb {
    background: rgba(4, 149, 81, 0.25);
    border-radius: 999px;
}

.hv2-sp-inline-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 16px;
    color: #6b7280;
}

@media (max-width: 1230px) {
    .hv2-sp-inline-footer {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        align-items: flex-start;
    }
}

.hv2-sp-inline-info-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pa-primary);
    text-decoration: none;
    font-weight: 600;
}

.hv2-sp-inline-info-link:hover {
    text-decoration: underline;
    color: var(--pa-primary);
}

.hv2-sp-inline-info-link:focus:not(:hover) {
    color: var(--pa-primary);
    text-decoration: none;
}

.hv2-sp-inline-info-link svg {
    width: 14px;
    height: 14px;
}

.hv2-sp-inline-count {
    font-weight: 600;
    color: #333;
}

/* Footer moved OUTSIDE the "Choose the children" card: sits below the card,
   only shown while the step-1 accordion is open (mirrors the collapsed body). */
.hv2-sp-inline-footer--outside {
    display: none;
    margin-top: 12px;
}

.hv2-sp-acc[data-acc="inline-children"].hv2-sp-acc--open+.hv2-sp-inline-footer--outside {
    display: flex;
}

/* Period row: freq pills on left, value on right */
.hv2-sp-inline-period-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.hv2-sp-inline-freq {
    display: inline-flex;
    background: #04955114;
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}

.hv2-sp-inline-freq-btn {
    all: unset;
    box-sizing: border-box;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 16px;
    color: #6b7280;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}

.hv2-sp-inline-freq-btn--active {
    background: var(--pa-primary);
    color: #fff;
}

.hv2-sp-inline-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.hv2-sp-inline-value-label {
    font-size: 16px;
    color: #333;
}

.hv2-sp-inline-value-amount {
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.hv2-sp-inline-value-amount strong {
    color: #333;
}

/* Summary card — centered avatars + total */
.hv2-sp-inline-summary {
    text-align: center;
    padding: 8px 0;
}

.hv2-sp-inline-summary-avatars {
    display: inline-flex;
    justify-content: center;
    gap: -6px;
    margin-bottom: 8px;
}

.hv2-sp-inline-summary-avatars img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid #fff;
    object-fit: cover;
    margin-left: -6px;
    background: #f3f4f6;
}

.hv2-sp-inline-summary-avatars img:first-child {
    margin-left: 0;
}

.hv2-sp-inline-summary-children {
    font-size: 16px;
    color: #333;
    margin: 0 0 6px;
}

.hv2-sp-inline-summary-children strong {
    color: #333;
    font-weight: 700;
}

.hv2-sp-inline-summary-total {
    font-size: 20px;
    font-weight: 700;
}

.hv2-sp-inline-summary-amount {
    color: #333;
}

.hv2-sp-inline-summary-total span {
    color: #333;
    font-weight: 500;
}

.hv2-sp-inline-summary-total .hv2-sp-inline-summary-amount {
    font-size: 30px;
    font-weight: 700;
}

.hv2-sp-inline-summary-total .sc-inline-sponsor-summary-suffix {
    font-size: 16px;
}


.hv2-donate-modal--campaign #hv2-step-1-sponsor .hv2-sp-step1__body {
    display: flex;
    flex-direction: column;
}

.hv2-donate-modal--campaign #hv2-step-1-sponsor .hv2-sp-acc--upsell {
    order: 1;
}

.hv2-donate-modal--campaign #hv2-step-1-sponsor .hv2-sp-inline-sponsor {
    order: 2;
}

.hv2-donate-modal--campaign #hv2-step-1-sponsor .hv2-sp-acc[data-acc="donor-info"] {
    order: 3;
}

.hv2-donate-modal--campaign #hv2-step-1-sponsor .hv2-sp-acc[data-acc="donor-info"] .hv2-sp-acc__header {
    cursor: default;
    margin-bottom: 8px;
}

.hv2-donate-modal--campaign #hv2-step-1-sponsor .hv2-sp-acc[data-acc="donor-info"] .hv2-sp-acc__chevron {
    display: none;
}

.hv2-donate-modal--campaign #hv2-step-1-sponsor .hv2-sp-acc[data-acc="donor-info"] .hv2-sp-acc__body {
    display: block;
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

.hv2-sp-inline-summary-avatars img {
    border-radius: 10px;
}

.hv2-sp-inline-summary-avatars .hv2-sp-inline-summary-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    border: 2px solid #fff;
    margin-left: -6px;
    background: #049551;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.hv2-sp-acc--step {
    background: #fff;
    border: 1px solid rgba(4, 149, 81, 0.08);
    border-radius: 16px;
    padding: 14px 18px;
    margin-bottom: 12px;
}

.hv2-sp-acc--step .hv2-sp-acc__header {
    cursor: pointer;
    margin: 0;
    padding: 4px 0;
    gap: 12px;
}

.hv2-sp-acc--step .hv2-sp-acc__chevron {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.hv2-sp-acc--step.hv2-sp-acc--open>.hv2-sp-acc__header .hv2-sp-acc__chevron {
    transform: rotate(180deg);
}

.hv2-sp-acc--step .hv2-sp-acc__body {
    display: none;
    padding-top: 14px;
    margin-top: 12px;
    border-top: 1px solid rgba(4, 149, 81, 0.08);
}

.hv2-sp-acc--step.hv2-sp-acc--open>.hv2-sp-acc__body {
    display: block;
}

.home-child-card__img-focus {
    top: -6.5rem;
}

.home-child-card__img-circle {
    width: 14.8rem;
    height: 14.8rem;
    background: #e9f5ec;
    border: 2px solid #049551;
}

@media (max-width: 1230px) {
    .home-child-card__img-circle {
        width: 11rem;
        height: 11rem;
    }
}

/* Card body — solid green, smaller radius, tighter padding */
.home-child-card__body {
    background: #32BF7E;
    border-radius: 32px;
    padding: 11rem 1.75rem 2rem;
    overflow: visible;
    gap: 2.4rem;
}

@media (max-width: 1230px) {
    .home-child-card__body {
        padding: 7rem 1.4rem 1.6rem;
    }
}

/* Hide the legacy gradient overlay if it's still in the DOM */
.home-child-card__gradient {
    display: none;
}

/* Child name — centered, white, slightly tighter */
.home-child-card__name {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    text-align: center;
    line-height: 1.25;
}

@media (max-width: 1230px) {
    .home-child-card__name {
        font-size: 20px;
    }
}

/* White inner panel ("X dari N sponsor terpenuhi" + need rows) */
.home-child-card__needs-box {
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    width: 100%;
    margin-bottom: 0;
}

.home-child-card__progress {
    font-size: 14px;
    color: #333;
    margin: 0 0 12px;
    line-height: 1.35;
}

.home-child-card__progress strong {
    font-weight: 700;
}

.home-child-card__need-row {
    margin-bottom: 12px;
}

.home-child-card__need-row:last-child {
    margin-bottom: 0;
}

/* A child with one sponsorship type switched off shows a single need row.
   The templates pad the list with an invisible row so every card keeps the
   two-row height and the "Kebutuhan" line + button stay aligned across the
   grid/carousel. Still occupies layout; only hidden from paint and a11y. */
.home-child-card__need-row--placeholder {
    visibility: hidden;
    pointer-events: none;
}

.home-child-card__need-info {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    gap: 6px;
}

.home-child-card__need-info span {
    color: #333;
    font-weight: 500;
}

.home-child-card__need-icon {
    width: 20px;
    height: 20px;
    color: var(--pa-primary);
}

.home-child-card__need-icon svg {
    width: 100%;
    height: 100%;
}

/* Need status pills */
.home-need-badge {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    line-height: 1.2;
    border: 1px solid transparent;
}

.home-need-badge--done {
    background: #e6f4ea;
    color: var(--pa-primary);
    border-color: rgba(4, 149, 81, 0.25);
}

.home-need-badge--done svg {
    width: 18px;
    height: 18px;
}

.home-need-badge--pending {
    background: #fff8ee;
    color: #d97706;
    border-color: #fde4b8;
}

/* Kebutuhan row — outside the white card, white text on green */
.home-child-card__kebutuhan {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    color: #fff;
    margin-bottom: 0;
    padding: 0 4px;
}

.home-child-card__kebutuhan-label {
    font-size: 16px;
    font-weight: 400;
    opacity: 0.95;
}

.home-child-card__kebutuhan-amount {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.home-child-card__kebutuhan-suffix {
    font-size: 16px;
    font-weight: 400;
    opacity: 0.85;
    margin-left: 2px;
}

/* "Sponsori X" button — white pill */
.home-child-card__submit {
    background: #fff;
    color: var(--pa-primary);
    font-weight: 700;
    padding: 14px 24px;
    font-size: 16px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: transform 0.15s, box-shadow 0.15s;
    text-align: center;
}

.home-child-card__submit:hover {
    text-decoration: underline;
    color: var(--pa-primary);
}

/* "Lihat Profil Lengkap →" link */
.home-child-card__view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.15s;
}

.home-child-card__view:hover {
    text-decoration: underline;
    color: #fff;
}

.home-child-card__view:focus:not(:hover) {
    color: #fff;
    text-decoration: none;
}

.home-child-card__view-arrow {
    width: 20px;
    height: 20px;
    color: #fff;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

.home-child-card__view-arrow path {
    stroke: currentColor;
    fill: none;
}

/* Hide legacy elements no longer in the new design */
.home-child-card__price,
.home-child-card__needs-header {
    display: none;
}

/* Mobile layout — vertical-stacked need rows, smaller avatar, tighter card */
@media (max-width: 1230px) {
    .home-child-card__img-circle {
        width: 10rem;
        height: 10rem;
        border-width: 3px;
    }

    .home-child-card__img-focus {
        top: -3.5rem;
    }

    .home-child-card__body {
        padding: 7.5rem 1.25rem 1.5rem;
        gap: 1.25rem;
    }

    .home-child-card__name {
        font-size: 18px;
        margin-bottom: 0;
        margin-top: 0;
    }

    .home-child-card__progress {
        text-align: center;
        margin-bottom: 14px;
        font-size: 14px;
    }

    .home-child-card__need-row {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 14px;
        margin-bottom: 14px;
    }

    .home-child-card__need-info {
        justify-content: center;
        font-weight: 700;
        font-size: 16px;
    }
}

/* Long sponsor names/emails must truncate instead of stretching the card. */
.home-child-card,
.home-child-card__body,
.home-child-card__needs-box {
    min-width: 0;
}

.home-child-card__need-row {
    justify-content: space-between;
}

.home-child-card__need-info {
    flex-shrink: 0;
}

.home-need-badge {
    flex: 0 1 auto;
    max-width: 100%;
    overflow: hidden;
    min-width: 0;
}

.home-need-badge>span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.home-sponsors__btn {
    border-color: var(--pa-primary);
}

.home-need-badge--pending,
.home-need-badge--pending>span {
    color: #9a5301;
}

.display-name {
    color: #1f2937;
}

.pa-page-hero {
    position: relative;
    width: 100%;
    min-height: 640px;
    background-color: #1a3d2a;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    padding: 140px 24px;
}

.pa-page-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pa-page-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.20) 0%,
            rgba(0, 0, 0, 0.10) 45%,
            rgba(0, 0, 0, 0.55) 70%);
    pointer-events: none;
}

.pa-page-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    padding: 0 1.5rem 8rem;
    text-align: center;
}

.pa-page-hero__title {
    color: #ffffff;
    font-size: 4.8rem;
    font-weight: 500;
    line-height: 1.15;
    margin: 0;
}

.pa-page-hero__breadcrumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.4rem;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 700;
}

.pa-page-hero__breadcrumb-link {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.pa-page-hero__breadcrumb-link:hover,
.pa-page-hero__breadcrumb-link:focus {
    opacity: 0.85;
    color: inherit;
    text-decoration: none;
}

.pa-page-hero__breadcrumb-btn {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
}

.pa-page-hero__breadcrumb-sep {
    color: inherit;
    opacity: 0.95;
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.pa-page-hero__breadcrumb-chevron {
    width: 1.6rem;
    height: 1.6rem;
    display: block;
}

.pa-page-hero__breadcrumb-current {
    color: inherit;
    font-weight: 400;
}

@media (max-width: 1230px) {
    .pa-page-hero {
        min-height: 480px;
        padding: 96px 20px;
    }

    .pa-page-hero__title {
        font-size: 3.6rem;
    }

    .pa-page-hero__inner {
        padding: 0 1rem 2.5rem;
    }

    .pa-page-hero__breadcrumb {
        font-size: 1.6rem;
        margin-top: 1rem;
    }
}

@media (max-width: 1230px) {
    .pa-page-hero {
        min-height: 360px;
        padding: 72px 16px;
    }

    .pa-page-hero__title {
        font-size: 2.4rem;
    }

    .pa-page-hero__inner {
        padding: 0 0.5rem 5rem;
    }

    .pa-page-our-history .pa-page-hero__inner {
        padding-bottom: 0;
    }

    .pa-page-hero__breadcrumb {
        font-size: 1.4rem;
        margin-top: 0.8rem;
        gap: 0.4rem;
    }
}

.pa-page-hero--dark {
    background-color: #1a3d2a;
}

.pa-page-hero--banner {
    min-height: 640px;
    padding: 140px 24px;
    overflow: hidden;
    text-align: center;
}

@media (max-width: 1230px) {
    .pa-page-hero--banner {
        min-height: 480px;
        padding: 2rem 1.5rem 6rem;
    }
}

@media (max-width: 1230px) {
    .pa-page-hero--banner {
        min-height: 360px;
        padding: 2rem 1rem 4rem;
    }
}

.pa-page-hero__date {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.92);
    margin: 0.5rem 0 0;
    letter-spacing: 0.02em;
}

/* ── iDEAL bank picker (custom dropdown with logos) ── */
.hv2-ideal-bank-picker {
    position: relative;
}

.hv2-ideal-bank-picker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    gap: 8px;
    padding-right: 36px;
}

.hv2-ideal-bank-picker__trigger-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.hv2-ideal-bank-picker__placeholder {
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hv2-ideal-bank-picker__trigger-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
}

.hv2-ideal-bank-picker__trigger-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hv2-ideal-bank-picker .hv2-sp-select-chevron {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6b7280;
    transition: transform 0.18s;
}

.hv2-ideal-bank-picker.is-open .hv2-sp-select-chevron {
    transform: translateY(-50%) rotate(180deg);
}

.hv2-ideal-bank-picker__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 200;
    background: #fff;
    border: 1.5px solid var(--pa-border-color);
    border-radius: 16px;
    padding: 6px;
    margin: 0;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
}

.hv2-ideal-bank-picker.is-open .hv2-ideal-bank-picker__dropdown {
    display: block;
}

.hv2-ideal-bank-picker.is-open .hv2-ideal-bank-picker__trigger {
    border-color: var(--pa-primary);
}

.hv2-ideal-bank-picker__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    color: var(--pa-text-primary);
    transition: background 0.12s;
}

.hv2-ideal-bank-picker__option:hover,
.hv2-ideal-bank-picker__option[aria-selected="true"] {
    background: rgba(4, 149, 81, 0.07);
}

.hv2-ideal-bank-picker__logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
}

.hv2-ideal-bank-picker__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Payment method logo images (replaces text badges) ── */
.hv2-pm-logo {
    display: inline-block;
    vertical-align: middle;
    max-width: 35px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.hv2-pm-logo--icon {
    width: 20px;
    height: 20px;
    max-width: 20px;
    color: #6b7280;
}

.hv2-sp-winav {
    display: none;
}

.hv2-sp-winav__item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    color: #9aa0ab;
    font-weight: 600;
    font-size: 14px;
}

.hv2-sp-winav__num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
    color: #9aa0ab;
    font-size: 14px;
    font-weight: 700;
    flex: 0 0 auto;
}

.hv2-sp-winav__item--active {
    color: #333;
}

.hv2-sp-winav__item--active .hv2-sp-winav__num {
    background: var(--pa-primary, #049551);
    color: #fff;
}

.hv2-sp-winav__item--done .hv2-sp-winav__num {
    background: rgba(4, 149, 81, 0.15);
    color: var(--pa-primary, #049551);
}

.hv2-sp-winav__line {
    flex: 1 1 auto;
    max-width: 40px;
    height: 2px;
    background: #e9ecef;
    align-self: center;
    margin-top: 16px;
}

@media (max-width: 480px) {
    .hv2-sp-winav__label {
        display: inline;
        font-size: 12px;
    }

    .hv2-sp-winav__item {
        gap: 5px;
        font-size: 12px;
    }

    .hv2-sp-winav__num {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .hv2-sp-winav__line {
        max-width: 30px;
        margin-top: 10px;
    }

    .hv2-sponsor-picker__pane--sponsor .hv2-sp-accwiz .hv2-sp-winav {
        gap: 4px;
    }
}

.hv2-sponsor-picker__pane--sponsor {
    border-top: none;
}

.hv2-sponsor-picker__pane--sponsor .hv2-sp-accwiz {
    padding-top: 0;
}

.hv2-sponsor-picker__pane--sponsor .hv2-sp-accwiz .hv2-sp-winav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    list-style: none;
    margin: 0 0 14px;
    padding: 0 0 16px;
    border-bottom: 1px solid #04955133;
}

.hv2-sponsor-picker__pane--sponsor .hv2-sp-accwiz .hv2-sp-accordion__step {
    display: none;
}

.hv2-sponsor-picker__pane--sponsor .hv2-sp-accwiz .hv2-sp-accordion__step--active {
    display: block;
}

.hv2-sponsor-picker__pane--sponsor .hv2-sp-accwiz .hv2-sp-accordion__header {
    cursor: default;
    pointer-events: none;
}

.hv2-sponsor-picker__pane--sponsor .hv2-sp-accwiz .hv2-sp-accordion__chevron {
    display: none;
}

.hv2-sponsor-picker__pane--sponsor .hv2-sp-accwiz .hv2-sp-accordion__num {
    display: none;
}

.hv2-sponsor-picker__pane--sponsor .hv2-sp-accwiz .hv2-sp-accordion__header {
    padding: 12px 18px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(4, 149, 81, 0.10);
    text-align: left;
}

.hv2-sponsor-picker__pane--sponsor .hv2-sp-accwiz .hv2-sp-accordion__title {
    font-size: 15px;
    font-weight: 700;
}

.hv2-sponsor-picker__pane--sponsor .hv2-sp-accwiz .hv2-sp-accordion__step--active .hv2-sp-accordion__sub {
    display: block;
    color: #6b7280;
    font-size: 13px;
    margin-top: 2px;
}

.hv2-sponsor-picker__pane--sponsor .hv2-sp-accwiz .hv2-sp-accordion__step--active .hv2-sp-accordion__body {
    display: block;
    padding-top: 4px;
}

.hv2-sponsor-picker__back {
    position: absolute;
    top: 25px;
    left: 36px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #F3F4F6;
    color: var(--pa-primary, #049551);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.18s, color 0.18s;
    z-index: 5;
}

.hv2-sponsor-picker__back:hover {
    background: #E5E7EB;
}

.hv2-sponsor-picker__back svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 1230px) {
    .hv2-sponsor-picker__back {
        top: 20px;
        left: 18px;
    }
}

/* ==========================================================================
   MISSION (home-vm)

   Full-bleed tinted band — the same #eaf5ee the impact section uses — so it
   separates from the white Their Stories below without floating a box on the
   page. Photo and text share one asymmetric row: this was the only band on
   the homepage without a human face, so the photo carries the emotion and
   the copy stays short beside it. Column order flips on its own under RTL
   (grid placement follows the inline direction), hence no dir overrides.
   ========================================================================== */
.home-vm {
    background-color: #eaf5ee;
    padding: 4rem 0;
}

@media (min-width: 1230px) {
    .home-vm {
        padding: 6rem 0;
    }
}

.home-vm__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.8rem;
    margin: 0 auto;
}

@media (min-width: 1230px) {
    .home-vm__grid {
        grid-template-columns: minmax(0, 44rem) minmax(0, 1fr);
        align-items: center;
        gap: 6.4rem;
    }
}

/* Same 2.4rem radius as the intro-card photos right above, so the two
   sections read as one family. */
.home-vm__media {
    border-radius: 2.4rem;
    overflow: hidden;
}

.home-vm__media picture {
    display: block;
    height: 100%;
}

/* Square on mobile. The default photo is a rosette of four children shot from
   above: the subject is square, so a 16/10 frame kept the dead play-mat at
   both edges and shrank the faces to fit a narrow screen. A centre 1/1 crop
   drops a third of that empty width, still holds all four faces (the rosette
   spans x 280-960 of 1200, well inside the 200-1000 the crop keeps) and
   renders them half again as large — which is the whole point of the photo
   being here. Beside the text there is no such squeeze, so desktop stays 4/3. */
.home-vm__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

@media (min-width: 1230px) {
    .home-vm__img {
        aspect-ratio: 4 / 3;
    }
}

.home-vm__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    text-align: center;
}

@media (min-width: 1230px) {
    .home-vm__content {
        align-items: flex-start;
        text-align: start;
        gap: 2rem;
    }
}

.home-vm__title {
    margin: 0;
    text-wrap: balance;
}

.home-vm__title-highlight {
    font-family: var(--pa-font-headline) !important;
    color: var(--pa-primary);
}

/* The lead is the emotional thesis of the section ("every child deserves…"),
   so it sits above the mission at near-headline weight instead of as the
   small grey subtitle it used to be. */
.home-vm__lead {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.6;
    font-weight: 600;
    color: #0f172a;
}

@media (min-width: 1230px) {
    .home-vm__lead {
        font-size: 1.8rem;
    }
}

.home-vm__statement {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.75;
    color: #4b5563;
}

@media (min-width: 1230px) {
    .home-vm__statement {
        font-size: 1.6rem;
    }
}

/* Under 1230px the pair stacks full width, the same CTA shape Their Stories,
   Featured Children and the contact band already use — this section was the
   only one left with two narrow pills side by side. Padding and type size
   already step down at this width in global.css, so only the box changes.
   Donate stays first: it is the primary action, and stacking removes the
   left/right ranking a row gives for free. */
.home-vm__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 1.2rem;
    margin-top: 0.8rem;
}

.home-vm__actions .pa-btn {
    width: 100%;
}

@media (min-width: 1230px) {
    .home-vm__actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        width: auto;
    }

    .home-vm__actions .pa-btn {
        width: auto;
    }
}