/* -- Idea Generator -- */

#idea {
    max-width: calc(1210px + 128px);
    width: 100%;
    margin: 0 auto;
    padding: 82px 64px 80px;
}

    .idea-group {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column nowrap;
                flex-flow: column nowrap;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 46px;
    }

        .idea__title {
            width: 653px;
            
            font-family: 'Tenor Sans';
            font-size: 56px;
            font-weight: 400;
            line-height: 100%;
            letter-spacing: -0.06em;
            text-align: center; 
            color: #1E1E1E;
        }

        .idea__text {
            font-family: 'YS Text';
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            letter-spacing: -0.01em;
            text-align: center; 
            color: #1E1E1E;
        }

        .idea-generator {
            display: -ms-grid;
            display: grid;
            -ms-grid-columns: 458px 72px 1fr;
            grid-template-columns: 458px 1fr;
            gap: 72px;

            width: 100%;
        }

            .idea-filter {
                display: -ms-grid;
                display: grid;
                -ms-grid-columns: 1.2fr 24px 1fr;
                grid-template-columns: 1.2fr 1fr;
                gap: 24px;
            }

                .idea__button {
                    -ms-grid-column: 1;
                    -ms-grid-column-span: 2;
                    grid-column: 1 / 3;
                    cursor: pointer;
                    white-space: nowrap;

                    display: -webkit-box;

                    display: -ms-flexbox;

                    display: flex;
                    -webkit-box-align: center;
                        -ms-flex-align: center;
                            align-items: center;
                    -webkit-box-pack: center;
                        -ms-flex-pack: center;
                            justify-content: center;

                    width: 100%;
                    height: 65px;
                    border: 0;
                    border-radius: 8px;
                    background: #1E1E1E;

                    font-family: 'YS Text';
                    font-size: 22px;
                    font-weight: 400;
                    line-height: 24px;
                    letter-spacing: -0.01em;
                    text-align: center; 
                    color: #FFF;

                    -webkit-transition: background 0.1s linear;

                    -o-transition: background 0.1s linear;

                    transition: background 0.1s linear;
                }

                .idea__button.disabled {
                    cursor: not-allowed;
                    background: #D1D1D1;
                }

@media (max-width: 1337px) and (min-width: 769px) {

    #idea {
        max-width: calc(647px + 64px);
        padding: 50px 32px 70px;
    }

        .idea-group {
            gap: 27px;
        }

            .idea__title {
                width: 500px;
                font-size: 42px;
            }

            .idea__text {
                line-height: 15px;
            }

            .idea-generator {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-flow: column nowrap;
                        flex-flow: column nowrap;
                gap: 26px;
            }

                .idea-filter {
                    -ms-grid-columns: 1.295fr 24px 1fr 24px 1fr;
                    grid-template-columns: 1.295fr 1fr 1fr;
                    gap: 20px 24px;
                }

                    .idea__button {
                        -ms-grid-column: 2;
                        -ms-grid-column-span: 2;
                        grid-column: 2 / 4;
                        -ms-grid-row: 3;
                        -ms-grid-row-span: 1;
                        grid-row: 3 / 4;

                        height: 56px;

                        font-size: 20px;
                        line-height: 22px;
                    }

}

@media (max-width: 768px) {

    #idea {
        max-width: 100%;
        padding: 3.8rem 1.6rem 0;
    }

        .idea-group {
            gap: 2.4rem;
        }

            .idea__title {
                width: 80%;
                font-size: 2.8rem;
                line-height: 90%;
            }

            .idea__text {
                font-size: 1.4rem;
                line-height: 1.6rem;
            }

            .idea-generator {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-flow: column nowrap;
                        flex-flow: column nowrap;
                gap: 3.8rem;
            }

                .idea-filter {
                    display: -ms-grid;
                    display: grid;
                    -ms-grid-columns: 1fr 2rem 1fr;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 2.4rem 2rem;
                }

                    .idea__button {
                        -ms-grid-column: 1;
                        -ms-grid-column-span: 2;
                        grid-column: 1 / 3;
                        -ms-grid-row: 4;
                        -ms-grid-row-span: 1;
                        grid-row: 4 / 5;

                        height: 5.4rem;
                        border-radius: 0.8rem;

                        font-size: 1.8rem;
                        line-height: 2rem;
                    }
    
}



