/* family · sections/flat.css
   flat.html — страница одной квартиры: калькулятор, похожие квартиры */

/* ============ калькулятор ============ */
.calc-tabs{display:inline-flex;gap:.25rem;background:var(--paper-2);padding:.25rem;border-radius:.65rem;}
.calc-tab{padding:.55rem 1.1rem;border-radius:.45rem;font-size:.98rem;font-weight:600;
  color:rgba(23,36,29,.6);cursor:pointer;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;}
.calc-tab.is-active{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(23,36,29,.08);}

.calc-underline{border-bottom:1px solid var(--line);}

/* крупные числа (как в референсе) */
.calc-price{font-family:'Bitter',serif;font-weight:500;font-size:2.1rem;line-height:1;color:rgba(23,36,29,.35);}
.calc-input-num{font-family:'Bitter',serif;font-weight:500;font-size:2.1rem;line-height:1;
  color:var(--ink);background:transparent;border:none;outline:none;width:100%;padding:0;}
.calc-input-num:focus{color:var(--brass-2);}
.calc-input-num::placeholder{font-size:1.15rem;color:rgba(23,36,29,.35);font-family:'Golos Text',sans-serif;font-weight:400;}
.calc-suffix{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:2.1rem;line-height:1;color:var(--ink);}

/* Поля, которые заполняет посетитель: цена квартиры в базе не проставлена,
   поэтому её вводят руками — поле должно читаться как поле, а не как текст. */
.calc-field{display:flex;align-items:baseline;gap:.5rem;padding:.55rem .8rem;
  border:1px solid var(--line);border-radius:.6rem;background:var(--paper-2);
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease;}
.calc-field:hover{border-color:rgba(23,36,29,.28);}
.calc-field:focus-within{border-color:var(--brass);background:#fff;box-shadow:0 0 0 3px rgba(192,131,41,.12);}
.calc-field.is-primary{border-color:rgba(192,131,41,.45);background:rgba(192,131,41,.06);}
.calc-field.is-primary:focus-within{border-color:var(--brass);background:#fff;}

/* ползунок срока */
.calc-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;
  background:var(--line);outline:none;cursor:pointer;}
.calc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1.4rem;height:1.4rem;border-radius:50%;
  background:var(--brass);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 8px rgba(23,36,29,.25);}
.calc-range::-moz-range-thumb{width:1.4rem;height:1.4rem;border-radius:50%;background:var(--brass);
  cursor:pointer;border:3px solid #fff;box-shadow:0 2px 8px rgba(23,36,29,.25);}

/* выбор ставки єОселя */
.rate-opt{flex:1;padding:.6rem .5rem;border:1px solid var(--line);border-radius:.5rem;background:#fff;
  font-size:.92rem;line-height:1.35;cursor:pointer;text-align:center;transition:border-color .2s ease,background-color .2s ease;}
.rate-opt.is-active{border-color:var(--brass);background:rgba(192,131,41,.08);color:var(--brass-2);font-weight:600;}

/* Читаемость калькулятора: рядом с крупными полями и кнопками подписи и
   пояснения выглядели мелкими и блёклыми. Селекторы с #calc-section, чтобы
   перебить утилиты Tailwind (text-xs / opacity-50) только внутри блока. */
#calc-section .label{font-size:.82rem;letter-spacing:.09em;opacity:1;color:rgba(23,36,29,.65);}
#calc-section .label .opacity-60{opacity:1;color:rgba(23,36,29,.5);}
#calc-section .text-xs{font-size:.92rem;line-height:1.55;}
#calc-section #calcPriceHint,
#calc-section #calcFirstHint,
#calc-section #calcNote{opacity:1;color:rgba(23,36,29,.62);}
#calc-section #calcTermMin,#calc-section #calcTermMax{opacity:1;color:rgba(23,36,29,.5);}
#calc-section #calcResFirst,#calc-section #calcResTerm{font-size:1.3rem;}

/* карта результата */
.calc-result{background:#fff;border:1px solid var(--line);border-radius:.9rem;box-shadow:0 12px 40px rgba(23,36,29,.08);}
#calcResFirst,#calcResTerm{font-family:'Bitter',serif;}
.calc-monthly{font-family:'Bitter',serif;font-weight:500;font-size:2.6rem;line-height:1;color:var(--ink);}

/* стрелки галереи квартиры (классы-хуки flat-gallery-* — даём им позицию) */
.flat-gallery-prev{left:.8rem;}
.flat-gallery-next{right:.8rem;}

/* ============ похожие квартиры (карусель) ============ */
.similar-swiper{overflow:visible;}      /* стрелки/тень соседних карточек видны */
.similar-swiper .swiper-slide{height:auto;}
.similar-arrow{width:2.4rem;height:2.4rem;border-radius:.45rem;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:#fff;color:var(--ink);transition:all .2s ease;}
.similar-arrow:hover{background:var(--pine);border-color:var(--pine);color:#fff;}
.similar-arrow.swiper-button-disabled{opacity:.3;pointer-events:none;}