/* ============================================================
   forms.css — формы, поля, селекты, радио/чекбоксы, ошибки
   Базовые поля (finput/fsel/fsubmit) и их модификаторы перенесены
   из исходных стилей страницы + служебные классы форм.
   Этап 4: базовые поля + формы попапов fancy; этап 5 добавит квиз.

   Телефон: простое <input type="tel"> с маской +7 (999) 999-99-99
   (виджет «флаг+страна» удалён, §3.4 TZ).
   ============================================================ */
.form__input{
margin:0;
font-family:'Unbounded',Arial,sans-serif;
height:60px;
padding:0 20px;
font-size:16px;
line-height:1.33;
width:100%;
border:0 none;
box-sizing:border-box;
outline:none;
-webkit-appearance:none;
border-radius:0;
}
.form__input::-moz-focus-inner{padding:0;border:0;}
.form__input:invalid{box-shadow:none;}
.form__input.input-std,
.form__select.input-std{
color:#000;
border:1px solid #c9c9c9;
border-radius:5px;
font-family:'Roboto',Arial,sans-serif;
}
.form .form__input{
background-color:transparent;
-webkit-appearance:none;
}
.form .form__input::-ms-clear{width:0;height:0;}
.form__select{
width:100%;
box-sizing:border-box;
cursor:pointer;
height:60px;
padding:0 45px 0 20px;
font-size:16px;
line-height:1.33;
outline:none;
border:0;
border-radius:0;
background:transparent;
color:initial;
-webkit-appearance:none;
appearance:none;
-moz-appearance:none;
}
.form__select-wrapper{
position:relative;
}
.form__select-wrapper:after{
content:' ';
width:0;
height:0;
border-style:solid;
border-width:6px 5px 0 5px;
border-color:#000 transparent transparent transparent;
position:absolute;
right:20px;
top:0;
bottom:0;
margin:auto;
pointer-events:none;
}
.form__select option{color:#000;}
.form__input-title{
display:block;
font-family:'Roboto',Arial,sans-serif;
font-size:20px;
line-height:1.55;
font-weight:300;
color:#000;
padding-bottom:5px;
}
@media screen and (max-width:1200px){
.form__input-title{font-size:18px;}
}
@media screen and (max-width:640px){
.form__input-title{font-size:16px;line-height:1.45;}
}
.popup__group{margin-bottom:25px;}
@media screen and (max-width:640px){
.popup__group{margin-bottom:20px;}
}
.form__input-error{
display:none;
font-family:'Roboto',Arial,sans-serif;
color:red;
font-size:13px;
margin-top:5px;
}
.form .js-error-control-box .form__input-error{display:block;}
.form .js-error-control-box .form__input,
.form .js-error-control-box .form__select{
border:1px solid red !important;
}
.form .js-error-control-box .form__input.input-std{padding-left:10px;}
.form__submit-btn{
font-family:'Unbounded',Arial,sans-serif;
text-align:center;
height:54px;
width:100%;
border:0 none;
font-size:16px;
padding-left:60px;
padding-right:60px;
-webkit-appearance:none;
font-weight:700;
white-space:nowrap;
background-image:none;
cursor:pointer;
margin:0;
box-sizing:border-box;
outline:none;
background:transparent;
color:#fff;
background-color:#000;
border-radius:40px;
position:relative;
}
@media screen and (max-width:640px){
.form__submit-btn{white-space:normal;padding-left:30px;padding-right:30px;}
}
.form__submit-btn.is-sending{color:transparent !important;opacity:.5;}
.form__submit-btn[disabled]{opacity:.6;pointer-events:none;}
/* R4.6: блок согласия на обработку персональных данных —
   галочка + фраза под финальной кнопкой; второстепенная информация,
   шрифт чуть меньше основного; без галочки — красный контур блока. */
.form__agree{
margin-top:12px;
}
.form__agree-label{
display:flex;
align-items:flex-start;
cursor:pointer;
-webkit-user-select:none;
user-select:none;
}
.form__agree-check{
position:absolute;
z-index:-1;
opacity:0;
outline:none;
margin:0;
}
.form__agree-indicator{
position:relative;
display:inline-block;
flex-shrink:0;
height:14px;
width:14px;
border:1px solid #000;
box-sizing:border-box;
border-radius:2px;
margin:2px 7px 0 0;
transition:all 0.2s;
opacity:.6;
background-color:transparent;
}
.form__agree-indicator:after{
content:'';
position:absolute;
display:none;
left:4px;
top:1px;
width:3px;
height:7px;
border:solid #000;
border-width:0 1px 1px 0;
transform:rotate(45deg);
}
.form__agree-check:checked ~ .form__agree-indicator{opacity:1;}
.form__agree-check:checked ~ .form__agree-indicator:after{display:block;}
.form__agree-check:focus-visible ~ .form__agree-indicator{outline:2px solid #2015FF;outline-offset:2px;}
.form__agree-text{
font-family:'Roboto',Arial,sans-serif;
font-weight:300;
color:#000;
font-size:12px;
line-height:1.45;
text-align:left;
}
.form__agree-text a{
color:#000;
text-decoration:underline;
}
/* R4.6: строка ошибки согласия — резерв заранее (как в квизе, R3.1),
   чтобы появление текста не смещало макет */
.form__agree .form__input-error{
display:block;
min-height:18px;
line-height:1.4;
}
.form__agree.js-error-control-box{
border:1px solid red;
border-radius:4px;
padding:6px 8px;
}
.form__agree.js-error-control-box .form__input-error{display:block;}
@media screen and (max-width:640px){
.form__agree-text{font-size:11px;}
}
.form__submit{
display:block;
text-align:center;
vertical-align:middle;
height:100%;
width:100%;
margin-top:25px;
}
.form__errorbox-wrapper{
font-family:'Roboto',Arial,sans-serif;
display:none;
background:#f95d51;
padding:10px;
text-align:center;
margin-bottom:20px;
}
.form__errorbox-text{
list-style:none;
color:#fff;
box-sizing:border-box;
padding:0 10px 10px 10px;
margin:0;
}
.form__errorbox-item{font-family:'Roboto',Arial,sans-serif;word-break:break-word;}
.form__errorbox-item a{color:#fff;text-decoration:none;border-bottom:none;box-shadow:none;}
.form__errorbox-bottom{display:none;}
.form__successbox{
font-family:'Roboto',Arial,sans-serif;
text-align:center;
background:#62c584;
color:#fff;
padding:20px;
margin-bottom:20px;
display:none;
}
.form__inputsbox{
transition:max-height 0.3s cubic-bezier(.19,1,.22,1);
max-height:20000px;
}
.form__inputsbox.is-hidden{
overflow:hidden;
max-height:0;
opacity:0;
}
.quiz-form .quiz-form__col{margin-bottom:0;}
@media screen and (max-width:640px){
.quiz-form .quiz-form__col{padding-left:0;padding-right:0;}
}
.quiz-form{padding-top:90px;padding-bottom:90px;background-color:#fff;}
@media screen and (max-width:480px){
.quiz-form{padding-top:30px;padding-bottom:30px;}
}
.quiz-box{
position:relative;
width:100%;
border:0 solid transparent;
background-color:#fff;
box-sizing:border-box;
border-radius:5px;
box-shadow:0 0 10px rgba(0,0,0,.3);
padding-bottom:50px;
}
@media screen and (max-width:640px){
.quiz-box{padding-bottom:30px;}
}
.quiz-box-head{
position:relative;
background-color:#ececec;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.quiz-progress{
position:absolute;
bottom:0;
z-index:1;
width:100%;
height:5px;
background-color:#cbcbcb;
}
.quiz-progress-fill{
height:100%;
width:0;
background-color:#0e8054;
transition:width .3s ease;
}
.quiz-body{transition:all ease-in-out 0.3s;}
.quiz-form-wrapper{
padding-top:35px;
padding-left:45px;
padding-right:45px;
padding-bottom:55px;
}
@media screen and (max-width:640px){
.quiz-form-wrapper{padding-top:20px;padding-left:20px;padding-right:20px;}
}
.quiz-step{display:none;}
.quiz-step.is-active{display:block;}
.quiz-step.is-anim-in{animation:quizFadeInUp .7s;}
.quiz-step.is-anim-out{animation:quizFadeOutDown .4s;pointer-events:none;}
@keyframes quizFadeInUp{
0%{display:block;opacity:0;transform:translateY(15px);}
100%{display:block;opacity:1;transform:translateY(0);}
}
@keyframes quizFadeOutDown{
0%{display:block;opacity:1;transform:translateY(0);}
100%{opacity:0;transform:translateY(20px);}
}
.quiz-step .form__group{margin-bottom:25px;}
.quiz-field-title{
display:block;
font-family:'Unbounded',Arial,sans-serif;
font-weight:400;
color:#000;
font-size:26px;
line-height:1.5;
padding-bottom:5px;
margin-bottom:0;
}
@media screen and (max-width:1200px){.quiz-field-title{font-size:24px;}}
@media screen and (max-width:640px){.quiz-field-title{font-size:22px;}}
@media screen and (max-width:400px){.quiz-field-title{margin-bottom:20px;}}
.quiz-step .form__input-block{margin-bottom:30px;}
/* R3.1: строка ошибки резервируется заранее (пустая, невидимая) —
   при появлении текста ошибки варианты и кнопки не смещаются */
.quiz-step .form__input-error{
display:block;
min-height:18px;
line-height:1.4;
}
.input-bbonly{
outline:none !important;
padding-left:0 !important;
padding-right:0 !important;
border-top:0 !important;
border-right:0 !important;
border-left:0 !important;
background-color:transparent !important;
border-radius:0 !important;
border-bottom:1px solid;
}
.quiz-step .form__input.input-bbonly{background-color:transparent;-webkit-appearance:none;}
/* R3.1: инпут шага «Площадь» всегда с контуром — прозрачным,
   при ошибке краснеет; ошибки не двигают layout */
.quiz-step .form__input.input-bbonly{
border:1px solid transparent;
padding:0 10px !important;
height:40px;
margin-bottom:5px;
}
.quiz-step .form__group.js-error-control-box .quiz-quantity-input,
.quiz-step .form__group.js-error-control-box .js-phonemask-input{
border-color:red;
padding-left:10px !important;
}
.quiz-quantity-wrapper{
display:flex;
align-items:center;
}
.quiz-quantity-input{
width:70px;
text-align:center;
margin-left:.5rem;
margin-right:.5rem;
}
.quiz-quantity-input::-webkit-outer-spin-button,
.quiz-quantity-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.quiz-quantity-input{-moz-appearance:textfield;appearance:textfield;}
.quiz-quantity-btn{
font-size:26px;
cursor:pointer;
margin:0;
padding:0 .5rem;
background-color:transparent;
border:none;
color:#000;
-webkit-user-select:none;
user-select:none;
}
.quiz-radio-wrapper{margin-top:5px;}
.quiz-radio-control{
position:relative;
display:flex;
align-items:center;
margin:15px 0 0 0;
cursor:pointer;
font-family:'Roboto',Arial,sans-serif;
font-weight:300;
color:#000;
font-size:15px;
line-height:1;
}
@media screen and (max-width:640px){
.quiz-radio-control{font-size:14px;}
}
.quiz-radio-wrapper>.quiz-radio-control:first-child{margin-top:3px;}
.quiz-radio{
position:absolute;
z-index:-1;
opacity:0;
outline:none;
}
.quiz-radio-indicator{
position:relative;
display:inline-block;
vertical-align:middle;
height:20px;
width:20px;
border-color:#000;
border-style:solid;
border-width:2px;
box-sizing:border-box;
border-radius:50%;
margin-right:10px;
flex-shrink:0;
transition:all 0.2s;
opacity:.6;
}
.quiz-radio-indicator:after{
content:'';
width:10px;
height:10px;
background:#000;
border-radius:50%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
opacity:0;
transition:all 0.2s;
}
.quiz-radio-control .quiz-radio:checked ~ .quiz-radio-indicator:after{opacity:1;}
.quiz-radio-control .quiz-radio:checked ~ .quiz-radio-indicator{opacity:1;}
.quiz-radio:focus-visible ~ .quiz-radio-indicator{outline-color:#2015FF;outline-offset:4px;outline-style:auto;}
@media screen and (min-width:1024px){
.quiz-radio:focus-visible ~ .quiz-radio-indicator{box-shadow:0 0 0 3px rgba(0,150,255,1);}
}
/* R3.1: контур ошибок радио/чекбоксов присутствует всегда — прозрачный,
   при ошибке лишь перекрашивается в красный, layout не прыгает */
.quiz-step .form__group .quiz-radio-wrapper,
.quiz-step .form__group .quiz-check-list{
border:1px solid transparent;
}
.quiz-step .form__group .quiz-radio-wrapper{
padding:10px;
margin-top:0;
}
.quiz-step .form__group .quiz-check-list{
padding:10px;
}
.quiz-step .form__group.js-error-control-box .quiz-radio-wrapper,
.quiz-step .form__group.js-error-control-box .quiz-check-list{
border-color:red;
}
.quiz-ownvariant{margin:15px 0 0 0;}
.quiz-ownvariant-flex{
display:flex;
align-items:flex-start;
width:100%;
column-gap:unset;
}
.quiz-ownvariant-flex .quiz-radio-control{
display:flex;
align-items:center;
width:100%;
margin:0;
flex-shrink:0;
}
.quiz-ownvariant-input-wrapper{
display:flex;
align-items:center;
column-gap:10px;
width:100%;
}
.quiz-ownvariant-title{flex-shrink:0;}
.quiz-ownanswer{
display:none;
width:100%;
height:20px;
padding:0;
line-height:1;
border-bottom:1px solid #000;
box-sizing:border-box;
text-overflow:ellipsis;
font-family:'Roboto',Arial,sans-serif;
font-weight:300;
color:#000;
font-size:15px;
outline:none;
border-top:0;
border-right:0;
border-left:0;
border-radius:0;
background-color:transparent;
}
@media screen and (max-width:640px){
.quiz-ownanswer{font-size:14px;}
}
.quiz-check-list{
margin-bottom:0;
padding-left:0;
list-style:none;
}
.quiz-check-control{
display:table;
position:relative;
cursor:pointer;
margin:15px 0 0 0;
font-family:'Roboto',Arial,sans-serif;
font-weight:300;
color:#000;
font-size:15px;
line-height:1;
}
@media screen and (max-width:640px){
.quiz-check-control{font-size:14px;}
}
.quiz-check{
position:absolute;
z-index:-1;
opacity:0;
outline:none;
}
.quiz-check-indicator{
position:relative;
display:inline-block;
vertical-align:middle;
height:20px;
width:20px;
border:2px solid #000;
box-sizing:border-box;
margin-right:10px;
flex-shrink:0;
transition:all 0.2s;
opacity:.6;
}
.quiz-check-indicator:after{
content:'';
position:absolute;
display:none;
left:6px;
top:2px;
width:3px;
height:8px;
border:solid #000;
border-width:0 2px 2px 0;
transform:rotate(45deg);
}
.quiz-check-control .quiz-check:checked ~ .quiz-check-indicator{opacity:1;}
.quiz-check-control .quiz-check:checked ~ .quiz-check-indicator:after{display:block;}
.quiz-check:focus-visible ~ .quiz-check-indicator{outline-color:#2015FF;outline-offset:4px;outline-style:auto;}
@media screen and (min-width:1024px){
.quiz-check:focus-visible ~ .quiz-check-indicator{box-shadow:0 0 0 3px rgba(0,150,255,1);}
}
.quiz-step .form__group.js-error-control-box .quiz-check-control{border:none !important;padding:0;}
.quiz-check-hidden{border:none;}
.quiz-btns{
position:relative;
padding-left:45px;
padding-right:45px;
}
.quiz-btns:before,.quiz-btns:after{content:'';display:table;}
.quiz-btns:after{clear:both;}
.quiz-btn{
display:inline-block;
font-family:'Unbounded',Arial,sans-serif;
border:0 none;
text-align:center;
white-space:nowrap;
vertical-align:middle;
font-weight:700;
background-image:none;
cursor:pointer;
-webkit-appearance:none;
user-select:none;
box-sizing:border-box;
position:relative;
height:45px;
font-size:14px;
padding-left:30px;
padding-right:30px;
border-radius:0;
transition:opacity 0.3s;
outline:none;
}
.quiz-btn:focus,.quiz-btn:active{outline:none;}
.quiz-btn[disabled]{opacity:.6;pointer-events:none;}
.quiz-btn-table{width:100%;height:100%;}
.quiz-btn td{vertical-align:middle;position:relative;}
.quiz-btn-prev{
float:left;
color:#fff;
background-color:#cbcbcb;
border-radius:30px;
padding-left:45px;
}
.quiz-btn-next,.quiz-btn-result{
float:right;
overflow:hidden;
color:#fff;
background-color:#0e8054;
border-radius:30px;
padding-right:45px;
}
.quiz-btn-result{display:none;}
.quiz-btn-prev[disabled]{visibility:hidden;}
.quiz-btn-prev td:before{
content:"\00a0→";
position:absolute;
top:50%;
left:-23px;
font-family:Arial,Helvetica,sans-serif;
font-size:18px;
line-height:1.3;
transform:rotate(180deg) translateY(45%);
}
.quiz-btn-next td:after{
content:"\00a0→";
position:absolute;
top:50%;
font-family:Arial,Helvetica,sans-serif;
font-size:18px;
line-height:1;
transform:translateY(-55%);
}
@media screen and (max-width:640px){
.quiz-btns{padding-left:20px;padding-right:20px;}
.quiz-btn{white-space:normal;}
.quiz-btn-prev{padding-left:45px;padding-right:20px;}
.quiz-btn-next{padding-left:20px;padding-right:45px;}
}
@media screen and (max-width:480px){
.quiz-btn{height:50px;padding-left:20px;padding-right:20px;}
.quiz-btn-prev td:before,.quiz-btn-next td:after{display:none;}
}
@media screen and (max-width:400px){
.quiz-btn{font-size:12px;height:45px;}
}
.quiz-submit{
position:absolute;
right:45px;
/* R7: отступ кнопки «Получить расчет» от нижнего края квиза (было bottom:0 — кнопка упиралась в рамку). 20px — максимум, при котором кнопка не наезжает на блок согласия с рамкой ошибки (низ согласия в error-состоянии на 71px от края, кнопка 45-50px высотой). */
bottom:20px;
z-index:1;
display:none;
vertical-align:middle;
margin-top:45px;
text-align:left;
}
@media screen and (max-width:480px){
.quiz-submit{right:20px;}
}
.quiz-submit-btn{
font-family:'Unbounded',Arial,sans-serif;
text-align:center;
height:45px;
width:auto;
border:0 none;
font-size:14px;
padding-left:30px;
padding-right:30px;
-webkit-appearance:none;
font-weight:700;
white-space:nowrap;
background-image:none;
cursor:pointer;
margin:0;
box-sizing:border-box;
outline:none;
background:transparent;
position:relative;
transition:opacity 0.3s;
color:#fff;
background-color:#0e8054;
border-radius:30px;
}
.quiz-submit-btn[disabled]{opacity:.6;pointer-events:none;}
@media screen and (max-width:640px){
.quiz-submit-btn{width:100%;padding-left:20px;padding-right:20px;white-space:normal;}
}
@media screen and (max-width:480px){
.quiz-submit-btn{height:50px;}
}
.quiz-submit.is-shown{display:block;}
.quiz-step-capture{display:none;position:relative;}
.quiz-step-capture.is-active{display:block;}
.quiz-step-capture .form__group{display:block;}
@media screen and (min-width:980px){
.quiz-box-animate{
opacity:0;
transition-property:opacity,transform;
transition-duration:1s;
transition-timing-function:cubic-bezier(.19,1,.22,1);
backface-visibility:hidden;
}
.quiz-box-animate.is-anim-started{opacity:1;}
}
.form__inputsbox.is-hidden{visibility:hidden;}
.quiz-quantity-measure{
position:absolute;
visibility:hidden;
white-space:nowrap;
font-family:'Roboto',Arial,sans-serif;
}