/* 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.section/offer/style.css?178661186524742 */