/* ==========================================================================
   ========== ОСНОВА / ЛЕЙАУТ ФОРМЫ =========================================
   ========================================================================== */
.authentic-form{
  display:flex; flex-wrap:wrap; gap:30px;
  background:#fff; border-radius:10px; overflow:hidden;
  width:100%; max-width:1200px; margin:0 auto;
  padding:clamp(40px,4vw,100px) 15px clamp(80px,6vw,140px) 15px;
}
.form-container{ flex:1; min-width:300px; padding:30px; }
@media (max-width:768px){ .form-container{ padding:0; } }
.benefits-container{ flex:1; min-width:300px; background:#f9f9f9; padding:30px; }

.form-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.form-title{ margin:0 0 10px; font-size:34px; line-height:1.2; font-weight:700; }
.form-steps{ font-size:14px; color:#7f8c8d; min-width:max-content; }

.step{ display:none; }
.step.active{ display:block; }

/* внутри формы карточка калькулятора без внешних ограничений ширины */
.authentic-form .form-container .calc--hero{ max-width:none !important; }

/* общий отступы у групп */
.form-group{ margin-bottom:18px; }

/* ==========================================================================
   ========== ПОЛЯ / ТЕКСТ / ВАЛИДАЦИЯ ======================================
   ========================================================================== */
label{ display:block; margin-bottom:8px; font-weight:600; color:#2c3e50; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"]{
  width:100%; padding:12px 15px; border:1px solid #ddd; border-radius:4px; font-size:16px;
  transition:border .3s;
}
input:focus{ border-color:#3498db; outline:0; }

.form-group input{
  width:100%; padding:12px 14px; border:1px solid #dfe3ea; border-radius:10px; outline:0;
  transition:box-shadow .2s, border-color .2s;
}
.form-group.invalid input{ border-color:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.12); }

.field-error{ display:none; margin-top:6px; font-size:12px; line-height:1.3; color:#dc2626; }
.form-group.invalid .field-error{ display:block; }

.form-group.invalid #region{ border-color:#e74c3c; }
.form-group .field-error{ display:none; color:#d93025; font-size:12px; margin-top:6px; }
.form-group.invalid .input, .form-group.invalid textarea, .form-group.invalid select{ border-color:#d93025; }

/* ==========================================================================
   ========== СПИСКИ/ПОЛЕЗНОЕ / PROMO =======================================
   ========================================================================== */
.benefits-list{ list-style:none; padding-left:0; }
.benefits-list li{ margin-bottom:15px; padding-left:30px; position:relative; }
.benefits-list li:before{ content:"✓"; position:absolute; left:0; color:#27ae60; font-weight:700; }

.promo-banner{ background:#dddddd; padding:15px 0; border-radius:8px; margin:25px 0; text-align:center; font-weight:700; }

/* ==========================================================================
   ========== МОДАЛ / ЛОАДЕР ================================================
   ========================================================================== */
.modal-overlay{
  display:none; position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,.7); backdrop-filter:blur(5px); z-index:1000;
  justify-content:center; align-items:center;
}
.modal-content{ background:#fff; padding:30px; border-radius:10px; text-align:center; width:300px; }
.loader{ width:100px; height:100px; margin:0 auto 20px; position:relative; }
.loader-circle{
  width:100%; height:100%; border:10px solid #f3f3f3; border-top:10px solid #3498db; border-radius:50%;
  animation:spin 2s linear infinite;
}
.loader-text{ font-size:24px; font-weight:700; margin-top:15px; }
@keyframes spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* ==========================================================================
   ========== АДАПТИВ БЛОКОВ ФОРМЫ (МОБИЛКИ) ================================
   ========================================================================== */
@media (max-width:768px){
  .authentic-form{ flex-direction:column; gap:16px; padding:24px 12px 48px; }
  .authentic-form > *{ min-width:0; width:100%; }
  .form-container{ padding:0; }
  .benefits-container{ padding:16px; }
  .form-header{ gap:12px; flex-wrap:wrap; }
  .calc__summary{ flex-direction:column; gap:15px; }
}

/* подстраховка от «широких» элементов */
.authentic-form *, .authentic-form *::before, .authentic-form *::after{ box-sizing:border-box; }
.authentic-form img, .authentic-form video{ max-width:100%; height:auto; display:block; }
.calc--hero{ max-width:100%; }

/* ==========================================================================
   ========== ПРОГРЕССБАР ФОРМЫ =============================================
   ========================================================================== */
.form-progress{ margin:16px 0 24px; }
.form-progress__track{ height:8px; background:#e9eef5; border-radius:999px; overflow:hidden; }
.form-progress__bar{ height:100%; width:0; background:#0b1533; transition:width .35s ease; border-radius:inherit; }

/* ==========================================================================
   ========== ПОДСКАЗКИ (РЕГИОН) ============================================
   ========================================================================== */
.suggest-list{ position:relative; z-index:5; }
.suggest-list .item{ background:#fff; border:1px solid #dfe3ea; border-top:0; padding:10px 12px; cursor:pointer; }
.suggest-list .item:first-child{ border-top:1px solid #dfe3ea; }
.suggest-list .item:hover, .suggest-list .item.active{ background:#fffbcc; }

/* ==========================================================================
   ========== ЧЕКБОКС СОГЛАСИЙ ==============================================
   ========================================================================== */
.form-agree{ margin-top:10px; }
.form-agree .agree-line{ display:flex; align-items:flex-start; gap:12px; }
.form-agree .agree-check{
  -webkit-appearance:none; appearance:none;
  margin:0; width:30px; height:30px;
  border:1px solid #dfe3ea; border-radius:7px; background:transparent;
  display:inline-grid; place-content:center; vertical-align:text-top; cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-agree .agree-check:hover{ border-color:#cfd6e2; }
.form-agree .agree-check:focus{ outline:none; }
.form-agree .agree-check:disabled{ opacity:.6; cursor:not-allowed; }
.form-agree .agree-check::after{
  content:""; width:12px; height:6px; border:2px solid #111; border-top:0; border-right:0;
  transform:rotate(-45deg) scale(0); transform-origin:center; transition:transform .12s ease-out;
}
.form-agree .agree-check:checked::after{ transform:rotate(-45deg) scale(1); }
.form-agree.invalid .agree-check{ border-color:#ef4444; box-shadow:0 0 0 3px rgba(220,38,38,.12); }
.form-agree .agree-text{ font-size:13px; line-height:1.45; }
.form-agree .agree-text a{ color:#2c3e50; text-decoration-line:underline; text-decoration-style:dotted; }
.form-agree .agree-text a:hover, .form-agree .agree-text a:focus, .form-agree .agree-text a:active{ color:#2c3e50; }
.form-agree .field-error{ display:none; color:#ef4444; font-size:12px; margin-top:6px; }
#showOffers.is-disabled, #showOffers[disabled]{ opacity:.6; cursor:not-allowed; filter:grayscale(10%); }
@media (max-width:768px){ .form-agree .agree-text{ line-height:1; } }

/* ==========================================================================
   ========== КАЛЬКУЛЯТОР: ПЕРЕКЛЮЧАТЕЛЬ И ДАТА (ВАЖНО) =====================
   ========================================================================== */
/* База «пилюли» (совместимо с главной) */
.loan-switch{
  display:flex; align-items:center;
  gap:8px; background:#f6f8fb; padding:6px; border-radius:999px;
}
/* Кнопки */
.loan-switch__btn{
  flex:1 1 0; min-width:0; white-space:nowrap;
  border:0; border-radius:999px; cursor:pointer;
  background:#e9eef5; color:#0b1533;
  font-weight:700; line-height:1;
  font-size:clamp(13px, 3.2vw, 16px);
  padding:clamp(8px, 2.2vw, 12px) clamp(12px, 3.4vw, 18px);
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.loan-switch__btn.is-active{ background:#0b1533; color:#fff; box-shadow:0 6px 16px rgba(11,21,51,.22); }

/* Вписываем «пилюлю» в карточку формы (точно как на главной) */
.authentic-form .calc--hero{ overflow:hidden; }
.authentic-form .calc--hero .loan-switch{
  width:100%; max-width:100%; box-sizing:border-box; margin:12px 0 16px;
}
.authentic-form .calc--hero .loan-switch__btn{
  flex:1 1 0; min-width:0; white-space:nowrap;
}

/* Узкие экраны — компактнее и без выезда */
@media (max-width:420px){
  .authentic-form .calc--hero{ padding-left:14px; padding-right:14px; }
  .authentic-form .calc--hero .loan-switch{ padding:5px; gap:6px; }
  .authentic-form .calc--hero .loan-switch__btn{ padding:8px 10px; font-size:clamp(12px, 3.6vw, 14px); }
}

/* Дата возврата — всегда в одну строку (единая версия, без дублей) */
#dateOut{
  display:inline-block; white-space:nowrap;
  font-size:clamp(14px, 3.5vw, 18px); line-height:1.2;
}

/* ==========================================================================
   ========== ПРОЧЕЕ ========================================================
   ========================================================================== */
/* делаем ссылку визуально неактивной (для /form, если нужно) */
.no-link{ pointer-events:none; cursor:default; text-decoration:none !important; }


/* === FIX: сделать «пилюлю» в форме идентичной главной ================== */
/* Контейнер тумблера внутри карточки формы — как на главной */
.authentic-form .calc--hero{ overflow:hidden; }
.authentic-form .calc--hero .loan-switch{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  /* те же внутренние отступы и зазор, что на главной */
  padding:6px;
  gap:8px;
  border-radius:999px;
  margin:12px 0 16px;
  background:#f6f8fb;
}

/* Кнопки тумблера — строго те же размеры, что на главной */
.authentic-form .calc--hero .loan-switch__btn{
  flex:1 1 0;
  min-width:0;
  white-space:nowrap;
  border:0;
  border-radius:999px;
  cursor:pointer;
  background:#e9eef5;
  color:#0b1533;
  font-weight:700;
  line-height:1;
  /* ВАЖНО: 1-в-1 с главной */
  font-size:clamp(13px, 3.2vw, 16px);
  padding:clamp(8px, 2.2vw, 12px) clamp(12px, 3.4vw, 18px);
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.authentic-form .calc--hero .loan-switch__btn.is-active{
  background:#0b1533;
  color:#fff;
  box-shadow:0 6px 16px rgba(11,21,51,.22);
}

/* Узкие экраны: ровно та же компактность, что на главной */
@media (max-width:420px){
  .authentic-form .calc--hero{ padding-left:14px; padding-right:14px; }
  .authentic-form .calc--hero .loan-switch{ padding:5px; gap:6px; }
  .authentic-form .calc--hero .loan-switch__btn{
    padding:12px 10px;
    font-size:clamp(12px, 3.6vw, 14px);
  }
}

/* Дата возврата — единая версия (чтобы не прыгал перенос) */
#dateOut{
  display:inline-block;
  white-space:nowrap;
  font-size:clamp(14px, 3.5vw, 18px);
  line-height:1.2;
}

/* === FIX: логотипы оплаты + подпись в форме (как на главной) ======== */
.authentic-form .benefits__pay{
  padding:16px 18px;
  width:100%;
  text-align:center;
}

.authentic-form .benefits__pay-list{
  display:flex !important;                 /* принудительно в строку */
  align-items:center;
  justify-content:center;
  gap:22px;
  width:100%;
  flex-wrap:nowrap;                         /* не ломаемся на столбик */
}

.authentic-form .benefits__pay-list img{
  height:24px;
  width:auto;
  flex:0 0 auto;
  display:block;
}

.authentic-form .benefits__pay-note{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #edf1f7;
  font-size:13px;
  color:#6b778c;
}

/* на очень узких экранах позволяем переноситься на 2 строки, но ровно */
@media (max-width:420px){
  .authentic-form .benefits__pay-list{ gap:16px; flex-wrap:wrap; }
}