@font-face {
    font-family: 'UniqueFont';
    src: url('/static/other/fonts/UniqueFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "FiraGO";
    src: url("/static/other/fonts/FiraGO-Medium.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    unicode-range: U+10D0-10FF, U+1C90-1CBF;
}

:root {

    --container-width: 1320px;
    --container-gap: 1rem;
    --container-gap-mobile: .5rem;

    --modal-width: 880px;

    --space-4: 0.25rem;
    --space-8: 0.5rem;
    --space-12: 0.75rem;
    --space-16: 1rem;
    --space-20: 1.25rem;
    --space-24: 1.5rem;

    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-full: 9999px;


    --ft-main: clamp(14px, 0.8dvw + 10px, 18px);


    --c-bg: #f2f4f6;
    --c-white: #ffffff;
    --c-primary-dark: #c1051e;
    --c-primary: #d1153b;
    --c-light-gray: #e1e1e1;
    --c-dark-gray: #8492A5;
    --c-m-gray: #666;
    --c-mutted-gray: #444;
    --c-black: #000000;
    --c-icons: #f5f5f5;


    --c-leaflet-red: var(--c-primary);
    --c-leaflet-orange: #eb5e00;
    --c-leaflet-yellow: #daa400;
    --c-leaflet-yellow-disabled: #F1DC9E;
    --c-leaflet-blue: #006dda;
    --c-leaflet-green: #00a71d;
    --c-leaflet-green-disabled: #99DCA5;
    --c-leaflet-gray: var(--c-m-gray);
    --c-zone-red: var(--c-leaflet-red);
    --c-zone-orange: var(--c-leaflet-orange);
    --c-zone-yellow: var(--c-leaflet-yellow);
    --c-zone-blue: var(--c-leaflet-blue);
    --c-zone-green: var(--c-leaflet-green);
    --c-zone-gray: var(--c-leaflet-gray);
}

*, *::before, *::after {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    height: 100%;
    scroll-behavior: smooth;
}

input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--c-bg);
    font-family: 'UniqueFont', 'FiraGO', sans-serif;
    line-height: 1.5;
    color: var(--c-black);
    overflow-x: hidden;
}

body.page-with-map {
    min-width: auto;
    height: 100dvh;
    width: 100dvw;
    overflow-y: hidden;
}

.container {
    width: 100%;
    flex: 1;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-gap);
    padding-right: var(--container-gap);
}

.page-with-map .container {
    flex: 0;
}

.container.map-container {
    flex: 1;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    max-height: 100%;
    display: flex;
    flex-direction: row;
}

.map-container .container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    width: calc(100% - 2rem);
    pointer-events: none;
    padding-left: var(--space-8);
    transition: transform 0.15s ease, width 0.15s ease, left 0.15s ease;
}

@media (max-width: 1800px) {
    .map-container .filter-map-box {
        width: 3.5rem;
        padding: 0 var(--space-16);
        justify-content: center;
    }

    .map-container .filter-map-text {
        display: none;
    }
}

@media (max-width: 1700px) {
    body.page-with-mobile-filters .map-container .filter-white-box .filter-item:not(:first-child),
    body.page-with-mobile-filters .map-container .filter-white-box .filter-vertical-line {
        display: none;
    }
}

*::-webkit-scrollbar {
    display: none;
}

* {
    box-sizing: border-box;
}

summary {
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}


h4, h3 {
    font-weight: normal;
}

button,
.filter-button,
.apply-btn,
.room-btn {
    -webkit-tap-highlight-color: transparent;
}

.primary:active,
.apply-btn:active{
    background-color: var(--c-primary-dark);
    outline: none;
}

.price-btn:active,
.room-btn:active,
.lang-btn:active {
    background-color: var(--c-light-gray);
    border-color: transparent;
    box-shadow: none;
    transform: none;
    outline: none;
}

.room-btn, .price-btn {
    background: var(--c-bg);
    border: none;
    border-radius: var(--r-sm);
    font-size: .9rem;
    color: var(--c-m-gray);
    cursor: pointer;
    height: 2.5rem;
    padding: 0 var(--space-16);
    min-width: 2.5rem;
    text-wrap: nowrap;
    transition: background 0.2s ease, transform 0.15s ease;
}

.room-btn:hover, .room-btn:active {
    background-color: #efefef;
}

.price-btn {
    padding: var(--space-8);
}

/* --- MAP --- */
.view-hidden {
    display: none;
}
.mapboxgl-ctrl, .mapboxgl-ctrl-group, .mapboxgl-control-container{
    color: var(--c-black);
}

.hidden {
    display: none !important;
}

.body-hidden {
    visibility: hidden;
}

#map, #leaflet-map {
    height: 100%;
    width: 100%;
}

#leaflet-map {
    position: relative;
}

#map-view, #leaflet-view {
    width: 100%;
    height: 100dvh;
}

.pill {
    position: relative;
    overflow: visible;
    background: var(--c-primary);
    color: var(--c-white);
    font: 600 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    padding: 5px 6px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    white-space: nowrap;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pill.cluster {
    padding: 3px 3px 3px 6px;
}
.pill .pill-text {
    display: inline-block;
}
.pill .badge {
    background: var(--c-white);
    color: var(--c-primary);
    font-weight: 800;
    font-size: 11px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 18px;
}

.pill .pill-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% - 1.25rem));
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 4px solid var(--c-primary);
    object-fit: cover;
    z-index: -1;
    background: var(--c-bg);
}

/* --- TAB BAR --- */

.tab-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 4rem;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(0.05rem);
    box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, .4);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.tab-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 7.5rem;
    height: auto;
    gap: 0.2rem;
    color: #8492A5;
    text-decoration: none;
    font-size: 12px;
    border: none;
    background: none;
    cursor: pointer;
}
.tab-btn.active {
    color: var(--c-primary);
}
.tab-btn.active svg path {
    color: var(--c-primary);
}

/* --- HEADER --- */
.header-things, .main-actions {
    display: flex;
    align-items: center;
}

.header-things {
    height: 4rem;
    display: flex;
    align-items: center;
    margin-top: .25rem;
    gap: var(--space-16);
}

.other-things {
    margin-left: auto;
    display: flex;
}

.favourite {
    margin-top: 0.3rem;
    cursor: pointer;
}

.favourite svg path {
    transition: fill 0.3s ease, transform 0.15s ease;
}

.favourite:hover svg path, .lang-selection:hover {
    fill: var(--c-primary);
    color: var(--c-primary);
}

.favourite:active svg path, .lang-selection:active {
    fill: var(--c-primary);
    color: var(--c-primary);
    transform: scale(0.97);
}

.city, .my-collection, .lang-selection {
    margin-left: 1rem;
    padding: var(--space-8) var(--space-12);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--c-black);
    font-size: 1rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.lang-selection {
    padding: var(--space-8) 0;
    transition: color 0.2s ease, transform 0.15s ease;
}

a {
    text-decoration: none;
    font: inherit;
    color: inherit;
}

.city {
    margin-left: 1rem;
}

.my-collection {
    margin-left: 0;
}

.my-collection {
    background: #e4e4e4;
}

.city:hover, .my-collection:hover {
    background: #dddddd;
}

.logo {
    height: 3rem;
    width: 3rem;
    cursor: pointer;
}

.other-things {
    display: flex;
    margin-left: auto;
    align-items: center;
    gap: var(--space-24);
}


.pagination-button-container {
    display: flex;
    justify-content: center;
}

.pagination-no-button-container {
    display: flex;
    height: 4rem;
    justify-content: center;
}

/* --- FOOTER --- */

.footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--c-white);
    border-radius: 1rem 1rem 0 0;
    position: relative;
    min-height: 6rem;
    background: var(--c-white);
    padding: 0 var(--space-24);
    margin-top: 2rem;
}

.page-with-map .footer {
    margin-top: -0.5rem;
}

.footer-top-wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 1rem;
    flex-direction: column;
}

.important-redirects {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
    height: 100%;
}

.important-redirects {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
    height: 100%;
}

.footer a {
    color: var(--c-black);
    text-decoration: none;
    font-size: 0.9em;
    margin-right: 2rem;
    font-weight: 500;
}

.footer img {
    width: 4rem
}

.footer-redirect {
    margin: .25rem
}

.important-redirects li:nth-of-type(1) {
    text-align: center;
    display: none;
}

@media (max-width: 1320px) {
    .footer {
        width: 100dvw;
        position: relative;
        height: auto;
        padding: 1rem 0 2rem;
        background: var(--c-white);
        border-radius: var(--r-lg);
    }

    .footer-info {
        color: var(--c-black);
        display: inline-block;
    }

    .footer a {
        margin-right: 0;
    }

    .footer-logo,
    .help {
        display: none !important;
    }

    .footer-top-wrapper {
        display: block;
        text-align: center;
        width: 100%;
        padding: 0;
    }

    .important-redirects {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        width: 100%;
    }

    .footer-redirect {
        display: block;
        width: fit-content;
        padding: 1.2rem 0;
        text-align: center;
        border-bottom: 1px solid #f5f5f5;
        font-size: 1rem;
        margin: 0;
    }

    .footer-redirect:last-child {
        border-bottom: none;
    }

    .my-collection{
        display: none;
    }

    .important-redirects li:nth-of-type(1) {
        text-align: center;
        display: flex;
    }
}



/* --- APARTMENTS SECTION --- */

#list-view {
    flex: 1;
}

.apartment-section {
    display: flex;
    flex: 1;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: .6rem;
    margin-top: .6rem;
    margin-bottom: .6rem;
}

/* --- APARTMENTS BLOCK --- */


