.component-banner-personalized-nutrition {
    --banner-text-color: #262624;
    --banner-body-padding: 36px 0 36px 64px;
    --banner-body-background: transparent;

    --banner-font-size-coming-soon: 24px;
    --banner-font-size-title: 72px;
    --banner-font-size-special-discount: 22px;
    --banner-font-size-join-waitlist: 22px;

    --banner-width-join-waitlist: auto;
    --banner-padding-join-waitlist: 16px 48px;
    --banner-background-image-pets: url("../../../images/webp/results/banner-personalized-nutrition/pets-1280-mkTw9Pg.webp");

    @media (width <= 1180px) {
        /*--banner-text-color: #fff;*/
        /*--banner-body-background: rgb(from var(--color-btm-dark-blue) r g b / 0.5);*/
    }

    @media (width <= 920px) {
        --banner-body-padding: 24px 0 24px 36px;
    }

    @media (width <= 860px) {
        --banner-font-size-coming-soon: 20px;
        --banner-body-padding: 24px 0 24px 24px;
    }

    @media (width <= 680px) {
        --banner-background-image-pets: none;
    }

    @media (width <= 640px) {
        --banner-font-size-coming-soon: 18px;
        --banner-font-size-title: 48px;
        --banner-font-size-special-discount: 22px;
        --banner-font-size-join-waitlist: 18px;
    }

    @media (width <= 400px) {
        --banner-font-size-coming-soon: 16px;
        --banner-font-size-title: 36px;
        --banner-font-size-special-discount: 18px;
        --banner-font-size-join-waitlist: 16px;

        --banner-width-join-waitlist: 100%;
        --banner-padding-join-waitlist: 12px 0;
        --banner-body-padding: 16px;
    }

    display: flex;
    align-items: stretch;
    justify-content: start;
    width: 100%;
    border-radius: 16px;
    text-decoration: none;
    background-color: var(--color-btm-dark-blue);
    background-repeat: no-repeat;
    background-size:
        100%,
        cover
    ;
    background-position:
        bottom right,
        right center
    ;
    background-image:
        var(--banner-background-image-pets),
        url("../../../images/webp/results/banner-personalized-nutrition/background-1280-ReUY5Qp.webp")
    ;

    * {
        pointer-events: none;
    }

    .banner-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        gap: 24px;
        padding: var(--banner-body-padding);
        border-radius: 16px;
        background-color: var(--banner-body-background);

        .banner-content {
            display: flex;
            flex-direction: column;
            align-items: start;
            justify-content: center;
            gap: 12px;
        }
    }

    .coming-soon {
        position: relative;
        padding-bottom: 12px;
        font-size: var(--banner-font-size-coming-soon);
        line-height: 1;
        font-weight: 500;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--banner-text-color);
        font-family: 'Montserrat', sans-serif;

        &:after {
            content: '';
            position: absolute;
            display: block;
            left: 0;
            bottom: 0;
            width: 25%;
            height: 2px;
            background-color: var(--banner-text-color);
        }
    }

    .banner-title {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        font-size: var(--banner-font-size-title);
        line-height: 1;
        font-weight: 400;
        color: var(--banner-text-color);
        font-family: 'DM Serif Display', sans-serif;
    }

    .special-discount {
        font-size: var(--banner-font-size-special-discount);
        line-height: 1;
        letter-spacing: 1px;
        color: var(--banner-text-color);
        font-family: 'Poppins', sans-serif;
    }

    .join-waitlist {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: var(--banner-width-join-waitlist);
        padding: var(--banner-padding-join-waitlist);
        border-radius: 48px;
        font-size: var(--banner-font-size-join-waitlist);
        line-height: 1;
        font-weight: 500;
        letter-spacing: 3px;
        text-transform: uppercase;
        font-family: 'Montserrat', sans-serif;
        color: #fff;
        background-color: #262624;
        box-shadow: 0 0 0 1px rgb(from var(--banner-text-color) r g b / 0.4);
    }
}

