main{place-items:center}
.form-fields{margin-top: 20px;padding: 20px;background-color: var(--brown-tr10);border:1px solid var(--main-tr10);border-radius: 14px;margin-top: 30px;}
.invalid,input:invalid:not(:placeholder-shown) {border: 1px solid var(--heading-tr50);}
fieldset.tab:not(.active),#prevBtn,.form-fields:has(fieldset.active:not(:last-of-type)) #send,.form-fields:has(fieldset.active:last-of-type) #nextBtn {display: none;}
.steps{position: relative;padding: 1em;border: 1px solid var(--main-tr10);border-radius: 14px;margin-bottom: 1em;color:var(--main-tr70);font-size: 0.750em;}
.step{display:inline-block;opacity:0;transition: opacity 0.3s ease-in-out;position: absolute;}
.step.active{opacity:1;position: relative;}
.indicator{margin-top: 1em;height: 8px;background-color: rgba(168, 129, 89, 0.2);border-radius: 4px;}
.indicator span{display: block;border-radius: 4px;background-color: var(--heading);height: 8px;max-width: 33.33%;transition: max-width 0.3s ease-in-out}
.steps:has(.active:nth-child(2)) .indicator span{max-width: 66.66%;}
.steps:has(.active:nth-child(3)) .indicator span{max-width: 100%;}
select:has(> option[value=""]:checked){color: var(--main-tr50)}
.buttons{margin-top: 20px;gap:20px}
.buttons button{border-radius: 4px}
.form-fields:has(fieldset.active:first-of-type) #nextBtn{width: 100%;}
.form-fields:has(fieldset.active:not(:first-of-type)) #prevBtn{display: block;}
.form-fields:has([type="email"]:invalid) #nextBtn{cursor: default;pointer-events: none;}
#prevBtn{background-color: var(--brown-tr10);color: var(--heading)}
legend+p{margin-top: 0;}
.captcha img{margin: 0 auto;}
input[type="number"]{text-align: center;}
@media only screen and (max-width: 480px){
.buttons{flex-direction: column;}
.buttons button{width: 100%;}
}
@media only screen and (min-width: 481px){
.form-fields{padding: 30px;}
.form-fields:has(fieldset.active:not(:first-of-type)) .btn{width: calc(50% - 10px);}
}