.apartment-card {
    display: flex;
    flex-direction: column;
    background: var(--c-white);
    border-radius: var(--r-lg);
    overflow: hidden;
    width: 100%;
    min-width: 20rem !important;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, .1);
    transition: background 0.4s ease-in-out, transform 0.25s ease-in-out;
}

.apartment-card:hover, .apartment-card:active {
    transform: scale(1.005);
    box-shadow: 0 0.1rem .6rem rgba(0, 0, 0, .12);
}


#pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 0;
}

#pagination-container button {
    background-color: var(--c-primary);
    color: var(--c-white);
    font-size: 0.8rem;

    border-radius: var(--r-lg);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

#pagination-container button:hover {
    background-color: var(--c-light-gray);
}

#pagination-container button.active {
    background-color: var(--c-primary);
    color: var(--c-white);
    border-color: var(--c-primary);
    pointer-events: none;
}


.slider {
    position: relative;
    height: 13rem;
    overflow: hidden;
}

.slides img, .slides iframe {
    width: 100%;
    height: 20rem;
    object-fit: cover;
    display: none;
}

#list-container .slides img {
    padding-bottom: 7rem;
}
.slides img.active, .slides iframe.active {
    display: block !important;
}

.slider-indicator {
    position: absolute;
    bottom: .5rem;
    right: .5rem;
    background: rgba(0, 0, 0, .6);
    color: var(--c-white);
    font-size: .7rem;
    border-radius: var(--r-sm);
    padding: 0 0.3rem;

}

.slider-text-field {
    position: absolute;
    bottom: .5rem;
    left: .5rem;
    background: rgba(0, 0, 0, .4);
    color: var(--c-white);
    font-size: .5rem;
    border-radius: var(--r-sm);
    padding: 0 0.2rem;
    opacity: 50%;
}

.slider button {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .7);
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
}

.slider .prev, .slider .next {
    background-color: transparent;
    color: transparent;
    border-radius: 50%;
    padding: var(--space-8);
    border: none;
    transition: background 0.2s ease, color 0.2s ease, filter 0.2s ease, transform 0.15s ease;
}

.slider .prev:hover, .slider .next:hover {
    background-color: rgba(255, 255, 255, 0.7);
    color: var(--c-dark-gray);
}

.slider .prev::before, .slider .next::before {
    content: "";
    position: absolute;
    top: -1.5rem;
    bottom: -1.5rem;
    left: -1.5rem;
    right: -1.5rem;
}

.slider .prev {
    left: .5rem;
}

.slider .next {
    right: .5rem;
}

.slider .prev.rotated-btn {
    position: fixed;
    right: 0;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    top: .5rem;
}

.slider .next.rotated-btn {
    position: fixed;
    right: 0;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    top: auto;
    bottom: .5rem;
}

/* --- Apartment Info --- */
.apartment-info {
    padding: .2rem 1rem .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.params {
    display: flex;
    font-weight: bold;
    gap: 1rem;
    color: var(--color-black);
    margin-top: .2rem;
}

.address {
    display: flex;
    text-align: left;
    flex: 1;
    align-items: center;
    gap: .5rem;
    color: var(--color-black);
    font-size: .9rem;
    min-width: 0;
}

.address-hidden {
    visibility: hidden !important;
}

.address svg {
    flex-shrink: 0;
}

.address span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.primary {
    flex: 1;
    background: var(--c-primary);
    color: var(--c-white);
    border: none;
    padding: var(--space-8);
    border-radius: .6rem;
    cursor: pointer;
}

.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--c-icons);
    border: none;
    text-decoration: none;
    color: var(--c-black);
    border-radius: .6rem;
    padding: .55rem;
    cursor: pointer;
}

/* --- FILTERS --- */
.filters-overlay {
    z-index: 1000;
    align-items: center;
    gap: var(--space-16);
    border-radius: var(--r-lg);

}

.filters-overlay.absolute {
    position: absolute;
    overflow-y: auto;
    width: auto;
    z-index: 1000;
}

.filter-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-16);
    justify-content: space-between;
}

.filter-button {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: inherit;
    gap: 0.3rem;
    border: none;
    background: var(--c-bg);
    padding: var(--space-8);
    border-radius: var(--r-lg);
    font-size: 0.8rem;
    transition: 0.2s;
    cursor: pointer;
    height: 2rem;
    width: 2rem;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, .1);
}

.filter-button.primary {
    background: var(--c-primary);
    color: var(--c-white);
}

.filter-button:hover:not(.primary) {
    background: var(--c-light-gray);
}

.filter-icon {
    display: flex;
    align-items: center;
}

.filter-counter {
    position: absolute;
    bottom: 1.3rem;
    left: 5.8rem;
    background-color: var(--c-light-gray);
    color: var(--c-black);
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, .1);
    border-radius: var(--r-lg);

    font-size: 0.7rem;
    font-weight: 500;
    display: none;
    margin-left: 0.5rem;
}

.filter-counter.active {
    display: inline-block;
}

.modal-container {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 2000;
    justify-content: center;
    align-items: end;
}

.modal-container.active {
    display: flex;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
}

.dark-backdrop {
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(2px);
}

.modal-container.active .modal-backdrop {
    opacity: 1;
}

.modal {
    width: 100%;
    min-width: 21.2rem !important;
    max-width: var(--modal-width) !important;
    background: var(--c-white);
    border-radius: 1rem 1rem 0 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: 98dvh;
}

.modal.active {
    transform: translateY(0);
}

.modal-drag-handle {
    width: 40px;
    height: 5px;
    background-color: var(--c-dark-gray);
    border-radius: 2.5px;
    margin: 0.5rem auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-top: 0.3rem;
    padding: 0.5rem 1rem;

}

.modal-back-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--c-dark-gray);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.modal-reset {
    background: none;
    border: none;
    color: var(--c-primary);
    cursor: pointer;
    font-size: .9rem;
}

.modal-close {
    background: none;
    border: none;
    color: var(--c-primary);
    cursor: pointer;
    font-size: .9rem;
}

.modal-content {
    flex-grow: 1;
    padding: var(--space-16);
    display: flex;
    min-width: 21.2rem !important;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
}

#filters-container .modal-content {
    gap: var(--space-16);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

html.modal-open, body.modal-open {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#filters-container { transform: none !important; }

.modal-content-filters{
    flex-grow: 1;
    padding: var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    overflow-y: auto;
}

.modal-footer {
    /* border-top: 0.05rem solid var(--c-light-gray); */
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.5rem;

}

#apartment-modal-container .modal-footer {
    position: sticky;
    background: var(--c-white);
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    padding: 10px 1rem 0.5rem;
    z-index: 2002;
}


.apply-btn {
    width: 100%;
    padding: var(--space-16);
    background: var(--c-primary);
    color: var(--c-white);
    border: none;
    border-radius: var(--r-md);
    font-size: .9rem;
    cursor: pointer;

}

.room-options,
.price-options {
    display: flex;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.
,
.price-btn {
    background: var(--c-bg);
    border: 0.1rem solid var(--c-light-gray);
    border-radius: var(--r-lg);

    font-size: .9rem;
    color: var(--c-black);
    cursor: pointer;
}

.room-btn.active,
.price-btn.active {
    background: var(--c-primary);
    color: var(--c-white);
}

.input-group {
    display: flex;
    gap: var(--space-8);
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-group input {
    width: 100%;
    outline: none;
    text-decoration: none;
    padding: var(--space-8);
    border: 0.05rem solid var(--c-light-gray);
    border-radius: var(--r-sm);
    font-size: .9rem;
    caret-color: var(--c-dark-gray);

}

.input-group .currency {
    display: flex;
    align-items: center;
    padding-right: 0.5rem;
    color: var(--c-light-gray);
}

/* --- DETAILS MODAL --- */

#apartment-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 2100;
    overflow-y: auto
}

#apartment-modal-container.active {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

#apartment-modal-container .modal-content {
    min-width: 21.2rem !important;
    max-height: 98dvh;
    background: var(--c-bg);
    border-radius: 1rem 1rem 0 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    z-index: 101;
}

#apartment-modal-container#apartment{
    overflow: hidden;
}

#apartment-modal-container.active .modal-content {
    transform: translateY(0);
}

.modal-scrollable-content {
    flex-grow: 1;
    max-height: 98dvh; !important;
}

.modal-scrollable-content-map {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: .6rem;
}

.apartment-content-section {
    padding: 0 var(--space-16);
    display: flex;
    gap: 0.6rem;
    flex-direction: column;
    background-color: var(--c-bg);
    width: 100%;
    align-items: center;
}

.top-info-block,
.description-section,
.details-section,
.foldables-section,
.location-section,
.amenities-section {
    background: var(--c-white);
    gap: .6rem;
    padding: var(--space-8) var(--space-16) var(--space-16);
    border-radius: var(--r-lg);
    overflow: hidden;
    min-width: 20rem !important;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, .1);
}

.details-section , .foldables-section{
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-8);
}

.foldables-section {
    padding-left: 0;
    padding-right: 0;
}

.foldables-section > :first-child {
    padding-left: var(--space-16);
    padding-right: var(--space-16);
}

.price-actions {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.actions-top {
    display: flex;
    gap: 15px;
}

iframe {
    border: none;
    display: block;
}


.quick-stats, .address-wrapper {
    justify-content: center;
    text-align: center;
    gap: 10px;
    margin-bottom: 10px;
}

.stat-item {
    font-size: .9rem;
    line-height: 1.2;
    flex: 1;

}

.stat-item-hidden {
    visibility: hidden;
}

.stat-item-name {
    font-size: .9rem;
    line-height: 1.2;
    flex: 1;
    color: var(--c-dark-gray);
}

.address-commute {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-8);
}

