@use '../../utils' as *;

/*----------------------------------------*/
/*  4.24 newsletter css
/*----------------------------------------*/

.bd-newsletter {
    &-wrapper {
        &.style-one {
            position: relative;
            border-radius: 16px;
            overflow: hidden;

            .bd-newsletter {
                &-bg {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center;
                    opacity: 0.19;
                }

                &-content {
                    position: relative;
                    z-index: 1;
                }

                &-input {
                    max-width: 78%;
                }
            }
        }

        &.style-two {
            .bd-newsletter {
                &-item {
                    padding: 65px 50px 60px;
                    padding-right: 120px;
                    @media #{$sm,$xs} {
                        padding: 30px 30px;
                    }
                    .description {
                        color: rgba($color: $white, $alpha: .7);
                        font-size: 16px;
                        line-height: 24px;
                        margin-top: 14px;

                        span {
                            color: var(--bd-white);
                        }
                    }

                    .shape-1 {
                        position: absolute;
                        bottom: 0;
                        left: 0px;
                    }
                    .shape-2 {
                        position: absolute;
                        top: 0;
                        left: 587px;
                    }
                    .shape-3 {
                        position: absolute;
                        top: 20px;
                        right: 333px;
                    }
                    .shape-4 {
                        position: absolute;
                        top: 0;
                        right: 30px;
                    }
                    .shape-5 {
                        position: absolute;
                        bottom: 40px;
                        left: 535px;
                    }
                    .shape-6 {
                        position: absolute;
                        bottom: 0;
                        right: 265px;
                    }
                }

                &-bg {
                    background-image: url(../images/newsletter/newsletter-two.webp);
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center;
                    border-radius: 6px;
                }
            }
        }

        &.style-three {
            padding: 0 100px;
            border-radius: 10px;
            position: relative;
            z-index: 5;
            margin-top: 152px;

            @media #{$lg} {
                padding: 0 30px;
            }
            @media #{$md} {
                padding: 60px 50px;
                margin-top: 0;
            }
            @media #{$sm} {
                padding: 30px 20px;
                margin-top: 0;
            }
            @media #{$xs} {
                padding: 30px 30px;
                margin-top: 0;
            }
            .bd-newsletter {
                &-bg {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 100%;
                    z-index: -1;
                    border-radius: 6px;
                    mix-blend-mode: color-burn;
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center top;
                }

                &-badge {
                    display: flex;
                    align-items: center;
                    gap: 15px;
                    border-radius: 6px;
                    padding: 15px 20px;
                    position: absolute;
                    left: 50%;
                    bottom: 50px;
                    z-index: 5;
                    transform: translateX(-50%);
                    width: 310px;
                    background: rgba(255, 255, 255, 0.2);
                    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
                    backdrop-filter: blur(5px);
                    -webkit-backdrop-filter: blur(5px);
                    &-icon {
                        width: 50px;
                        height: 50px;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        background: var(--bd-white);
                        -webkit-border-radius: 50%;
                        -moz-border-radius: 50%;
                        -o-border-radius: 50%;
                        -ms-border-radius: 50%;
                        border-radius: 50%;
                    }

                    &-text {
                        font-size: 18px;
                        color: var(--bd-theme-black);
                    }
                }
            }

            .thumb {
                position: relative;
                margin-top: -190px;
            }
        }
    }

    &-input {
        position: relative;
        margin: 0 auto;
        z-index: 9;

        input {
            width: 100%;
            height: 60px;
            border-radius: 6px;
            outline: none;
            border: 0;
            padding-inline-start: 25px;
            padding-inline-end: 215px;
            font-size: 16px;
            line-height: 32px;
            font-weight: 500;
            background-color: var(--bd-white);
            @media #{$xs} {
                padding-inline-end: 25px;
            }
        }

        button {
            position: absolute;
            inset-inline-end: 5px;
            top: 50%;
            transform: translateY(-50%);
            padding: 0 40px 0 35px;
            font-weight: 500;
            font-size: 16px;
            text-transform: capitalize;
            @media #{$xs} {
                position: initial;
                transform: translateY(0);
                width: 100%;
                margin-top: 15px;
                background-color: var(--bd-secondary);
            }
        }
    }
}