@import "general.css";

html{
    scroll-behavior: smooth;
}

body{
    main{
        display: flex;
        flex-direction: column;
        align-items: center;
        #scrollUp{
            position: fixed;
            z-index: 18;
            right: 35px;
            bottom: 140px;
            width: 70px;
            aspect-ratio: 1 / 1;
            opacity: 0;
            background-color: var(--pink);
            filter: drop-shadow(0 0 1px var(--shadow));
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: opacity 0.25s ease, transform 0.25s ease;
            svg{
                width: 40%;
                aspect-ratio: 2 / 1;
                path{
                    fill: white;
                }
            }
        }
        form{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: min(25px, 4vw);
            margin: 15px 0;
            .label{
                width: 94vw;
                display: flex;
                align-items: center;
                .stripe{
                    flex-grow: 1;
                    height: 5px;
                    background-color: black;
                    position: relative;
                    top: 3px;
                }
                h1{
                    font-family: "KyivTypeBold", serif;
                    color: black;
                    font-size: min(6vw, 40px);
                    text-align: center;
                    padding: 0 1vw;
                }
            }
            .selectContainer{
                position: relative;
                display: flex;
                align-items: center;
                transition: transform 0.25s ease;
                select{
                    cursor: pointer;
                    appearance: none;
                    background-color: var(--pink);
                    border: solid clamp(1px, 0.25vw, 2px) black;
                    border-radius: clamp(4px, 1.3vw, 10px);
                    font-size: min(3.5vw, 24px);
                    padding: clamp(2px, 1.35vw, 7px) clamp(3px, 1.85vw, 10px);
                    padding-right: calc(clamp(3px, 1.65vw, 10px) + clamp(8px, 3.25vw, 24px) * 0.65 + 5px);
                    color: white;
                    font-family: "KyivTypeBold", serif;
                    user-select: none;
                    -webkit-user-select: none;
                    &:focus{
                        outline: none;
                    }
                }
                svg{
                    display: block;
                    height: 20%;
                    width: calc(clamp(8px, 3.25vw, 24px) * 0.65);
                    position: absolute;
                    right: 10px;
                    top: 40%;
                    pointer-events: none;
                    path{
                        fill: white;
                    }
                }
            }
            .button{
                text-decoration: none;
                background-color: var(--pink);
                border: solid clamp(1px, 0.25vw, 2px) black;
                border-radius: clamp(4px, 1.3vw, 10px);
                font-size: min(3.5vw, 24px);
                padding: clamp(2px, 1.1vw, 6px) clamp(3px, 1.85vw, 10px);
                transition: transform 0.25s ease;
                font-family: "KyivTypeBold", serif;
                color: white;
                user-select: none;
                -webkit-user-select: none;
            }
        }
        .container{
            width: 100%;
            height: var(--containrHeight);
            display: flex;
            flex-direction: column;
            align-items: center;
            scroll-margin-top: var(--headerHeight);
            .heading{
                width: calc(100% - 6vw);
                height: 10%;
                display: flex;
                align-items: center;
                h1{
                    font-family: "KyivTypeBolder", serif;
                    font-size: min(6.5vw, 50px);
                    padding: 0 1.75vw;
                    color: black;
                }
                .stripe{
                    flex-grow: 1;
                    height: 5px;
                    background-color: black;
                    position: relative;
                    top: 6%;
                }
            }
            .serviceDuration{
                height: 5%;
                width: 100vw;
                display: flex;
                justify-content: center;
                align-items: center;
                h4{
                    text-align: center;
                    font-family: "Kurale", sans-serif;
                    color: var(--gray3);
                    font-size: min(4vw, 25px);
                }
            }
            .description{
                width: calc(100% - 6vw);
                height: 85%;
                display: flex;
                align-items: center;
                img{
                    height: 90%;
                    filter: drop-shadow(6px 6px 6px var(--shadow));
                    margin-right: 3vw;
                }
                .priceList{
                    height: 100%;
                    flex-grow: 1;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-evenly;
                    font-size: min(1.75vw, 25px);
                    .border{
                        width: 100%;
                        height: 2px;
                        background-color: var(--gray2);
                    }
                    .service{
                        width: 100%;
                        display: flex;
                        align-items: center;
                        h2{
                            color: var(--gray3);
                            font-size: 1em;
                            font-family: "KyivType", serif;
                        }
                        .name{
                            margin-right: auto;
                            padding-right: 2.5em;
                        }
                        .price{
                            white-space: nowrap;
                        }
                    }
                    .button{
                        text-decoration: none;
                        background-color: var(--pink);
                        border: solid clamp(1px, 0.25vw, 2px) black;
                        border-radius: clamp(5px, 1.6vw, 15px);
                        font-size: min(1.5em, 35px);
                        padding: clamp(2px, 1.7vw, 7px) clamp(3px, 2.25vw, 10px);
                        transition: transform 0.25s ease;
                        font-family: "KyivTypeBold", serif;
                        color: white;
                        user-select: none;
                        -webkit-user-select: none;
                    }
                }
            }
        }
        .mirrored{
            .description{
                flex-direction: row-reverse;
                img{
                    margin-right: 0;
                    margin-left: 3vw;
                }
            }
        }
        .cut{
            height: calc(var(--containrHeight) * 0.9);
            .description{
                height: 100%;
            }
        }
    }
}

@media (max-aspect-ratio: 7 / 5){
    body{
        main{
            .container{
                height: auto;
                .description{
                    height: auto;
                    align-items: stretch;
                    img{
                        height: auto;
                        width: 30vw;
                    }
                    .priceList{
                        height: auto;
                    }
                }
            }
        }
    }
}

@media (max-width: 1000px){
    body{
        main{
            #scrollUp{
                right: 25px;
                bottom: 100px;
                width: 50px;
            }
            form{
                margin-bottom: 0;
                .label{
                    .stripe{
                        height: 0.65vw;
                    }
                }
            }
            .container{
                height: auto;
                margin: 10px 0;
                scroll-margin-top: var(--mobileHeaderHeight);
                .heading{
                    height: auto;
                    margin-bottom: 0.5vmax;
                    .stripe{
                        height: 0.75vw;
                    }
                }
                .serviceDuration{
                    height: auto;
                    margin-bottom: 1vmax;
                }
                .description{
                    .priceList{
                        font-size: 3vw;
                        .border{
                            width: 100%;
                        }
                        .last{
                            display: none;
                        }
                        .service{
                            padding: 2vw 0;
                        }
                        a{
                            margin: 2.5vw 0;
                        }
                    }
                    img{
                        display: none;
                    }
                }
            }
            .partial{
                margin-bottom: 0;
            }
            .cut{
                height: auto;
                margin-top: 0;
            }
        }
    }
}

@media (hover: hover) and (pointer: fine){
    #scrollUp:hover{
        transform: scale(1.1);
    }
    form .selectContainer:hover{
        transform: scale(1.05);
    }
    .button:hover{
        transform: scale(1.05);
    }
}