.address-commute svg {
    flex-shrink: 0;
}

.address-commute .address {
    font-size: 0.9rem;
    color: var(--c-m-gray);
    flex: 1 1 auto;
}

.address-commute, #copy-id, #copy-link {
    width: 100%;
    background: none;
    border: none;
    color: var(--c-primary);
    font-size: 0.9rem;
    text-align: left;
    padding: 0;
    margin-top: 0.5rem;
    cursor: pointer;
}

#copy-id {
    text-align: right;
}

.commute-item {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: 14px;
}

.commute-text {
    display: flex;
    align-items: center;
    gap: 5px;
}

.section-header {
    font-size: 1.3rem;
    font-weight: 500;
}

.details-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 1.5rem;
}

@media (max-width: 1200px) {
    .details-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 800px) {
    .details-list {
        grid-template-columns: 1fr;
    }
}

.amenities-list {
    display: flex;
    flex-direction: row;
    gap: 0 var(--space-16);
    text-align: left;
    flex: 1;
    flex-wrap: wrap;
    align-items: flex-start;
    color: var(--c-dark-gray);
    font-size: .9rem;
}

.details-item, .amenities-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
    font-size: .9rem;
}

.amenities-row {
    padding-bottom: 0;
}

.amenities-row i {
    margin-right: 0.8rem;
}

.details-line {
    border-bottom: 1px dotted var(--c-dark-gray);
    flex-grow: 1;
    margin: 0 8px;
    transform: translateY(0.3rem);
}

.more-line {
    border-bottom: 1px solid var(--c-light-gray);
    flex-grow: 1;
    margin: 0 8px;
}

.list-line {
    border-bottom: 1px solid var(--c-light-gray);
    flex-grow: 1;
    height: 0.7rem;
    transform: translateY(-50%);
}

.details-item span {
    color: var(--c-dark-gray);
    text-align: left;
    margin-left: 10px;
}

.details-item .value {
    text-align: right;
    font-weight: 500;
    color: var(--c-black);
    margin-left: 0;
}

.description-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 1.8rem);
}

.description-text span {
    font-size: .9rem;
    color: var(--c-dark-gray);
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

#rental-params-date {
    font-size: .8rem;
}

[class^="icon-"] {
    display: inline-block;
    width: .9rem;
    height: .9rem;
    background-size: contain;
    background-repeat: no-repeat;
}


.icon-room { background-image: url('/static/other/svg/room.svg'); }
.icon-bedroom { background-image: url('/static/other/svg/bedroom.svg'); }
.icon-area { background-image: url('/static/other/svg/area.svg'); }
.icon-floor { background-image: url('/static/other/svg/floor.svg'); }
.icon-building { background-image: url('/static/other/svg/building.svg'); }
.icon-district { background-image: url('/static/other/svg/district.svg'); }
.icon-subway { background-image: url('/static/other/svg/mosmetro.svg'); }
.icon-deposit { background-image: url('/static/other/svg/deposit.svg'); }
.icon-fee { background-image: url('/static/other/svg/deposit.svg'); }
.icon-docs { background-image: url('/static/other/svg/docs.svg'); }
.icon-term { background-image: url('/static/other/svg/term.svg'); }
.icon-balcony { background-image: url('/static/other/svg/balcony.svg'); }
.icon-heating { background-image: url('/static/other/svg/heating.svg'); }
.icon-bathroom { background-image: url('/static/other/svg/bathroom.svg'); }
.icon-pet { background-image: url('/static/other/svg/pet.svg'); }
.icon-ac { background-image: url('/static/other/svg/ac.svg'); }
.icon-condition { background-image: url('/static/other/svg/condition.svg'); }
.icon-ceiling { background-image: url('/static/other/svg/ceiling.svg'); }
.icon-parking { background-image: url('/static/other/svg/parking.svg'); background-position: center 2px }
.icon-buildings { background-image: url('/static/other/svg/buildings.svg'); }
.icon-class { background-image: url('/static/other/svg/class.svg'); }
.icon-developer { background-image: url('/static/other/svg/developer.svg'); }

.icon-check { background-image: url('/static/other/svg/check.svg'); }
.icon-wamenities { background-image: url('/static/other/svg/wamenities.svg'); }

.icon-reload { background-image: url('/static/other/svg/reload.svg'); background-size: 60% 60%; }
.icon-add-leaflet { background-image: url('/static/other/svg/add_leaflet.svg'); background-size: 75%; }
.icon-add-zone { background-image: url('/static/other/svg/add_zone.svg'); background-size: 55%; }
.icon-show-pointer { background-image: url('/static/other/svg/show_pointer.svg'); background-size: 60%; }

.show-more{
    background: none;
    width: 100%;
    flex: 1;
    justify-content: start;
    border: none;
    color: var(--c-primary);
    font-size: 0.8rem;
    text-align: left;
    padding: 0;
    margin-top: 10px;
    cursor: pointer;
}

#apartment-modal-container .modal-footer {
    position: sticky;
    background: var(--c-white);
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    gap: 0.6rem;
    padding: 10px 1rem 0.5rem;
    z-index: 2002;
}

#apartment-modal-container .modal-footer .button {
    width: 100%;
    padding: var(--space-16);
    background: var(--c-primary);
    color: var(--c-white);
    border: none;
    border-radius: var(--r-lg);
    font-size: .9rem;
    cursor: pointer;
}

.modal-map-icon, .modal-3d-icon, .modal-yt-icon, .modal-share-icon, .modal-collection-icon {
    width: 3rem;
    background: var(--c-icons)
}

#apartment-modal-container .slider, #map-modal-container .slider, #leaflet-modal-container .slider {
    position: relative;
    overflow: hidden;
    height: 13rem;
    background: var(--c-light-gray);
    border-radius: 1rem 1rem 0 0;
    z-index: 10;
    margin: 0;
}

#apartment-modal-container .slider .slides {
    display: flex;
    transition: transform 0.3s ease;
    height: 100%;
}

#apartment-modal-container .slider .slides img, #apartment-modal-container .slider .slides iframe, #map-modal-container .slider .slides iframe, #leaflet-modal-container .slider .slides iframe {
    width: 100%;
    flex-shrink: 0;
    height: 100%;
    display: none;
    object-fit: cover;
}


#map-modal-container.active, #leaflet-modal-container.active {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

#map-modal-container .modal-content, #leaflet-modal-container .modal-content {
    min-width: 21.2rem !important;
    max-height: 98dvh; !important;
    background: var(--c-bg);
    border-radius: 1rem 1rem 0 0;
    display: flex;
    flex-direction: column;
    z-index: 101;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem;
    overflow-x: hidden;
}

#map-modal-container img, #leaflet-modal-container img {
    padding-bottom: 7rem;
}

/* --- MORE VIEW --- */
.more-view-section {
    display: flex;
    flex: 1;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: .6rem;
    margin-top: .6rem;
    margin-bottom: .6rem;
}

.more-view-toggle-block, .more-view-socials-block, .more-view-info-block {
    display: flex;
    flex-direction: column;
    background: var(--c-white);
    border-radius: var(--r-lg);
    gap: .6rem;
    width: 100%;
    min-width: 20rem !important;
    max-width: 28.8rem !important;
    padding: var(--space-16);
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, .1);
}


.switch {
    --button-width: 3rem;
    --button-height: 1.5rem;
    --toggle-diameter: 1.1rem;
    --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
    --toggle-shadow-offset: 10px;
    --toggle-wider: .9rem;
    outline: none;
    gap: var(--space-16);
}

.slider-switch {
    display: inline-block;
    width: var(--button-width);
    height: var(--button-height);
    background-color: var(--c-dark-gray);
    border-radius: calc(var(--button-height) / 2);
    position: relative;
    transition: 0.3s all ease-in-out;
    outline: none;
    gap: var(--space-16);
}

.slider-switch::after {
    content: "";
    display: inline-block;
    width: var(--toggle-diameter);
    height: var(--toggle-diameter);
    background-color: var(--c-bg);
    border-radius: calc(var(--toggle-diameter) / 2);
    position: absolute;
    top: var(--button-toggle-offset);
    transform: translateX(var(--button-toggle-offset));
    box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
    transition: 0.3s all  ease-in-out;
    gap: var(--space-16);

}

.switch input[type="checkbox"]:checked + .slider-switch {
    background-color: var(--c-primary);
}

input:focus {
    outline: none;
}

.switch input[type="checkbox"]:checked + .slider-switch::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

.switch input[type="checkbox"] {
    display: none;
}

.switch input[type="checkbox"]:active + .slider-switch::after {
    width: var(--toggle-wider);
    outline: none;
}

.switch input[type="checkbox"]:checked:active + .slider-switch::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
    outline: none;
}


.more-view-desc {
    font-size: .9rem;
}

.switch-3d, .day-night-map-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}


.switch-3d label, .day-night-map-switch label {
    display: flex;
    align-items: center;
}

.switch-3d input, .day-night-map-switch input {
    margin: 0;
    padding: 0;
}


.more-view-info-block {
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-content {
    text-align: center;
    padding: var(--space-16);
    border-radius: var(--r-lg);
}

.info-content .logo {
    display: inline-block;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1rem;
    font-size: .9rem;
    margin-left: auto;
    margin-right: auto;
}


.footer-info {
    font-size: .9em;
}

.info-title {
    margin: 0.5rem 0;
    font-size: 1rem;
}


.input {
    outline: none;
    -webkit-appearance: none;
}






/* --- ADM PANEL --- */
.adm-panel-section {
    display: flex;
    flex: 1;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: .6rem;
    margin-top: .6rem;
    margin-bottom: .6rem;
}

.adm-panel-block, .adm-panel-manager-list, .adm-panel-agent-list {
    display: flex;
    flex-direction: column;
    background: var(--c-white);
    border-radius: var(--r-lg);
    gap: .6rem;
    width: 100%;
    min-width: 20rem !important;
    max-width: 28.8rem !important;
    padding: .6rem;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, .1);
}


