@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

input[type="date"], input[type="time"]{
    width: 100%;
    all: unset;
    display: inline-block;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
    box-sizing: border-box;
    text-align: left;
}

input[type="date"]:placeholder-shown, input[type="time"]:placeholder-shown{
    color: #aaa;
}

body{
    height: 100vh;
    background: #FFF;
    padding: 40px;
    font-family: "Inter", sans-serif;
    padding: 20px;
}

.container{
    width: 100%;
    height: 100%;
    background-color: #f1f1f1;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    gap: 20px;
    
    a{
        background-color: #ff8000;
        font-size: 14px;
        text-transform: uppercase;
    }

    .multi-field{
        display: flex;
        gap: 10px;
    }

    .date-wrapper{
        width: 15rem;

        &:has(input[type="date"]){
            width: 100%;
        }
    }

    .bg{
        width: 100%;
        max-width: 40rem;
        background-color: #ff8000;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;

        img{
            height: 100%;
            border-radius: 10px;
            object-fit: contain;
        }
    }

    .formulario {
        width: 100%;
        max-width: 600px;
        margin: auto;
        background: white;
        padding: 30px;
        border-radius: 8px;
        text-align: center;
        gap: 0;

        h1{
            margin-bottom: 1rem;
            font-size: 1.8rem;
            color: #333;

            span{
                color: #ff8000;
            }
        }

        h2{
            font-size: 1rem;
            font-weight: 400;
            margin-bottom: 1rem;
            color: #444;
        }

        input, button, select{
            width: 100%;
            padding: 14px 10px;
            margin-top: 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-family: "Inter", sans-serif;
            font-size: 13px;

            &[type="date"], &[type="time"]{
                text-transform: uppercase;
            }

            &:focus {
                outline: none;
                border-color: #ff8000;
            }
        }

        select{
            background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%33000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
            background-position: calc(100% - 0.75rem) center !important;
            -moz-appearance:none !important;
            -webkit-appearance: none !important; 
            appearance: none !important;
            padding-right: 2rem !important;
        }

        button {
            background: #ff8000;
            color: white;
            text-transform: uppercase;
            font-weight: 600;
            border: none;
            cursor: pointer;

            &:disabled {
                background: #aaa;
                cursor: wait;
            }
        }

        .mensagem {
            margin-top: 15px;
            font-weight: bold;
            display: none;
        }

        .aviso{
            font-weight: 500;
            font-size: 32px;
            color: #333;
            margin-top: 15px;
            display: none;
        }

        .botao-retorno {
            display: inline-block;
            background: #333;
            color: white;
            padding: 10px 15px;
            text-decoration: none;
            border-radius: 4px;
        }

        .retornar{
            display:none; 
            margin-top:20px;
        }

        form{
            /*display: none;*/
        }
    }
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: center;

        .bg{
            display: none;
        }

        .formulario{
            padding: 20px;

            h1{
                font-size: 1.8rem;
            }

            h2{
                font-size: 1rem;
            }
        }

        .multi-field{
            display: flex;
            gap: 10px;
            
            .date-wrapper{
                width: 100%;
            }
        }
    }
}   

@media (max-width: 480px) {
    .container {
        flex-direction: column;
        align-items: center;

        .multi-field{
            display: flex;
            flex-direction: column;
            gap: 0;
            
            .date-wrapper{
                width: 100%;
                box-sizing: border-box;

                input{
                    width: 100%;
                }
            }
        }

        .formulario{
            h1{
                font-size: 1.4rem;
            }

            h2{
                font-size: 1rem;
            }
        }
    }
}