/* Start:/bitrix/templates/newdesign/components/bitrix/catalog.filter/inner/style.css?178700880220529*/
/* Property Filters Styles for Bitrix catalog.filter Component */

/* Hierarchical location styles */
.location-child {
  padding-left: 20px !important;
}

.location-child .location-child-text {
  color: #949494;
  font-size: 13px;
  font-style: italic;
}

.location-parent .location-parent-text {
  font-weight: 500;
}

.location-child:hover .location-child-text {
  color: #28ABD8;
}

/* Ensure child elements are visually distinct */
.dropdown-option.location-child {
  border-left: 2px solid #E0E0E0;
  margin-left: 10px;
}

/* Optimized Property Filters Styles */
/* Контейнер фильтра повторяет поведение сетки каталога (.property-catalog):
   max-width 1600 + центрирование, чтобы на больших экранах фильтр (вместе с
   серым фоном) не растягивался во всю ширину, а совпадал по краям с карточками. */
.property-filters {
  padding: 20px 0; /* Reduced from 40px */
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

/* Снимаем собственное ограничение .wrapper (1570) — ширину и отступы теперь
   задаёт .property-filters, а боковые отступы повторяют каталог: 40px в
   диапазоне 1201–1600, 20px ниже 1200, 0 выше 1600 (там работает max-width). */
.property-filters .wrapper {
  max-width: none;
}
@media (min-width: 1201px) and (max-width: 1600px) {
  .property-filters .wrapper {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (max-width: 1200px) {
  .property-filters .wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.filters-row {
  display: flex;
  gap: 20px; /* Reduced from 34px */
  align-items: center; /* Changed from 'end' to 'center' */
  margin-bottom: 20px; /* Reduced from 40px */
}

.filters-row-main {
  margin-bottom: 30px; /* Significantly reduced from 126px */
}

.filters-row-secondary {
  margin-bottom: 0;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Reduced from 12px */
}

.filter-label {
  font-family: 'Lora', serif;
  font-weight: 400;
  font-size: 14px; /* Reduced from 16px */
  line-height: 1.2;
  color: #737373;
  margin: 0;
}

/* Dropdown Styles */
.filter-dropdown {
  position: relative;
  width: 200px; /* Reduced from 223px */
}

.dropdown-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px; /* Reduced from 15px 24px */
  border: 1px solid #DFDFDF;
  border-radius: 99px;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
  height: 40px; /* Fixed height */
}

.dropdown-select:hover {
  border-color: #28ABD8;
}

.dropdown-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 14px; /* Reduced from 16px */
  line-height: 1.2;
  color: #1E1E1E;
}

.dropdown-icon {
  transition: transform 0.3s;
}

.filter-dropdown.open .dropdown-icon {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 45px; /* Adjusted from 59px */
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #DFDFDF;
  border-radius: 16px;
  padding: 12px 4px;
  z-index: 100;
  display: none;
  max-height: 200px;
  overflow-y: auto;
}

/* Special wide dropdown for location filter - IMPORTANT */
.filter-dropdown.location-dropdown .dropdown-menu {
  position: absolute !important;
  /* 352px — ширина списка из макета; на узких экранах не вылезаем за вьюпорт */
  width: 352px !important;
  min-width: 100% !important;
  max-width: calc(100vw - 40px) !important;
  max-height: 400px !important;
  left: 0 !important;
  top: 45px !important;
  display: none !important; /* Hidden by default */
  padding: 8px 0 !important;
  background: #fff !important;
  border: 1px solid #DFDFDF !important;
  border-radius: 16px !important;
  z-index: 1000 !important;
  overflow-y: auto !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Show location dropdown when open */
.filter-dropdown.location-dropdown.open .dropdown-menu {
  display: block !important;
}

/* Left column - Locations */
.location-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  width: 100% !important;
  flex: 1 !important;
}

/* Parent location */
.location-parent {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 8px 24px !important;
  border-radius: 24px !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
  margin-bottom: 0 !important;
  position: relative !important;
  user-select: none !important;
}

.location-parent-text {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  color: #1E1E1E !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
}

/* Мультивыбор локаций: нативный input прячем, рисуем свой квадрат 16x16.
   Галочка — экспорт из макета (checkbox-check.svg лежит рядом с этим файлом). */
.location-option .location-checkbox {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.location-checkbox-box {
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 2px !important;
  border: 1px solid #DFDFDF !important;
  background: #fff !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px 9px !important;
  transition: background-color 0.2s, border-color 0.2s !important;
}

.location-option .location-checkbox:checked ~ .location-checkbox-box {
  background-color: #28ABD8 !important;
  border-color: #28ABD8 !important;
  background-image: url('/bitrix/templates/newdesign/components/bitrix/catalog.filter/inner/checkbox-check.svg') !important;
}

/* Child locations */
.location-child {
  display: flex !important;
  align-items: center !important;
  padding: 4px 16px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
  margin-bottom: 2px !important;
}

.location-child-text {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: #737373 !important;
  line-height: 1.2 !important;
}

/* При мультивыборе в свёрнутом поле может быть длинный текст («Budva +2»
   или одно длинное имя) — не даём ему растянуть/сломать селект. */
.location-dropdown .dropdown-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hover effects */
.location-parent:hover {
  background: #F5F5F5;
}

.location-child:hover {
  background: #F0F0F0;
  color: #1E1E1E;
}

/* Selected state.
   У локаций выбор теперь показывает чекбокс, поэтому строку не заливаем —
   заливка осталась только для старых .location-child (подлокации). */
.location-child.selected {
  background: #28ABD8;
  color: #fff;
}

.location-child.selected .location-child-text {
  color: #fff;
}

.filter-dropdown.open .dropdown-menu {
  display: block;
}

.dropdown-option {
  padding: 6px 16px; /* Reduced padding */
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  color: #1E1E1E;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s;
}

.dropdown-option:hover {
  background: #f5f5f5;
}

.dropdown-option.active {
  background: #28ABD8;
  color: #fff;
}

/* Price Input Styles */
.price-inputs-container {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}

.price-input-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.price-input-label, .area-input-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: #737373;
  white-space: nowrap;
}

.price-input, .area-input {
  width: 90px;
  padding: 8px 12px;
  border: 1px solid #DFDFDF;
  border-radius: 20px;
  background: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #1E1E1E;
  outline: none;
  transition: border-color 0.3s;
  height: 40px;
  text-align: center;
}

.price-input:focus, .area-input:focus {
  border-color: #28ABD8;
}

.price-input::-webkit-inner-spin-button,
.price-input::-webkit-outer-spin-button,
.area-input::-webkit-inner-spin-button,
.area-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.price-input[type=number], .area-input[type=number] {
  -moz-appearance: textfield;
}

.price-currency, .area-unit {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #1E1E1E;
  font-weight: 500;
}

.price-separator, .area-separator {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #737373;
  margin: 0 5px;
  font-weight: 500;
}

/* Area Input Styles */
.area-inputs-container {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}

.area-input-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Price filter styling */
.price-filter {
  width: auto;
  min-width: 320px;
}

/* Area filter styling */
.area-filter {
  width: auto;
  min-width: 280px;
}

/* Tab Styles - Fixed for Bedrooms */
.filter-tabs {
  display: flex;
  gap: 4px; /* Reduced gap */
  padding: 2px;
  border: 1px solid #DFDFDF;
  border-radius: 99px;
  background: #fff;
  height: 40px; /* Reduced from 51px */
  align-items: center;
}

.bedrooms-filter .filter-tabs {
  width: auto;
  min-width: 350px; /* Reduced to fit better */
}

.tab-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px; /* Reduced padding */
  border: none;
  border-radius: 99px;
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 13px; /* Reduced from 14px */
  line-height: 1.2;
  color: #1E1E1E;
  cursor: pointer;
  transition: all 0.3s;
  height: calc(100% - 4px);
  white-space: nowrap; /* Prevent text wrapping */
  flex-shrink: 0; /* Prevent button shrinking */
}

/* Ensure Bedrooms buttons fit properly */
.bedrooms-filter .tab-button {
  min-width: 45px; /* Minimum width for each button */
  padding: 8px 12px; /* Slightly smaller padding */
}

.tab-button.active {
  background: #28ABD8;
  color: #fff;
}

.tab-button:hover:not(.active) {
  background: #f5f5f5;
}

/* Property Status Tabs */
.property-status-filter .filter-tabs {
  width: auto;
  min-width: 250px;
}

/* Search Input Styles */
.search-input-container {
  width: 180px; /* Reduced from 223px */
}

.search-input {
  width: 100%;
  padding: 10px 16px; /* Reduced padding */
  border: 1px solid #DFDFDF;
  border-radius: 99px;
  background: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  color: #1E1E1E;
  outline: none;
  transition: border-color 0.3s;
  height: 40px;
}

.search-input::placeholder {
  color: #949494;
}

.search-input:focus {
  border-color: #28ABD8;
}

/* Checkbox Styles */
.checkbox-container {
  display: flex;
  align-items: center;
  height: 40px; /* Reduced from 51px */
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.checkbox-input {
  display: none;
}

.checkbox-custom {
  width: 16px;
  height: 16px;
  border: 1px solid #DFDFDF;
  border-radius: 2px;
  background: #fff;
  position: relative;
  transition: all 0.3s;
  flex-shrink: 0;
}

.checkbox-input:checked + .checkbox-custom {
  background: #28ABD8;
  border-color: #28ABD8;
}

.checkbox-input:checked + .checkbox-custom::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}

.checkbox-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  color: #1E1E1E;
}