.adm-panel-search {
    box-sizing: border-box;
}

.adm-panel-search-input {
    width: 70%;
    padding: 0.7rem;
    font-size: 0.9rem;
}

.adm-panel-realtor-search-input {
    width: 10rem !important;
    padding: 0.7rem;
    font-size: 0.9rem;
}

.adm-panel-search button {

    font-size: 0.8rem;
    cursor: pointer;
}

.adm-search-results {
    flex-direction: column;
}

.manager-list {
    flex-direction: column;
    max-height: 100%;
}

.search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5rem;
}

.search-result img.logo {
    width: 50px;
    height: 50px;
    min-width: 50px;
    object-fit: cover;
    border-radius: var(--r-lg);
    margin-right: 1rem;
}

.adm-search-info {
    flex-grow: 1;
}

.adm-search-name {
    display: block;
    font-size: 0.9rem;
}

.adm-search-status {
    display: block;
    font-size: 0.9rem;
    color: var(--c-dark-gray);
    padding-top: .2rem;
}

.show-managers-text{
    white-space: nowrap;
}

.toggle-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toggle-section-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-height: 1.5rem;
    max-width: 2.5rem;
    font-size: .8rem;
    flex: 1;
    background: var(--c-dark-gray);
    color: var(--c-white);
    border: none;
    border-radius: var(--r-lg);
}

.rotate, .loading {
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.rotate, .loading {
    position: fixed;
    display: none;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
    z-index: 10001;
    background: var(--c-bg);
}

.rotate svg, .loading img {
    margin-bottom: .7rem;
    width: 5rem;
    height: auto
}

.rotate p, .loading p {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-dark-gray);
    opacity: .425
}

/* --- RENTAL ---*/
.rental-view {
    display: flex;
    flex: 1;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: .6rem;
    margin-top: .6rem;
    margin-bottom: .6rem;
}

.rental-actions, .rental-info, .screenshot-container, .amenities-container, .rental-key, .rental-links{
    display: flex;
    background: var(--c-white);
    border-radius: var(--r-lg);
    gap: .6rem;
    width: 100%;
    min-width: 20rem !important;
    max-width: 28.8rem !important;
    padding: .6rem;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, .1);
}

.rental-info, .rental-key, .rental-links{
    flex-direction: column;
}

.amenities-container {
    display: block !important;
    flex-direction: row;
}

.rental-input {
    width: 100%;
    outline: none;
    text-decoration: none;
    padding: var(--space-8);
    border: 0.05rem solid var(--c-light-gray);
    border-radius: var(--r-sm);
    font-size: .9rem;
    caret-color: var(--c-dark-gray);
    color: var(--c-black);
}

.rental-input:valid { color: var(--c-black); }

.screenshot-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.screenshot-box {
    width: 32.27%;
    display: flex;
    flex-direction: column;
}

.screenshot-item {
    width: 100%;
    border-radius: var(--r-lg);
    border: .025rem solid var(--c-light-gray);
    aspect-ratio: 16/9;
    align-content: center;
}

.screenshots-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: .35rem;
    width: 100%;
    box-sizing: border-box
}

.modal-select-screenshot-inner {
    border-radius: var(--r-lg);
    width: 100%;
    height: 100%;
}

.screenshot-item-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-lg);
    width: 100%;
}

.screenshot-item-inner img {
    width: 3rem;
    height: 3rem;
}

.select-term {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: white;
    background-image: none;
    color: #a9a9a9;
}


.rental-dropdown {
    position: relative;
    width: 100%;
    font-size: 0.9rem;
}

.rental-dropdown-input {
    width: 100%;
    padding: var(--space-8);
    border: 0.05rem solid var(--c-light-gray);
    border-radius: var(--r-lg);
    background-color: white;
    color: #a9a9a9;
    cursor: pointer;
}

.rental-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 0.05rem solid var(--c-light-gray);
    border-radius: var(--r-lg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.rental-dropdown-option {
    padding: var(--space-8);
    cursor: pointer;
    color: #a9a9a9;
}

.textarea-wrapper {
    position: relative;
}

.rental-textarea {
    width: 100%;
    resize: none;
    outline: none;
    text-decoration: none;
    padding: var(--space-8);
    border: 0.05rem solid var(--c-light-gray);
    border-radius: var(--r-sm);
    font-size: 0.9rem;
    caret-color: var(--c-black);
    color: var(--c-black);
}

.char-counter {
    position: absolute;
    bottom: 0.4rem;
    right: 0.6rem;
    font-size: 0.75rem;
    color: var(--c-primary);
    pointer-events: none;
    background-color: transparent;
    padding-left: 0.25rem;
}

.manage-dropdown {
    position: relative;
    display: inline-block;
    flex: 1;
    /* padding: 0 var(--space-16); */

}

.dropdown-menu {
    position: absolute;
    background-color: var(--c-white);
    margin-top: var(--space-4);
    /* min-width: 12rem; */
    border-radius: var(--r-md);
    z-index: 1000;
    /* width: 100%; */
    display: flex;
    gap: 0.5rem;
    /* flex-wrap: wrap; */
    padding: var(--space-8);
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, .1);
    opacity: 0;
    transition: opacity 0.15s ease-out, box-shadow 0.15s ease-out;
}

.dropdown-menu:hover {
    box-shadow: 0 0.1rem .6rem rgba(0, 0, 0, .12);
}

.dropdown-menu-districts {
    flex-wrap: wrap;
    width: 25rem;
}

.manage-dropdown[open] .dropdown-menu {
    opacity: 1;
}

.dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: .5rem;
    font-size: .8rem;
    cursor: pointer;
    transition: background 0.2s;
    height: 2.3rem;
    align-content: center;
}

.menu-backdrop {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 999;
    background: rgba(0, 0, 0, 0.25);
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(1px);
}

details[open] .menu-backdrop { display: block; }

.dropdown-input {
    height: 100%;
    margin-right: .3rem;
    width: auto;
    outline: none;
    border: none;
    color: black;
    background-color: var(--c-bg);
}


summary {
    list-style: none;
    outline: none;
}

summary.icon::-webkit-details-marker {
    display: none;
}

.info-container {
    position: fixed;
    top: 0;
    right: -100%;
    width: fit-content;
    font-size: .8rem;
    margin: .8rem;
    background: #434343;
    color: #fff;
    border-radius: var(--r-sm);
    animation: none;
    z-index: 3000;
    display: flex;
    align-items: center;
    text-align: right;
    gap: .45rem;
    opacity: .7;
    padding: 0.35rem 0.6rem 0.35rem 0.55rem;
}

.info-container svg path {
    fill: #e7e7e7;
    opacity: .7
}

.info-container.red {
    background: #432525
}

.info-container.red svg path {
    fill: #e77474
}

.info-container.green {
    background: #2c4325
}

.info-container.green svg path {
    fill: #8de774
}

.info-container.orange {
    background: #433925
}

.info-container.orange svg path {
    fill: #e7c174
}

.info-container.gray {
    background: #434343
}

.info-container.gray svg path {
    fill: #e7e7e7
}

.info-container svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0
}

.info-container.show-notification {
    animation: slideIn .3s cubic-bezier(.25,.46,.45,.94) forwards
}

.info-container.hide-notification {
    animation: slideOut .25s ease-in forwards
}

@keyframes slideIn {
    0% {
        right: -100%;
        opacity: 0
    }

    80% {
        right: 5px;
        opacity: 1
    }

    to {
        right: 0;
        opacity: 1
    }
}

@keyframes slideOut {
    0% {
        right: 5px;
        opacity: 1
    }

    to {
        right: -100%;
        opacity: 0
    }
}

#modal-wait, #leaflet-modal-wait {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.7);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 1099
}

.save-wait {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
    z-index: 1001;
    font-size: 1.5rem;
    font-weight: 500;
    color: #fff
}

.save-wait svg {
    margin-bottom: .7rem;
    width: 3.5rem;
    height: auto;
    animation: waitOpacityEffect 3s infinite;
}

@keyframes waitOpacityEffect {
    0% {
        opacity: 1;
        scale: 1.15
    }

    50% {
        opacity: 0.85;
        scale: 1
    }

    to {
        opacity: 1;
        scale: 1.15;
    }
}

.error {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
    z-index: 1001;
    font-size: 5rem;
    font-weight: 700;
    color: var(--c-dark-gray);
}

.redirect-to-main {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    width: 15rem;
    height: 2.5rem;
    border-radius: var(--r-md);
    font-size: 1rem;
    font-weight: 400;
    bottom: 2rem;
    background: var(--c-primary)
}

.price-discount {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.rental-discount {
    background: var(--c-white);
    color: var(--c-primary);
    font: 600 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    padding: 1px 3px;
    border-radius: 12px;
    white-space: nowrap;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0.15rem solid var(--c-primary);
}

.rental-prev-price {
    position: relative;
}

.rental-prev-price::after {
  content: "";
  position: absolute;
  left: -0.2rem;
  right: -0.2rem;
  top: 40%;
  height: 3px;
  background: var(--c-primary);
  border-radius: 999px;
  pointer-events: none;
}

.rental-price-per-m2 {
    color: var(--c-dark-gray);
}

.modal-close-anchor {
    position: fixed;
    top: .5rem;
    height: 0;
    width: 100%;
    z-index: 11;
    pointer-events: none;
}

.modal-close-anchor .btn-close, .modal-close-anchor .btn-rotate {
    display: flex;
    position: absolute;
    right: .5rem;
    z-index: 11;
    font-size: 1.5rem;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    background-color: rgba(255, 255, 255, 0.8);
    color: var(--c-dark-gray);
    fill: var(--c-dark-gray);
    padding: var(--space-8);
    pointer-events: auto;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, .1);
}

