.hally-harpersecret {

    .hally-harpersecret__media {
        height: 100dvh;

        @media screen and (min-width: 768px) {
            height: 100vh;
        }

        video.objfit {
            object-position: top center;
        }

        .harper-title {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 350px;
            height: auto;

            @media screen and (min-width: 768px) {
                top: 40px;
                width: 454px;
            }
        }

        .harper-btn {
            position: absolute;
            bottom: 30vh;
            width: 350px;
            height: 77px;
            left: 50%;
            transform: translateX(-50%);

            @media screen and (min-width: 768px) {
                bottom: 100px;
                width: 490px;
                height: 107px;
            }

            &:hover {
                .img-hover {
                    opacity: 1;
                }
            }

            img {
                position: absolute;
                top: 0;
                left: 0;
                transition: opacity .2s linear;

                &.img-hover {
                    opacity: 0;
                }
            }
        }

        .hally-harpersecret__form {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background-color: rgba(43, 11, 56, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            display: none;

            .hally-harpersecret__form-wrapper,
            .hally-harpersecret__form-success-message {
                width: 330px;
                padding: 24px;
                background-color: rgba(43, 11, 56, 0.8);
                border: 1px solid #fff;
                color: #fff;
            }

            .hally-harpersecret__form-wrapper {
                position: relative;

                @media screen and (min-width: 768px) {
                    padding: 30px;
                }

                .close-form {
                    position: absolute;
                    top: -17px;
                    right: -15px;
                    background: #ffff;
                    border-radius: 100%;
                    width: 30px;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }

            .hally-harpersecret__form-success-message {
                text-align: center;
                padding: 45px 35px 60px;
                display: none;
                
                .success-title {
                    color: inherit;
                    margin-top: 25px;
                    margin-bottom: 0;
                    font-size: 41.64px;
                }

                .success-description {
                    font-size: 13.36px;
                    line-height: 1.26;
                    font-weight: 400;
                    margin-bottom: 0;
                    margin-top: 25px;
                }
            }

            .hally-harpersecret__form-wrapper {

                .title {
                    font-size: 13.36px;
                    line-height: 1.26;
                    font-weight: 700;
                    color: inherit;
                    text-align: center;
                    font-family: 'Area Extended', sans-serif;
                    text-transform: uppercase;
                    letter-spacing: 0.2em;
                }
                
                .description {
                    font-size: 13.36px;
                    line-height: 1.26;
                    max-width: 230px;
                    margin-left: auto;
                    margin-right: auto;
                    text-align: center;
                    font-weight: 400;
                }

                .fields-wrap {
                    display: grid;
                    gap: 16px;
                }

                button[type="submit"] {
                    height: 44px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0;
                    width: 100%;
                    border-radius: 0;
                    text-transform: uppercase;
                    font-weight: 700;
                    font-family: 'Area Extended', sans-serif;
                    font-size: 13.36px;
                    letter-spacing: 0.2em;
                    margin-top: 16px;
                    background-color: #fff;
                    opacity: 1;
                    transition: all .2s linear;

                    @media screen and (min-width: 768px) {
                        margin-top: 24px;
                    }

                    svg {
                        display: none;
                    }

                    &.processing {
                        pointer-events: none;
                        opacity: .5;

                        span {
                            display: none;
                        }

                        svg {
                            display: block;
                        }
                    }
                }

                input[type="text"],
                input[type="email"] {
                    height: 44px;
                    border-radius: 0;
                    width: 100%;
                    padding: 6px 14px;
                    font-size: 13.36px;
                    font-family: inherit;
                    font-weight: 700;
                    text-transform: none;
                    letter-spacing: 0;
                }

                .checkboxGroupCreator {
                    display: none;
                }

                .checkbox-group {
                    display: grid;
                    grid-template-columns: 1fr 1fr 1fr;
                    margin-bottom: 16px;
                    gap: 16px;
                }

                .radio-group {
                    display: grid;
                    grid-template-columns: auto 1fr 1fr;
                    gap: 10px;
                }

                .checkbox-group,
                .radio-group {
                    input[type="checkbox"],
                    input[type="radio"] {
                        display: none;
                    }

                    input[type="checkbox"]:checked + label,
                    input[type="radio"]:checked + label {
                        background-color: #fff;
                        color: #2B0B38;
                    }

                    label {
                        height: 44px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: transparent;
                        color: #fff;
                        font-size: 13.36px;
                        line-height: 1.26;
                        font-style: normal;
                        font-weight: 600;
                        border: 1px solid #fff;
                        transition: all .1s linear;

                        &.no-border {
                            border: none;
                            font-weight: 400;
                        }
                    }
                }

                .inputs-group {
                    display: grid;

                    .input-handle {
                        display: none;
                        margin-bottom: 16px;
                    }
                }

                .email-notice {
                    font-size: 10.36px;
                    line-height: 1.26;
                    margin-top: 22px;
                    margin-bottom: 0;
                    text-align: center;
                    font-weight: 400;
                    width: 275px;
                    margin-left: -3.5px;

                    span {
                        opacity: 0.57;
                    }

                    a {
                        color: inherit;
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}