@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;900&display=swap');

.givewp-bfcm-2025-banner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: var(--givewp-rounded-8);
    background-image: var(--bg-small);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 186px;
    width: calc(100% - (2 * var(--givewp-spacing-2)));
    margin: var(--givewp-spacing-2) {
        bottom: var(--givewp-spacing-4);
    };

    &:has(+ #give-admin-campaigns-root, #give-admin-donations-root, #give-admin-donors-root, #give-admin-subscriptions-root),
    &:has(+ #give-admin-donations-root),
    &:has(+ #give-admin-donors-root),
    &:has(+ #give-admin-subscriptions-root) {
        display: none;
    }

    #give-admin-campaigns-root &,
    #give-admin-donations-root &,
    #give-admin-donors-root &,
    #give-admin-subscriptions-root & {
        margin-top: calc(var(--givewp-spacing-2) * -1);
        margin-bottom: 0;
    }

    @media (min-width: 768px) {
        background-image: var(--bg-medium);
        height: 220px;
    }

    @media (min-width: 1024px) {
        background-image: var(--bg-large);
        height: 210px;
    }

    &__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: var(--givewp-spacing-2);
        position: relative;
        z-index: 2;
        padding: 21px 0 21px 24px;

        @media (min-width: 768px) {
            padding: 24px 0 24px 56px;
        }

        @media (min-width: 1024px) {
            padding: 32px 0 30px 88px;
        }
    }

    &__title {
        font-family: Montserrat;
        font-weight: 700;
        font-size: 1.5rem;
        line-height: 1.25;
        color: var(--givewp-green-900);
        margin: 0;
        padding: 0;

        @media (min-width: 768px) {
            font-size: 1.75rem;
            line-height: 1.125;
        }

        @media (min-width: 1024px) {
            font-size: 2rem;
            line-height: 1.1;
        }
    }

    &__discount {
        font-size: 1.25rem;
        font-weight: 500;
        line-height: 1.3;
        color: var(--givewp-green-500);

        @media (min-width: 768px) {
            font-size: 1.75rem;
            line-height: 1.4;
        }

        @media (min-width: 1024px) {
            font-size: 2rem;
            line-height: 1.5;
            font-weight: 900;
        }
    }

    &__description {
        font-family: Inter;
        font-weight: 500;
        font-size: 0.875rem;
        line-height: 1.4;
        color: var(--givewp-green-900);
        margin: 0;
        padding: 0;

        @media (min-width: 768px) {
            font-size: 1.125rem;
            line-height: 1.5;
        }

        @media (min-width: 1024px) {
            font-size: 1.25rem;
        }
    }

    &__cta {
        font-family: Montserrat;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--givewp-spacing-2);
        padding: var(--givewp-spacing-3) var(--givewp-spacing-6);
        font-weight: 700;
        font-size: 0.875rem;
        line-height: 1;
        border-radius: 36px;
        margin-top: var(--givewp-spacing-4);
        background: var(--givewp-orange-400);
        color: #fff;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;

        @media (min-width: 768px) {
            font-size: 1rem;
        }

        img {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }

        &:hover {
            background: var(--givewp-orange-500);
            color: #fff;
        }
    }
}