.modal-close-anchor .btn-rotate {
    top: 2.5rem;
    padding-bottom: 0.7rem;
    font-size: 1.3rem;
}

.modal-close-anchor .btn-close:hover, .modal-close-anchor .btn-rotate:hover {
    color: var(--c-primary);
    fill: var(--c-primary);
}

.modal-close-container {
    position: relative;
}

.admin-input {
    width: 5.5rem;
    outline: none;
    text-decoration: none;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border: 0;
    border-radius: var(--r-lg);
    font-size: .8rem;
    caret-color: var(--c-dark-gray);
    background-color: var(--c-bg);
    margin-left: 0.25rem;
    margin-right: 0.5rem;
}

.admin-input:valid { color: var(--c-black); }

.realtor-input {
    width: 7rem;
    outline: none;
    text-decoration: none;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border: 0;
    border-radius: var(--r-lg);
    font-size: .8rem;
    caret-color: var(--c-dark-gray);
    background-color: var(--c-bg);
    margin-left: 0.25rem;
    margin-right: 0.5rem;
}

.realtor-input:valid { color: var(--c-black); }

#fullscreen-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 2101;
    overflow-y: auto
}

#fullscreen-modal-container.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

#fullscreen-modal-container .modal-content {
    width: 100dvw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    display: flex;
    background: transparent;
    flex-direction: column;
    padding: 0;
    z-index: 102;
    pointer-events: none;
}

#fullscreen-modal-container .modal-content * {
    pointer-events: auto;
}

#fullscreen-modal-container .slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: transparent;
    margin: 0;
}

#fullscreen-modal-container .slider .slides {
    display: flex;
    width: 100%;
    height: 100%;
}

#fullscreen-modal-container .slider .slides img, #fullscreen-modal-container .slider .slides iframe {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    display: none;
    object-fit: contain;
    border-radius: var(--r-lg);
}

.lang-buttons-container {
    display: flex;
    gap: .6rem;
}

.lang-btn.active {
    background: var(--c-primary);
    border: 0.1rem solid var(--c-primary);
    color: var(--c-white);
}

.lang-btn {
    width: 100%;
    background: var(--c-bg);
    border: 0.1rem solid var(--c-light-gray);
    border-radius: var(--r-lg);

    font-size: .9rem;
    color: var(--c-m-gray);
    cursor: pointer;
}

.leaflet-pill.showcase {
    transform: none;
}

.leaflet-pill {
    background: var(--c-primary);
    color: var(--c-primary);
    font: 600 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    white-space: nowrap;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    display: inline-flex;
    min-width: 10px;
    min-height: 10px;
    padding: 3px;
}
.leaflet-pill.cluster {
    padding: 3px;
}
.leaflet-pill .pill-text {
    display: inline-block;
}
.leaflet-pill .badge {
    background: var(--c-white);
    font-weight: 800;
    font-size: 11px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 18px;
}

.leaflet-pill .badge-dot {
    background: var(--c-white);
    font-weight: 800;
    font-size: 11px;
    height: 8px;
    width: 8px;
    padding: 0;
    border-radius: 12px;
    display: inline-flex;
}

.badge-dot::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: transparent;
}

.leaflet-pill.red {
    background: var(--c-leaflet-red);
    color: var(--c-leaflet-red);
}
.leaflet-pill.orange {
    background: var(--c-leaflet-orange);
    color: var(--c-leaflet-orange);
}
.leaflet-pill.yellow {
    background: var(--c-leaflet-yellow);
    color: var(--c-leaflet-yellow);
}
.leaflet-pill.blue {
    background: var(--c-leaflet-blue);
    color: var(--c-leaflet-blue);
}
.leaflet-pill.green {
    background: var(--c-leaflet-green);
    color: var(--c-leaflet-green);
}
.leaflet-pill.gray {
    background: var(--c-leaflet-gray);
    color: var(--c-leaflet-gray);
}

.primary.yellow {
    background: var(--c-leaflet-yellow);
}
.primary.yellow:disabled {
    background: var(--c-leaflet-yellow-disabled);
}
.primary.green {
    background: var(--c-leaflet-green);
}
.primary.green:disabled {
    background: var(--c-leaflet-green-disabled);
}

.leaflet-stats {
    display: flex;
    justify-content: center;
    text-align: center;
    gap: 10px;
    margin-bottom: 10px;
}

.leaflet-inputs-container {
    padding: var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.leaflet-save-container {
    padding-bottom: 0.6rem;
    display: flex;
    gap: var(--space-8);
}

.map-controls {
    font-weight: 800;
    color: #333;
    background-repeat: no-repeat;
    background-position: center;
}

.pills-container {
    display: flex;
    justify-content: center;
    text-align: center;
    gap: 3rem;
    margin-top: 0.7rem;
    background: var(--c-bg);
    padding: var(--space-8);
    border-radius: var(--r-lg);
}

.price-sale {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--c-black);
}

.price-name-sale {
    font-size: 1rem;
    font-weight: 500;
    color: var(--c-black);
    margin-top: 0.15rem;
}

.price-details {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--c-black);
}

.price-name-details {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--c-black);
    margin-top: 0.15rem;
}

.selector-switch {
    display: flex;
    border-radius: var(--r-lg);
    line-height: normal;
    background: var(--c-white);
    color: var(--c-dark-gray);
    height: 2rem;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, .1);
}

.selector-switch .item {
    display: flex;
    height: 100%;
    flex-grow: 1;
    align-items: center;
    justify-content: center;

    border-radius: var(--r-lg);
    transition: background-color 120ms ease, color 120ms ease;
}

.selector-switch .item:active {
    border-radius: var(--r-lg);
    color: var(--c-white);
    background: var(--c-primary);
}

.selector-switch .item.primary {
    flex: none;
}

.selector-switch .item.realtor {
    width: 50%;
}

.adm-panel-section-inner {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.description-ids {
    display: flex;
    justify-content: space-between;
}

#leaflet-map-pointer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--c-primary);
    pointer-events: none;
    z-index: 1;
}

.leaflet-inputs-coords {
    display: flex;
    flex-direction: row;
    gap: .5rem;
}

.collection-share-container {
    padding-bottom: 0.6rem;
    display: flex;
    gap: var(--space-8);
}

.create-button {
    height: 100%;
    aspect-ratio: 1 / 1;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}











/* --- REAL-ESTATE BLOCK MAIN --- */


.real-estate-h1 {
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 2rem;
    text-transform: uppercase;
    margin: 3rem 0 3rem;
}

.frequently-searched-text, .newly-built-properties-text {
    padding: var(--space-8);
    font-weight: 200;
    display: flex;
    padding-left: 0;
    align-items: center;
    gap: .5rem;
    color: var(--c-black);
    font-size: 1.4rem;
}

.newly-built-properties-text {
    max-width: fit-content;
    cursor: pointer;
    margin: 0.5rem 0;

}

.frequently-searched-items {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

@media (max-width: 1320px) {
    .frequently-searched-items {
        margin: 0 auto;
        margin-bottom: 1rem;
    }
    .frequently-searched-item {
        height: 3rem;
    }

    .real-estate-h1 {
        display: none;
    }
}

@media (max-width: 600px) {
    .frequently-searched-items {
        display: none;
    }
}

.frequently-searched-item {
    display: flex;
    align-items: center;
    text-align: center;
    padding: var(--space-8) var(--space-16);
    margin:  var(--space-4);
    border-radius: var(--r-sm);
    font-weight: 500;
    background: #e4e4e4;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.frequently-searched-item::before {
    content: "";
    width: .5rem;
    height: .5rem;
    min-width: .5rem;
    border-radius: 50%;
    background: var(--c-primary);
    margin-right: .5rem;
}

.frequently-searched-item:hover, .frequently-searched-item:active {
    background-color: #dddddd;
}


.newly-built-properties-text svg {
    margin-top: 0.25rem;
    transition: transform 0.2s ease;
}

.newly-built-properties-text:hover svg , .newly-built-properties-text:active svg{
    margin-top: 0.25rem;
    transform: translateX(.15rem);
}

.newly-built-wrapper {
    display: grid;
    /* align-items: stretch; */
    width: 100%;
    gap: 1.75rem;
    grid-template-columns: auto auto;

}

.newly-built-properties-grid {
    display: grid;
    grid-template-columns: repeat(3, 20rem);
    gap: var(--space-8);
    flex: 0 1 auto;
}

body.page-with-scrollable-grids .newly-built-wrapper {
    display: flex;
}

body.page-with-scrollable-grids .newly-built-properties-grid {
    display: flex;
    gap: var(--space-8);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 0.5rem 0;
    width: 100%;
}

body.page-with-scrollable-grids .apartment-card {
    flex: 0 0 21.8rem;
}

body.page-with-scrollable-grids .newly-built-properties-grid::-webkit-scrollbar {
    display: none;
}

.newly-built {
    background: var(--c-white);
    border-radius: var(--r-lg);
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, .1);
    transition: background 0.4s ease-in-out, transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.newly-built:hover, .newly-built:active {
    transform: scale(1.005);
    box-shadow: 0 0.1rem .6rem rgba(0, 0, 0, .12);
}

.newly-slider {
    position: relative;
    height: 10rem;
    overflow: hidden;
}

.newly-built-for-you, .resale-for-you {
    display: flex;
    width: 18.5rem;
    flex-direction: column;
    justify-content: space-between;
    border-radius: .75rem 3rem .75rem 3rem;
    margin-left: -.8rem;
    flex-shrink: 0;
    cursor: pointer;

    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, .1);
}