/* -- Recipient -- */

.idea-recipient {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / 2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1 / 3;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 14px;
    
    padding: 14px;
    border-radius: 8px;
    border: 1px solid #1E1E1E;
}

    .recipient-inputs {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 8px 1fr;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;

        width: 100%;
    }
    
        .recipient-inputs label {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;

            height: 46px;
            border-radius: 8px;
            border: 1px solid #1E1E1E;

            cursor: pointer;
            text-align: center;
            -webkit-user-select: none;
               -moz-user-select: none;
                -ms-user-select: none;
                    user-select: none;
        }

        .recipient-inputs label:has(input:checked) {
            border-style: dashed;
        }

    .recipient__text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;

        width: 100%;
        height: 120px;
        padding: 20px;
        border-radius: 8px;
        background: -o-linear-gradient(108.21deg, #011008 36.18%, #555555 94.48%);
        background: linear-gradient(341.79deg, #011008 36.18%, #555555 94.48%);
    }

        .typing__text {
            width: 92%;
            color: #FFF;
        }

        .cursor {
            display: contents;
            -webkit-animation: cursor-stand 0.8s step-start infinite;
                    animation: cursor-stand 0.8s step-start infinite
        }

@-webkit-keyframes cursor-stand {
    50% { opacity: 0; }
}

@keyframes cursor-stand {
    50% { opacity: 0; }
}

@media (max-width: 1337px) and (min-width: 769px) {

    .idea-recipient {
        -ms-grid-row: 1;
        -ms-grid-row-span: 3;
        grid-row: 1 / 4;
    }

}

@media (max-width: 768px) {

    .idea-recipient {
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1 / 3;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        grid-row: 1 / 2;

        gap: 1.4rem;
        
        padding: 1.4rem;
        border-radius: 0.8rem;
        border-width: 0.1rem;
    }

        .recipient-inputs {
            gap: 0.8rem;
        }
        
            .recipient-inputs label {
                height: 4.6rem;
                border-radius: 0.8rem;
                border-width: 0.1rem;
            }

        .recipient__text {
            display: none;
        }

}



/* -- Complexity -- */

.idea-complexity {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;

    display: -ms-grid;

    display: grid;
    -ms-grid-columns: 1fr 78px;
    grid-template-columns: 1fr 78px;
    
    border-radius: 8px;
    border: 1px solid #1E1E1E;
}

    .complexity-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column nowrap;
                flex-flow: column nowrap;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        gap: 20px;
    
        padding: 14px 0 9px 14px;
    }

        .complexity-content .idea__text {
            text-align: left;
        }

        .complexity__type {
            font-family: 'Tenor Sans';
            font-size: 48px;
            font-weight: 400;
            line-height: 100%;
            letter-spacing: -0.03em;
            color: #1E1E1E;
        }

@media (max-width: 1337px) and (min-width: 769px) {

    .idea-complexity {
        -ms-grid-columns: 1fr 70px;
        grid-template-columns: 1fr 70px;
    }

        .complexity-content {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-flow: column nowrap;
                    flex-flow: column nowrap;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            gap: 0;
        
            padding: 12px 0 8px 12px;
        }

            .complexity-content .idea__text {
                text-align: left;
            }

            .complexity__type {
                font-size: 42px;
            }

}

