/* { ___ SIDEBAR ___ } */
.quote { padding: 16px 12px; background-color: var(--c-primary); border-radius: 4px; --_c-dark-500:#AEAEAE; --_c-light-100:#AEAEAE99; height: fit-content; max-width: 502px; margin-inline: auto;}
.quote .title :first-child { color: #fff; font-size: var( --fs-md);}
.quote form { margin-top: 10px; display: flex; flex-wrap: wrap;  gap: 8px; }
.quote form label { display: flex; align-items: center; gap: 12px; color: #fff; font-size: calc(var(--fs-xs) - 1px ); font-weight: 600; font-family: var(--ff-primary); width: 100%; }
.quote form :where(input, select, textarea) {height: 30px; color: var(--_c-dark-500); border: 1px solid var(--_c-light-100); font-family: var( --ff-secondary);
font-size: var(--fs-2xs); padding-inline: 10px; border-radius: 4px;  appearance: none; background: #fff;  width: 100%; }
.quote form :where(input, select, textarea):focus { outline: 2px solid #000; }
.quote  form > :nth-child(-n+7):nth-child(n+4) {width: calc(25% - 6px);}
.quote form > :nth-child(-n+11):nth-child(n+9) {width: calc(33.33% - 5.5px);}
.quote form > :nth-child(-n+17):nth-child(n+15) {width: calc(33.33% - 5.5px);}
.quote form textarea {min-height: 60px; resize: none; padding-block: 10px;}
.quote .group { display: flex; align-items: center; width: 100%; flex-wrap: wrap; }
.quote form input[type="file"] { padding-block: 4px; background: no-repeat 1% 5px/20px url('../images/icons/file.svg'); background-color: #fff; padding-left: 34px;}
.quote form .group  label { color: #fff; font-size: var(--fs-xs); font-family: var(--ff-primary); gap: 0; width: fit-content; }
.quote form .group  label img { margin-right: 12px; }
.quote form input#captcha { max-width: 116px; margin-left: auto; height: 33px; margin-inline: auto 12px; text-align: center; font-weight: 600;} 
.quote form input#captcha::placeholder { color: #000; font-weight: 700; }
.quote form input#captcha::-webkit-inner-spin-button { appearance: none; }
.quote .group button { background-color: #fff; color: var(--c-primary); max-width: 116px; padding: 8px 16px; font-size: var(--fs-2xs); width: 100%;  }
.quote form input::file-selector-button { color: var(--_c-dark-500); padding: 3px 10px; font-size: calc(var(--fs-xs) - 2px ); ; background-color: #fff; border: 1px solid var(--_c-light-100); border-radius: 4px;  }
.quote form label[for="captcha"] > :nth-child(2) { display: none; } 
.quote form label[for="productName"] > :nth-child(2) { display: none; }
.quote form label[for="sizes"] > :nth-child(2) { display: none; }
.quote form label[for="materials"] > :nth-child(2) { display: none; }
.quote form label[for="personalInfo"] > :nth-child(2) { display: none; }
.quote *::selection {background-color: #fff; color: var(--c-primary);}

/* { ___ MEDIA QUERY ___ } */
@media only screen and (max-width: 575px) {
    .quote  form > :nth-child(-n+7):nth-child(n+4) {width: calc(50% - 6px);}
    .quote form > :nth-child(-n+11):nth-child(n+9) {width: calc(50% - 6px);}
    .quote form > :nth-child(-n+11):nth-child(n+11) {width: calc(100% - 0px);}
    .quote form > :nth-child(-n+15):nth-child(n+15) {width: calc(100% - 0px);}
    .quote form > :nth-child(-n+17):nth-child(n+16) {width: calc(50% - 6px);}
}

@media only screen and (max-width: 475px) {
    .quote form input#captcha  { margin-inline: auto 0; }
    .quote .group  { gap: 10px; }
}

@media only screen and (max-width: 360px) {
    .quote  form > :nth-child(-n+7):nth-child(n+4) {width: calc(100% - 0px);}
    .quote form > :nth-child(-n+11):nth-child(n+9) {width: calc(100% - 0px);}
    .quote form > :nth-child(-n+17):nth-child(n+16) {width: calc(100% - 0px);}
    .quote .group { justify-content: center; gap: 10px; }
    .quote form .group label { width: 100%; }
    .quote form input#captcha { width: 100%; max-width: 100%; margin-inline: 0;}
    .quote .group button { margin-top: 0; width: 100%; max-width: 100%; }
}