.newly-built-for-you {
    background: var(--c-white) url("/static/other/img/tbil-resale.webp") center / cover no-repeat;
    background-position: 30% 110%;
    background-size: 140%;

}

.resale-for-you {
    background: var(--c-white) url("/static/other/img/tbil-tg.webp") center / cover no-repeat;
    background-position: 20% 165%;
    background-size: 140%;
}

@media (max-width: 1320px) {
    .newly-built-properties, .resale-properties, .rent-properties {
        position: relative;
        border-radius: var(--r-lg);
        /* padding: 1.5rem 0 0 0; */
        margin-bottom: 1rem !important;
        width: 100dvw;
        left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;

    }

    .rent-properties {
        margin-bottom: 0 !important;
    }

    .newly-built-properties-text {
        padding: 0 1.5rem;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
    }

    .newly-built-wrapper {
        display: contents;

    }


    .newly-built-properties-grid {
        display: flex;
        gap: var(--space-8);
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 1.5rem 0.5rem 1.5rem;
        width: 100%;
    }

    body.page-with-scrollable-grids .newly-built-properties-grid {
        padding: 0 1.5rem 0.5rem 1.5rem;
    }

    .newly-built {
        flex: 0 0 16.5rem;
    }

    .newly-built-properties-grid::-webkit-scrollbar {
        display: none;
    }

    .newly-built-for-you, .resale-for-you {
        display: flex;
        /* width: 100%; */
        margin: 0 1.5rem;
        /* position: absolute; */
        box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, .1);
        /* top: 100%; */
        /* left: 50%; */
        /* transform: translateX(-50%); */
        margin-top: var(--space-8);
        width: calc(100% - 3rem);
        height: 395px;
        /* margin-left: 0; */

    }

    .newly-built-for-you {

        background-position: 95% 35%;
        background-size: 26rem;
    }

    .resale-for-you {
        background-position: 100% -5%;
        background-size: 25rem;
    }

    .frequently-searched-items {
        display: none;
    }
}

@media (max-width: 600px) {
    .newly-built-properties-text {
        padding: 0 var(--space-12);

    }

    .newly-built-properties-grid {
        padding: 0 var(--space-12) var(--space-8) var(--space-12);

    }

    body.page-with-scrollable-grids .newly-built-properties-grid {
        padding: 0 var(--space-12) 0.5rem var(--space-12);
    }

    .newly-built-for-you, .resale-for-you {
        width: calc(100% - 1.5rem);
        /* height: calc(100% - var(--space-24)); */
        height: 310px;
        margin-left: 0.75rem;

    }


    .newly-built-properties, .resale-properties, .rent-properties {
        margin-bottom: 14rem;
    }

    .resale-properties, .rent-properties {
        /* margin-top: 2rem; */

    }

    .newly-built-for-you-text {
        font-size: 1.3rem !important;
    }

    .newly-built-for-you {
        background-position: 100% -1rem;
        background-size: 17rem;
    }

    .resale-for-you {
        background-position: 120% 2.5rem;
        background-size: 17rem;
    }
}

.newly-built-for-you-text {
    display: flex;
    padding: 1.1rem 1.5rem;
    font-size: 1.4rem;
    color: var(--c-black);
    white-space: pre-line;
}

.newly-built-for-you-more {
    margin: 1.5rem;
    background-color: var(--c-bg);
    border-radius: 0.75rem 0.75rem 0.75rem 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.45rem;
}

.newly-built-for-you-more:hover {
    background-color: #efefef;

}

.filter-main-container {
    max-width: 100%;
    padding: var(--space-8) 0 var(--space-12);
    pointer-events: auto;
}

.filter-flex-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
}

.filter-white-box, .filter-map-box, .filter-box, .pagination-button {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: var(--r-md);
    height: 3.5rem;
    display: flex;
    align-items: center;
    color: var(--c-black);
}

.filter-box {
    width: 3.5rem;
}

.filter-white-box {
    flex: 1;
    /* padding: 0 var(--space-16); */

}

@media (max-width: 600px) {

    .filter-main-container {
        flex: 0 !important;
    }

    .filter-main-button{
        font-size: .9rem;
    }

    .filter-chevron {
        display: none;
    }
    #select-deal-display {
        font-size: .9rem;
        white-space: pre-line;
    }
}

.pagination-button {
    display: none;
    cursor: pointer;
}

.filter-item {
    position: relative;
    display: flex;
    align-items: center;
    /* padding: var(--space-16); */
    flex: 1;
    border-radius: var(--r-md);
}

.filter-select-hidden {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    z-index: 2;
}

.filter-chevron {
    /* position: absolute; */
    /* right: 0; */
    pointer-events: none;
    transition: transform 0.15s ease;
    margin-left: var(--space-12);
}

.manage-dropdown[open] .filter-chevron {
    transform: rotateX(180deg);
}

.filter-vertical-line {
    width: 0.05rem;
    height: 1.5rem;
    /* margin: 0 var(--space-16); */
    background: #eee;
}

.filter-price-input {
    border: none;
    outline: none;
    width: 100%;
    color: var(--c-black);
}

.filter-price-input::placeholder {
    color: #ccc;
}

.filter-metro-disabled {
    color: #333;
    font-weight: 500;
    opacity: 0.8;
}

.filter-map-box, .filter-box {
    cursor: pointer;
    gap: var(--space-8);
    font-weight: 500;
    white-space: nowrap;
}

.filter-map-box, .pagination-button, .filter-main-button {
    padding: 0 var(--space-20);
}

.filter-box {
    padding: 0 var(--space-16);
}

.filter-main-button {
    background-color: var(--c-primary);
    border: none;
    color: var(--c-white);
    border-radius: var(--r-md);
    height: 3.4rem;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.2s;
}

@media (max-width: 1320px) {
    .filters-overlay {
        display: none;
    }

    body.page-with-mobile-filters .filters-overlay {
        display: block;
    }

    body.page-with-mobile-filters .filter-white-box .filter-item:not(:first-child),
    body.page-with-mobile-filters .filter-white-box .filter-vertical-line {
        display: none;
    }
}



/* --- REAL-ESTATE FLAT PAGE --- */


.flat-row-text {
    padding: var(--space-8);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--c-black);
    font-size: 1.3rem;
    max-width: 15rem;
}

.flat-row-items {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

@media (max-width: 1320px) {
    .flat-row-items {
        margin: 0 auto;
        margin-bottom: 1rem;
    }
    .flat-row-item {
        height: 3rem;
    }
}

.flat-row-item {
    display: flex;
    align-items: center;
    text-align: center;
    padding: var(--space-8) var(--space-16);
    margin:  var(--space-8);
    border-radius: var(--r-sm);
    font-weight: 500;
    background: #e4e4e4;

    transition: background 0.2s ease, transform 0.15s ease;
}


.flat-row-item:hover, .flat-row-item:active {
    background-color: #dddddd;
}


.address-contact-row {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    margin: var(--space-8) 0;
}

.flat-address {
    font-size: 1.5rem;
    font-weight: normal;
    margin: 0 var(--space-16);
}

.details-buttons-container {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-8);
    gap: var(--space-8);
}

.details-buttons-container .icons-container {
    display: flex;
    flex-direction: row;
    gap: var(--space-8);
}

.details-buttons-container .icon {
    fill: var(--c-dark-gray);
    width: 100%;
}

.details-sections-row {
    display: grid;
    gap: var(--space-8);
    align-items: stretch;
    margin-bottom: var(--space-8);

}

.top-row {
    margin-top: var(--space-8);
    grid-template-columns: 2fr 1fr;
    min-height: 30.5rem;
}

.details-sections-row .left-column {
    display: block;
    padding: var(--space-8);
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, .1);
}

.details-sections-row .slider {
    min-height: 29.5rem;
    border-radius: var(--r-sm);
}

.details-sections-row .slides {
    width: 100%;
    height: 100%;
    display: flex;
}

.details-sections-row .slides img.active, .details-sections-row .slides iframe.active {
    height: auto;
}

.btn-fullscreen {
    display: flex;
    position: absolute;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    background-color: rgba(255, 255, 255, 0.7);
    fill: var(--c-dark-gray);
    padding: 0.5rem;
    pointer-events: auto;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, .1);
    transition: fill 0.2s ease, filter 0.2s ease, transform 0.15s ease;
}

.details-sections-row .btn-fullscreen {
    top: 1.5rem;
    right: 0.5rem;
}

.details-sections-row .slider button, #fullscreen-modal-container .slider button {
    background-color: rgba(255, 255, 255, 0.7);
    fill: var(--c-dark-gray);
    color: var(--c-dark-gray);
}

.details-sections-row .right-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.details-sections-row .quick-stats {
    margin-top: 0.3rem;
}

.details-sections-row .address-wrapper {
    margin-top: 0.5rem;
}

.details-sections-row .description-section {
    flex: 1;
}

@media (max-width: 900px) {
    .details-sections-row {
        grid-template-columns: 1fr;
    }

    .details-sections-row .slider {
        min-height: auto;
        height: 25rem;
    }
}

@media (max-width: 600px) {
    .details-sections-row .slider {
        min-height: auto;
        height: 15rem;
    }

    .amenities-list {
        flex-direction: column;
    }

    .details-sections-row, .details-section, .foldables-section, .amenities-section, .nearby-section-wrapper, .post-block {
        margin-left: -.25rem;
        margin-right: -.25rem;
    }
}

