/* === Mira Properties — frontend === */
.mira-properties {
    background: #000;
    color: #fff;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 40px 33px 48px;
    box-sizing: border-box;
}
.mira-properties *,
.mira-properties *::before,
.mira-properties *::after { box-sizing: border-box; }
.mira-inner { max-width: 1600px; margin: 0 auto; }

/* === Filters Row === */
.mira-filters {
    display: grid;
    grid-template-columns: 263px 263px 183px 1fr;
    gap: 24px;
    align-items: center;
    margin-bottom: 80px;
}
.mira-filter { position: relative; }

.mira-dropdown-toggle {
    width: 100%;
    height: 59px;
    color: #C2C2C2;
    padding: 0 26px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gradient border via dual-background + transparent border */
    border: 1px solid transparent;
    background:
        linear-gradient(#252527, #252527) padding-box,
        linear-gradient(90deg, #FB3832 0%, #E7BDC0 100%) border-box;
    transition: color 0.2s ease, filter 0.2s ease;
}
.mira-dropdown-toggle:hover { color: #fff; filter: brightness(1.1); }
.mira-dropdown.is-open .mira-dropdown-toggle {
    color: #fff;
    background:
        linear-gradient(#2E2E2E, #2E2E2E) padding-box,
        linear-gradient(90deg, #FB3832 0%, #E7BDC0 100%) border-box;
}
.mira-caret {
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    margin-left: 12px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mira-dropdown.is-open .mira-caret { transform: rotate(180deg); }

.mira-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1a1a1a;
    z-index: 20;
    padding: 4px 0;
    max-height: 0;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition:
        max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s ease,
        transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.28s ease;
}
.mira-dropdown.is-open .mira-dropdown-menu {
    max-height: 520px;
    opacity: 1;
    transform: translateY(0);
    overflow-y: auto;
    pointer-events: auto;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.mira-dropdown-menu label {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease, color 0.15s ease;
}
.mira-dropdown.is-open .mira-dropdown-menu label {
    opacity: 1;
    transform: translateY(0);
}
.mira-dropdown.is-open .mira-dropdown-menu label:nth-child(1) { transition-delay: 0.04s; }
.mira-dropdown.is-open .mira-dropdown-menu label:nth-child(2) { transition-delay: 0.08s; }
.mira-dropdown.is-open .mira-dropdown-menu label:nth-child(3) { transition-delay: 0.12s; }
.mira-dropdown.is-open .mira-dropdown-menu label:nth-child(4) { transition-delay: 0.16s; }
.mira-dropdown.is-open .mira-dropdown-menu label:nth-child(5) { transition-delay: 0.20s; }
.mira-dropdown.is-open .mira-dropdown-menu label:nth-child(6) { transition-delay: 0.24s; }

.mira-dropdown-menu label {
    display: flex;
    align-items: center;
    padding: 14px 26px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    color: #C2C2C2;
    line-height: 1.4;
    /* opacity/transform handled in transition rules below */
}
.mira-dropdown-menu label:hover,
.mira-dropdown-menu label:has(input:checked) {
    background: #2E2E2E;
    color: #fff;
}
.mira-dropdown-menu input[type=checkbox] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.mira-opt-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #3a3a3a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    flex: 0 0 38px;
}
.mira-opt-icon img {
    width: 22px; height: 22px;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(0.9);
}
.mira-opt-label {
    line-height: 1.2;
}

/* === Size slider === */
.mira-filter.mira-size {
    grid-column: 3 / 5;
    display: grid;
    grid-template-columns: 183px 1fr;
    gap: 36px;
    align-items: center;
}
.mira-size-label {
    height: 59px;
    color: #C2C2C2;
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background:
        linear-gradient(#252527, #252527) padding-box,
        linear-gradient(90deg, #FB3832 0%, #E7BDC0 100%) border-box;
}
.mira-size-slider {
    padding: 0 6px;
    position: relative;
    --mira-fill: 100%;
}
/* Vertical tick lines closing each end of the track (replacing the rounded caps).
   The native range input is 28px tall and the track is 5px centred inside it,
   so the track centerline is at 14px from the top of the input. */
.mira-size-slider::before,
.mira-size-slider::after {
    content: '';
    position: absolute;
    top: 14px;
    width: 2px;
    height: 18px;
    transform: translateY(-50%);
    z-index: 3;
    pointer-events: none;
}
.mira-size-slider::before { left: 6px;  background: #FB3832; }
.mira-size-slider::after  { right: 6px; background: #FFFFFF; }
.mira-size-slider input[type=range] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 28px;
    margin: 0;
    position: relative;
    z-index: 2;
}
/* track: red gradient up to thumb, then grey/white track after — flat ends, no rounding */
.mira-size-slider input[type=range]::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 0;
    background:
        linear-gradient(90deg, #FB3832 0%, #E7BDC0 100%) 0 / var(--mira-fill) 100% no-repeat,
        linear-gradient(90deg, #515151 0%, #FFFFFF 100%);
}
.mira-size-slider input[type=range]::-moz-range-track {
    height: 5px;
    border-radius: 0;
    background:
        linear-gradient(90deg, #FB3832 0%, #E7BDC0 100%) 0 / var(--mira-fill) 100% no-repeat,
        linear-gradient(90deg, #515151 0%, #FFFFFF 100%);
}
/* gradient red thumb */
.mira-size-slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 23px; height: 23px;
    border-radius: 50%;
    background: linear-gradient(180deg, #FB3832 0%, #E6BCBF 100%);
    border: 2px solid #fff;
    margin-top: -9px;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}
.mira-size-slider input[type=range]::-moz-range-thumb {
    width: 23px; height: 23px;
    border-radius: 50%;
    background: linear-gradient(180deg, #FB3832 0%, #E6BCBF 100%);
    border: 2px solid #fff;
    cursor: pointer;
}
.mira-size-bounds {
    display: flex;
    justify-content: space-between;
    font-size: 17px;
    font-weight: 500;
    color: #C2C2C2;
    margin-top: 10px;
}

/* === Body: list | scrollbar | map === */
.mira-body {
    display: grid;
    grid-template-columns: 1fr 10px 1fr;
    column-gap: 16px;
    align-items: stretch;
}

/* List header row (counts / clear / map title) */
.mira-list-header {
    display: flex;
    align-items: center;
    gap: 38px;
    font-size: 17px;
    font-weight: 500;
    color: #C2C2C2;
    margin-bottom: 16px;
    height: 38px;
}
.mira-count [data-count] {
    font-weight: 500;
    display: inline-block;
    transition: transform 0.2s ease;
}
.mira-count [data-count].is-bump { transform: scale(1.18); }
.mira-clear {
    background: transparent;
    border: 0;
    color: #C2C2C2;
    cursor: pointer;
    font-size: 17px;
    font-weight: 500;
    font-family: inherit;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.mira-clear:hover { color: #fff; }
.mira-x {
    color: #C2C2C2;
    font-size: 18px;
    line-height: 1;
}
.mira-map-header {
    font-size: 17px;
    font-weight: 500;
    color: #C2C2C2;
    margin-bottom: 16px;
    height: 38px;
    display: flex;
    align-items: center;
}

/* List */
.mira-list {
    max-height: 607px;
    overflow-y: auto;
    padding: 2px 0 8px 2px;
    /* hide native scrollbar — we render our own in the middle column */
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge legacy */
}
.mira-list::-webkit-scrollbar { width: 0; height: 0; display: none; } /* WebKit */

/* Middle column: holds the custom scrollbar, aligned with the top of the list/map */
.mira-scroll-col {
    position: relative;
    height: 607px;
    width: 10px;
    justify-self: center;
    /* match the list/map header row so the rail starts level with the cards/map */
    margin-top: calc(38px + 16px);
}
.mira-scrollbar {
    position: absolute;
    inset: 0;
    background: #515151;
    border-radius: 18px;
    pointer-events: auto;
}
.mira-scrollbar-thumb {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    min-height: 24px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(251, 56, 50, 1) 0%, rgba(231, 189, 192, 1) 100%);
    cursor: grab;
    transition: filter 0.15s ease;
}
.mira-scrollbar-thumb:hover { filter: brightness(1.1); }
.mira-scrollbar-thumb.is-dragging { cursor: grabbing; filter: brightness(1.15); }
/* Hide rail entirely if content doesn't overflow */
.mira-scroll-col.is-hidden { visibility: hidden; }

/* Cards */
.mira-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    min-height: 210px;
    background: #252527;
    border: 1px solid transparent;
    cursor: pointer;
    margin-bottom: 16px;
    color: #C2C2C2;
    transform-origin: top center;
    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        opacity 0.35s ease,
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        margin-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mira-card:hover { background: #2A2A2C; }
.mira-card.is-active {
    border-color: #FB3832;
    background: #2E2E2E;
    color: #FFFFFF;
}
.mira-card.is-active .mira-card-title,
.mira-card.is-active .mira-card-meta { color: #FFFFFF; }
.mira-card.is-hidden {
    opacity: 0;
    transform: scale(0.96);
    min-height: 0;
    height: 0;
    margin-bottom: 0;
    border-width: 0;
    pointer-events: none;
    overflow: hidden;
}

.mira-card-thumb {
    width: 246px;
    height: 176px;
    margin: 17px;
    overflow: hidden;
    background: #1a1a1a;
}
.mira-card-thumb img,
.mira-card-thumb .mira-card-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mira-card-placeholder {
    background: linear-gradient(135deg, #2a2a2a, #444);
}

.mira-card-body {
    padding: 20px 20px 20px 4px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
}
.mira-card-title {
    margin: 0 0 12px;
    font-size: 23px;
    font-weight: 300;
    line-height: 31px;
    color: inherit;
}
.mira-card-meta {
    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
    color: inherit;
}
.mira-card-meta > span { display: block; }

.mira-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: 10px;
    width: 134px;
    height: 34px;
    padding: 0 12px;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border-radius: 34px;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
    background:
        linear-gradient(#2E2E2E, #2E2E2E) padding-box,
        linear-gradient(90deg, #FB3832 0%, #E7BDC0 100%) border-box;
    transition: color 0.2s ease, filter 0.2s ease, transform 0.15s ease;
}
.mira-card:not(.is-active) .mira-download-btn { color: #C2C2C2; }
.mira-download-btn:hover {
    color: #fff;
    filter: brightness(1.15);
    transform: translateY(-1px);
}
.mira-download-btn-disabled {
    visibility: hidden;
    pointer-events: none;
}

.mira-empty {
    padding: 32px 20px;
    color: #888;
    font-size: 15px;
    text-align: center;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.mira-empty.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* === Map === */
.mira-map-col { display: flex; flex-direction: column; }
.mira-map {
    position: relative;
    width: 100%;
    height: 607px;
    background: #111;
    overflow: hidden;
}
.mira-map img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease, opacity 0.45s ease;
    transform-origin: center center;
    opacity: 1;
}
.mira-map img.is-fading-out { opacity: 0; }
.mira-map img.is-fading-in { opacity: 0; }
.mira-map img.is-loaded { opacity: 1; }
.mira-map-empty {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #777;
    font-size: 15px;
    background: #111;
}
.mira-map-zoom {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mira-map-zoom button {
    width: 24px;
    height: 24px;
    background: #000;
    border: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.mira-map-zoom button:hover { background: #1a1a1a; }

/* Map pan cursors */
.mira-map.is-zoomed { cursor: grab; }
.mira-map.is-zoomed.is-panning,
.mira-map.is-zoomed:active { cursor: grabbing; }
.mira-map.is-zoomed img { transition: transform 0.15s ease, opacity 0.45s ease; }
.mira-map.is-panning img { transition: opacity 0.45s ease; } /* no transform transition while dragging */

/* Lightbox */
.mira-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    opacity: 0;
    transition: opacity 0.25s ease;
    cursor: zoom-out;
}
.mira-lightbox.is-open { opacity: 1; }
.mira-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    cursor: default;
    transform: scale(0.96);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mira-lightbox.is-open img { transform: scale(1); }
.mira-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    opacity: 0.85;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.mira-lightbox-close:hover { opacity: 1; transform: scale(1.1); }

/* === Responsive === */
@media (max-width: 1280px) {
    .mira-filters {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
    .mira-filter.mira-size { grid-column: 1 / 3; grid-template-columns: 183px 1fr; }
    .mira-body { grid-template-columns: 1fr; }
    .mira-map { height: 480px; }
    .mira-list { max-height: none; padding-right: 8px; }
    .mira-scroll-col { display: none; }
}
@media (max-width: 640px) {
    .mira-properties { padding: 24px 18px 32px; }
    .mira-filters { grid-template-columns: 1fr; }
    .mira-filter.mira-size { grid-column: 1; grid-template-columns: 1fr; gap: 16px; }
    .mira-card { grid-template-columns: 1fr; height: auto; }
    .mira-card-thumb { width: auto; height: 200px; margin: 12px; }
    .mira-card-body { padding: 0 16px 18px; }
}