:root {
    --color-brand-primary: #FF9225;
    --color-brand-primary-hover: #FF6A00;
    --color-brand-blue: #0081EB;
    --color-brand-blue-dark: #0075E9;
    --color-brand-blue-light: #ECF9FF;
    --color-brand-blue-lightest: #F1FBFF;
    --color-brand-blue-card: #F4FBFF;
    --color-text-secondary: #33587D;
    --color-text-muted: #525D69;
    --color-text-dark: #2D3740;
    --color-text-hint: #86A7C7;
    --color-statistics-value: #6589AD;
    --color-statistics-primary: #026BFF;
    --color-about-secondary: #587DA2;
    --color-success: #6BCD47;
    --color-success-light: #EEFFF1;
    --color-white: #ffffff;

    --spacer-6: clamp(1.5rem, 4vw, 4.5rem);
    --spacer-7: clamp(2rem, 8vw, 9rem);

    --statistics-value-font-size: clamp(2rem, 5vw, 3.625rem);
    --statistics-label-font-size: clamp(0.9375rem, 2vw, 1rem);
    --statistics-primary-value-font-size: clamp(3.5rem, 10vw, 5.875rem);
    --statistics-primary-label-font-size: clamp(1.125rem, 3vw, 1.375rem);
    --statistics-month-value-font-size: clamp(1.75rem, 5vw, 2.5rem);
    --statistics-month-label-font-size: clamp(1rem, 2.8vw, 1.25rem);
    --statistics-heading-font-size: clamp(2rem, 6vw, 3.75rem);
    --statistics-card-border-radius: 1.875rem;
    --statistics-value-label-gap: clamp(0.25rem, 0.8vw, 0.5rem);
}

.text-hint {
    color: var(--color-text-hint);
}

@media (min-width: 992px) {
    .mb-lg-6 { margin-bottom: var(--spacer-6) !important; }
}

body {
    font-family: 'Inter', sans-serif;
    overflow-x: clip;
}

/* ===== STATISTICS ===== */
.statistics-heading {
    color: var(--color-brand-blue);
    font-size: var(--statistics-heading-font-size);
    font-weight: bold;
    line-height: 1;
}

.statistics-value,
.statistics-label,
.statistics-value-primary,
.statistics-label-primary,
.statistics-month-value,
.statistics-month-label {
    margin: 0;
    padding: 0;
    line-height: 1;
}

.statistics-value {
    font-weight: 500;
    color: var(--color-statistics-value);
    font-size: var(--statistics-value-font-size);
}

.statistics-label {
    font-weight: 400;
    color: var(--color-statistics-value);
    font-size: var(--statistics-label-font-size);
    margin-top: auto;
    line-height: inherit;
    align-self: flex-start;
}

.statistics-value-primary {
    font-weight: 800;
    color: var(--color-statistics-primary);
    font-size: var(--statistics-primary-value-font-size);
}

.statistics-label-primary {
    font-weight: 700;
    color: var(--color-statistics-primary);
    font-size: var(--statistics-primary-label-font-size);
    margin-top: var(--statistics-value-label-gap);
    line-height: inherit;
}

.statistics-month-value {
    font-weight: 700;
    color: var(--color-brand-blue);
    font-size: var(--statistics-month-value-font-size);
}

.statistics-month-label {
    font-weight: 500;
    color: var(--color-brand-blue);
    font-size: var(--statistics-month-label-font-size);
}

.statistics-month-card {
    background-color: var(--color-brand-blue-light);
    border-radius: var(--statistics-card-border-radius);
    display: flex;
    flex-direction: column;
}

/* ===== EXTENDED SPACING: 6, 7 ===== */
.mb-6 { margin-bottom: var(--spacer-6) !important; }
.pb-6 { padding-bottom: var(--spacer-6) !important; }
.px-7 { padding-left: var(--spacer-7) !important; padding-right: var(--spacer-7) !important; }
.gap-7 { gap: var(--spacer-7) !important; }

@media (min-width: 768px) {
    .pb-md-7 { padding-bottom: var(--spacer-7) !important; }
}

/* ===== HEADER ===== */
.header-nav {
    padding-left: clamp(1rem, 3.5vw, 3rem);
    padding-right: clamp(1rem, 3.5vw, 3rem);
}

.header-nav .nav-link {
    color: var(--color-text-dark);
}