.component-waitlist-personalized-nutrition {
    --body-gap: 36px;
    --body-padding: 36px 24px;
    --button-font-size: 18px;
    --input-font-size: 24px;
    --input-height: 56px;

    --waitlist-display: none;
    --waitlist-opacity: 0;
    --waitlist-shadow-color: transparent;
    --waitlist-background-color: transparent;

    --waitlist-form-display: flex;
    --waitlist-done-display: none;

    @media (width <= 440px) {
        --body-gap: 24px;
        --body-padding: 24px 16px;
        --button-font-size: 16px;
        --input-font-size: 20px;
        --input-height: 48px;
    }

    &[data-state="opening"] {
        --waitlist-display: flex;
    }

    &[data-state="opened"] {
        --waitlist-display: flex;
        --waitlist-opacity: 1;
        --waitlist-shadow-color: var(--color-btm-dark-blue);
        --waitlist-background-color: rgb(from var(--color-btm-dark-blue) r g b / 0.5);
    }

    &[data-state="closing"] {
        --waitlist-display: flex;
        --waitlist-opacity: 0;
        --waitlist-background-color: transparent;
    }

    &[data-state="closed"] {
        --waitlist-display: none;
    }

    &[data-mode="done"] {
        --waitlist-form-display: none;
        --waitlist-done-display: flex;
    }

    position: fixed;
    z-index: 90000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: var(--waitlist-display);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
    overscroll-behavior: contain;
    transition: all .2s linear;
    background-color: var(--waitlist-background-color);

    .waitlist-body {
        position: relative;
        max-width: 560px;
        padding: var(--body-padding);
        opacity: var(--waitlist-opacity);
        border-radius: 16px;
        transition:
            opacity .2s linear,
            box-shadow .5s linear
        ;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #fff;
        background-image: url("../../../images/webp/results/banner-personalized-nutrition/background-1280-ReUY5Qp.webp");
        box-shadow:
            0 0 0 2px rgb(from var(--waitlist-shadow-color) r g b / 0.25),
            0 0 12px 0 var(--waitlist-shadow-color),
            0 0 24px 0 var(--waitlist-shadow-color)
        ;

        .button-close {
            --button-color: #fff;
            --button-rotate: 0deg;

            position: absolute;
            z-index: 5;
            top: 12px;
            right: 12px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            margin: 0;
            padding: 0;
            border: 0;
            background-color: var(--color-btm-dark-blue);

            &:hover {
                --button-color: var(--color-btm-orange);
                --button-rotate: 90deg;
            }

            &:before {
                content: '';
                display: block;
                width: 16px;
                height: 16px;
                transform: rotate(var(--button-rotate));
                transition: all .1s linear;
                background-color: var(--button-color);
                mask: url('/assets/svg/close-6ltwXpU.svg') no-repeat center center / cover;
            }
        }

        .wishlist-container {
            --container-display: none;

            display: var(--container-display);
            flex-direction: column;
            align-items: stretch;
            justify-content: center;
            gap: var(--body-gap);

            &.wishlist-form {
                --container-display: var(--waitlist-form-display);
            }

            &.wishlist-done {
                --container-display: var(--waitlist-done-display);
            }
        }

        .coming-soon {
            position: relative;
            padding-bottom: 12px;
            font-size: 18px;
            line-height: 1;
            font-weight: 500;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--color-btm-dark-blue);
            font-family: 'Montserrat', sans-serif;

            &:after {
                content: '';
                position: absolute;
                display: block;
                left: 0;
                bottom: 0;
                width: 25%;
                height: 2px;
                background-color: var(--color-btm-dark-blue);
            }
        }

        .wishlist-details {
            display: flex;
            flex-direction: column;
            align-items: start;
            justify-content: start;
            gap: 12px;

            p {
                font-size: var(--typography-font-size-p);
                color: var(--color-btm-dark-blue);
            }
        }

        .banner-title {
            display: flex;
            flex-direction: column;
            align-items: start;
            justify-content: start;
            font-size: calc(var(--typography-font-size-p) * 2);
            line-height: 1;
            font-weight: 400;
            color: var(--color-btm-dark-blue);
            font-family: 'DM Serif Display', sans-serif;
        }

        .waitlist-form {
            --form-error-display: none;

            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: center;
            gap: 12px;
            width: 100%;

            &.form-error {
                --form-error-display: flex;

                label {
                    box-shadow: 0 0 0 3px var(--color-general-red);
                }
            }

            .form-error {
                display: var(--form-error-display);
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: 18px;
                line-height: 1;
                font-family: 'Roboto', sans-serif;
            }

            label {
                display: block;
                margin: 0;
                padding: 0;
                border-radius: 48px;

                input {
                    --input-shadow: 0 0 0 1px rgb(from var(--color-btm-dark-blue) r g b / 0.5);

                    margin: 0;
                    padding: 0;
                    border: 0;
                    outline: 0;
                    width: 100%;
                    border-radius: 48px;
                    text-align: center;
                    font-size: var(--input-font-size);
                    line-height: var(--input-height);
                    font-weight: 400;
                    transition: all .3s linear;
                    font-family: 'Roboto', sans-serif;
                    box-shadow: var(--input-shadow);

                    &:focus {
                        --input-shadow:
                            0 0 0 2px #0060df,
                            0 0 0 4px #fff
                        ;
                    }
                }
            }

            button {
                --button-color: #fff;

                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                margin: 0;
                padding: 0;
                border: 0;
                height: 48px;
                border-radius: 48px;
                font-size: var(--button-font-size);
                line-height: 1;
                font-weight: 500;
                letter-spacing: 3px;
                text-transform: uppercase;
                font-family: 'Montserrat', sans-serif;
                color: var(--button-color);
                transition: all .2s linear;
                background-color: var(--color-btm-dark-blue);

                &:hover {
                    --button-color: var(--color-btm-orange);
                }

                &:after {
                    content: '';
                    display: block;
                    width: 16px;
                    height: 16px;
                    transition: all .2s linear;
                    background-color: var(--button-color);
                    mask: url('/assets/svg/arrows/right-simple-Sgb4HTd.svg') no-repeat center center / contain;
                }
            }
        }

        .waitlist-close {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: center;
            gap: 12px;
            width: 50%;

            button {
                --button-color: #fff;

                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                margin: 0;
                padding: 0;
                border: 0;
                height: 48px;
                border-radius: 48px;
                font-size: var(--button-font-size);
                line-height: 1;
                font-weight: 500;
                letter-spacing: 3px;
                text-transform: uppercase;
                font-family: 'Montserrat', sans-serif;
                color: var(--button-color);
                transition: all .2s linear;
                background-color: var(--color-btm-dark-blue);

                &:hover {
                    --button-color: var(--color-btm-orange);
                }

                &:after {
                    content: '';
                    display: block;
                    width: 16px;
                    height: 16px;
                    transition: all .2s linear;
                    background-color: var(--button-color);
                    mask: url('/assets/svg/close-6ltwXpU.svg') no-repeat center center / contain;
                }
            }
        }
    }
}