@import "general.css";

body{
    main{
        display: flex;
        flex-direction: column;
        align-items: center;
        #heading{
            text-align: center;
            color: black;
            font-family: "KyivTypeBold", serif;
            font-size: min(7.5vw, 50px);
            margin: 10px 0;
            max-width: 90vw;
            position: relative;
            padding-right: 1px;
        }
        #subheading{
            text-align: center;
            color: var(--gray3);
            font-family: "Kurale", serif;
            font-size: min(4vw, 25px);
            margin: 5px 0 5px 0;
            max-width: 90vw;
        }
        form{
            width: min(85vw, 750px);
            background-color: var(--pink);
            border-radius: clamp(13px, 3vw, 20px);
            border: solid clamp(3px, 0.5vw, 5px) black;
            padding: min(1.25vw, 9px) min(2.5vw, 18px);
            margin: 10px 0 20px 0;
            display: flex;
            flex-direction: column;
            gap: min(10px, 1.2vw);
            h2{
                color: white;
                font-family: "KyivTypeBold", serif;
                font-size: clamp(20px, 5vw, 35px);
                span{
                    font-family: "Kurale", serif;
                }
            }
            textarea{
                resize: none;
                overflow: hidden;
            }
            .wrapper{
                width: 100%;
                position: relative;
                display: flex;
                align-items: center;
                select{
                    white-space: nowrap;
                    overflow: hidden;
                    padding-right: clamp(20px, 6%, 40px);
                }
                .selectGradient{
                    width: calc(max(3%, 11px) * 2 + 20px);
                    height: calc(100% - clamp(1px, 0.2vw, 2px) * 2);
                    position: absolute;
                    right: clamp(1px, 0.2vw, 2px);
                    background: linear-gradient(to right, transparent, white 40%);
                    pointer-events: none;
                }
                svg{
                    display: block;
                    width: max(3%, 11px);
                    aspect-ratio: 2 / 1;
                    position: absolute;
                    right: 10px;
                    pointer-events: none;
                    path{
                        transition: fill 0.15s ease;
                    }
                }
            }
            input[type="text"], input[type="date"], input[type="tel"], input[type="email"], textarea, .wrapper select{
                appearance: none;
                -webkit-appearance: none;
                width: 100%;
                background-color: white;
                padding: clamp(1px, 0.8vw, 5px) clamp(3px, 1.2vw, 8px);
                border: solid clamp(1px, 0.2vw, 2px) white;
                border-radius: 0;
                box-sizing: border-box;
                color: var(--gray3);
                caret-color: var(--gray3);
                font-family: "KyivType", serif;
                font-size: clamp(16px, 3.5vw, 24px);
                cursor: pointer;
                opacity: 1;
                transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
                &:focus{
                    outline: none;
                    border: solid clamp(1px, 0.2vw, 2px) var(--gray3);
                }
                &::placeholder{
                    color: var(--gray2);
                    transition: color 0.15s ease;
                }
            }
            input[type="text"], input[type="tel"], input[type="email"], textarea{
                cursor: text;
            }
            .wrapper .unavailable, input.unavailable{
                cursor: default;
                color: var(--gray1);
                & ~ svg path{
                    fill: var(--gray1);
                }
            }
            input.wrong, .wrapper select.wrong{
                border: solid clamp(1px, 0.2vw, 2px) var(--red);
                color: var(--red);
                &::placeholder{
                    color: var(--red);
                }
                &:focus::placeholder{
                    color: var(--gray2);
                }
            }
            #agreementDiv{
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: min(1vw, 7px);
                #checkboxWrapper{
                    position: relative;
                    width: min(3.5vw, 24px);
                    height: min(3.5vw, 24px);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    input[type="checkbox"]{
                        appearance: none;
                        -webkit-appearance: none;
                        width: min(3.5vw, 24px);
                        height: min(3.5vw, 24px);
                        border-radius: 35%;
                        background-color: white;
                        border: solid 1px black;
                        cursor: pointer;
                    }
                    #checkmark{
                        width: 50%;
                        height: 50%;
                        display: none;
                        pointer-events: none;
                        position: absolute;
                        z-index: 1;
                        overflow: visible;
                        path{
                            fill: black;
                        }
                    }
                    input[type="checkbox"]:checked ~ #checkmark{
                        display: block;
                    }
                }
                h2{
                    color: white;
                    font-family: "KyivTypeBold", serif;
                    font-size: min(3vw, 24px);
                }
            }
            button{
                align-self: center;
                background-color: white;
                border: solid clamp(1px, 0.25vw, 2px) var(--shadow-pink);
                border-radius: clamp(5px, 1.6vw, 12px);
                padding: clamp(2px, 1.5vw, 8px) clamp(3px, 2vw, 12px);
                margin: 5px 0;
                font-size: clamp(18px, 4vw, 30px);
                font-family: "KyivTypeBold", serif;
                font-weight: 900;
                color: var(--shadow-pink);
                cursor: pointer;
                user-select: none;
                -webkit-user-select: none;
                transition: transform 0.25s ease;
                display: flex;
                align-items: center;
                gap: min(7px, 1vw);
                .loadSpinner{
                    height: clamp(18px, 4vw, 30px);
                    aspect-ratio: 1 / 1;
                    animation: rotate 1s infinite linear;
                    display: none;
                }
                .bSpan2{
                    display: none;
                }
            }
            button[disabled]{
                cursor: auto;
                .loadSpinner{
                    display: block;
                }
                .bSpan1{
                    display: none;
                }
                .bSpan2{
                    display: block;
                }
            }
        }
    }
}

@media (hover: hover) and (pointer: fine){
    form button:hover{
        transform: scale(1.05);
    }
}

@keyframes rotate{
    100%{
        transform: rotate(360deg);
    }
}