/* ___ QUOTE ___ */
.quote {padding-block: 50px 120px;}
.quote form {display: flex; align-items: center; flex-wrap: wrap; gap: 12px;}
.quote form > label {display: block; width: 100%; font-family: var(--ff-primary); font-size: calc(var(--fs-base, 16px) + 2px); font-weight: 700; margin-top: 10px;}
.quote form label small {color: var(--c-primary);}
.quote form :where(input:not([type="radio"]), textarea) {width: 100%; padding: 15px 20px; border: 1px solid var(--_c-border); border-radius: 10px;}
.quote form :where(input, textarea)::placeholder {color: var(--_c-border);}
.quote form input:where([type="date"], [type="time"]) {text-transform: uppercase; color: var(--_c-border);}
.quote form textarea {height: 200px; resize: none;}
.quote form > :nth-child(2) {order: 1;}
.quote form > :nth-child(n+3):nth-child(-n+4) {width: calc(50% - 6px); order: 2;}
.quote form > :nth-child(5) {display: none; order: 2;}
.quote form > :is(:nth-child(6), :nth-child(8)) {width: calc(50% - 6px); order: 3;}
.quote form > :is(:nth-child(7), :nth-child(9)) {width: calc(50% - 6px); order: 4;}
.quote form > :nth-child(n+10):nth-child(-n+11) {order: 5;}
.quote form > :is(:nth-child(12), :nth-child(14)) {width: calc(50% - 6px); order: 5;}
.quote form > :is(:nth-child(13), :nth-child(15)) {width: calc(50% - 6px); order: 6;}
.quote form > :nth-child(n+16) {order: 7;}
.quote form .group {display: flex; align-items: center; gap: 18px; width: 100%;}
.quote form .group label {width: 100%; font-size: calc(var(--fs-base, 16px) + 2px); font-weight: 500; text-align: center; background-color: var(--_c-gray); padding: 12px; border: 1px solid #000; border-radius: 12px; cursor: pointer;}
.quote form .group label:hover {color: var(--c-primary); border-color: var(--c-primary);}
.quote form .group input {display: none;}
.quote form .group input:where([type="radio"], [type="checkbox"]):checked + label {background-color: var(--c-primary); color: #fff; border-color: var(--c-primary);}
.quote form > p {width: calc(75% - 6px); font-size: var(--fs-xs, 14px);}
.quote form > p a {display: inline-block; color: var(--c-primary); text-decoration: underline;}
.quote form > p a:hover {color: #000;}
.quote form > .btn__primary {align-self: flex-start; width: calc(25% - 6px); max-width: 170px; border-radius: 12px; margin-left: auto;}

/* ___ MEDIA QUERY ___ */
@media only screen and (max-width: 991px) {
    .quote {padding-block: 40px 70px;}
}

@media only screen and (max-width: 767px) {
    .quote form .group {flex-wrap: wrap; gap: 12px;}
    .quote form .group label {width: calc(50% - 9px);}
}

@media only screen and (max-width: 575px) {
    .quote {padding-block: 30px 50px;}
    .quote form > label {margin: 0;}
    .quote form :where(input:not([type="radio"]), textarea) {padding: 12px;}
    .quote form > p {width: 100%;}
    .quote form > .btn__primary {width: 100%; max-width: 100%;}
}

@media only screen and (max-width: 475px) {
    .quote form .group label {width: 100%;}
    .quote form textarea {height: 150px;}
}