section:not(.donate-header) {
    padding-left: clamp(1rem, 6vw, 30rem) !important;
    padding-right: clamp(1rem, 35vw, 50rem) !important;
}


.donate-header {
    background-image: url('/assets/site/images/donate/person-people-adventure-travel-child.jpg');
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.7);
    background-blend-mode: darken;
    background-position: center;
    height: 70dvh;
    position: relative;

    h1 {
        color: var(--color-white);
        font-size: clamp(2rem, 5vw, 4rem);
    }

    .dontate-header-container-info {
        position: absolute;
        width: 100%;
        top: 0;
    }
}

.donate-intro {
    background-color: var(--color-blue);
    display: flex;
    align-items: center;
    padding-block: 3rem;
    gap: 2rem;

    .donate-intro-container-img {
        max-width: 300px;
        height: 200px;
        overflow: hidden;

        img {
            width: 100%;
        }
    }

    .dontate-intro-container-text {
        display: flex;
        flex-direction: column;
        gap: .5rem;

        h3 {
            color: var(--color-gray-light);
            font-size: .8rem;
            letter-spacing: 2px;
        }

        h2 {
            color: var(--color-white);
            font-size: 1.2rem;
        }
    }
}

.dontate-body {
    position: relative;
    padding-block: 3rem;

    .donate-body-container-info-donor {
        scroll-margin-top: 7rem;

        h3 {
            margin-bottom: 1.5rem;
            margin-top: 1.5rem;
        }

        h3:nth-of-type(2) {
            color: var(--color-blue);
            font-size: 1.5rem;
            font-weight: 900;
        }

        .donate-body-container-checkbox-create-acount {
            margin-block: 2rem;
            display: flex;
            align-items: center;
            gap: 1rem;

            input {
                width: 20px;
                height: 20px;
                accent-color: var(--color-blue);
                /* Cambia el color del checkbox */
            }

            input:checked {
                background-color: var(--color-blue);
                /* Cambia el color al hacer check */
                border-color: var(--color-blue-dark);
                /* Opcional: Cambia el borde */
            }
        }

        .form-login {
            display: flex;
            gap: 1rem;

            input,
            button {
                height: 60px;
            }

            input {
                border: 1px solid var(--color-gray-light);
                padding-inline: .5rem;
                max-width: 300px;
                width: 100%;
                font-size: 1rem;
                padding-block: .5rem;
                color: var(--color-gray);
            }

            input::placeholder {
                font-size: 1rem;
                color: var(--color-gray);
            }

            button {
                width: 100%;
                background-color: var(--color-blue-dark);
                color: var(--color-white);
                font-weight: bold;
                font-size: 1.2rem;
                min-width: 150px;
                transition: background-color 0.3s ease-in-out;
            }

            button:hover {
                background-color: var(--color-blue-light);
            }
        }

        .form-register {
            overflow: hidden;
            transition: height 0.3s ease-in-out;
            interpolate-size: allow-keywords;

            .donate-body-container-checkbox-create-acount {
                margin-block: 2rem;
                display: flex;
                align-items: center;
                gap: 1rem;

                input {
                    width: 20px;
                    height: 20px;
                    accent-color: var(--color-blue);
                }

                input:checked {
                    background-color: var(--color-blue);
                    border-color: var(--color-blue-dark);
                }
            }

            .donate-body-container-info-donor-form.active {
                display: grid;
            }

            .donate-body-container-info-donor-form {
                display: none;
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;

                input {
                    border: 1px solid var(--color-gray-light);
                    padding-inline: .5rem;
                    padding-block: .5rem;
                    min-width: 300px;
                    height: 60px;
                    font-size: 1rem;
                    color: var(--color-gray);
                }

                input::placeholder {
                    font-size: 1rem;
                    color: var(--color-gray);
                }

                textarea {
                    border: 1px solid var(--color-gray-light);
                    padding-inline: .5rem;
                    padding-block: .5rem;
                    min-width: 300px;
                    min-height: 60px;
                    resize: none;
                    field-sizing: content;
                    font-size: 1rem;
                    color: var(--color-gray);
                }

                select {
                    border: 1px solid var(--color-gray-light);
                    padding-inline: .5rem;
                    padding-block: .5rem;
                    min-width: 300px;
                    min-height: 60px;
                    font-size: 1rem;
                    color: var(--color-gray);
                }

            }

            .donate-body-container-info-donor-form-create-account.active {
                height: auto;
            }

            .donate-body-container-info-donor-form-create-account {
                height: 0;
                display: flex;
                gap: 1rem;
                transition: height 0.3s ease-in-out;
                interpolate-size: allow-keywords;

                input,
                button {
                    height: 60px;
                }

                input {
                    border: 1px solid var(--color-gray-light);
                    padding-inline: .5rem;
                    max-width: 300px;
                    width: 100%;
                    font-size: 1rem;
                    padding-block: .5rem;
                    color: var(--color-gray);
                }

                input::placeholder {
                    font-size: 1rem;
                    color: var(--color-gray);
                }

                button {
                    width: 100%;
                    background-color: var(--color-blue-dark);
                    color: var(--color-white);
                    font-weight: bold;
                    font-size: 1.2rem;
                    min-width: 150px;
                    transition: background-color 0.3s ease-in-out;
                }

                button:hover {
                    background-color: var(--color-blue-light);
                }
            }
        }
    }

    .info-donor {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin-block: 2rem;

        h3 {
            color: var(--color-blue-dark);
            font-size: 1.5rem;
            font-weight: 900;
            text-align: center;
        }

        p {
            color: var(--color-gray);
            text-align: center;
            max-width: 500px;
            font-size: 1.2rem;
        }

        a {
            color: var(--color-blue-dark);
            font-weight: 900;
            text-decoration: underline;
            font-size: 1.2rem;
        }
    }

    .donate-body-container-info-donation {
        position: absolute;
        background-color: var(--color-white);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        width: 400px;
        top: -250px;
        right: 5rem !important;
        padding: 3rem;
        display: flex;
        flex-direction: column;

        h3 {
            text-align: center;
            font-weight: 900;

        }

        .container-buttons-donation {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin-block: 1rem;

            button {
                background-color: var(--color-white);
                color: var(--color-blue-dark);
                font-weight: 900;
                width: 50px;
                height: 40px;
                border-radius: 2px;
                border: 2px solid var(--color-blue-dark);
            }

            button.active {
                background-color: var(--color-blue-dark);
                color: var(--color-white);
            }

            button.disabled {
                background-color: var(--color-gray-light);
                color: var(--color-white);
                font-weight: 900;
                width: 50px;
                height: 40px;
                border-radius: 2px;
                border: 2px solid var(--color-gray-light);
                cursor: no-drop;
            }


        }

        input {
            border-bottom: 1px solid var(--color-gray-light);
            padding-inline: .5rem;
            min-width: 300px;
            height: 40px;
            font-size: 1rem;
            color: var(--color-gray);
            margin-bottom: 1rem;
        }

        .container-buttons-donation-type {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-block: 1rem;

            button {
                background-color: var(--color-white);
                color: var(--color-blue-dark);
                font-weight: 900;
                width: 100%;
                height: 40px;
                border-radius: 2px;
                border: 2px solid var(--color-blue-dark);
            }

            button.active {
                background-color: var(--color-blue-dark);
                color: var(--color-white);
            }
        }

        h3:last-of-type {
            color: var(--color-gray-light);
            margin-top: 1.5rem;
        }

        .container-method-payment {
            overflow: hidden;

            .container-logo-paypal {
                height: auto;
                transition: height 0.3s ease-in-out;
                interpolate-size: allow-keywords;
                margin: auto;
                max-width: 200px;
                margin-block: 1rem;
                overflow: hidden;

                img {
                    width: 100%;
                }
            }

            .container-other-method {
                height: 0;
                transition: height 0.3s ease-in-out;
                interpolate-size: allow-keywords;
                display: flex;
                flex-direction: column;
                gap: .2rem;

                p:last-of-type {
                    margin-top: 1rem;
                    color: var(--color-gray-light);
                }
            }
        }

        .donate-now {
            margin: auto;
            background-color: var(--color-blue-dark);
            color: var(--color-white);
            margin-top: 1rem;
            width: 100%;
            padding: 1rem;
            font-weight: 900;
            font-size: 1.2rem;
        }

        #paypal-button-container {
            display: none;
        }

    }
}