.header-nav .nav-link:hover,
.header-nav .nav-link:focus {
    color: var(--color-brand-primary);
}

/* ===== LOGO ===== */
.logo-title {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

.logo-subtitle {
    font-size: clamp(0.5625rem, 0.5rem + 0.2vw, 0.625rem);
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
}

/* ===== BUTTONS ===== */
.btn-brand {
    padding: clamp(0.75rem, 0.6rem + 0.6vw, 1rem) clamp(1rem, 0.8rem + 1vw, 1.5rem);
    border-radius: clamp(0.75rem, 0.6rem + 0.7vw, 0.9375rem);
    font-weight: bold;
}

.btn-help-cta {
    inline-size: clamp(9rem, 7rem + 4.7vw, 12rem);
    min-block-size: clamp(2.5rem, 1.8rem + 1.5vw, 3.5rem);
    white-space: nowrap;
    text-align: center;
}

@media (max-width: 1299.98px) {
    .btn-help-cta {
        white-space: normal;
        overflow-wrap: break-word;
    }
}

.btn-primary-brand {
    background-color: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: var(--color-white);
}

.btn-primary-brand:hover {
    background-color: var(--color-brand-primary-hover);
    border-color: var(--color-brand-primary-hover);
    color: var(--color-white);
}


.btn-link {
    background-color: var(--color-brand-blue-light);
    border-color: var(--color-brand-blue-light);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 500;
}

.btn-link:hover {
    background-color: #BADDFF;
    border-color: #BADDFF;
    color: var(--color-text-secondary);
}

.btn-white-brand {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-text-secondary);
    text-decoration: none;
}

.btn-white-brand:hover {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-brand-primary);
}

/* ===== HERO ===== */
.hero-container {
    background: var(--color-brand-blue-light);
    border-radius: clamp(2rem, 6vw, 4.375rem);
    border: 0;
}

@media (min-width: 992px) {
    .hero-container {
        height: 91.5%;
    }
}

.hero-title {
    color: var(--color-brand-blue);
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 3.75rem);
}

.hero-subtitle {
    color: var(--color-brand-blue-dark);
    font-weight: 500;
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
}

.hero-description {
    color: var(--color-text-secondary);
    font-size: clamp(0.875rem, 1.5vw, 1.125rem);
    max-width: 100%;
}

@media (min-width: 1200px) {
    .hero-description {
        max-width: 80%;
    }
}

@media (min-width: 1536px) {
    .hero-description {
        max-width: 70%;
    }
}


.main-hero-image-wrapper {
    border-radius: clamp(2rem, 6vw, 4.375rem);
}

.main-hero-image {
    object-position: center;
}

/* ===== ABOUT ===== */
.about-principle-title {
    color: var(--color-text-secondary);
    font-weight: 700;
    font-size: clamp(1.5rem, 2vw, 2rem);
    line-height: 1.2;
}

.about-principle-description,
.about-doc-text {
    color: var(--color-about-secondary);
    font-weight: 500;
    font-size: clamp(0.9375rem, 1.2vw, 1rem);
    line-height: 1.4;
}

@media (max-width: 830px) {
    .statistics-month-card .w-75 {
        width: clamp(75%, calc(75% + (830px - 100vw) * 0.12), 100%) !important;
    }
}

.about-document-card {
    background-color: var(--color-brand-blue-lightest);
    border-radius: clamp(1.25rem, 3vw, 2.5rem);
}

/* ===== REQUISITES ===== */
.requisites-card {
    background-color: var(--color-white);
    border-radius: clamp(1rem, 2vw, 1.5rem);
}

.requisites-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.requisites-row {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-brand-blue-light);
}

.requisites-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.requisites-label {
    font-size: clamp(0.75rem, 1.1vw, 0.875rem);
    font-weight: 500;
    color: var(--color-text-hint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.requisites-value {
    font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
    font-weight: 600;
    color: var(--color-text-secondary);
    word-break: break-all;
}

.about-doc-title {
    color: var(--color-text-secondary);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.2;
}

.about-doc-subtitle {
    color: var(--color-about-secondary);
    font-weight: 500;
    font-size: clamp(1rem, 1.7vw, 1.25rem);
    line-height: 1.35;
}

.about-location-map {
    border-radius: clamp(1.25rem, 3vw, 2.5rem);
    min-height: clamp(18rem, 35vw, 28rem);
}

/* ===== DONATION / PAYMENT WIDGET ===== */
/* #payment-widget — контейнер для cqi-единиц и для передачи высоты потомкам */
#payment-widget {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
}

#payment-widget > .payment-widget {
    flex-grow: 1;
}

