@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --c1: #C79C4A;
    --c2: #40653B;
    --grey: #cacaca;
    --white: #ffffff;
    --black: #000000;
}

* {
    user-select: none;
    cursor: default;
    transition: all 0.3s;
    accent-color: var(--c1);
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    color-scheme: light dark;
}
input , label
{
    cursor: pointer;
}
hr {
    border: none;
    border-top: 1px solid var(--grey);
    margin: 10px 0;
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.errmsg {
    margin-top: 20px;
    color: rgb(214, 0, 0);
    font-size: 13px;
    background-color: rgb(255, 230, 230);
    padding: 4px 8px;
    border-radius: 5px;
    animation-name: shake;
    animation-duration: .2s;
    animation-iteration-count: 1;
    text-align: center;
    width: fit-content;
    margin: 0px auto;
}
.btn {
    cursor: pointer;
    padding: 10px 20px;
    border: none;
    background-color: var(--c1);
    color: var(--white);
    border-radius: 50px;
    cursor: pointer;
}

.btn:hover {
    background-color: var(--c2);
}

.popup.success-popup {
    height: 100vh;
    position: fixed;
    width: 100vw;
    overflow: hidden;
    display: grid;
    place-content: center;
    background-color: #ffffff80;
    backdrop-filter: blur(10px);
    z-index: 10;
    
    & .popup-content {
    display: grid;
    text-align: center;
    padding: 20px;
    background-color: var(--c2);
    border: 1px solid;
    width: fit-content;
    color: var(--white);
    border-radius: 10px;
}
}


.container {
    display: grid;
    max-width: 800px;
    padding: 15px;
    margin: 0px auto;

    & .steps {
        display: flex;
        justify-content: space-between;
        align-items: center;

        & .line {
            display: flex;
            flex: 1;
            min-width: 10px;
            position: relative;
            top: -11px;
            background-color: var(--grey);
            height: 1px;
        }

        & .step {
            font-size: 13px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            text-wrap: nowrap;

            .num {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: var(--grey);
            }

            .active {
                color: var(--white);
                background-color: var(--c1);
            }
        }

    }
& .subnav
        {
            display: flex;
            justify-content: space-between;
            position: relative !important;
            top: 40px !important;
            width: 50%;
            float: inline-end;
        }
    .main {
        padding: 10px;
        border: 1px solid var(--grey);
        border-radius: 10px;
        margin: 20px 0;

        & .step1 {
            & .header {
                text-align: center;
            }

            & .content {
                & .select {
                    padding: 10px 20px;
                    width: 100%;
                    border: none;
                    background-color: var(--c2);
                    color: var(--white);
                    cursor: pointer;
                    border-radius: 5px;
                    outline: none;
                }

                & .info {
                    margin-top: 10px;
                    text-align: center;
                    font-size: 13px;
                }
            }
        }
        & .step2 {
            display: grid;
            gap: 10px;

            & .box {
                border-radius: 5px;
                border: var(--grey) solid 1px;
                display: grid;
                overflow: hidden;

                & .header {
                    color: var(--white);
                    font-weight: 600;
                    text-align: center;
                    padding: 5px 0;
                    background-color: var(--c2);
                }

                & .content {
                    padding: 10px;
                    display: flex;
                    justify-content: center;

                    & .datebox {
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        & label {
                            background-color: var(--c1);
                            padding: 4px 15px;
                        }
                        & .dateinp {
                            position: absolute;
                            width: 13px;
                            height: 2px;
                            scale: 7;
                            opacity: 0;
                            border: none;
                        }
                    }
                    & .peoplebox {

                        display: flex;
                        gap: 10px;
                        align-items: center;

                        & input {
                            padding: 5px;
                            text-align: center;
                        }

                        .btns {
                            display: flex;
                            gap: 10px;

                            & span {
                                width: 40px;
                                border-radius: 50px;
                                color: var(--white);
                                display: grid;
                                place-content: center;
                                text-align: center;
                                aspect-ratio: 1/1;
                                background-color: var(--c1);
                            }

                            & span:hover {
                                background-color: var(--c2);
                            }

                        }
                    }
                    & .servicelist{
                        display: flex;
                        width: 100%;
                        gap: 20px;
                        justify-content: center;
                        & .service{
                            & input
                            {
                                padding:10px;
                                border: none;
                                background-color: var(--c2);
                            }
                        }
                    }
                    & .timebox{
                        display: grid;
                        gap: 10px;
                        grid-template-columns: repeat(4, 1fr);
                        & label{
                            border: 1px solid var(--grey);
                            padding: 2px 7px;
                            border-radius: 20px;
                            text-align: center;
                            font-size: 13px;
                            font-weight: 500;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            gap: 5px;
                            width: 70px;
                        }
                        & label:hover{
                            background-color: var(--grey);
                        }
                    }
                }
            }
        }
        & .step3{
            display: grid;
            gap: 10px;
            & .form 
            {
                display: grid;
                gap: 10px;
                border: 1px solid var(--grey);
                border-radius: 5px;
                padding: 10px;
                & .else
                {
                    display: flex;
                    gap: 10px;
                }
                & .inputs
                {
                    display: grid;
                    gap: 10px;
                    & input {                   
                        padding: 10px 0;
                        border: none;
                        border-bottom: 1px solid var(--black);
                    }
                    & .agreements{
                        display: grid;
                        gap: 10px;
                        & a
                        {
                            color: var(--c2);
                        }
                        & input {
                            margin-right: 5px;
                        }
                    }
                }
            }
            & .checks
            {
                display: grid;
                grid-template-columns: repeat(2 , 1fr);
                gap: 10px;
                & label > input
                {
                    margin-right:5px;
                }
            }
            & .form3 .inputs h3{
                padding: 10px 0;
            }  
        }
        & .step4 {
            display: grid;
            gap: 10px;
            overflow: hidden;
            & .details
            {
                display: grid;
                gap: 10px;
                border: 1px solid var(--grey);
                border-radius: 5px;
                padding: 10px;
                & .requ
                {
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: 10px;
                    & .reqbtn{
                        width: auto;
                    }
                }
                & table {
                    border-collapse: collapse;
                    & tr{
                        display: flex;
                        flex-direction: column;
                        float: left;
                        width: 50%;
                        & td{
                            text-wrap: nowrap;
                            border-bottom: 1px solid var(--grey);
                            padding: 6px;
                        }
                    }
                }
            }

        }
        
    }
    .nav {
        display: flex;
        justify-content: space-between;
    }
}
.loadingbg
{
    background-color: var(--white);
    height: 100vh;
    width: 100vw;
    display: grid;
    place-content: center;
    
    & .loadcircle
    {
        height: 100px;
        width: 100px;
        border-radius: 50px;
        border: 5px dashed var(--grey);
    }
    
}