@media (max-width: 768px) {

    .idea-complexity {
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-column: 1 / 2;
        -ms-grid-row: 3;
        -ms-grid-row-span: 1;
        grid-row: 3 / 4;

        display: block;
        position: relative;
        
        border-radius: 0.8rem;
        border-width: 0.1rem;
    }

        .complexity-content {
            position: relative;
            z-index: 10;
            
            gap: 5.8rem;
            padding: 0.8rem 1.9rem 0.9rem 1rem;
        }
            .complexity__type {
                z-index: 20;
                -webkit-box-ordinal-group: 0;
                    -ms-flex-order: -1;
                        order: -1;

                font-size: 2.8rem;
                line-height: 90%;
                letter-spacing: -0.06em;
            }

}



/* -- Color -- */

.idea-color {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / 3;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2 / 3;

    position: relative;
    height: 114px;
    border-radius: 8px;
    background: url('../img/color-img.png') center / cover no-repeat;
}

    .idea-color .idea__text {
        position: absolute;
        width: 80%;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);

        -webkit-user-select: none;

           -moz-user-select: none;

            -ms-user-select: none;

                user-select: none;
    }

    .color-inputs {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);

        position: relative;
        z-index: 10;

        height: 100%;
    }

        .color-inputs label {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 14px;
            cursor: pointer;
        }

            .color-dot {
                position: relative;
                width: 12px;
                height: 12px;
                border-radius: 100%;
                border: 1px solid #1E1E1E;

                -webkit-box-sizing: content-box;

                        box-sizing: content-box;
            }

            .color-inputs label:has(input:checked) .color-dot {
                border-style: dashed;
            }

            .color-inputs label:has(input:checked) .color-dot:after {
                content: '';

                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                    -ms-transform: translate(-50%, -50%);
                        transform: translate(-50%, -50%);

                width: 8px;
                height: 8px;
                border-radius: 100%;
                background: #1E1E1E;
            }

@media (max-width: 1337px) and (min-width: 769px) {

    .idea-color {
        -ms-grid-column: 3;
        -ms-grid-column-span: 1;
        grid-column: 3 / 4;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        grid-row: 1 / 2;

        height: 126px;
    }

            .color-inputs label {
                padding: 10px 11px;
            }

                .color-dot {
                    width: 10px;
                    height: 10px;
                }

                .color-inputs label:has(input:checked) .color-dot:after {
                    width: 6px;
                    height: 6px;
                }

}

@media (max-width: 768px) {

    .idea-color {
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2 / 3;
        -ms-grid-row: 3;
        -ms-grid-row-span: 1;
        grid-row: 3 / 4;

        height: 100%;
        border-radius: 0.8rem;
        background: url('../img/color-img-mob.png') center / cover no-repeat;
    }

            .color-inputs label {
                padding: 1.4rem;
            }

                .color-dot {
                    width: 1.2rem;
                    height: 1.2rem;
                    border-width: 0.1rem;
                }

                .color-inputs label:has(input:checked) .color-dot:after {
                    width: 0.8rem;
                    height: 0.8rem;
                    border-radius: 100%;
                    background: #1E1E1E;
                }

}



/* -- Mood -- */

.idea-mood {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / 3;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
    gap: 14px;
}

    .mood-inputs {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row nowrap;
                flex-flow: row nowrap;
        -ms-flex-item-align: center;
            -ms-grid-row-align: center;
            align-self: center;
        gap: 8px;

        width: 100%;
    }

        .mood-inputs label {
            position: relative;
            width: 56px;
            height: 56px;

            padding: 0 16px;
            border-radius: 100px;
            border: 1px solid #1E1E1E;

            display: -webkit-box;

            display: -ms-flexbox;

            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;

            cursor: pointer;
            overflow: hidden;
            -webkit-transition: -webkit-box-flex 0.3s linear;
            transition: -webkit-box-flex 0.3s linear;
            -o-transition: flex 0.3s linear;
            transition: flex 0.3s linear;
            transition: flex 0.3s linear, -webkit-box-flex 0.3s linear, -ms-flex 0.3s linear;
        }

        .mood-inputs label:has(input:checked) {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            -webkit-box-pack: left;
                -ms-flex-pack: left;
                    justify-content: left;
            border-style: dashed;
        }

            .mood-inputs .idea__text {
                display: none;
                -webkit-user-select: none;
                   -moz-user-select: none;
                    -ms-user-select: none;
                        user-select: none;
            }

            .mood-inputs label:has(input:checked) .idea__text {
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                    -ms-transform: translate(-50%, -50%);
                        transform: translate(-50%, -50%);
            }

