/* ==========================================================================
   Кредитный калькулятор на главной (index.php).
   Все селекторы с префиксом gfmcalc- и внутри .gfmcalc-section, чтобы
   не пересекаться с assets/css/style.css и Bootstrap 3.
   ========================================================================== */

.gfmcalc-section{
  --gfmcalc-gold:#f9b707;
  --gfmcalc-gold-deep:#bd8700;
  --gfmcalc-navy:#012f5c;
  --gfmcalc-ink:#373737;
  --gfmcalc-muted:#5f6b79;
  --gfmcalc-bg:#EEF6FF;
  --gfmcalc-line:#ddd;

  padding:60px 0;
  font-family:"Hind",sans-serif;
  color:var(--gfmcalc-ink);
}
.gfmcalc-section *{box-sizing:border-box;}

/* ---------- Выбор продукта ---------- */
.gfmcalc-choose{
  padding:36px;background:var(--gfmcalc-bg);
  border:1px solid rgba(55,55,55,.12);border-radius:8px;color:var(--gfmcalc-ink);
}
.gfmcalc-choose[hidden]{display:none;}
.gfmcalc-switch{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;}
.gfmcalc-switch button{
  flex:1 1 260px;max-width:420px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:20px 24px;color:#fff;background:var(--gfmcalc-navy);
  border:2px solid var(--gfmcalc-navy);border-radius:12px;cursor:pointer;
  box-shadow:0 8px 18px rgba(1,47,92,.18);transition:background .15s,border-color .15s;
}
.gfmcalc-switch button:hover,
.gfmcalc-switch button:focus{background:#01213f;border-color:#01213f;outline:none;}
.gfmcalc-switch-name{font-family:"Poppins",sans-serif;font-size:20px;font-weight:700;line-height:1.2;}

/* ---------- Кнопка «Назад» ---------- */
/* Блок, а не float: иначе кнопка встаёт на строку с h2 и сбивает центровку. */
.gfmcalc-back{
  display:block;margin:0 auto 16px 0;
  padding:6px 14px;color:var(--gfmcalc-ink);background:#fff;
  border:1px solid var(--gfmcalc-line);border-radius:22px;
  font-family:"Poppins",sans-serif;font-size:14px;cursor:pointer;
}
.gfmcalc-back:hover,
.gfmcalc-back:focus{color:#fff;background:var(--gfmcalc-navy);border-color:var(--gfmcalc-navy);outline:none;}

.gfmcalc{
  margin:28px 0 0;padding:36px;background:var(--gfmcalc-bg);
  border:1px solid rgba(55,55,55,.12);border-radius:8px;color:var(--gfmcalc-ink);
}
.gfmcalc[hidden]{display:none;}

/* ---------- Заголовок ---------- */
.gfmcalc-head{text-align:center;margin-bottom:36px;}
.gfmcalc-head h2{
  font-family:"Poppins",sans-serif;color:var(--gfmcalc-ink);
  font-size:38px;font-weight:700;margin:0 0 22px;
}
.gfmcalc-head p{margin:0;color:#555;font-size:16px;line-height:1.5;}

/* ---------- Карточка ---------- */
.gfmcalc-card{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.92fr);gap:36px;
  padding:36px;background:#fff;border-radius:8px;box-shadow:0 16px 34px rgba(0,0,0,.08);
}
.gfmcalc-controls{padding-right:36px;border-right:1px solid #d8d8d8;}

/* ---------- Переключатель типа платежа ---------- */
.gfmcalc-tabs{display:flex;flex-wrap:wrap;gap:16px 20px;margin-bottom:26px;}
.gfmcalc-tabs button{
  min-height:40px;padding:8px 16px;color:var(--gfmcalc-ink);background:transparent;
  border:1px solid var(--gfmcalc-line);border-radius:22px;
  font-family:"Poppins",sans-serif;font-size:16px;cursor:pointer;
}
.gfmcalc-tabs button.gfmcalc-active{
  color:#fff;background:var(--gfmcalc-gold);border-color:var(--gfmcalc-gold);
}

/* ---------- Поля и ползунки ---------- */
.gfmcalc-label{
  display:block;margin:20px 0 12px;color:var(--gfmcalc-ink);
  font-family:"Poppins",sans-serif;font-size:22px;font-weight:700;line-height:1.25;
}
.gfmcalc-meta{display:flex;justify-content:space-between;color:var(--gfmcalc-ink);font-size:13px;margin-bottom:4px;}
.gfmcalc-meta strong{color:var(--gfmcalc-gold-deep);font-size:16px;font-weight:700;}
.gfmcalc-term{margin-bottom:26px;}

.gfmcalc input[type="range"]{
  --gfmcalc-fill:0%;width:100%;height:6px;border-radius:99px;padding:0;
  background:linear-gradient(to right,var(--gfmcalc-gold) 0%,var(--gfmcalc-gold) var(--gfmcalc-fill),var(--gfmcalc-ink) var(--gfmcalc-fill),var(--gfmcalc-ink) 100%);
  accent-color:var(--gfmcalc-gold);-webkit-appearance:none;appearance:none;cursor:pointer;
}
.gfmcalc input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--gfmcalc-gold);border:2px solid var(--gfmcalc-gold);box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.gfmcalc input[type="range"]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:var(--gfmcalc-gold);border:2px solid var(--gfmcalc-gold);box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.gfmcalc input[type="range"]::-moz-range-track{height:6px;border:none;background:transparent;}

.gfmcalc-input{
  width:100%;height:48px;margin-top:14px;padding:0 14px;color:var(--gfmcalc-ink);
  background:#fff;border:1px solid #b9c0d0;border-radius:8px;
  font-family:"Hind",sans-serif;font-size:16px;
}

/* ---------- Результат ---------- */
.gfmcalc-result{display:flex;flex-direction:column;}
.gfmcalc-payment{
  padding:22px;background:var(--gfmcalc-bg);border-radius:8px;text-align:center;
  color:var(--gfmcalc-ink);font-family:"Poppins",sans-serif;font-size:20px;font-weight:700;
}
.gfmcalc-payment-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:12px;}
.gfmcalc-payment-controls button{
  flex:0 0 40px;width:40px;height:40px;border:none;border-radius:50%;background:#fff;
  color:var(--gfmcalc-ink);font-size:28px;line-height:1;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.08);
}
.gfmcalc-payment-controls button:hover,
.gfmcalc-payment-controls button:focus{color:#fff;background:var(--gfmcalc-gold);outline:none;}
.gfmcalc-payment-controls strong{color:var(--gfmcalc-gold-deep);font-size:30px;line-height:1.2;white-space:nowrap;}

.gfmcalc-result dl{margin:22px 0 8px;}
.gfmcalc-result dl div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--gfmcalc-line);}
.gfmcalc-result dt{color:var(--gfmcalc-ink);font-family:"Poppins",sans-serif;font-size:20px;font-weight:700;}
.gfmcalc-result dd{margin:0;color:var(--gfmcalc-muted);font-size:24px;text-align:right;}

