/* Initially hidden Popup Dialog/Modal Form */
/* If the user clicks the "Subscribe" button, it shows the Mailchimp newsletter signup form */
html {
    &:has(dialog[open]) {
        overflow: hidden;
    }
}
/* closed by default */
dialog#dialog-subscribe-form {
    display: none;                
    background: transparent;
    z-index: 1000;
    overflow: hidden;
}

dialog#dialog-subscribe-form[open] {
    position: fixed;
    inset: 0;
    margin: auto;
    display: grid;
    place-items: center;
    border-radius: 8px;
    height: fit-content;
    padding: 0;
    &::backdrop {
        background: rgba(17, 17, 17, 0.40);
    }
    @media  (min-width: 1024px) {
        min-width: 972px;
    }
    .dialog-container {
        position: relative;
        width: 100%;
        max-width: 972px;
        height: fit-content;
        margin: 0 auto;
        overflow: hidden;
        .dialog-close {
            cursor: pointer;
            position: absolute;
            right: 0rem;
        }
        .wrapper {
            overflow-y: auto;
            max-height: 540px;
        }

        svg {
            path {
                fill: var(--text-dark);
            }
            @media (min-width: 1024px) {
                path {
                    fill: var(--text-light);
                }
            }
        }

        #mc_embed_shell {
            background-color: #FFFFFF;

            form {
                margin: 0;
                /* height: 100%; */

                /* #mc_embed_signup_scroll {
                    height: 100%;
                    
                } */

                h2 {
                    margin-top: 0;
                    margin-bottom: 16px;
                    @media (min-width: 1024px) {
                        margin-bottom: 40px;
                    }
                }               
                .indicates-required {
                    display: none;
                }

                input[type="email"] {
                    background-image: url('../images/icons/mail-icon.svg');
                    background-repeat: no-repeat !important;
                    background-position: 12px 50% !important;
                    background-size: 24px 24px !important;
                    padding-left: 42px !important;
                    border-radius: 4px;
                    border: 1px solid #757575;

                }

                #mce-responses {
                    margin: 0;
                    padding: 0;
                    margin-top: -16px;

                    .response {
                        margin-top: 0;
                        padding-top: 0;
                    }
                }




                #mc-embedded-subscribe {
                    background-color: var(--link-light);
                    color: var(--white-color);
                    padding: 12px 32px;
                    border-radius: 4px;
                    height: fit-content;
                    margin:0;
                    line-height: 1.3;
                    margin-top: 20px;
                }
            }
            
        }
    }
}