/* Базовые стили элементов — адаптивны через cqi (относительно ширины контейнера) */
.payment-widget {
    display: flex;
    flex-direction: column;
    background-color: var(--color-brand-blue-light);
    border-radius: clamp(2rem, 6vw, 4.375rem);
    padding: clamp(1.25rem, 7.5cqi, 2.5rem);
}

.payment-widget-title {
    color: var(--color-text-secondary);
    font-size: clamp(1rem, 4cqi, 1.75rem);
}

.payment-widget-title-gap {
    margin-bottom: clamp(1.5rem, 8cqi, 2.75rem);
}

.payment-widget-fields-gap {
    margin-bottom: clamp(1rem, 3cqi, 3rem);
    max-width: clamp(18rem, 75cqi, 31.25rem);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.payment-widget-submit-gap {
    margin-bottom: clamp(1.5rem, 8cqi, 2.75rem);
}

#payment-widget-form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.payment-preset-btn {
    min-height: clamp(2.25rem, 6cqi, 4.75rem);
    min-width: clamp(4rem, 10cqi, 10rem);
    border-radius: clamp(0.625rem, 2cqi, 1.5rem);
    font-size: clamp(0.875rem, 3cqi, 1.5rem);
    --bs-btn-bg: #8BCAFE;
    --bs-btn-border-color: #8BCAFE;
    --bs-btn-color: var(--color-white);
    --bs-btn-hover-bg: #56B3FF;
    --bs-btn-hover-border-color: #56B3FF;
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-active-bg: var(--color-brand-blue);
    --bs-btn-active-border-color: var(--color-brand-blue);
    --bs-btn-active-color: var(--color-white);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    color: var(--bs-btn-color);
}

.payment-preset-btn:hover {
    background-color: #56B3FF !important;
    border-color: #56B3FF !important;
    color: var(--color-white) !important;
}

.btn-check:checked + .payment-preset-btn,
.btn-check:checked + .payment-preset-btn:hover {
    background-color: var(--color-brand-blue) !important;
    border-color: var(--color-brand-blue) !important;
    color: var(--color-white) !important;
}

.donation-input {
    min-height: clamp(2.25rem, 6cqi, 4.75rem);
    border: 0;
    border-radius: clamp(0.625rem, 2cqi, 1.5rem);
    background-color: var(--color-white);
    font-size: clamp(0.8125rem, 2cqi, 1rem);
    padding: clamp(0.5rem, 2cqi, 2.125rem);
}

.donation-submit {
    min-width: clamp(10rem, 20cqi, 18rem);
    font-size: clamp(1rem, 3cqi, 1.5rem);
    font-weight: 700;
}


/* ===== CONTACT WIDGET ===== */
.contact-widget {
    container-type: inline-size;
    padding: clamp(1.5rem, 10cqi, 3.5rem);
    max-width: clamp(18rem, 75cqi, 31.25rem);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.contact-widget .payment-widget-title {
    font-size: clamp(1.5rem, 3.3cqi, 2.25rem);
    margin-bottom: clamp(2.25rem, 12cqi, 4.125rem);
}

.contact-form {
    gap: clamp(0.625rem, 1.5cqi, 1rem);
}

.contact-form .donation-input {
    min-height: clamp(3rem, 6cqi, 4.75rem);
    padding: clamp(0.75rem, 2cqi, 2.125rem);
    font-size: clamp(0.875rem, 1.5cqi, 1rem);
}

.contact-form input[type="email"] {
    margin-bottom: clamp(1rem, 6cqi, 2rem);
}

.contact-form-message {
    min-height: clamp(6rem, 12cqi, 10rem);
    resize: none;
}

.contact-form .donation-submit {
    min-width: clamp(10rem, 22cqi, 18rem);
    font-size: clamp(1rem, 1.8cqi, 1.5rem);
    margin-top: clamp(1.5rem, 8cqi, 2.75rem);
}

.contact-info-label {
    color: var(--color-text-secondary);
    font-weight: 700;
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    margin-bottom: 0.25rem;
}

.contact-info-value {
    color: var(--color-statistics-value);
    font-weight: 400;
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: 0;
}

.contact-description {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
}

.contact-description-gap {
    margin-bottom: clamp(2rem, 6vw, 5rem);
}

/* ===== SECTION TITLE ===== */
.section-title {
    color: var(--color-brand-blue);
    font-weight: 700;
    font-size: clamp(1.5rem, 3.5vw, 2.75rem);
    margin: 0;
}

/* ===== HELP SECTION ===== */
.help-section {
    position: relative;
    isolation: isolate;
}

.help-section.no-bg::before {
    display: none;
}

.help-section::before {
    content: "";
    position: absolute;
    inset: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: linear-gradient(
            180deg,
            rgba(217, 243, 255, 0) 0%,
            rgba(217, 243, 255, 1) 65%,
            rgba(217, 243, 255, 0) 100%
    );
    z-index: -1;
    pointer-events: none;
}

/* ===== REPORTS ===== */
.report-year-link {
    display: block;
    width: 100%;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem);
    line-height: 1.35;
    text-decoration-color: currentColor;
}