/* ---------- Вариант в боковой колонке (nashi-uslugi.php) ---------- */
.gfmcalc-aside{padding:0;}
.gfmcalc-aside .gfmcalc,
.gfmcalc-aside .gfmcalc-choose{margin:0;padding:20px;}
.gfmcalc-aside .gfmcalc-head{margin-bottom:20px;}
.gfmcalc-aside .gfmcalc-choose .gfmcalc-head{margin-bottom:24px;}
.gfmcalc-aside .gfmcalc-head h2{font-size:26px;margin-bottom:12px;}
.gfmcalc-aside .gfmcalc-head p{font-size:14px;}
.gfmcalc-aside .gfmcalc-card{grid-template-columns:1fr;gap:22px;padding:22px;}
.gfmcalc-aside .gfmcalc-controls{
  padding-right:0;padding-bottom:22px;
  border-right:none;border-bottom:1px solid #d8d8d8;
}
.gfmcalc-aside .gfmcalc-tabs{gap:10px;margin-bottom:20px;}
.gfmcalc-aside .gfmcalc-tabs button{font-size:14px;padding:6px 14px;}
.gfmcalc-aside .gfmcalc-label{font-size:18px;margin:16px 0 10px;}
.gfmcalc-aside .gfmcalc-meta{font-size:12px;}
.gfmcalc-aside .gfmcalc-meta strong{font-size:14px;}
.gfmcalc-aside .gfmcalc-payment{padding:18px;font-size:16px;}
.gfmcalc-aside .gfmcalc-payment-controls strong{font-size:24px;}
.gfmcalc-aside .gfmcalc-result dl div{padding:10px 0;}
.gfmcalc-aside .gfmcalc-result dt{font-size:16px;}
.gfmcalc-aside .gfmcalc-result dd{font-size:17px;}

/* Секция шире стандартного .container (1170px), колонки равные. */
@media(min-width:1200px){
  .about-section-s5 > .container{width:auto;max-width:1600px;padding-left:30px;padding-right:30px;}
  .about-section-s5 > .container > .row > .col-md-7,
  .about-section-s5 > .container > .row > .col-md-5{width:50%;}

  .gfmcalc-aside .gfmcalc,
  .gfmcalc-aside .gfmcalc-choose{padding:28px;}
  .gfmcalc-aside .gfmcalc-head h2{font-size:30px;}
  .gfmcalc-aside .gfmcalc-card{padding:28px;}
}

/* От 1400px карточка в два столбца — калькулятор шире и ниже.
   Блок платежа ужимается, иначе крупные суммы не влезают в узкий столбец. */
@media(min-width:1400px){
  .gfmcalc-aside .gfmcalc-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;}
  .gfmcalc-aside .gfmcalc-controls{
    padding-right:28px;padding-bottom:0;
    border-right:1px solid #d8d8d8;border-bottom:none;
  }
  .gfmcalc-aside .gfmcalc-label{font-size:20px;}
  .gfmcalc-aside .gfmcalc-payment{padding:18px 14px;font-size:15px;}
  .gfmcalc-aside .gfmcalc-payment-controls{gap:10px;}
  .gfmcalc-aside .gfmcalc-payment-controls button{flex:0 0 34px;width:34px;height:34px;font-size:24px;}
  .gfmcalc-aside .gfmcalc-payment-controls strong{font-size:20px;}
  .gfmcalc-aside .gfmcalc-result dt{font-size:17px;}
  .gfmcalc-aside .gfmcalc-result dd{font-size:18px;}
}

/* ---------- Адаптив ---------- */
@media(max-width:991px){
  .gfmcalc,
  .gfmcalc-choose{padding:24px 16px;}
  .gfmcalc-card{grid-template-columns:1fr;padding:24px;gap:24px;}
  .gfmcalc-controls{padding-right:0;border-right:none;border-bottom:1px solid #d8d8d8;padding-bottom:24px;}
}
@media(max-width:767px){
  .gfmcalc-section{padding:40px 0;}
  .gfmcalc-switch button{flex:1 1 100%;max-width:none;}
  .gfmcalc-head h2{font-size:30px;}
  .gfmcalc-card{padding:18px;}
  .gfmcalc-label{font-size:20px;}
  .gfmcalc-payment-controls strong{font-size:24px;}
  .gfmcalc-result dl div{align-items:flex-start;flex-direction:column;gap:6px;}
  .gfmcalc-result dd{text-align:left;font-size:22px;}
}