.sticky-content {
    position: sticky;
}

.amenities-row {
    display: flex;
    align-items: center;
}

.dropdown-button {
    display: flex;
    padding: var(--space-16);
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-wrap: nowrap;
    transition: color 0.2s ease
}

@media (max-width: 600px) {
    .filter-map-box {
        width: 3.5rem;
        padding: 0 var(--space-16);
        justify-content: center;
    }

    .filter-map-text {
        display: none;
    }
}

.scroll-gradient {
    position: relative;
    width: 100%;
}

.scroll-gradient::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, transparent calc(100% - 1rem), var(--c-bg) 100%);
}

.scroll-gradient.is-scrolled::after {
    background: linear-gradient(to right, var(--c-bg) 0%, transparent 1rem, transparent calc(100% - 1rem), var(--c-bg) 100%);
}

.scroll-gradient.is-at-end::after {
    background: linear-gradient(to right, var(--c-bg) 0%, transparent 1rem);
}

@media (max-width: 1320px) {
    .newly-built-wrapper .scroll-gradient::after {
        background: transparent !important;
    }
}

.flats-nearby-section {
    display: flex;
    gap: var(--space-8);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding-bottom: var(--space-8);
}

.flats-nearby-text {
    padding: var(--space-16) 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--c-black);
    font-size: 1.3rem;
}

.flats-nearby-section .newly-built {
    flex: 0 0 16.5rem;
}

.price {
    font-size: var(--space-24);
}

.quick-stats,
.address-wrapper {
    grid-template-columns: repeat(3, auto);
    align-items: start;
    gap: var(--space-16);
    justify-content: space-between;
    text-align: center;
    margin: 0 auto;

}

.quick-stats {
    display: grid;
}

.apartment-card .quick-stats, .top-info-block .quick-stats {
    justify-content: space-around;
}

.address-wrapper {
    margin-top: .3rem;
}

.foldables-section .address-wrapper {
    display: none;
}

.address {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.price {
    font-size: var(--space-24);
}

#rental-button-message, #rental-button-fav, #details-contact-button, .details-buttons-container .icon {
    height: 2.5rem;
    min-height: 2.5rem;
}

#rental-button-fav {
    width: 2.5rem;
}

/* --- LIST VIEW --- */

#list-container {
    position: relative;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    margin: 0 0 var(--space-12);

}


@media (max-width: 1042px) {
    #list-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    #list-container {
        grid-template-columns: 1fr;
        margin: 0 -.25rem var(--space-12);
    }

    .filters-overlay {
        margin: 0 -.25rem 0;
    }

    .address-hidden {
        display: none !important;
    }
}

body.page-with-scrollable-grids .address-hidden {
    display: block !important;
    visibility: hidden !important;
}

body.page-with-scrollable-grids .newly-built-properties, body.page-with-scrollable-grids .resale-properties, .body.page-with-scrollable-grids .rent-properties {
    margin-bottom: auto !important;
}

.no-items-block {
    width: 100%;
    font-size: 1rem;
    color: var(--c-mutted-gray);
    display: none;
    text-align: center;
    margin: 30dvh 0 50dvh;
}

.no-items-block .no-items-title {
    font-size: 1.4rem;
    color: var(--c-black);
    padding-bottom: var(--space-8);
}

/* --- States --- */

button, .filter-main-button, .filter-map-box, .post-red-button, .post-white-button, .frequently-searched-item, .newly-built-for-you-more, .filter-box, .redirect-to-main {
    transition: filter 0.2s, background 0.2s ease, transform 0.15s ease;
}

.redirect-to-main:hover, .redirect-to-main:active {
    background: var(--c-primary-dark);
}

.filter-main-button:hover, .post-red-button:hover {
    filter: brightness(0.95);
}

button:active, .filter-main-button:active, .filter-map-box:active, .post-red-button:active, .post-white-button:active, .frequently-searched-item:active, .newly-built-for-you-more:active, .my-collection:active, .lang-selection:active, .city:active, .redirect-to-main:active {
    transform: scale(0.99);
}

.room-btn:active {
    transform: scale(0.98);
}

.filter-map-box:hover, .post-white-button:hover, .filter-box:hover {
    background-color: #f8f8f8;
}

.footer-redirect:hover {
    color: var(--c-mutted-gray);
    transition: color 0.2s ease;
}

.mini-card-img {
    height: auto !important;
    transform: translateY(-10%);
}

.dropdown-button:hover, .dropdown-button:active {
    color: var(--c-mutted-gray);
}

.filter-price-item {
    padding: var(--space-16);
}

.actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem 1rem;
    gap: .5rem;
}

.apartment-card .actions {
    margin-top: auto;
}

.footer-info-dev {
    font-size: .9rem !important;
    color: var(--c-mutted-gray) !important;
}

.full-card {
    padding: .2rem 1rem .4rem;
}

#rental-apartment-info, #rental-button-message, #rental-button-fav, #details-contact-button, .details-buttons-container .icon {
    transition: background 0.2s ease, filter 0.2s ease, transform 0.15s ease;
    cursor: pointer;
}

.btn-fullscreen:hover {
    fill: var(--c-primary-dark);
}

.details-sections-row .slider button:hover, #fullscreen-modal-container .slider button:hover {
    fill: var(--c-primary-dark);
    color: var(--c-primary-dark);
}

#rental-button-message:hover, #details-contact-button:hover {
    filter: brightness(0.95);
}

#rental-button-fav:hover, #rental-button-fav:active, .details-buttons-container .icon:hover, .details-buttons-container .icon:active, .popup-button:hover, .popup-button:active {
    filter: brightness(0.98);
}

#rental-button-fav:active, .details-buttons-container .icon:active {
    transform: scale(0.95);
}

.btn-fullscreen:active, .next:active, .prev:active {
    transform: scale(0.97) translateY(-1rem);
}

.popup-button:active {
    transform: scale(0.98);
}

/* --- Popup --- */

.popup-dialog {
    width: min(20rem, calc(100dvw - 2rem));
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 1rem;
    background: var(--c-white);
    color: inherit;
    max-height: calc(100dvh - 2rem);
    overflow: auto;
}

.popup-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}

.popup-dialog[open] {
    animation: popup-in .18s ease-out;
}

.popup-dialog[open]::backdrop {
    animation: backdrop-in .18s ease-out;
}

@keyframes popup-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes backdrop-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.popup-body {
    display: grid;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem 0.5rem;
}

.popup-message {
    display: block;
    font: inherit;
    font-size: 1.1rem;
    text-align: center;
}

.popup-actions {
    display: grid;
    gap: .5rem;
    padding: 0;
    margin: 0;
    list-style: none;
    grid-template-columns: 1fr;
}

.popup-button {
    appearance: none;
    border: 0;
    border-radius: .75rem;
    font: inherit;
    cursor: pointer;
    background: var(--c-icons);
    color: var(--c-dark-gray);
    height: 2.5rem;
    transition: background 0.2s ease, filter 0.2s ease, transform 0.15s ease;
}

.popup-button.href-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
}

.popup-dialog button:focus, .popup-dialog a:focus {
    outline: none;
}

.popup-dialog button:focus-visible, .popup-dialog a:focus-visible {
    outline: none;
    box-shadow: none;
}

/* --- MAP VIEW --- */

.map-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

#map {
    border-top-right-radius: var(--r-lg);
}

.map-panel-trigger {
    opacity: 0;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateX(50%);
    border-radius: var(--r-full);
    background: var(--c-white);
    z-index: 15;
    height: 3.5rem;
    width: 3.5rem;
    display: none;
    align-items: center;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, .1);
    transition: opacity 0.25s ease, filter 0.15s ease;
}

.map-panel-trigger path {
    transition: stroke 0.15s ease;
}

.map-panel-trigger:hover, .map-panel-trigger:active {
    filter: brightness(0.98);
}

.map-panel-trigger:active path {
    stroke: var(--c-primary-dark);
}

.map-panel-trigger .filter-chevron {
    display: unset !important;
    pointer-events: none;
    transform: rotateZ(90deg);
    margin-left: 0.5rem;
    transition: transform 0.15s ease;
}

.map-panel {
    opacity: 0;
    position: relative;
    background: var(--c-bg);
    z-index: 10;
    max-width: 664px;
    min-width: 664px;
    width: 664px;
    box-shadow: -1rem 0 0.3rem -0.9rem rgba(0, 0, 0, .1);
    transition: max-height 0.35s ease, height 0.35s ease, max-width 0.35s ease, min-width 0.35s ease, width 0.35s ease, opacity 0.25s ease, transform 0.25s ease;
}

.map-panel-scrollable {
    width: 100%;
    height: 100dvh;
    overflow-y: auto;
    border-radius: var(--r-xl);
    padding-bottom: 68px;
}

.map-panel .filter-white-box {
    margin: 0 var(--space-8);
}

.map-panel .dropdown-menu {
    flex-direction: column;
}

.map-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: max-content;
    align-content: start;
    gap: var(--space-8);
    margin: var(--space-8);
}

.map-panel .scroll-gradient::after {
    background: transparent;
}

.map-panel .scroll-gradient.is-scrolled::after {
    background: linear-gradient(to top, transparent calc(100% - 1rem), var(--c-bg) 100%);
}

@media (max-width: 1320px) {
    .map-panel {
        max-width: 336px !important;
        min-width: 336px !important;
        width: 336px !important;
    }

    .map-panel-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .map-panel .no-items-block {
        font-size: 0.9rem;
    }
}