@media (max-width: 1337px) and (min-width: 769px) {

    .idea-mood {
        -ms-grid-column: 2;
        -ms-grid-column-span: 2;
        grid-column: 2 / 4;
        -ms-grid-row: 2;
        -ms-grid-row-span: 1;
        grid-row: 2 / 3;

        gap: 10px;
    }

        .mood-inputs label {
            width: 48px;
            height: 48px;

            padding: 0 12px;
        }

            .mood__icon {
                width: 21px;
                height: 21px;
            }
    
}

@media (max-width: 768px) {

    .idea-mood {
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1 / 3;
        -ms-grid-row: 2;
        -ms-grid-row-span: 1;
        grid-row: 2 / 3;
        
        gap: 1.4rem;
    }

        .mood-inputs {
            gap: 0.8rem;
        }

            .mood-inputs label {
                position: relative;
                width: 4.6rem;
                height: 4.6rem;

                padding: 0 1.4rem;
                border-radius: 10rem;
                border-width: 0.1rem;
            }

            .mood__icon {
                width: 1.8rem;
                height: 1.8rem;
            }

}



/* -- Result -- */

.idea-result {
    position: relative;
}

    .result-card {
        position: absolute;
        z-index: 10;

        width: 100%;
        height: 100%;
        border-radius: 8px;

        display: none;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;

        background-blend-mode: color;
    }

        .result-content__front, .result-content__back {
            display: none;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-flow: column nowrap;
                    flex-flow: column nowrap;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            gap: 24px;

            width: 488px;
            min-height: 330px;
            padding: 22px 21px 20px 24px;
            border-radius: 8px;
            background: #FFF url('../img/result-heart.svg') left 24px bottom 17px / 22px no-repeat;
        }

        .active {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

            .result__title {
                font-family: 'Tenor Sans';
                font-size: 40px;
                font-weight: 400;
                line-height: 95%;
                letter-spacing: -0.06em;
                color: #1E1E1E;

                width: 90%;
            }

            .result__desc {
                font-family: 'YS Text';
                font-size: 17px;
                font-weight: 400;
                line-height: 121%;
                letter-spacing: -0.01em;
                color: #1E1E1E;

                width: 95%;
                margin-top: 16px;
            }

                .result__desc a {
                    color: #4798FF;
                    -webkit-text-decoration: underline dashed;
                            text-decoration: underline dashed;
                    -webkit-text-decoration-style: dashed;
                            text-decoration-style: dashed;
                    text-underline-offset: 4px;
                    text-decoration-thickness: 1px;
                }

            .result__button {
                cursor: pointer;
                white-space: nowrap;
                -ms-flex-item-align: end;
                    align-self: flex-end;

                display: -webkit-box;

                display: -ms-flexbox;

                display: flex;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                -webkit-box-pack: center;
                    -ms-flex-pack: center;
                        justify-content: center;

                width: -webkit-fit-content;

                width: -moz-fit-content;

                width: fit-content;
                height: 36px;
                border: 0;
                padding: 0 15px;
                border-radius: 8px;
                background: #1E1E1E;

                font-family: 'YS Text';
                font-size: 14px;
                font-weight: 400;
                line-height: 16px;
                letter-spacing: -0.01em;
                text-align: center; 
                color: #FFF;
            }

        .share-block {
            position: absolute;
            top: 0;
            right: 0;
        }

            .share__icon {
                position: absolute;
                top: 22px;
                right: 26px;

                width: 42px;
                height: 30px;
                background: url('../img/result-share.svg') center / contain no-repeat;

                cursor: pointer;
            }

            .share__icon:hover + .share__popup {
                display: block;
            }

            .share__popup {
                display: none;
                
                position: absolute;
                top: -40px;
                right: -40px;

                width: 177px;
                padding: 8px 14px;
                border-radius: 8px;
                border: 1px dashed #1E1E1E;
                background: #FFF;

                font-family: 'YS Text';
                font-size: 10px;
                font-weight: 400;
                line-height: 11px;
                letter-spacing: -0.01em;
                color: #1E1E1E;
            }

    .result__video {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        border-radius: 8px;

        -webkit-user-select: none;

           -moz-user-select: none;

            -ms-user-select: none;

                user-select: none;
        pointer-events: none;
    }

@media (min-width: 769px) {

    .rv__mobile {
        display: none;
    }

}

@media (max-width: 768px) {

    .rv__desktop {
        display: none;
    }

}

@media (max-width: 1337px) and (min-width: 769px) {

    .result-content__front, .result-content__back {
        width: 465px;
        min-height: 315px;
        padding: 22px 20px 20px 22px;
        background: #FFF url('../img/result-heart.svg') left 23px bottom 20px / 21px no-repeat;
    }

        .result__title {
            font-size: 42px;
        }

        .result__desc {
            font-size: 16px;
            margin-top: 12px;
        }

        .result__button {
            height: 35px;
            padding: 0 14px;
        }

    .share__icon {
        top: 20px;
        right: 20px;
    }

    .share__popup {
        top: -40px;
        right: -40px;
    }

}

@media (max-width: 768px) {

    .idea-result {
        margin: 0 -1.6rem;
    }

        .result-card {
            border-radius: 0;
            border-width: 0.1rem;
        }

            .result-content__front, .result-content__back {
                gap: 2.4rem;

                width: 100%;
                min-height: 34rem;
                padding: 1.8rem;
                border-radius: 0.8rem;
                margin: 0 1.6rem;
                background: #FFF url('../img/result-heart.svg') left 1.8rem bottom 1.8rem / 2.2rem no-repeat;
            }

                .result__title {
                    font-size: 2.8rem;
                    line-height: 90%;

                    width: 90%;
                }

                .result__desc {
                    font-size: 1.4rem;

                    width: 100%;
                    margin-top: 1.8rem;
                }

                .result__button {
                    height: 3.6rem;
                    border: 0;
                    padding: 0 1.5rem;
                    border-radius: 0.8rem;

                    font-size: 1.4rem;
                    line-height: 1.6rem;
                }

        .share-block {
            position: absolute;
            top: auto;
            right: 50%;
            bottom: 3.2rem;
            -webkit-transform: translateX(50%);
                -ms-transform: translateX(50%);
                    transform: translateX(50%);

            display: -ms-grid;

            display: grid;
            -ms-grid-columns: 1fr 5rem -webkit-min-content;
            -ms-grid-columns: 1fr 5rem min-content;
            grid-template-columns: 1fr -webkit-min-content;
            grid-template-columns: 1fr min-content;
            gap: 5rem;

            width: calc(100% - 3.2rem);
            padding: 0.8rem 1.5rem;
            border-radius: 0.8rem;
            border: 0.1rem dashed #FFF;
            background: #1E1E1E42;
            -webkit-backdrop-filter: blur(0.4rem);
                    backdrop-filter: blur(0.4rem);
        }

            .share__icon {
                position: relative;
                top: auto;
                right: auto;

                width: 2.3rem;
                height: 1.7rem;
                background: url('../img/result-share-mob.svg') center / contain no-repeat;

                cursor: pointer;
            }

            .share__popup {
                position: relative;
                top: auto;
                right: auto;

                display: block;
                -webkit-box-ordinal-group: 0;
                    -ms-flex-order: -1;
                        order: -1;

                width: 100%;
                border: 0;
                padding: 0;
                border-radius: 0;
                background: none;

                font-size: 0.9rem;
                line-height: 1rem;
                color: #FFF;
            }

        .result__video {
            border-radius: 0;
        }

}