@use "../../../../../styles/abstracts/variables";
@use "../../../../../styles/abstracts/mixins";

.fiat{
    border: 1px solid variables.$col-border-lining;
    padding: 2rem !important;
    border-radius: 10px;
    padding-top: 1rem;
    &__header{
        max-width: 100%;
        @media only screen and (max-width: 1000px) {
            max-width: 100%;
        }
        h1{
            font-weight: 700;
            font-size: 1.4rem;
            color: variables.$col-secondary;
            @media only screen and (max-width: 1000px) {
                font-size: 1.1rem;
            }
        }
        p{
            font-size: .8rem;
            opacity: .8;
            line-height: 1.7;
            color: variables.$col-white !important;
            font-weight: 600;
        }
    }
    &__form {
        label {
            @include mixins.formLabel
        }
        select {
            @include mixins.formSelect
        }
        input {
            @include mixins.formInput;
            color: variables.$col-secondary;
        }
        input::placeholder {
            opacity: .7 !important;
            color: variables.$col-secondary !important;
        }

        input:focus-within {
            @include mixins.focusInput
        }
        select:focus-within {
            @include mixins.focusInput
        }
        small{
            display: block;
            padding-bottom: 1.5rem;
            font-weight: 600;
            padding-top: 1rem;
            opacity: .75;
            font-size: .8rem;
            color: variables.$col-secondary;
        }
        button{
            @include mixins.formButton;
            color: #FFF;
            transition: all ease-in-out .5s;
            &:hover {
                background-color: #e66a00;
                box-shadow: 0 0 6px rgba(255, 122, 0, 0.4);
            }
        }
    }
}