/* Самостоятельные стили ипотечного блока для страницы Мариуполя. */
.ipoteka-section {
  padding: 64px 0;
  background: #f4f6fb;
  color: #3a3a3a;
}
.ipoteka-section .ipoteka-section__header { margin-bottom: 32px; }
.ipoteka-section .h1 { font-size: clamp(28px, 3vw, 48px); line-height: 1.15; margin: 0 0 16px; }
.ipoteka-section .h3 { font-size: 26px; line-height: 1.2; margin: 0 0 32px; }
.ipoteka-section .p1 { font-size: 18px; }
.ipoteka-section .p2 { font-size: 16px; }
.ipoteka-section .subtitle { font-size: 20px; font-weight: 600; }
.ipoteka-section .ipoteka-section__calculator .p2,
.ipoteka-section .ipoteka-section__card-label { color: #666; }
.ipoteka-section .input-with-range { position: relative; }
.ipoteka-section .input-with-range input[type="text"] {
  display: block;
  width: 100%;
  height: 56px;
  padding: 12px 52px 12px 48px;
  border: 1px solid #d4d8df;
  border-radius: 10px;
  background: #fff;
  color: #3a3a3a;
  font-size: 18px;
  outline-offset: 2px;
}
.ipoteka-section .input-with-range .inp-ot,
.ipoteka-section .input-with-range .inp-rub {
  position: absolute;
  top: 28px;
  transform: translateY(-50%);
  pointer-events: none;
  color: #666;
}
.ipoteka-section .input-with-range .inp-ot { left: 16px; }
.ipoteka-section .input-with-range .inp-rub { right: 16px; }
.ipoteka-section .input-with-range [data-range-input-container] {
  position: relative;
  height: 18px;
  margin: -4px 14px 0;
}
.ipoteka-section .input-with-range [data-range-input-active-line] {
  position: absolute;
  top: 4px;
  left: 0;
  height: 4px;
  background: #0a66dd;
  border-radius: 4px;
  pointer-events: none;
}
.ipoteka-section .input-with-range input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 12px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  accent-color: #0a66dd;
}
.ipoteka-section .button-primary {
  display: block;
  padding: 16px 12px;
  border: 0;
  border-radius: 10px;
  background: #0a66dd;
  color: #fff;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.ipoteka-section .button-primary:hover { background: #298df8; color: #fff; }
.ipoteka-section .ipoteka-section__offer { min-width: 0; }
.ipoteka-section .ipoteka-section__card { box-sizing: border-box; width: 100%; border: 1px solid #e1e4ea; }
.ipoteka-section .ipoteka-section__card.card-orange { background: #3a3a3a; color: #fff; }
.ipoteka-section .ipoteka-section__card.card-orange .ipoteka-section__card-label { color: #dedede; }
.ipoteka-section .ipoteka-section__card-lastp { font-size: 13px; }
.ipoteka-section .ipoteka-swiper { min-width: 0; overflow: hidden; }
.ipoteka-section .ipoteka-swiper-pagination { position: relative; margin-top: 18px; }
@media (min-width: 1024px) {
  .ipoteka-section .ipoteka-section__wrapper { flex-direction: row; align-items: stretch; gap: 30px; }
  .ipoteka-section .ipoteka-section__calculator { flex: 0 0 25%; min-width: 0; }
  .ipoteka-section .ipoteka-section__offer { flex: 1; display: flex; }
  .ipoteka-section .ipoteka-section__card { height: 100%; }
  .ipoteka-section .ipoteka-swiper { flex: 1; }
  .ipoteka-section .ipoteka-section__cards { display: flex; gap: 16px; align-items: stretch; }
  .ipoteka-section .ipoteka-section__card { flex: 1 1 0; min-width: 0; padding: 24px; }
  .ipoteka-section .ipoteka-swiper-pagination { display: none; }
}
@media (max-width: 1023px) {
  .ipoteka-section { padding: 48px 0; }
  .ipoteka-section .ipoteka-section__card { width: auto; }
}