.reports-other-text {
    max-width: 45ch;
}


@media (min-width: 48em) {
    .reports-list-row {
        --bs-gutter-x: 8.625rem;
    }
}

/* ===== FOOTER ===== */
.site-footer {
    background-color: var(--color-brand-blue-light);
}

.footer-heading {
    color: var(--color-text-secondary);
    font-weight: 700;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-links li,
.footer-links a {
    color: var(--color-text-secondary);
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    font-weight: 400;
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--color-brand-primary);
}

.footer-main-gap {
    margin-bottom: clamp(2rem, 4vw, 3.75rem);
}

@media (min-width: 768px) {
    .footer-nav-col {
        padding-left: clamp(3rem, 8vw, 8.375rem);
    }
}

.footer-copyright {
    color: var(--color-text-secondary);
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    padding-bottom: clamp(2.5rem, 8vw, 5rem);
}

.footer-nav-item {
    flex: 0 0 auto;
}

.footer-privacy-link {
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    color: var(--color-text-hint);
    text-decoration: none;
}

.footer-privacy-link:hover {
    color: var(--color-brand-blue);
    text-decoration: underline;
}

/* ===== PRIVACY PAGE ===== */
.privacy-approved-label {
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.privacy-heading {
    color: var(--color-brand-blue);
    font-weight: 700;
    font-size: clamp(1.125rem, 2vw, 1.5rem);
}

.privacy-text {
    color: var(--color-text-muted);
    font-size: clamp(0.9375rem, 1.3vw, 1rem);
    line-height: 1.7;
}

.privacy-list {
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0;
}

/* ===== CAMPAIGN CAROUSEL ===== */
.campaign-carousel {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    --campaign-carousel-controls-gap: 2.5rem;
    --campaign-carousel-height: 416px;
    height: var(--campaign-carousel-height);
}

.campaign-carousel .carousel-inner {
    height: 100%;
    padding: 0 calc(clamp(1rem, 4vw, 2rem) + var(--campaign-carousel-controls-gap));
}

.campaign-carousel .carousel-item {
    height: 100%;
}

.campaign-carousel .carousel-item > .row {
    height: 100%;
}

.campaign-carousel .carousel-item > .row > .col-12 {
    height: 100%;
}

.campaign-carousel .campaign-card {
    height: 100%;
}

.campaign-carousel .carousel-control-prev,
.campaign-carousel .carousel-control-next {
    width: clamp(2.5rem, 5vw, 4rem);
    opacity: 1;
}

.campaign-carousel .carousel-control-prev-icon,
.campaign-carousel .carousel-control-next-icon {
    background-image: none;
    background-color: var(--color-text-secondary);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
}

.campaign-carousel .carousel-control-prev-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.campaign-carousel .carousel-control-next-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M4.646 1.646a.5.5 0 0 0 0 .708L10.293 8l-5.647 5.646a.5.5 0 0 0 .708.708l6-6a.5.5 0 0 0 0-.708l-6-6a.5.5 0 0 0-.708 0z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M4.646 1.646a.5.5 0 0 0 0 .708L10.293 8l-5.647 5.646a.5.5 0 0 0 .708.708l6-6a.5.5 0 0 0 0-.708l-6-6a.5.5 0 0 0-.708 0z'/%3e%3c/svg%3e");
}