@media (max-width: 1285px) {
    section:not(.donate-header) {
        padding-left: clamp(1rem, 4vw, 30rem) !important;
        padding-right: clamp(1rem, 40vw, 50rem) !important;
    }

    .dontate-body {
        .donate-body-container-info-donation {
            right: 3rem !important;
        }
    }
}

@media (max-width: 1220px) {
    section:not(.donate-header) {
        padding-right: clamp(1rem, 45vw, 70rem) !important;
    }

    .dontate-body {
        & .donate-body-container-info-donor {
            .form-login {
                flex-direction: column;

                input,
                button {
                    max-width: 400px;
                    width: 100%;
                }
            }

            .form-register {
                .donate-body-container-info-donor-form.active {
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;

                    input,
                    textarea,
                    select {
                        max-width: 400px;
                    }
                }

                .donate-body-container-info-donor-form-create-account {
                    flex-direction: column;

                    input,
                    button {
                        max-width: 400px;
                        width: 100%;
                    }
                }
            }
        }
    }
}

@media (max-width: 980px) {
    section:not(.donate-header) {
        padding-inline: 5rem !important;
    }

    .dontate-body {
        display: flex;
        flex-direction: column;
        align-items: center;

        .donate-body-container-info-donation {
            position: initial;
            top: auto;
            right: auto;
            left: auto;
            bottom: auto;
            width: 100%;
            padding: 0;
            box-shadow: none;
            display: flex;
            flex-direction: column;
            margin-top: 1rem;
            order: 1;

            h3:last-of-type {
                margin-block: 2.5rem;
            }
        }

        .donate-body-container-info-donor {
            order: 2;
            display: flex;
            flex-direction: column;
            align-items: center;

            .donate-body-container-checkbox-create-acount {
                margin-right: auto;
            }

            h3 {
                margin-block: 2.5rem;
            }

            & .form-register {
                display: flex;
                flex-direction: column;
                align-items: center;

                .donate-body-container-info-donor-form.active {
                    max-width: 100%;
                    width: 100%;

                    input,
                    textarea,
                    select {
                        max-width: 100%;
                        width: 100%;
                    }
                }

                .donate-body-container-info-donor-form-create-account {
                    max-width: 100%;
                    width: 100%;

                    input,
                    button {
                        max-width: 100%;
                        width: 100%;
                    }
                }
            }

            & .form-login {

                max-width: 100%;
                width: 100%;

                input,
                button {
                    max-width: 100%;
                }
            }
        }
    }


}

@media (max-width: 650px) {
    .donate-intro {
        flex-direction: column;
    }

    section:not(.donate-header) {
        padding-inline: 2rem !important;
    }

    .dontate-body {
        .info-donor {

            h3 {
                font-size: 1.2rem;
            }

            p {
                font-size: 1rem;
            }

            a {
                font-size: 1rem;
            }
        }
    }

    .nav-header {
        h2 {
            font-size: 1.5rem;
        }

        .login {
            & .login-items {
                .login-text {
                    padding-top: 2.6rem;

                    .login-actions {

                        a,
                        span {
                            font-size: .8rem;
                        }
                    }
                }
            }
        }
    }

}

@media (max-width: 490px) {

    .nav-header {
        h2 {
            font-size: 1.2rem;
        }

        .login {
            & .login-items {
                .login-text {
                    width: 120px;
                    padding-top: 2.3rem;

                    .login-actions {

                        a,
                        span {
                            font-size: .7rem;
                        }
                    }
                }
            }
        }
    }

}

@media (max-width: 400px) {
    .nav-header {

        .login {
            & .login-items {
                .login-text {
                    padding-top: 3.6rem;
                }
            }
        }
    }
}