@media (max-width: 800px) {
    #map {
        border-top-right-radius: unset;
    }

    .map-panel-trigger {
        display: flex;
    }

    .map-panel {
        opacity: 0;
        position: absolute;
        bottom: 0;
        right: var(--space-8);
        transform: translateX(calc(100% + 1rem));
        max-height: min(calc(100% - 7.7rem), 444px); /* 2: 859; 1: 444; */
        height: min(calc(100% - 7.7rem), 444px);
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, .1);
    }

    .map-panel-scrollable {
        padding-bottom: 70dvh;
    }

    .map-panel .filter-white-box {
        margin: var(--space-8) var(--space-8) 0;
    }

    .map-panel-grid {
        border-radius: var(--r-lg);
    }

    .map-panel .scroll-gradient::after {
        background: transparent !important;
    }

    .map-panel .no-items-block {
        top: 240px !important;
    }

    .map-panel:has(.map-panel-grid > :nth-child(2)) {
        max-height: min(calc(100% - 7.7rem), 859px);
        height: min(calc(100% - 7.7rem), 859px);
    }

    .map-panel-trigger .filter-chevron {
        display: flex;
    }
}

.map-panel .apartment-card {
    max-width: 20rem;
}

.map-panel .pagination-button {
    margin-bottom: var(--space-8);
}

.map-panel .no-items-block {
    margin: unset;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.fullscreen-content {
    width: 100dvh;
    height: 100dvh;
    margin: 0;
    padding: 0;
}

/* --- POST --- */

.post-blocks-grid {
    width: 50%;
    margin-inline: auto;
    margin-top: var(--space-24);
}

.post-block {
    background: var(--c-white);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-16) var(--space-16);
    border-radius: var(--r-lg);
    overflow: hidden;
    min-width: 20rem !important;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, .1);
    color: var(--c-dark-gray);
    font-size: .9rem;
}

.post-form-block {
    padding: var(--space-16);
}

.post-block .section-header {
    color: var(--c-black);
}

.post-block .scroll-gradient::after {
    background: linear-gradient(to right, transparent calc(100% - 1rem), var(--c-white) 100%);
}

.post-block .scroll-gradient.is-scrolled::after {
    background: linear-gradient(to right, var(--c-white) 0%, transparent 1rem, transparent calc(100% - 1rem), var(--c-white) 100%);
}

.post-block .scroll-gradient.is-at-end::after {
    background: linear-gradient(to right, var(--c-white) 0%, transparent 1rem);
}

.post-images-grid {
    display: flex;
    gap: var(--space-8);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-top: var(--space-4);
}

.post-images-grid img {
    width: 100%;
    height: 11.25rem;
    object-fit: cover;
    display: block;
    border-radius: var(--r-sm);
}

.post-buttons-container {
    display: flex;
    gap: var(--space-8);
}

.post-button {
    height: 2.5rem;
    min-height: 2.5rem;
    flex: 1;
    transition: background 0.2s ease, filter 0.2s ease, transform 0.15s ease;
    cursor: pointer;
}

.post-button:hover, .post-button:active {
    filter: brightness(0.95);
}

.post-button:active {
    transform: scale(0.98);
}

.tg-button, .tg-button:hover, .tg-button:active {
    background: #24A1DE;
}

.wa-button, .wa-button:hover, .wa-button:active {
    background: #25D366;
}

.post-divider-container {
    display: flex;
    gap: var(--space-8);
    align-items: center;
    font-size: 0.8rem;
}

.post-line {
    height: 1px;
    flex: 1;
    border-bottom: 0.15rem dashed var(--c-dark-gray);
}

.post-inputs-container {
    display: flex;
    gap: var(--space-8);
    margin-bottom: var(--space-4);
}

@media (max-width: 600px) {
    .post-buttons-container, .post-inputs-container {
        flex-direction: column;
    }
}

.post-block input, .post-block textarea {
    caret-color: var(--c-dark-gray);
}

.post-block input::placeholder, .post-block textarea::placeholder {
    color: var(--c-dark-gray);
}

.apartments-wrapper:has(div) {
    margin-top: .3rem;
    font-size: 0.9rem;
    line-height: 1.2rem;
    color: var(--c-black);
}

.apartment-card .apartments-wrapper:has(div) {
    margin-bottom: .2rem;
}

.apartments-wrapper > :first-child {
    padding-top: 0;
}

.apartments-wrapper > :last-child {
    padding-bottom: 0;
}

.apartment-row {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0;
}

.apartment-row-space {
    color: var(--c-dark-gray);
}

.apartment-line {
    border-bottom: 1px solid var(--c-light-gray);
    flex-grow: 1;
    margin: 0 0.5rem;
}

.apartments-foldables-wrapper {
    display: block;
}

.apartments-foldables-wrapper > :last-child .apartment-line {
    display: none;
}

.apartments-foldable {
    display: block;
}

.foldable-visible {
    display: flex;
    flex-direction: column;
    transition: background 0.15s ease;
    padding-left: var(--space-16);
    padding-right: var(--space-16);
    cursor: pointer;
}

.foldable-visible:hover {
    background: var(--c-icons);
}

.foldable-visible-data {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-8) 0;

}

.foldable-visible-left {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    font-size: .9rem;
    color: var(--c-dark-gray);
}

.foldable-visible-left .title {
    font-size: 1.1rem;
    color: var(--c-black);
}

.foldable-visible-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
    color: var(--c-dark-gray);
    font-size: 0.9rem;
}

.foldable-chevron {
    pointer-events: none;
    transition: transform 0.15s ease;
}

.apartments-foldable.open .foldable-chevron {
    transform: rotateX(180deg);
}

.apartments-foldable .newly-built-wrapper {
    display: none;
}

.apartments-foldable.open .newly-built-wrapper {
    display: flex;
}

.apartments-foldable .newly-built-properties-grid {
    display: flex;
    gap: var(--space-8);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem;
    width: 100%;
    background: var(--c-bg);
}

.apartments-foldable .scroll-gradient {
    background: transparent;
}

.apartments-foldable .apartment-card {
    flex: 0 0 20.8rem;
}

.post-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-12);
    margin-top: 3rem;
    gap: var(--space-16);
}

.post-title {
    text-align: center;
    font-size: 3rem;
    font-weight: bold;
    line-height: 3rem;
    text-transform: uppercase;
}

.post-title-red {
    text-align: center;
    font-size: 3rem;
    font-weight: bold;
    line-height: 3rem;
    text-transform: uppercase;
    color: var(--c-primary);
}

.post-text {
    text-align: center;
    margin: var(--space-16);
    max-width: 35rem;
    margin-inline: auto;
    color: var(--c-mutted-gray);
}

.post-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
}

.post-buttons button, .post-buttons a {
    width: 15rem;
    text-align: center;
    height: 3.4rem;
    border-radius: var(--r-md);
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-red-button {
    background-color: var(--c-primary);
    border: none;
    color: var(--c-white);
}

.post-white-button {
    background-color: var(--c-white);
    border: 1px solid #e8e8e8;
    color: var(--c-black);
}

.post-big-image {
    width: calc(100% - 10rem);
    height: 25rem;
    object-fit: cover;
    border-radius: var(--r-xl);
    margin: var(--space-24) 5rem 0;
}

.post-title-small {
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 2.5rem;
    text-transform: uppercase;
    margin: 3rem 0 1.5rem;

}

.post-number {
    text-align: center;
    margin: 2.5rem auto 1rem;
    height: 2.5rem;
    width: 2.5rem;
    background: var(--c-primary);
    color: var(--c-white);
    font-size: 1.35rem;
    padding: 0.25rem;
    border-radius: var(--r-md);

}

.post-section-header {
    font-size: 1.5rem;
    text-align: center;
    line-height: 1.5rem;
    margin-bottom: -0.5rem;

}

.post-stat-block-wrapper {
    display: flex;
    gap: 3rem;
    justify-content: center;
    margin-bottom: 2rem;

}

.post-stat-block {
    display: flex;
    gap: var(--space-8);
    align-items: center;

}

.post-stat-svg {
    transform: translateY(3px);

}

.post-stat-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;

}

.post-text-bold {
    line-height: 1.25rem;
    font-size: 1.1rem;

}

.post-text-small {
    color: var(--c-mutted-gray);
    line-height: 1rem;
    font-size: 1rem;
}

@media (max-width: 1000px) {
    .post-blocks-grid {
        width: 85%;
    }

    .post-big-image {
        width: 100%;
        height: 20rem;
        object-fit: cover;
        border-radius: var(--r-xl);
        margin: var(--space-24) 0 0;
    }
}

@media (max-width: 780px) {
    .post-title-wrapper {
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .post-text {
        margin-inline: 1rem;
    }

    .post-buttons {
        flex-direction: column;
        margin-inline: -.25rem;
    }

    .post-buttons button, .post-buttons a {
        width: 100%;
    }

    .post-big-image {
        margin-inline: -.25rem;
        width: calc(100% + .5rem);
        height: 15rem;
    }

    .post-stat-block-wrapper {
        flex-direction: column;
        gap: var(--space-16);
        align-items: center;
    }

    .post-page .scroll-gradient {
        margin-inline: -.25rem;
    }

    .post-blocks-grid {
        width: 100%;
    }
}

.price-date {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--c-black);
    margin-bottom: var(--space-4);
}

.no-cursor {
    cursor: default !important;
}

.animated-cursor::after {
    content: '';
    display: inline-block;
    margin-left: 3px;
    background-color: var(--c-dark-gray);
    animation-name: blink;
    animation-duration: 0.75s;
    animation-iteration-count: infinite;
}

span.animated-cursor::after {
    height: 2.5rem;
    width: 0.25rem;
    transform: translateY(0.1rem);
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}