@media (max-width: 767px) {
    .campaign-carousel {
        --campaign-carousel-height: 600px;
        --campaign-carousel-controls-gap: 0rem;
        height: auto;
        padding-bottom: 3.5rem;
    }

    .campaign-carousel .carousel-inner {
        padding: 0;
        height: var(--campaign-carousel-height);
    }

    .campaign-carousel .carousel-control-prev,
    .campaign-carousel .carousel-control-next {
        top: auto;
        bottom: 0;
        height: 3rem;
        width: 50%;
        align-items: center;
    }

    .campaign-carousel .carousel-control-prev {
        left: 0;
    }

    .campaign-carousel .carousel-control-next {
        right: 0;
    }
}

/* ===== CAMPAIGN CARD ===== */
.campaign-card {
    border-radius: clamp(1.5rem, 6vw, 4.375rem);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.campaign-card:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 32px rgba(0, 129, 235, 0.12);
}

.campaign-card:hover .card-body {
    background-color: #EFF9FF;
    transition: background-color 0.2s ease;
}

.campaign-card-completed:hover .card-body {
    background-color: inherit;
}

.campaign-card-static,
.campaign-card-static:hover {
    transform: none;
    box-shadow: none;
    cursor: default;
    transition: none;
}

.campaign-card-static:hover .card-body {
    background-color: inherit;
}

.beneficiaries-list .col {
    display: flex;
}

.beneficiaries-list .campaign-card {
    background-color: var(--color-brand-blue-card);
    min-height: 416px;
    max-height: 416px;
    width: 100%;
}

@media (max-width: 767px) {
    .beneficiaries-list .campaign-card {
        min-height: unset;
        max-height: none;
    }
}

.beneficiaries-list .campaign-card-completed {
    background-color: var(--color-success-light);
}

.campaign-card-completed {
    background-color: var(--color-success-light);
}

.campaign-card-completed .btn-primary-brand,
.campaign-card-completed .btn-primary-brand:hover {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
}

.campaign-card .card-body {
    max-height: none;
    overflow: visible;
}

.campaign-card-img-col {
    position: relative;
    overflow: hidden;
}

@media (max-width: 767px) {
    .campaign-card-img-col {
        aspect-ratio: 4 / 3;
    }
}

.campaign-card .campaign-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.campaign-card .card-title {
    color: var(--color-brand-blue);
    font-size: clamp(1.125rem, 1rem + 1vw, 1.5rem);
}

.campaign-card .campaign-card-amount-label {
    color: var(--color-text-muted);
    font-size: clamp(0.8125rem, 1.1vw, 0.875rem);
}

.campaign-card .campaign-card-meta-text {
    color: var(--color-text-muted);
    font-size: clamp(0.875rem, 1.2vw, 1rem);
}

.campaign-card .campaign-card-diagnosis-label {
    color: var(--color-text-dark);
    font-weight: bold;
}

.campaign-card .campaign-card-amount-strong {
    color: var(--color-text-dark);
    font-weight: 700;
    font-size: clamp(1.125rem, 2vw, 1.5rem);
}

.campaign-card .campaign-card-collected-amount {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
}

.campaign-card .progress {
    --bs-progress-bar-bg: var(--color-brand-blue);
    height: clamp(0.75rem, 1.5vw, 1.2rem);
}

.campaign-card.campaign-card-completed .progress {
    --bs-progress-bar-bg: var(--color-success);
}

/* ===== PARTNER LOGO ===== */
.partner-logo-img { max-height: clamp(2rem, 4vw, 3rem); }

/* ===== HELP HERO IMAGE ===== */
.help-hero-image {
    display: block;
    width: 100%;
    object-fit: contain;
}

@media (min-width: 992px) {
    .help-hero-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
}

/* ===== ASSISTANCE TYPE CARD ===== */
.assistance-type-card-image {
    height: clamp(8rem, 20vw, 14rem);
    width: auto;
    object-fit: contain;
    object-position: bottom right;
    z-index: 0;
}

@media (min-width: 992px) {
    .assistance-type-card-image {
        height: clamp(14rem, 20vw, 28rem);
    }
}

@media (min-width: 1115px) {
    .assistance-text-col {
        width: 50%;
    }
}


@media (max-width: 767px) {
    .campaign-carousel {
        height: auto;
    }
}

@media (min-width: 48em) {
    .campaign-carousel {
        max-width: clamp(52rem, 55vw, 62rem);
    }

    .campaign-card .campaign-card-image {
        height: 100%;
    }
}