/* Filter Action Buttons - Updated to match design */
.filter-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  gap: 8px;
  width: 275px;
  height: 44px;
  flex: none;
  order: 1;
  flex-grow: 0;
}

/* Apply Button - Primary Button */
.apply-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  gap: 10px;
  width: 128px;
  height: 44px;
  background: #28ABD8;
  border-radius: 99px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;

  /* Typography */
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 130%; /* 18px */
  text-align: center;
  color: #FFFFFF;

  /* Layout */
  flex: none;
  order: 0;
  flex-grow: 0;
}

.apply-button:hover {
  background: #2196c7;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(40, 171, 216, 0.3);
}

.apply-button svg {
  width: 20px;
  height: 20px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

/* Reset Button - Secondary Button */
.reset-button {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  gap: 4px;
  width: 139px;
  height: 44px;
  border: 1px solid #28ABD8;
  border-radius: 99px;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;

  /* Typography */
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 130%; /* 18px */
  text-align: center;
  color: #28ABD8;

  /* Layout */
  flex: none;
  order: 1;
  flex-grow: 0;
}

.reset-button:hover {
  background: #28ABD8;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(40, 171, 216, 0.3);
}

.reset-button:hover svg path {
  stroke: #FFFFFF;
}

.reset-button svg {
  width: 20px;
  height: 20px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

/* Responsive Design */
@media (max-width: 1400px) {
  .filters-row {
    flex-wrap: wrap;
    gap: 15px;
  }

  .filters-row-main {
    margin-bottom: 20px;
  }

  .bedrooms-filter .filter-tabs {
    min-width: 320px;
  }
}

@media (max-width: 768px) {
  .property-filters {
    padding: 15px 0;
  }

  .filters-row {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .filters-row-main {
    margin-bottom: 20px;
  }

  .filter-group {
    width: 100% !important;
  }

  .filter-dropdown,
  .search-input-container,
  .price-filter,
  .area-filter,
  .bedrooms-filter .filter-tabs {
    width: 100%;
    min-width: unset;
  }

  .filter-tabs {
    flex-wrap: wrap;
    height: auto;
    padding: 4px;
  }

  .tab-button {
    flex: 1;
    min-width: 50px;
  }

  .filter-actions {
    width: 100%;
    justify-content: center;
    gap: 12px;
  }

  .apply-button,
  .reset-button {
    width: 48%;
    min-width: 120px;
    justify-content: center;
  }
}
/* Кнопка Apply скрыта: фильтр применяется автоматически при изменении полей
   (см. setupAutoApply в template.php), поэтому кнопка дублирует поведение.
   Скрываем стилями, а не удаляем разметку: обработчик автоприменения
   опирается на неё как на запасной путь, если JS-события не сработают. */
/* Кнопка Apply убрана из разметки (см. template.php) — правило оставлено
   на случай, если её вернут: автоприменение делает её лишней. */
.apply-button { display: none !important; }

/* Reset остался единственной кнопкой — прижимаем блок действий к левому краю,
   иначе он висел бы там, где раньше был Apply. */
.filter-actions { justify-content: flex-start !important; }
.filter-actions .reset-button { margin-left: 0 !important; }

/* ============================================================
   Диапазон цены и площади — макет Figma node 3881:154569.
   Пилюля с подписью, под ней двойной слайдер на нижней границе.
   ============================================================ */
/* Высота ровно как у остальных полей фильтра: .dropdown-select задан
   height: 40px, поэтому и здесь 40. Задаём явно, а не вертикальными
   паддингами: подпись внутри меняет длину, высота за ней плыть не должна. */
.cmm-range {
    position: relative; display: flex; align-items: center; justify-content: center;
    gap: 24px; box-sizing: border-box; height: 40px; padding: 0 16px; background: #fff;
    border: 1px solid #E5E5E5; border-radius: 99px;
}
.cmm-range__text {
    width: 220px; text-align: center; white-space: nowrap;
    font: 400 14px/1.3 "Montserrat", sans-serif; color: #1E1E1E;
}
/* Слайдер лежит на нижней границе пилюли — как в макете (185px по центру). */
/* Слайдер тянем почти во всю ширину поля, отступая на радиус скругления,
   чтобы бегунки в крайних положениях не выходили за пилюлю. */
.cmm-range__slider {
    position: absolute; left: 20px; right: 20px; transform: none;
    bottom: -8px; width: auto; height: 16px;
}
@media (max-width: 1250px) { .cmm-range { height: 40px; } }
.cmm-range__track, .cmm-range__fill {
    position: absolute; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px;
}
.cmm-range__track { left: 0; right: 0; background: #E5E5E5; }
.cmm-range__fill  { background: #28ABD8; }

/* Две накладывающиеся range-полосы: сами инпуты кликов не ловят,
   ловят только бегунки — иначе верхний перекрывал бы нижний. */
.cmm-range__thumb {
    position: absolute; left: 0; top: 0; width: 100%; height: 16px; margin: 0;
    -webkit-appearance: none; appearance: none; background: transparent;
    pointer-events: none;
}
.cmm-range__thumb:focus { outline: none; }
.cmm-range__thumb::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; pointer-events: auto;
    width: 16px; height: 16px; border-radius: 50%;
    background: #28ABD8; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2);
    cursor: pointer;
}
.cmm-range__thumb::-moz-range-thumb {
    pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
    background: #28ABD8; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2);
    cursor: pointer;
}
.cmm-range__thumb::-webkit-slider-runnable-track,
.cmm-range__thumb::-moz-range-track { background: transparent; border: 0; }

@media (max-width: 1250px) {
    .cmm-range { padding: 12px 14px; }
    .cmm-range__text { width: 180px; font-size: 13px; }
    .cmm-range__slider { left: 14px; right: 14px; }
}
@media (max-width: 768px) {
    .cmm-range__text { width: 100%; }
    .cmm-range__slider { left: 12px; right: 12px; }
}

/* Подзаголовок группы в выпадашке локаций (SEF-навигация): на странице
   города список содержит и города, и районы текущего города — район-группа
   отделяется этим некликабельным заголовком. */
.dropdown-group-label {
  padding: 10px 16px 4px;
  font-family: 'Lora', serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #949494;
  border-top: 1px solid #EFEFEF;
  margin-top: 6px;
  cursor: default;
}

/* Первый заголовок группы в меню — без верхней линии-отбивки */
.dropdown-menu .dropdown-group-label:first-child,
.location-column .dropdown-group-label:first-child {
  border-top: 0;
  margin-top: 0;
}

/* End */


/* Start:/bitrix/templates/newdesign/components/bitrix/catalog.section/offer/style.css?178661186524742*/
.catalog-price {
	 color:red;
}
.catalog-price {
	 color:red;
}
div.catalog-section table td {
	padding-right:10px;
	padding-top:10px;
       font-size: 12px;
       color:#333;
}
div.catalog-section table td h3 {margin-top:0px; padding-top:0px;}
div.properties {display:block; width:450px; margin-top:15px;margin-bottom:15px;}
div.property-name {padding:4px 2px;  width:80px; float:left; border-bottom:1px solid #f0f0f0;color:#999;}
div.property-value {padding:4px 2px;  width:120px; float:left; border-bottom:1px solid #f0f0f0;}

.price_s {color:black; font-size:24px;}

.card-body {color:#000!important}
.card-body h3 a {color:#144982!important; font-size:20px}

.read-more a {border:1px solid #333333; border-radius:3px; margin-top:24px; padding: 8px 10px; font-size:16px!important;}

div.label-offer.bg-red {top:auto;bottom:0px!important;width:100%;border-radius:0px; font-weight:bold; font-size:14px;background: linear-gradient(
90deg, red 0%, orange 100%);}

div.flame {position:absolute;bottom:0px; left:0px;}
div.label-hot {position:absolute; top:-15px; right:20px; z-index:6;}

/* Полные стили новых карточек */
:root {
    --primary-color: #28ABD8;
    --white: #FFFFFF;
    --black: #000000;
    --text-dark: #1E1E1E;
    --text-grey: #737373;
    --text-light: #949494;
    --border-color: #DFDFDF;
    --bg-light: #F4F4F4;
    --closed-color: #949494;
}

/* Сетка каталога. Базовое состояние — 3 карточки в ряд (экраны до 1512
   включительно, т.е. включая MacBook 14"). Раскладка по брейкпоинтам:
     > 1512    — 4 карточки (см. @media min-width: 1513px)
     1201–1512 — 3 карточки (это правило)
     769–1200  — 2 карточки
     <= 768    — 1 карточка
   --card-image-height задаёт высоту фото карточки и переопределяется в
   брейкпоинтах, чтобы пропорции кадра оставались близкими к исходным 496×338
   при разной ширине карточки. */
.demo-container,
.property-catalog {
    --card-image-height: 338px;
    max-width: 1600px !important;
    margin: 0 auto !important;
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}

/* Отступы по краям на экранах уже контейнера (напр. 1440), чтобы карточки не
   прилипали к краям. 40px — увеличенный боковой отступ.
   Диапазон 1201–1600: ниже 1200 работает свой padding:20px, выше 1600 контейнер
   центрируется по max-width. box-sizing:border-box (глобальный), overflow не даёт. */
@media (min-width: 1201px) and (max-width: 1600px) {
    .demo-container,
    .property-catalog {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* Property Card */
.property-card {
    background: var(--white) !important;
    border-radius: 40px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    cursor: pointer !important;
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    box-shadow: none !important;
}

.property-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
}

/* Image Section */
.property-image-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.property-image-container {
    position: relative !important;
    height: var(--card-image-height, 338px) !important;
    max-height: none !important;
    border-radius: 40px 40px 0 0 !important;
    overflow: hidden !important;
}

/* Слайд внутри slick-слайдера жёстко зафиксирован на 338px в общем
   /newdesign/css/style.css — подчиняем его той же переменной, иначе при
   уменьшении высоты контейнера картинка обрезается. */
.property-catalog .fs5_sliders_slide_item .fs5_sliders_slide_item_img_wrap .fs5_sliders_slide_item_img_wrap_slide .fs5_sliders_slide_item_img_wrap_slide_img {
    height: var(--card-image-height, 338px);
}

.property-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Image Pagination */
.image-pagination {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(5px) !important;
    padding: 2px 4px !important;
    border-radius: 99px !important;
}

.pagination-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--bg-light) !important;
    border: 1px solid var(--bg-light) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    position: relative !important;
}

.pagination-dot.active {
    width: 12px !important;
    height: 12px !important;
    background: transparent !important;
    border-color: var(--white) !important;
}

.pagination-dot.active .dot-inner {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 4px !important;
    height: 4px !important;
    background: var(--white) !important;
    border-radius: 50% !important;
}

/* Property ID Badge */
.property-badge-id {
    position: absolute !important;
    top: 18px !important;
    left: 24px !important;
    background: rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(50px) !important;
    border: 1px solid var(--white) !important;
    padding: 8px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 99px !important;
    color: var(--white) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}

/* Action Buttons */
.property-actions {
    position: absolute !important;
    top: 18px !important;
    right: 24px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    z-index: 10 !important;
    height: 34px !important;
}

.action-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.3s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    position: static !important;
    vertical-align: top !important;
}

.action-btn:hover {
    transform: scale(1.1) !important;
}

.action-btn svg {
    width: 24px !important;
    height: 24px !important;
}

/* Wishlist heart icon styles */
.favorite-btn svg path {
    stroke: white;
    stroke-width: 2px;
    transition: all 0.3s ease;
    /* fill наследуется от inline атрибутов */
}

/* Not in wishlist - empty heart */
.favorite-btn:not(.favorited):not(.active):not(.in-wishlist) svg path {
    fill: none !important;
    stroke: white !important;
}

.favorite-btn:hover svg path {
    stroke: #ff4757 !important;
}

/* Heart filled when in wishlist */
.favorite-btn.favorited svg path,
.favorite-btn.active svg path,
.favorite-btn.in-wishlist svg path {
    fill: #ff4757 !important;
    stroke: #ff4757 !important;
}

/* Background glow when favorited */
.favorite-btn.favorited,
.favorite-btn.active,
.favorite-btn.in-wishlist {
    background: rgba(255, 71, 87, 0.1) !important;
    border-radius: 50% !important;
}

/* Offer Badges.
   Привязан к низу картинки (41px = 338 − 250 − 47 из прежней вёрстки), чтобы
   позиция не съезжала при смене высоты фото в брейкпоинтах. */
.property-badge-offer {
    position: absolute !important;
    top: auto !important;
    bottom: 41px !important;
    left: 0 !important;
    background: var(--primary-color) !important;
    color: var(--white) !important;
    padding: 0 40px !important;
    height: 47px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 99px 99px 0 !important;
    font-family: 'Lora', serif !important;
    font-size: 24px !important;
    font-weight: 500 !important;
}

/* Content Section */
.property-content {
    padding: 12px 16px 24px 16px !important;
    border: 1px solid #DFDFDF !important;
    border-top: none !important;
    border-radius: 0 0 40px 40px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    flex: 1 !important;
}

.property-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* Property Title.
   Montserrat — как в карточке слайдера #fs5. Раньше здесь была Lora, но её
   всё равно перебивал css/style.css (.property-catalog .property-title). */
.property-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--text-dark) !important;
}

/* Property Tags */
.property-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    min-height: 62px !important;
    align-content: center !important;
}

.property-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 12px !important;
    border: 1px solid #DFDFDF !important;
    border-radius: 99px !important;
    /* Montserrat — как плашки характеристик в карточке слайдера #fs5 */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--text-grey) !important;
    white-space: nowrap !important;
}

.tag-icon {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

/* Property Footer */
.property-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

.property-price {
    /* Montserrat — как цена в карточке слайдера #fs5 */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--text-dark) !important;
    flex: 1 !important;
}

/* More Info Button */
.btn-more-info {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 12px !important;
    height: 44px !important;
    min-width: 140px !important;
    background: var(--white) !important;
    border: 1px solid var(--primary-color) !important;
    border-radius: 99px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.btn-more-info:hover {
    background: var(--primary-color) !important;
}

.btn-more-info span {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--primary-color) !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.btn-more-info:hover span {
    color: var(--white) !important;
}

.btn-more-info svg {
    width: 20px !important;
    height: 20px !important;
}

.btn-more-info:hover svg path {
    stroke: var(--white) !important;
}

/* Responsive Design */

/* Шире 1512 — 4 карточки в ряд. Карточка становится уже (340px при 1513,
   382px начиная с 1600, где контейнер упирается в max-width), поэтому вместе
   с колонками уменьшаем высоту фото. */
@media (min-width: 1513px) {
    .demo-container,
    .property-catalog {
        --card-image-height: 260px;
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* 1513–1600: контейнер ещё не дорос до max-width, карточки самые узкие —
   ужимаем типографику, иначе цена и кнопка «подробнее» не встают в одну
   строку футера. */
@media (min-width: 1513px) and (max-width: 1600px) {
    .property-catalog .property-title {
        font-size: 20px !important;
    }

    .property-tag {
        font-size: 14px !important;
        padding: 4px 8px !important;
    }

    .property-price {
        font-size: 20px !important;
    }

    .btn-more-info {
        min-width: 0 !important;
        height: 40px !important;
        padding: 8px 10px !important;
    }

    .btn-more-info span {
        font-size: 13px !important;
    }

    .property-badge-offer {
        font-size: 20px !important;
        padding: 0 24px !important;
        height: 40px !important;
        bottom: 36px !important;
    }
}

/* 1201–1512 — 3 карточки (базовая сетка), но карточка тут 358–461px против
   517px на 1600, поэтому фото чуть ниже. */
@media (min-width: 1201px) and (max-width: 1512px) {
    .demo-container,
    .property-catalog {
        --card-image-height: 300px;
    }

    .property-badge-offer {
        bottom: 38px !important;
    }
}

@media (max-width: 1200px) {
    .demo-container,
    .property-catalog {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        padding: 20px !important;
    }

    .property-card {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .demo-container,
    .property-catalog {
        --card-image-height: 280px;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .property-card {
        border-radius: 24px !important;
    }

    .property-image-container {
        border-radius: 24px 24px 0 0 !important;
    }

    .property-content {
        border-radius: 0 0 24px 24px !important;
        padding: 12px 12px 20px 12px !important;
    }

    .property-title {
        font-size: 20px !important;
    }

    .property-badge-offer {
        font-size: 20px !important;
        padding: 0 24px !important;
        height: 40px !important;
    }

    .property-tags {
        gap: 4px !important;
    }

    .property-tag {
        font-size: 14px !important;
        padding: 4px 8px !important;
    }

    .property-price {
        font-size: 20px !important;
    }
}

/* Share popup — копия логики и оформления с детальной страницы объекта
   (.real_estate_top_big_im_btns_share_abs в /newdesign/css/style.css:9803).
   Здесь — переоформлено под контекст карточки: меньшие отступы,
   попап появляется под кнопкой share, остаётся внутри картинки 338px. */
.property-actions .share-wrap {
    position: relative !important;
    display: inline-flex !important;
    width: 34px !important;
    height: 34px !important;
}
.property-actions .property-share-abs {
    position: absolute;
    top: calc(100% + 8px);
    right: -8px;
    min-width: 188px;
    padding: 28px 24px 20px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.18);
    z-index: 20;
    display: none;
    text-align: left;
}
.property-actions .property-share-abs.is-open {
    display: block;
}
.property-actions .property-share-abs .property-share-abs-cls {
    position: absolute;
    width: 28px;
    height: 28px;
    top: 6px;
    right: 6px;
    cursor: pointer;
}
.property-actions .property-share-abs .property-share-abs-cls:before,
.property-actions .property-share-abs .property-share-abs-cls:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 2px;
    border-radius: 6px;
    background: #28ABD8;
}
.property-actions .property-share-abs .property-share-abs-cls:before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.property-actions .property-share-abs .property-share-abs-cls:after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.property-actions .property-share-abs a {
    display: block;
    margin-bottom: 16px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #1E1E1E;
}
.property-actions .property-share-abs a:last-child {
    margin-bottom: 0;
}
.property-actions .property-share-abs a .property-share-abs-item {
    position: relative;
    padding-left: 36px;
    padding-right: 28px;
    line-height: 28px;
    cursor: pointer;
}
.property-actions .property-share-abs a .property-share-abs-item:before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: url("/bitrix/templates/newdesign/img/arrow-redo-outline.png") no-repeat center / contain;
}
.property-actions .property-share-abs a .property-share-abs-item:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.property-actions .property-share-abs a .property-share-abs-item-tg:after {
    background-image: url("/bitrix/templates/newdesign/img/Telegram_2019_Logo.png");
}
.property-actions .property-share-abs a .property-share-abs-item-wht:after {
    background-image: url("/bitrix/templates/newdesign/img/WhatsApp.png");
}

/* ============================================================
   Единая ширина контента листингов каталога.
   Фильтр и сетка карточек идут с одинаковыми полями от края экрана,
   чтобы карточки шли ровно под фильтром. Правило живёт здесь, потому что
   этот файл подключается на всех страницах /sale/** — и с новым фильтром
   (шаблон budva), и со старым (inner).
   Ступени: 82 / 64 / 40 / 16 по макету.
   ============================================================ */
.property-filters,
#buy_page > .wrapper,
.cmm-found,
.property-catalog {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 82px !important;
    padding-right: 82px !important;
}
@media (max-width: 1440px) {
    .property-filters,
    #buy_page > .wrapper,
    .cmm-found,
    .property-catalog { padding-left: 64px !important; padding-right: 64px !important; }
}
@media (max-width: 1250px) {
    .property-filters,
    #buy_page > .wrapper,
    .cmm-found,
    .property-catalog { padding-left: 40px !important; padding-right: 40px !important; }
}
@media (max-width: 768px) {
    .property-filters,
    #buy_page > .wrapper,
    .cmm-found,
    .property-catalog { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Блок «N properties found» с активными фильтрами — макет node 4453:154149. */
.cmm-found {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    margin: 0 0 24px; font-family: "Montserrat", sans-serif;
}
.cmm-found__count { margin: 0; font: 400 16px/1.3 "Montserrat", sans-serif; color: #4B4B4B; }
.cmm-found__chip {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    padding: 4px 12px; border: 1px solid #DFDFDF; border-radius: 99px;
    font: 400 14px/1.3 "Montserrat", sans-serif; color: #1E1E1E; text-decoration: none;
}
.cmm-found__chip:hover { border-color: #28ABD8; }
.cmm-found__chip svg { flex: none; }
@media (max-width: 768px) {
    .cmm-found { gap: 8px; margin-bottom: 16px; }
    .cmm-found__count { font-size: 14px; }
    .cmm-found__chip { font-size: 13px; padding: 4px 10px; }
}

/* Разделительная линия между фильтром и карточками: отступает от краёв так же,
   как фильтр и сетка. Через margin, а не padding: у padding граница всё равно
   тянулась бы на всю ширину. На страницах с новым фильтром линия скрыта
   (см. catalog.filter/budva/style.css) — там её в макете нет. */
.line_br { width: auto !important; margin-left: 82px !important; margin-right: 82px !important; }
@media (max-width: 1440px) { .line_br { margin-left: 64px !important; margin-right: 64px !important; } }
@media (max-width: 1250px) { .line_br { margin-left: 40px !important; margin-right: 40px !important; } }
@media (max-width: 768px)  { .line_br { margin-left: 16px !important; margin-right: 16px !important; } }

/* Внутренний .wrapper старого фильтра добавлял свои 40px поверх общих полей,
   из-за чего «Location» уезжал вправо относительно хлебных крошек. Поля
   задаёт внешний .property-filters, внутренний обнуляем — тогда левый край
   первого поля совпадает с крошками. */
.property-filters > .wrapper {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================================
   Ограничение ширины контента на страницах группы /sale/.
   Резиновая раскладка на широких мониторах разгоняла фильтр и сетку
   карточек во всю ширину экрана, тогда как шапка сайта (header .wrapper)
   упирается в 1568px. Здесь колонка листинга получает тот же предел, так
   что левый край фильтра и первой карточки встаёт ровно под логотипом.
   Хук — класс .page-sale на <body> (header.php): этот файл подключается и
   на /rent/**, а там ширину не трогаем.
   До 1568px включительно всё как прежде: резина с полями 82/64/40/16;
   выше — фиксированные 1568 по центру и поля не нужны (их роль играют
   собственные поля центрирования), поэтому обнуляем.
   ============================================================ */
body.page-sale .property-filters,
body.page-sale #buy_page > .wrapper,
body.page-sale .cmm-found,
body.page-sale .property-catalog {
    max-width: 1568px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (min-width: 1569px) {
    body.page-sale .property-filters,
    body.page-sale #buy_page > .wrapper,
    body.page-sale .cmm-found,
    body.page-sale .property-catalog {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Разделитель между фильтром и карточками: у него ширина задаётся
       margin'ами, поэтому тут переводим его на ту же колонку 1568. */
    body.page-sale .line_br {
        max-width: 1568px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* End */
/* /bitrix/templates/newdesign/components/bitrix/catalog.filter/inner/style.css?178700880220529 */
/* /bitrix/templates/newdesign/components/bitrix/catalog.section/offer/style.css?178661186524742 */