/* ===== PAGINATION ===== */
.page-link-brand {
    border-radius: 0.75rem !important;
    border: none;
    color: var(--color-text-secondary);
    font-weight: 500;
    min-width: 2.75rem;
    text-align: center;
    background-color: var(--color-brand-blue-light);
}

.page-link-brand:hover {
    background-color: var(--color-brand-blue);
    color: var(--color-white);
}

.page-item.active .page-link-brand {
    background-color: var(--color-brand-blue);
    color: var(--color-white);
}

.page-item.disabled .page-link-brand {
    background-color: var(--color-brand-blue-light);
    color: var(--color-text-hint);
    opacity: 0.5;
}

/* ===== BENEFICIARY DETAIL PAGE ===== */
.donation-list-item {
    background: linear-gradient(90deg, #5D9EFF 0%, #6DD6FF 100%);
    border-radius: clamp(0.625rem, 0.4rem + 0.7vw, 0.875rem);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.5rem, 0.3rem + 0.6vw, 1rem);
    padding: clamp(0.5rem, 0.35rem + 0.5vw, 0.875rem) clamp(0.875rem, 0.6rem + 0.9vw, 1.5rem);
    font-size: clamp(0.875rem, 0.6rem + 0.85vw, 1.25rem);
    flex: 1 1 0;
    min-height: 2.75rem;
}

.donation-list-item .donor-name {
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}

.donation-list-item .donor-amount {
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 auto;
}

.beneficiary-photo-wrapper {
    border-radius: clamp(1.5rem, 5vw, 3.125rem);
    height: clamp(18rem, 35vh, 34rem);
    overflow: hidden;
}

.beneficiary-photo-wrapper img {
    object-position: top;
}

.beneficiary-stat-label {
    color: var(--color-statistics-value);
    font-size: clamp(1rem, 0.875rem + 0.5vw, 1.125rem);
}

.beneficiary-remaining-value {
    font-size: clamp(1.5rem, 1rem + 2.5vw, 2.25rem);
}

.beneficiary-collected-value {
    color: var(--color-brand-blue);
    font-size: clamp(1rem, 0.875rem + 0.5vw, 1.125rem);
}

.beneficiary-thanks-content {
    max-width: 28rem;
}

/* override campaign-card-amount-strong color to brand blue only in amounts block */
.campaign-card.beneficiary-amounts .campaign-card-amount-strong {
    color: var(--color-brand-blue);
    font-weight: 700;
    font-size: clamp(1.75rem, 1rem + 3vw, 2.5rem);
}

.campaign-card.beneficiary-amounts .campaign-card-amount-label {
    color: var(--color-text-secondary);
    font-weight: 700;
    font-size: clamp(1rem, 0.875rem + 0.5vw, 1.125rem);
}

.campaign-card.beneficiary-amounts .campaign-card-collected-amount {
    color: var(--color-statistics-value);
    font-weight: 500;
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
}

.beneficiary-completed {
    background-color: var(--color-success-light);
}

.beneficiary-completed .progress {
    --bs-progress-bar-bg: var(--color-success);
}

/* ===== COOKIE CONSENT BANNER ===== */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background-color: var(--color-brand-blue-lightest);
    border-top: 1px solid var(--color-brand-blue-light);
    padding: clamp(0.75rem, 2vw, 1.25rem) 0;
    box-shadow: 0 -4px 24px rgba(0, 129, 235, 0.10);
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
    pointer-events: none;
}

.cookie-banner--visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.cookie-banner__title {
    font-weight: 700;
    font-size: clamp(0.875rem, 1vw, 1rem);
    color: var(--color-brand-blue);
}

.cookie-banner__text {
    font-size: clamp(0.8125rem, 0.875vw, 0.875rem);
    font-weight: 400;
    color: var(--color-text-secondary);
    margin: 0;
}

.cookie-banner__link {
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-decoration-color: var(--color-text-secondary);
}

.cookie-banner__link:hover {
    color: var(--color-brand-primary);
    text-decoration-color: var(--color-brand-primary);
}

.cookie-banner__btn {
    min-width: clamp(7rem, 10vw, 9rem);
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-text-secondary);
    font-weight: 600;
}

.cookie-banner__btn:hover {
    background-color: var(--color-brand-blue-light);
    border-color: var(--color-brand-blue-light);
    color: var(--color-text-secondary);
}