/* Map apartment explorer. Loaded after the map and shared client styles.
   Selection is cyan; availability remains a separate labelled state. */
.cj-map-page #building-panel,
.cj-map-page #floor-rail {
    /* Status colours are the site's (app-shell.css, --gp-st-*). */
    --explorer-free: var(--gp-st-free-ink);
    --explorer-free-bg: var(--gp-st-free-tint);
    --explorer-reserved: #815B12;
    --explorer-reserved-bg: #FCF2DC;
    --explorer-sold: var(--gp-st-sold-ink);
    --explorer-sold-bg: var(--gp-st-sold);
    --explorer-selected: #0891B2;
    --explorer-selected-bg: #CFFAFE;
    background: var(--gp-card, #FDFBF7);
    color: var(--gp-ink, #1C2320);
    border: 1px solid var(--gp-line, #DED6C7);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 12px 40px rgba(28, 35, 32, .18), 0 2px 8px rgba(28, 35, 32, .08);
    font-family: var(--gp-font);
    font-size: 14px;
    line-height: 1.5;
    color-scheme: light;
}
.cj-map-page #building-panel {
    width: 360px;
    min-width: 0;
    max-width: calc(100vw - 120px);
    padding: 16px;
    border-radius: 20px;
    animation: none;
}
.cj-map-page #building-panel .bp-head {
    gap: 10px;
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gp-line);
}
.cj-map-page #building-panel .bp-head-label {
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gp-navy);
    white-space: normal;
    line-height: 1.4;
}
.cj-map-page #building-panel #bp-close,
.cj-map-page #building-panel .bp-back {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--gp-line);
    border-radius: 12px;
    background: var(--gp-bg);
    color: var(--gp-navy);
    font-size: 22px;
    flex-shrink: 0;
}
.cj-map-page #building-panel #bp-close:hover,
.cj-map-page #building-panel .bp-back:hover {
    background: var(--gp-bg-alt);
    color: var(--gp-ink);
    border-color: var(--gp-muted);
}
.cj-map-page #building-panel .bp-title {
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -.025em;
    font-weight: 700;
    color: var(--gp-navy);
    margin-bottom: 8px;
}
.cj-map-page #building-panel .bp-price {
    font-size: 18px !important;
    line-height: 1.45;
    color: var(--gp-primary);
    margin-bottom: 16px;
}
.cj-map-page #building-panel .bp-context,
.cj-map-page #building-panel .bp-status,
.cj-map-page #building-panel .bp-units-head,
.cj-map-page #building-panel .bp-units-load,
.cj-map-page #building-panel .bp-loc-sub {
    font-size: 14px;
    line-height: 1.5;
    color: var(--gp-muted);
    opacity: 1;
}
.cj-map-page #building-panel .bp-context b,
.cj-map-page #building-panel .bp-units-head b { color: var(--gp-navy); }
.cj-map-page #building-panel .bp-status { flex-wrap: wrap; }
.cj-map-page #building-panel .bp-avail {
    color: var(--explorer-free);
    background: var(--explorer-free-bg);
    border-color: var(--gp-st-free-line);
    white-space: normal;
    font-size: 12px;
    padding: 4px 8px;
}
.cj-map-page #building-panel .gp-demo.on-dark {
    background: var(--explorer-reserved-bg);
    color: var(--explorer-reserved);
    border-color: #D8BC81;
}
.cj-map-page #building-panel .bp-body {
    padding: 0 3px 2px;
    scrollbar-width: thin;
    scrollbar-color: #B5B2A8 transparent;
    scroll-padding-top: var(--bp-sticky-height, 0px);
}
/* Snap state owns visibility, independently of the current building/floor step. */
.cj-map-page #building-panel { box-sizing: border-box; }
.cj-map-page #building-panel .bp-head { flex: 0 0 auto; min-width: 0; }
.cj-map-page #building-panel .bp-head-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* Minimise is the standard arrow, not a word (Besnik, 2026-10-03): down while the sheet
   is open, up once it is minimised. Its name is the label and the hover title. */
.cj-map-page #bp-snap-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--gp-tint-2);
    color: var(--gp-primary-dark);
    cursor: pointer;
    touch-action: manipulation;
}
.cj-map-page #bp-snap-toggle::before {
    content: '';
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: var(--gp-icon-caret) center / contain no-repeat;
    mask: var(--gp-icon-caret) center / contain no-repeat;
}
.cj-map-page #building-panel[data-snap="peek"] #bp-snap-toggle::before { transform: rotate(180deg); }
.cj-map-page #bp-snap-toggle:focus:not(:focus-visible) { outline: none; }
.cj-map-page #building-panel[data-snap="peek"] {
    height: fit-content;
    max-height: min(160px, calc(100dvh - 24px)) !important;
}
.cj-map-page #building-panel[data-snap="peek"] > :not(.bp-head),
.cj-map-page #building-panel[data-snap="peek"] .bp-back { display: none !important; }
.cj-map-page #building-panel[data-snap="peek"] .bp-head {
    margin: 0;
    padding: 0;
    border: 0;
}
.cj-map-page #building-panel #bp-units {
    display: flex;
    flex-direction: column;
    margin-top: 0;
}
.cj-map-page #building-panel .bp-unit-nav { display: none; }
.cj-map-page #building-panel[data-step="units"] #bp-units .bp-units-head { display: block; }
.cj-map-page #building-panel .bp-selection-summary { display: none; }
.cj-map-page #building-panel .bp-floor-stepper {
    order: 0;
    position: static;
    top: 0;
    z-index: 4;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
    padding: 8px 0;
    margin: 0;
    background: var(--gp-card);
}
.cj-map-page #building-panel .bp-floor-stepper button,
.cj-map-page #building-panel .bp-floor-stepper select,
.cj-map-page #building-panel .bp-unit-nav button {
    min-height: 44px;
    min-width: 44px;
    border: 1px solid #B9C4BC;
    border-radius: 10px;
    background: #fff;
    color: var(--gp-navy);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    touch-action: manipulation;
}
.cj-map-page #building-panel .bp-floor-stepper select {
    width: 100%;
    min-width: 0;
    padding: 8px 12px;
    font-size: 16px;
    background: var(--gp-tint-2);
}
.cj-map-page #building-panel .bp-floor-stepper button:hover:not(:disabled),
.cj-map-page #building-panel .bp-unit-nav button:hover:not(:disabled) {
    background: var(--gp-tint);
    border-color: var(--gp-primary);
}
.cj-map-page #building-panel .bp-floor-stepper button:disabled,
.cj-map-page #building-panel .bp-unit-nav button:disabled {
    opacity: .45;
    cursor: default;
}
.cj-map-page #building-panel .bp-unit-nav {
    order: 1;
    position: static;
    top: var(--bp-floor-height, 60px);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 10px;
    margin-bottom: 10px;
    background: var(--gp-card);
    border-bottom: 1px solid var(--gp-line);
}
.cj-map-page #building-panel[data-sticky-navigation="all"] .bp-floor-stepper,
.cj-map-page #building-panel[data-sticky-navigation="floor"] .bp-floor-stepper,
.cj-map-page #building-panel[data-sticky-navigation="all"] .bp-unit-nav { position: sticky; }
.cj-map-page #building-panel .bp-unit-nav button {
    width: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    padding: 0;
}
.cj-map-page #building-panel .bp-unit-position {
    flex: 1;
    min-width: 0;
    color: var(--gp-navy);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.cj-map-page #building-panel .bp-unit-position small,
.cj-map-page #building-panel .bp-unit-position > span {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--gp-muted);
}
.cj-map-page #building-panel .bp-availability-key {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
}
.cj-map-page #building-panel .bp-availability-key > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cj-map-page #building-panel .bp-availability-key > span::before,
.cj-map-page #building-panel .bp-unit-s::before {
    content: '';
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--dot, currentColor);
    box-shadow: inset 0 0 0 1px var(--dot-line, transparent);
}
/* The key's words in the ink, its dots in the fill the flats wear. */
.cj-map-page #building-panel .bp-availability-key .free { color: var(--gp-st-free-ink); --dot: var(--gp-st-free); --dot-line: var(--gp-st-free-line); }
.cj-map-page #building-panel .bp-availability-key .res { color: var(--gp-st-res-ink); --dot: var(--gp-st-res); --dot-line: var(--gp-st-res-line); }
.cj-map-page #building-panel .bp-availability-key .sold { color: var(--gp-st-sold-ink); --dot: var(--gp-st-sold); --dot-line: var(--gp-st-sold-line); }
.cj-map-page #building-panel .bp-units-head { order: 3; margin-bottom: 12px; }
.cj-map-page #building-panel #bp-units:has(.bp-unit-nav) .bp-units-head { display: none; }
.cj-map-page #building-panel .bp-units-grid {
    order: 4;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 14px;
}
.cj-map-page #building-panel .bp-unit {
    --unit-fill: var(--gp-st-free);
    --unit-ink: var(--gp-st-free-ink);
    --unit-line: var(--gp-st-free-line);
    position: relative;
    min-height: 116px;
    min-width: 0;
    gap: 5px;
    padding: 12px;
    background: #fff;
    color: var(--gp-ink);
    border: 1px solid #CBD5CE;
    border-top: 3px solid var(--unit-line);
    border-radius: 12px;
    opacity: 1;
    transition: border-color .15s ease, background .15s ease;
}
.cj-map-page #building-panel .bp-unit.res,
.cj-map-page #building-panel .bp-unit[data-status="reserved"] {
    --unit-fill: var(--gp-st-res);
    --unit-ink: var(--gp-st-res-ink);
    --unit-line: var(--gp-st-res-line);
}
.cj-map-page #building-panel .bp-unit.sold,
.cj-map-page #building-panel .bp-unit[data-status="sold"] {
    --unit-fill: var(--gp-st-sold);
    --unit-ink: var(--gp-st-sold-ink);
    --unit-line: var(--gp-st-sold-line);
}
.cj-map-page #building-panel .bp-unit:hover {
    background: var(--gp-tint-2);
    border-color: var(--gp-primary);
    border-top-color: var(--unit-line);
    filter: none;
}
.cj-map-page #building-panel .bp-unit .bp-unit-n {
    font-size: 20px;
    font-weight: 750;
    line-height: 1.2;
    color: var(--gp-navy);
    opacity: 1;
    font-variant-numeric: tabular-nums;
}
.cj-map-page #building-panel .bp-unit .bp-unit-m {
    color: var(--gp-muted);
    font-size: 14px;
    line-height: 1.45;
    opacity: 1;
    overflow-wrap: anywhere;
}
.cj-map-page #building-panel .bp-unit .bp-unit-s {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    margin-top: auto;
    padding: 3px 6px;
    border-radius: 6px;
    background: var(--unit-fill);
    color: var(--unit-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    opacity: 1;
}
.cj-map-page #building-panel .bp-unit.sel {
    background: var(--explorer-selected-bg);
    border-color: var(--explorer-selected);
    box-shadow: inset 0 0 0 1px var(--explorer-selected);
}
.cj-map-page #building-panel .bp-unit-selected { display: none; }
.cj-map-page #building-panel .bp-unit.sel .bp-unit-selected,
.cj-map-page #building-panel .bp-unit.sel:not(:has(.bp-unit-selected))::after {
    display: block;
    color: #076579;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}
.cj-map-page #building-panel .bp-unit.sel:not(:has(.bp-unit-selected))::after { content: '✓ E zgjedhur'; }
.cj-map-page #building-panel #bp-inside-btn { order: 5; }
.cj-map-page #building-panel #bp-inside-note { order: 6; }
.cj-map-page #building-panel #bp-floor-model-status { order: 2; }
.cj-map-page #building-panel #bp-loc-wrap { order: 8; }
.cj-map-page #building-panel #bp-explore-btn,
.cj-map-page #building-panel #bp-detail-link,
.cj-map-page #building-panel .bp-retry,
.cj-map-page #building-panel .bp-inside {
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid var(--gp-primary);
    border-radius: 11px;
    background: var(--gp-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    box-shadow: none;
    text-decoration: none;
    transform: none;
    filter: none;
    touch-action: manipulation;
}
.cj-map-page #building-panel #bp-detail-link { flex-shrink: 0; margin-top: 12px; }
.cj-map-page #building-panel #bp-detail-link:hover,
.cj-map-page #building-panel #bp-explore-btn:hover,
.cj-map-page #building-panel .bp-retry:hover { background: var(--gp-primary-dark); color: #fff; }
.cj-map-page #building-panel .bp-inside,
.cj-map-page #building-panel .bp-inside.on {
    background: var(--gp-tint-2);
    color: var(--gp-primary-dark);
    border-color: #B9C4BC;
}
.cj-map-page #building-panel .bp-note {
    padding: 10px 12px;
    margin: 0 0 12px;
    background: var(--explorer-selected-bg);
    color: #27535C;
    border: 1px solid #B5D8DF;
    font-size: 14px;
    line-height: 1.5;
}
.cj-map-page #building-panel .bp-alt {
    margin: 12px 0 4px;
    padding: 12px;
    background: var(--gp-bg);
    border: 1px solid var(--gp-line);
    border-radius: 12px;
}
.cj-map-page #building-panel .bp-alt[hidden] { display: none !important; }
/* The pinned footer: one row with a picked flat's views and its details, so every
   way into the flat stays on screen (mid-sheet the views were half hidden on a
   phone, 2026-09-23). */
.cj-map-page #building-panel .bp-foot {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; flex: none; margin-top: 12px;
}
/* Under the scrolling list of flats a rule keeps the list from running into it; on
   the building step it would only split the two actions. */
.cj-map-page #building-panel[data-step="units"] .bp-foot { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--gp-line); }
/* Nothing to act on yet (a floor still loading): no empty band under the rule. */
.cj-map-page #building-panel .bp-foot:not(:has(.bp-media-actions)):has(> #bp-detail-link[style*="display: none"]) { display: none; }
/* The details keep one line: they take what is left of the row, and move to a line
   of their own only when the views need all of it. */
.cj-map-page #building-panel .bp-foot #bp-detail-link {
    flex: 1 1 auto; min-width: max-content; min-height: 52px; margin-top: 0;
    padding: 14px 16px; border-radius: 12px; white-space: nowrap;
}
.cj-map-page #building-panel .bp-foot:has(.bp-media-actions) #bp-detail-link {
    box-shadow: 0 8px 18px -10px rgba(var(--gp-primary-rgb), .7);
}
.cj-map-page #building-panel .bp-foot:has(.bp-media-actions) #bp-detail-link::after {
    content: ''; display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: -4px;
    background: currentColor;
    -webkit-mask: var(--gp-icon-arrow) center / contain no-repeat; mask: var(--gp-icon-arrow) center / contain no-repeat;
}
/* The views: soft buttons with the icon over the word - the icons of the viewer's
   own tabs (app-shell.css), so the map and the viewer read as one. */
.cj-map-page #building-panel .bp-media-actions { display: flex; flex: 0 0 auto; gap: 8px; margin: 0; }
.cj-map-page #building-panel .bp-media-actions a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 60px; min-height: 52px; padding: 6px 10px; box-sizing: border-box;
    border: 0; border-radius: 12px; background: var(--gp-tint-2); color: var(--gp-primary-dark);
    box-shadow: inset 0 0 0 1px rgba(var(--gp-primary-rgb), .16);
    font-size: 13px; font-weight: 700; line-height: 1.15; text-align: center;
    text-decoration: none; touch-action: manipulation;
    transition: background-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.cj-map-page #building-panel .bp-media-actions a::before {
    content: ''; flex: none; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: var(--gp-icon-3d) center / contain no-repeat; mask: var(--gp-icon-3d) center / contain no-repeat;
}
.cj-map-page #building-panel .bp-media-actions a[data-media-view="plan"]::before { -webkit-mask-image: var(--gp-icon-plan); mask-image: var(--gp-icon-plan); }
.cj-map-page #building-panel .bp-media-actions a[data-media-view="photos"]::before { -webkit-mask-image: var(--gp-icon-photos); mask-image: var(--gp-icon-photos); }
.cj-map-page #building-panel .bp-media-actions a:active,
.cj-map-page #building-panel .bp-foot #bp-detail-link:active { transform: scale(.97); }
/* The building step's two ways inside, side by side (Besnik, 2026-10-03): its floors and
   flats here in the map, and in the viewer with the furniture - the filled one, since the
   rooms read more cleanly there. The name above links to the project's page. */
.cj-map-page #building-panel[data-step="building"]:not(.peek) { flex-flow: row wrap; align-content: flex-start; column-gap: 8px; }
.cj-map-page #building-panel[data-step="building"]:not(.peek) > * { flex: 0 0 100%; min-width: 0; }
.cj-map-page #building-panel[data-step="building"]:not(.peek) > #bp-explore-btn,
.cj-map-page #building-panel[data-step="building"]:not(.peek) > .bp-foot { flex: 0 0 calc(50% - 4px); margin-top: 12px; }
.cj-map-page #building-panel[data-step="building"]:not(.peek) #bp-explore-btn,
.cj-map-page #building-panel[data-step="building"]:not(.peek) .bp-foot #bp-detail-link {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; min-width: 0; min-height: 50px; padding: 8px 10px; border-radius: 14px;
    font-size: 14px; font-weight: 800; line-height: 1.2; white-space: nowrap;
}
/* The step sets the link's display inline (block); the button's [hidden] still wins. */
.cj-map-page #building-panel[data-step="building"]:not(.peek) .bp-foot #bp-detail-link:not([style*="display: none"]) { display: flex !important; }
.cj-map-page #building-panel[data-step="building"]:not(.peek) #bp-explore-btn[hidden] { display: none; }
.cj-map-page #building-panel[data-step="building"]:not(.peek) > #bp-explore-btn[hidden] + .bp-foot { flex-basis: 100%; }
.cj-map-page #building-panel[data-step="building"]:not(.peek) #bp-explore-btn {
    background: #fff; color: var(--gp-primary); border: 1.5px solid rgba(var(--gp-primary-rgb), .55);
}
.cj-map-page #building-panel[data-step="building"]:not(.peek) .bp-foot #bp-detail-link {
    background: var(--gp-primary); color: #fff; border: 1.5px solid var(--gp-primary);
    box-shadow: 0 6px 18px -6px rgba(var(--gp-primary-rgb), .75), inset 0 0 0 1px rgba(0, 224, 138, .35);
}
@media (hover: hover) {
    .cj-map-page #building-panel[data-step="building"]:not(.peek) #bp-explore-btn:not(:disabled):hover { background: var(--gp-tint-2); color: var(--gp-primary-dark); }
    .cj-map-page #building-panel .bp-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.cj-map-page #building-panel .bp-ico { flex: none; }
.cj-map-page #building-panel .bp-title a { color: inherit; text-decoration: none; }
.cj-map-page #building-panel .bp-title a::after { content: ' \203A'; color: var(--gp-primary); font-weight: 800; }
.cj-map-page #building-panel .floor-strip .bp-dev { margin: 0 0 2px; color: var(--gp-navy); font-size: 13px; font-weight: 700; line-height: 1.4; }
/* The investor and the project over the map: a phone's floors step only (below). */
.cj-map-page #bp-project-card { display: none; }
/* Hover only where a pointer hovers: on a phone it stayed on after the tap. */
@media (hover: hover) {
    .cj-map-page #building-panel .bp-media-actions a:hover { background: var(--gp-tint); box-shadow: inset 0 0 0 1px rgba(var(--gp-primary-rgb), .32); }
}
.cj-map-page #building-panel .bp-alt:hover { background: var(--gp-bg-alt); border-color: #B9C4BC; }
.cj-map-page #building-panel .bp-alt-t,
.cj-map-page #building-panel .bp-alt-t i { color: var(--gp-primary); font-size: 14px; }
.cj-map-page #building-panel .bp-alt-s { color: var(--gp-muted); font-size: 14px; line-height: 1.5; }
.cj-map-page #building-panel .bp-loc { background: var(--gp-tint-2); border-color: #B5D8DF; padding: 12px; }
.cj-map-page #building-panel .bp-loc-svg { background: var(--gp-navy); padding: 8px; border-radius: 8px; }
.cj-map-page #building-panel .bp-loc-cap { color: var(--gp-navy); font-size: 14px; line-height: 1.5; }
.cj-map-page #building-panel .bp-loc-btn,
.cj-map-page #building-panel .bp-loc-btn.ghost {
    min-height: 44px;
    background: #fff;
    border-color: #B9C4BC;
    color: var(--gp-primary-dark);
    font-size: 14px;
}
.cj-map-page #building-panel .bp-loc-btn.on { background: var(--explorer-selected-bg); border-color: var(--explorer-selected); }
.cj-map-page #floor-rail {
    top: 144px;
    left: 16px;
    max-height: calc(100dvh - 168px);
    padding: 8px;
    gap: 6px;
    border-radius: 16px;
    scrollbar-width: thin;
    scrollbar-color: #B5B2A8 transparent;
}
.cj-map-page #floor-rail .fr-cap { color: var(--gp-muted); font-size: 12px; opacity: 1; }
.cj-map-page #floor-rail .fr-btn {
    min-width: 48px;
    min-height: 52px;
    gap: 3px;
    background: #fff;
    color: var(--gp-muted);
    border: 1px solid var(--gp-line);
    border-radius: 10px;
}
.cj-map-page #floor-rail .fr-btn.all,
.cj-map-page #floor-rail .fr-btn.some,
.cj-map-page #building-panel .bp-floor.all,
.cj-map-page #building-panel .bp-floor.some {
    background: var(--explorer-free-bg);
    color: var(--explorer-free);
    border-color: var(--gp-st-free-line);
}
.cj-map-page #floor-rail .fr-btn.sold,
.cj-map-page #building-panel .bp-floor.sold {
    background: var(--explorer-sold-bg);
    color: var(--explorer-sold);
    border-color: var(--gp-st-sold-line);
}
.cj-map-page #floor-rail .fr-n { font-size: 16px; font-weight: 700; line-height: 1.2; }
.cj-map-page #floor-rail .fr-a { font-size: 12px; opacity: 1; line-height: 1.25; }
.cj-map-page #floor-rail .fr-btn.sel,
.cj-map-page #building-panel .bp-floor.sel {
    background: var(--explorer-selected-bg);
    color: #076579;
    border: 1px solid var(--explorer-selected);
    outline: 2px solid var(--explorer-selected);
    outline-offset: -2px;
}
.cj-map-page #building-panel :focus-visible,
.cj-map-page #floor-rail :focus-visible {
    outline: 3px solid var(--explorer-selected) !important;
    outline-offset: 2px;
}
/* With the building panel open, the loading pill keeps its place above the 3D how-to
   (84 px, as without the panel) on the map the panel leaves. It used to drop to 24 px,
   under the how-to, which is drawn over it: on a project link, the entry that loads
   longest, "Po ngarkohet harta…" stayed hidden for ~3.75 s (measured 2026-09-24). */
.cj-map-page.bp-open #tile-toast-3d {
    left: calc((100% - 440px) / 2) !important;
    bottom: 84px !important;
    max-width: calc(100vw - 440px);
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 12px !important;
}
@media (min-width: 769px) {
    /* The panel ends 40 px above the window's foot: the map credits sit there (below). */
    .cj-map-page #building-panel { top: 144px; right: 80px; max-height: calc(100dvh - 184px) !important; }
    /* Only the horizontal heading slider re-centres on the space the panel leaves.
       The vertical tilt slider belongs on the left edge; this rule used to throw it
       into the middle of the map, right beside the building. */
    .cj-map-page.bp-open #cam-heading { left: calc((100% - 440px) / 2); }
    /* The how-to centres there too: centred on the whole window it ran 12 px onto the
       panel's edge, and away from the loading pill it was meant to sit under. */
    .cj-map-page.bp-open #cesium-info { left: calc((100% - 440px) / 2); max-width: calc(100% - 480px); }
    /* With a building open the promo strip stays off, as on a phone. Drawn above the
       panel, its track took every click on the pinned footer (3D, Plani, Detajet) from
       1280x800 to 1440x900, and its gradient dimmed them (2026-09-24). Hidden, not
       display:none: the strip's display is what keeps the credits lifted above it
       (has-strip, explore.js), and changed here it stayed off after the panel closed. */
    .cj-map-page.bp-open #promo-strip { visibility: hidden !important; }
    /* The map credits (Esri's attribution is a licence term) sat behind the open panel.
       They go under it, right-aligned with it: the how-to and the loading pill, centred
       on the map the panel leaves, never reach there. */
    .cj-map-page.bp-open #cesium-container .cesium-viewer-bottom { right: 80px !important; bottom: 6px !important; }
}
@media (max-width: 768px) {
    .cj-map-page #building-panel {
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        max-height: var(--bp-snap, 56dvh);
        padding: 0 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 22px 22px 0 0;
        border-bottom: 0;
        transition: max-height .2s ease, height .2s ease;
    }
    .cj-map-page #building-panel.tall { --bp-snap: 84dvh; }
    /* The floor's unit list arrives after the sheet is already open, and a bottom
       sheet that grows takes its own content upward with it: measured on a phone,
       269 -> 470 px about 0.8 s after the camera landed, 0.62 of the 0.74 layout
       shift on that journey. The half sheet is now one row of flats and the footer
       (2026-09-23), so it is sized by them and the loader below reserves exactly
       that; the tall sheet takes its snap height up front. */
    .cj-map-page #building-panel[data-step="units"].tall { height: var(--bp-snap, 84dvh); }
    /* The row of flats and the footer that follows it replace this loader. Only the
       loader reserves: it is the one div with this class (the "no apartments" and
       "could not load" messages are p). */
    .cj-map-page #building-panel[data-step="units"] #bp-units > div.bp-units-load { min-height: 127px; }
    .cj-map-page #building-panel.peek { padding-block: 6px calc(6px + env(safe-area-inset-bottom, 0px)) !important; }
    /* The handle rides on the header instead of taking a 44 px row of its own. Its tap
       area covers the middle of the header, where the building's name is text, not a
       control: a tap there minimises the sheet as the handle does. */
    .cj-map-page #building-panel #bp-grab {
        position: absolute; top: 0; left: 50%; z-index: 2; transform: translateX(-50%);
        width: 132px; height: 44px; min-height: 0; padding: 6px 0 0;
    }
    .cj-map-page #building-panel #bp-grab::before { background: #A7AAA1; width: 36px; }
    .cj-map-page #building-panel .bp-head { margin: 0 0 8px; padding: 14px 0 0; border-bottom: 0; }
    .cj-map-page #building-panel.peek .bp-head { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
    .cj-map-page #building-panel.peek #bp-grab { min-height: 44px; padding: 6px 0 4px; }
    /* ── One row for the floor and its flats (Besnik, 2026-09-23: the list "zë shumë vend") ──
       The half sheet is the header, this row and the footer: 208 px, 28% of an S24+, where
       two steppers, a key and two columns of cards took 416 px, 56%. The floor leads its
       flats, as in the viewer, and a tap on it swaps them for the floors. */
    .cj-map-page #building-panel[data-step="units"] .bp-floor-stepper,
    .cj-map-page #building-panel[data-step="units"] .bp-unit-nav,
    .cj-map-page #building-panel[data-step="units"] .bp-availability-key { display: none; }
    /* The cut, its note and where the flat sits in the tower wait for the tall sheet. */
    .cj-map-page #building-panel[data-step="units"]:not(.tall) #bp-inside-btn,
    .cj-map-page #building-panel[data-step="units"]:not(.tall) #bp-inside-note,
    .cj-map-page #building-panel[data-step="units"]:not(.tall) #bp-loc-wrap,
    .cj-map-page #building-panel[data-step="units"]:not(.tall) .bp-alt { display: none; }
    .cj-map-page #building-panel[data-step="units"] .floor-strip { margin-bottom: 0; }
    .cj-map-page #building-panel[data-step="units"] #bp-units {
        display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px;
    }
    .cj-map-page #building-panel[data-step="units"] #bp-units > * { grid-column: 1 / -1; }
    .cj-map-page #building-panel[data-step="units"] #bp-units > .bp-floor-switch { display: flex; grid-column: 1; grid-row: 1; }
    .cj-map-page #building-panel[data-step="units"] #bp-units > .bp-units-grid,
    .cj-map-page #building-panel[data-step="units"] #bp-units > .bp-levels { grid-column: 2; grid-row: 1; }
    .cj-map-page #building-panel[data-step="units"] #bp-units > .bp-units-grid { display: flex; }
    .cj-map-page #building-panel[data-step="units"] #bp-units[data-row="levels"] > .bp-units-grid { display: none; }
    .cj-map-page #building-panel[data-step="units"] #bp-units[data-row="levels"] > .bp-levels { display: flex; }
    /* Both strips scroll sideways, snap to a chip and fade the edge that hides more. */
    .cj-map-page #building-panel[data-step="units"] .bp-units-grid,
    .cj-map-page #building-panel[data-step="units"] .bp-levels {
        gap: 8px; min-width: 0; margin: 0; padding: 2px;
        overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x;
        scroll-snap-type: x proximity; scrollbar-width: none;
    }
    .cj-map-page #building-panel .bp-units-grid::-webkit-scrollbar,
    .cj-map-page #building-panel .bp-levels::-webkit-scrollbar { display: none; }
    .cj-map-page #building-panel [data-fade="end"] {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    }
    .cj-map-page #building-panel [data-fade="start"] {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px);
        mask-image: linear-gradient(90deg, transparent, #000 24px);
    }
    .cj-map-page #building-panel [data-fade="both"] {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    }
    /* A flat is a chip filled with its status, as the viewer's labels and the 3D floor show
       it, and says it in words with a mark of its own shape: never colour alone. */
    .cj-map-page #building-panel .bp-unit {
        --unit-on-dark: #CFE9DE;
        flex: 0 0 auto; display: grid; grid-template-columns: auto auto; column-gap: 6px; row-gap: 1px;
        align-content: center; justify-content: start; min-width: 76px; min-height: 48px; padding: 5px 12px 6px;
        border: 1px solid var(--unit-line); border-radius: 12px; background: var(--unit-fill); color: var(--unit-ink);
        scroll-snap-align: center; box-shadow: none; transition: background-color .15s ease, color .15s ease;
    }
    .cj-map-page #building-panel .bp-unit.free { --unit-on-dark: var(--gp-st-free); }
    .cj-map-page #building-panel .bp-unit.res { --unit-on-dark: var(--gp-st-res); }
    .cj-map-page #building-panel .bp-unit:hover { background: var(--unit-fill); border-color: var(--unit-line); }
    .cj-map-page #building-panel .bp-unit .bp-unit-n { grid-column: 1; grid-row: 1; font-size: 15px; font-weight: 800; line-height: 1.2; color: inherit; }
    .cj-map-page #building-panel .bp-unit .bp-unit-m {
        display: none; grid-column: 2; grid-row: 1; align-self: end;
        font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap;
    }
    .cj-map-page #building-panel .bp-unit .bp-unit-s {
        grid-column: 1 / -1; grid-row: 2; margin: 0; padding: 0; border-radius: 0;
        background: none; color: inherit; font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap;
    }
    .cj-map-page #building-panel .bp-unit .bp-unit-s::before { box-shadow: none; }
    .cj-map-page #building-panel .bp-unit.res .bp-unit-s::before { background: transparent; border: 2px solid currentColor; }
    .cj-map-page #building-panel .bp-unit.sold .bp-unit-s::before { width: 10px; height: 3px; flex-basis: 10px; border-radius: 2px; }
    .cj-map-page #building-panel .bp-unit.unknown .bp-unit-s::before { background: transparent; border: 2px dashed currentColor; }
    /* The chosen flat: the dark chip of its own 3D label in the selection's cyan ring, with
       the size the stepper and the card used to show. */
    .cj-map-page #building-panel .bp-unit.sel { background: #0C332F; color: #FFFFFF; border-color: #0C332F; box-shadow: inset 0 0 0 2px #22D3EE; }
    .cj-map-page #building-panel .bp-unit.sel .bp-unit-s { color: var(--unit-on-dark); }
    .cj-map-page #building-panel .bp-unit.sel .bp-unit-m { display: block; color: #CFE9DE; }
    .cj-map-page #building-panel .bp-unit.sel .bp-unit-selected,
    .cj-map-page #building-panel .bp-unit.sel:not(:has(.bp-unit-selected))::after { display: none; content: none; }
    /* The floor that leads the row, and the strip of floors it opens. */
    .cj-map-page #building-panel .bp-floor-switch {
        align-items: center; gap: 6px; min-width: 48px; min-height: 48px; margin: 2px 0; padding: 4px 8px 4px 12px;
        border: 1px solid #0B5D4E; border-radius: 12px; background: #0B5D4E; color: #FFFFFF;
        font: inherit; text-align: left; cursor: pointer; touch-action: manipulation;
    }
    .cj-map-page #building-panel .bp-floor-switch-t { display: flex; flex-direction: column; line-height: 1.2; }
    .cj-map-page #building-panel .bp-floor-switch strong { font-size: 14px; font-weight: 700; white-space: nowrap; }
    .cj-map-page #building-panel .bp-floor-switch small { font-size: 12px; font-weight: 600; color: #CFE9DE; white-space: nowrap; }
    .cj-map-page #building-panel .bp-floor-switch::after {
        content: ''; flex: none; width: 16px; height: 16px; background: currentColor;
        -webkit-mask: var(--gp-icon-caret) center / contain no-repeat; mask: var(--gp-icon-caret) center / contain no-repeat;
    }
    .cj-map-page #building-panel .bp-floor-switch[aria-expanded="true"] {
        justify-content: center; width: 48px; padding: 0; border-color: #D9E3DE; background: #FCFDFD; color: #0C332F;
    }
    .cj-map-page #building-panel .bp-floor-switch[aria-expanded="true"] .bp-floor-switch-t { display: none; }
    .cj-map-page #building-panel .bp-floor-switch[aria-expanded="true"]::after {
        width: 20px; height: 20px; -webkit-mask-image: var(--gp-icon-chevron-left); mask-image: var(--gp-icon-chevron-left);
    }
    .cj-map-page #building-panel .bp-levels > button {
        flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
        min-height: 48px; padding: 5px 12px; border: 1px solid #D9E3DE; border-radius: 12px; background: #FCFDFD; color: #0C332F;
        font: inherit; text-align: left; white-space: nowrap; cursor: pointer; scroll-snap-align: center; touch-action: manipulation;
    }
    .cj-map-page #building-panel .bp-levels > button strong { font-size: 14px; font-weight: 700; line-height: 1.2; }
    .cj-map-page #building-panel .bp-levels > button small { font-size: 12px; font-weight: 600; line-height: 1.25; color: #52625C; }
    .cj-map-page #building-panel .bp-levels > button[aria-pressed="true"] { border-color: #0B5D4E; background: #0B5D4E; color: #FFFFFF; }
    .cj-map-page #building-panel .bp-levels > button[aria-pressed="true"] small { color: #CFE9DE; }
    /* The page's reset rings any focused button; a tap focuses these, so only the keyboard
       gets the ring. */
    .cj-map-page #building-panel .bp-floor-switch:focus:not(:focus-visible),
    .cj-map-page #building-panel .bp-levels > button:focus:not(:focus-visible),
    .cj-map-page #building-panel .bp-unit:focus:not(:focus-visible) { outline: none; }
    .cj-map-page:has(#building-panel[data-step="units"]) #floor-rail { display: none !important; }
    .cj-map-page.bp-open #tile-toast-3d {
        top: 68px !important;
        right: 12px !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        max-width: calc(100vw - 24px);
    }
}
/* Mobile apartment selection: the floors down the left of the sheet, highest first as
   in a lift, the chosen floor's flats beside them in two readable columns (Besnik,
   2026-10-03), and the picked apartment's summary/actions in the collapsed sheet. */
@media (max-width: 768px) {
    .cj-map-page #building-panel[data-step="units"] .bp-floor-switch,
    .cj-map-page #building-panel[data-step="units"] .bp-levels,
    .cj-map-page #building-panel[data-step="units"] .bp-floor-stepper,
    .cj-map-page #building-panel[data-step="units"] .bp-availability-key { display: none !important; }
    .cj-map-page #building-panel[data-step="units"] #bp-units {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
    }
    .cj-map-page #building-panel[data-step="units"] #bp-units:has(> .bp-floor-col) {
        display: grid;
        grid-template-columns: 62px minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        column-gap: 10px;
        align-items: start;
    }
    .cj-map-page #building-panel[data-step="units"] #bp-units:has(> .bp-floor-col) > * { grid-column: 2; grid-row: auto; }
    .cj-map-page #building-panel[data-step="units"] #bp-units:has(> .bp-floor-col) > .bp-units-head,
    .cj-map-page #building-panel[data-step="units"] #bp-units:has(> .bp-floor-col) > .bp-units-load { grid-row: 1; }
    .cj-map-page #building-panel[data-step="units"] #bp-units:has(> .bp-floor-col) > .bp-units-grid { grid-row: 2; }
    .cj-map-page #building-panel[data-step="units"] #bp-units:has(> .bp-floor-col) > .bp-floor-col {
        grid-column: 1;
        grid-row: 1 / -1;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 6px;
        max-height: 196px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
    }
    .cj-map-page #building-panel .bp-floor-col::-webkit-scrollbar { display: none; }
    .cj-map-page #building-panel .bp-floor-col-cap {
        padding: 0 0 2px;
        color: var(--gp-muted);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .08em;
        text-align: center;
    }
    .cj-map-page #building-panel .bp-floor-col-btn {
        flex: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        width: 100%;
        min-height: 46px;
        padding: 3px 0;
        border: 1px solid #D9E3DE;
        border-radius: 12px;
        background: #fff;
        color: #0C332F;
        font: inherit;
        cursor: pointer;
        touch-action: manipulation;
    }
    .cj-map-page #building-panel .bp-floor-col-btn strong { font-size: 15px; font-weight: 800; line-height: 1.1; }
    .cj-map-page #building-panel .bp-floor-col-btn small { font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--gp-st-free-ink); }
    .cj-map-page #building-panel .bp-floor-col-btn.sold small,
    .cj-map-page #building-panel .bp-floor-col-btn.none small { color: var(--gp-muted); }
    .cj-map-page #building-panel .bp-floor-col-btn[aria-pressed="true"] {
        border-color: #0B5D4E;
        background: #0B5D4E;
        color: #fff;
        box-shadow: inset 0 0 0 2px #22D3EE;
    }
    .cj-map-page #building-panel .bp-floor-col-btn[aria-pressed="true"] small { color: #CFE9DE; }
    .cj-map-page #building-panel .bp-floor-col-btn:focus:not(:focus-visible) { outline: none; }
    .cj-map-page #building-panel[data-step="units"] .bp-units-head {
        display: block;
        order: 1;
        margin: 2px 0 8px;
        color: var(--gp-navy);
        font-size: 13px;
        font-weight: 700;
    }
    .cj-map-page #building-panel[data-step="units"] .bp-units-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
        order: 3;
        margin: 0 0 12px;
        padding: 0;
        overflow: visible;
        overscroll-behavior: auto;
        scroll-snap-type: none;
        -webkit-mask-image: none;
        mask-image: none;
    }
    /* Three lines, so a long type never pushes the flat's number out of its card in a
       column beside the floors: the number, its size and type, its state. */
    .cj-map-page #building-panel[data-step="units"] .bp-unit {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: center;
        gap: 1px;
        width: auto;
        min-width: 0;
        min-height: 72px;
        padding: 8px 10px;
        border-radius: 12px;
        text-align: left;
        scroll-snap-align: none;
    }
    .cj-map-page #building-panel[data-step="units"] .bp-unit .bp-unit-n {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        overflow: hidden;
        font-size: 17px;
        text-overflow: ellipsis;
    }
    .cj-map-page #building-panel[data-step="units"] .bp-unit .bp-unit-m {
        display: block;
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        overflow: hidden;
        color: var(--gp-muted);
        font-size: 11px;
        font-weight: 650;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .cj-map-page #building-panel[data-step="units"] .bp-unit .bp-unit-s {
        grid-column: 1;
        grid-row: 3;
        display: inline-flex;
        min-width: 0;
        color: var(--unit-ink);
        white-space: normal;
    }
    .cj-map-page #building-panel[data-step="units"] .bp-unit.free,
    .cj-map-page #building-panel[data-step="units"] .bp-unit.res,
    .cj-map-page #building-panel[data-step="units"] .bp-unit.sold,
    .cj-map-page #building-panel[data-step="units"] .bp-unit.unknown { background: #fff; }
    .cj-map-page #building-panel[data-step="units"] .bp-unit.res { background: #FFFCF4; }
    .cj-map-page #building-panel[data-step="units"] .bp-unit.sold,
    .cj-map-page #building-panel[data-step="units"] .bp-unit.unknown { background: #F7F8F7; }
    .cj-map-page #building-panel[data-step="units"] .bp-unit.sel {
        border-color: #0C332F;
        background: #0C332F;
        box-shadow: inset 0 0 0 2px #22D3EE;
        color: #fff;
    }
    .cj-map-page #building-panel[data-step="units"] .bp-unit.sel .bp-unit-n { color: #fff; }
    .cj-map-page #building-panel[data-step="units"] .bp-unit.sel .bp-unit-m { color: #CFE9DE; }
    .cj-map-page #building-panel[data-step="units"] .bp-unit.sel .bp-unit-s { color: var(--unit-on-dark, #CFE9DE); }
    .cj-map-page #building-panel[data-step="units"] .bp-unit.sel .bp-unit-selected,
    .cj-map-page #building-panel[data-step="units"] .bp-unit.sel:not(:has(.bp-unit-selected))::after {
        display: none;
        content: none;
    }
    .cj-map-page #building-panel[data-step="units"] .bp-selection-summary {
        display: flex;
        align-items: center;
        gap: 4px 9px;
        flex-wrap: wrap;
        min-width: 0;
        margin: 0 0 10px;
        padding: 8px 10px;
        border: 1px solid var(--gp-line);
        border-radius: 12px;
        background: #fff;
    }
    .cj-map-page #building-panel .bp-selection-summary[hidden] { display: none !important; }
    .cj-map-page #building-panel .bp-selection-name { color: var(--gp-navy); font-size: 14px; }
    .cj-map-page #building-panel .bp-selection-details { color: var(--gp-muted); font-size: 12px; }
    .cj-map-page #building-panel .bp-selection-status {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-left: auto;
        color: var(--gp-st-free-ink);
        font-size: 12px;
        font-weight: 750;
        white-space: nowrap;
    }
    .cj-map-page #building-panel .bp-selection-status::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--gp-st-free);
    }
    .cj-map-page #building-panel .bp-selection-status.reserved { color: var(--gp-st-res-ink); }
    .cj-map-page #building-panel .bp-selection-status.reserved::before { background: var(--gp-st-res); }
    .cj-map-page #building-panel .bp-selection-status.sold { color: var(--gp-st-sold-ink); }
    .cj-map-page #building-panel .bp-selection-status.sold::before { background: var(--gp-st-sold); }
    .cj-map-page #building-panel .bp-selection-status.unknown { color: var(--gp-muted); }
    .cj-map-page #building-panel .bp-selection-status.unknown::before { background: transparent; border: 1px dashed var(--gp-muted); }

    .cj-map-page #building-panel[data-step="units"][data-snap="peek"] {
        height: auto !important;
        max-height: min(210px, calc(100dvh - 24px)) !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .cj-map-page #building-panel[data-step="units"][data-snap="peek"] > .bp-body {
        display: block !important;
        flex: none;
        max-height: none;
        overflow: visible;
        padding: 0 !important;
    }
    .cj-map-page #building-panel[data-step="units"][data-snap="peek"] .bp-title,
    .cj-map-page #building-panel[data-step="units"][data-snap="peek"] .bp-price,
    .cj-map-page #building-panel[data-step="units"][data-snap="peek"] .bp-context,
    .cj-map-page #building-panel[data-step="units"][data-snap="peek"] .floor-strip,
    .cj-map-page #building-panel[data-step="units"][data-snap="peek"] #bp-units { display: none !important; }
    .cj-map-page #building-panel[data-step="units"][data-snap="peek"] .bp-selection-summary { display: flex !important; }
    .cj-map-page #building-panel[data-step="units"][data-snap="peek"] > .bp-foot { display: flex !important; }
    .cj-map-page #building-panel[data-step="units"][data-snap="peek"] .bp-foot {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
}

/* A phone held upright (Besnik, 2026-10-03): the sheet is a smaller, see-through card
   over the foot of the map; in the floors step the project names itself over the top
   left and the picked flat's views ride over the top of the map, so the sheet holds the
   floors and their flats. */
@media (max-width: 768px) and (orientation: portrait) {
    /* The glass is a layer under the content, not the sheet's own backdrop-filter: that
       would make the sheet the containing block of the floors step's fixed bar. */
    .cj-map-page #building-panel {
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, .75);
        background: transparent;
        isolation: isolate;
        box-shadow: 0 10px 34px rgba(12, 51, 47, .22);
    }
    .cj-map-page #building-panel::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background: rgba(255, 255, 255, .28);
        -webkit-backdrop-filter: blur(26px) saturate(200%);
        backdrop-filter: blur(26px) saturate(200%);
        pointer-events: none;
    }
    /* Glass inside the glass, and on the buttons (Besnik, 2026-10-03: "rrit transparencen
       edhe me shume, edhe ne butona tjere"): the map shows through every box, blurred by
       the sheet. A flat keeps its state's edge; what is chosen stays dark enough to read. */
    .cj-map-page #building-panel #bp-snap-toggle,
    .cj-map-page #building-panel #bp-close,
    .cj-map-page #building-panel .bp-back { background: rgba(255, 255, 255, .3); border-color: rgba(255, 255, 255, .6); }
    .cj-map-page #building-panel[data-step="units"] .bp-selection-summary { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .7); }
    .cj-map-page #building-panel .bp-floor-col-btn { border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .2); }
    .cj-map-page #building-panel .bp-floor-col-btn[aria-pressed="true"] { border-color: rgba(11, 93, 78, .9); background: rgba(11, 93, 78, .88); }
    .cj-map-page #building-panel[data-step="units"] .bp-unit.free,
    .cj-map-page #building-panel[data-step="units"] .bp-unit.res,
    .cj-map-page #building-panel[data-step="units"] .bp-unit.sold,
    .cj-map-page #building-panel[data-step="units"] .bp-unit.unknown { background: rgba(255, 255, 255, .22); }
    .cj-map-page #building-panel[data-step="units"] .bp-unit.res { background: rgba(255, 244, 214, .3); }
    .cj-map-page #building-panel[data-step="units"] .bp-unit.sold,
    .cj-map-page #building-panel[data-step="units"] .bp-unit.unknown { background: rgba(236, 240, 238, .22); }
    .cj-map-page #building-panel[data-step="units"] .bp-unit.sel { border-color: rgba(12, 51, 47, .9); background: rgba(12, 51, 47, .88); }
    .cj-map-page #building-panel[data-step="building"]:not(.peek) #bp-explore-btn { background: rgba(255, 255, 255, .25); }
    .cj-map-page #building-panel[data-step="building"]:not(.peek) .bp-foot #bp-detail-link,
    .cj-map-page #building-panel[data-step="units"]:not(.peek) .bp-foot #bp-detail-link {
        background: rgba(11, 93, 78, .82);
        -webkit-backdrop-filter: blur(12px) saturate(160%);
        backdrop-filter: blur(12px) saturate(160%);
    }

    /* The building step: the arrow and the close ride on the name's line, and the name,
       the investor, the address and the price take the place of the old wide button. */
    .cj-map-page #building-panel[data-step="building"]:not(.peek) { padding: 6px 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
    .cj-map-page #building-panel[data-step="building"]:not(.peek) .bp-head {
        position: absolute; top: 10px; right: 10px; z-index: 3; margin: 0; padding: 0; gap: 6px;
    }
    .cj-map-page #building-panel[data-step="building"]:not(.peek) #bp-head-label { display: none; }
    .cj-map-page #building-panel[data-step="building"]:not(.peek) > .bp-body {
        display: flex; flex-direction: column; overflow: visible; padding: 10px 2px 0;
    }
    .cj-map-page #building-panel[data-step="building"]:not(.peek) .bp-title {
        display: flex; align-items: center; min-height: 44px; margin: 0 0 2px; padding-right: 100px;
        font-size: 18px; line-height: 1.25;
    }
    .cj-map-page #building-panel[data-step="building"]:not(.peek) .floor-strip { order: 1; margin: 0; }
    .cj-map-page #building-panel[data-step="building"]:not(.peek) .floor-strip p:not(.bp-dev) { margin: 0; color: #41544D; font-size: 13px; line-height: 1.4; }
    .cj-map-page #building-panel[data-step="building"]:not(.peek) .bp-price { order: 2; margin: 2px 0 0; font-size: 13px !important; font-weight: 700; }

    /* The floors step. */
    .cj-map-page.bp-open:has(#building-panel[data-step="units"]) #bp-project-card {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 70;
        display: block;
        box-sizing: border-box;
        max-width: calc(100% - 186px);   /* clear of "Pamja 3D" (154 px at the top right) */
        padding: 7px 12px 8px;
        border: 1px solid rgba(255, 255, 255, .8);
        border-radius: 14px;
        background: rgba(255, 255, 255, .3);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        box-shadow: 0 4px 16px rgba(12, 51, 47, .22);
        color: #0C332F;
        text-decoration: none;
    }
    .cj-map-page #bp-project-card .bp-pc-dev,
    .cj-map-page #bp-project-card .bp-pc-meta { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .cj-map-page #bp-project-card .bp-pc-dev { font-size: 13px; font-weight: 800; line-height: 1.3; }
    .cj-map-page #bp-project-card .bp-pc-meta { margin-top: 1px; color: #41544D; font-size: 12px; font-weight: 600; line-height: 1.35; }
    /* 3D, Plani, Detajet: over the top of the map, under the project. The bar keeps its
       box while a floor loads (hidden, not gone), so the flat is framed below it from the
       first flight (explore.js mapSelectionViewport). */
    .cj-map-page #building-panel[data-step="units"]:not(.peek) > .bp-foot {
        position: fixed;
        top: 71px;
        left: 12px;
        right: 12px;
        z-index: 70;
        display: flex !important;
        flex-wrap: nowrap;
        gap: 8px;
        min-height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        pointer-events: none;
    }
    .cj-map-page #building-panel[data-step="units"]:not(.peek) > .bp-foot:not(:has(.bp-media-actions)):has(> #bp-detail-link[style*="display: none"]) { visibility: hidden; }
    .cj-map-page #building-panel[data-step="units"]:not(.peek) > .bp-foot > * { pointer-events: auto; }
    .cj-map-page #building-panel[data-step="units"]:not(.peek) .bp-media-actions a,
    .cj-map-page #building-panel[data-step="units"]:not(.peek) .bp-foot #bp-detail-link {
        min-width: 0;
        min-height: 44px;
        border-radius: 999px;
        font-size: 13px;
        white-space: nowrap;
    }
    .cj-map-page #building-panel[data-step="units"]:not(.peek) .bp-media-actions a {
        flex-direction: row;
        gap: 6px;
        padding: 0 14px;
        background: rgba(255, 255, 255, .3);
        color: #0C332F;
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        box-shadow: 0 3px 12px rgba(12, 51, 47, .22), inset 0 0 0 1px rgba(12, 51, 47, .1);
    }
    .cj-map-page #building-panel[data-step="units"]:not(.peek) .bp-media-actions a::before { width: 18px; height: 18px; }
    .cj-map-page #building-panel[data-step="units"]:not(.peek) .bp-foot #bp-detail-link {
        flex: 1 1 auto;
        padding: 11px 16px;
        line-height: 22px;
        box-shadow: 0 4px 14px rgba(var(--gp-primary-rgb), .45);
    }
    /* The map's loading pill steps under that bar instead of onto it. */
    .cj-map-page.bp-open:has(#building-panel[data-step="units"]:not(.peek)) #tile-toast-3d { top: 125px !important; }
    /* The credits (Esri's attribution is a licence term) stand just above the sheet, at
       the left: the top left is the project's in the floors step. explore.js keeps the
       sheet's height in --bp-sheet-h. */
    .cj-map-page.bp-open #cesium-container .cesium-viewer-bottom {
        top: auto !important;
        bottom: calc(var(--bp-sheet-h, 300px) + 14px) !important;
        left: 14px !important;
        right: auto !important;
        max-width: calc(100% - 28px);
        padding: 0 5px;
        border-radius: 6px;
        background: rgba(12, 51, 47, .55);
    }
    .cj-map-page.bp-open #cesium-container .cesium-credit-expand-link { white-space: nowrap; }
}
/* A short landscape window stands the panel at the side (explore.html: right 12 px, 300 px
   wide): the credits go to the top, left of it - at the foot the 3D how-to met them. Keep
   this before the short-viewport block below, whose 340 px panel moves them further left. */
@media (orientation: landscape) and (max-height: 620px) {
    .cj-map-page.bp-open #cesium-container .cesium-viewer-bottom { top: 12px !important; bottom: auto !important; left: auto !important; right: 320px !important; }
}
/* No panel open, a short landscape window: the 3D controls and the heading slider share one
   line at 184 px (client-journey.css), where the credits lifted for the strip fell behind the
   zoom buttons, or off the top of a 360 px phone. They go on the strip's own header line, at
   its right end, level with "PROJEKTET" (122-137 px from the foot, measured 2026-09-24). */
@media (min-width: 701px) and (max-height: 620px) {
    .cj-map-page.has-strip:not(.bp-open) #cesium-container .cesium-viewer-bottom { top: auto !important; bottom: 116px !important; left: auto !important; right: 20px !important; }
}
/* The map's own controls on small screens, measured on fourteen (2026-09-24). Up to 768 px
   the 2D/3D toggle stays a row, as client-journey.css already has it up to 700: stacked, it
   ran 108 px down the right edge and "Pamja 3D" covered its 3D button. */
@media (max-width: 768px) {
    .cj-map-page #view-toggle { flex-direction: row; padding: 3px; }
    .cj-map-page .view-btn { min-height: 44px; padding: 6px; }
    .cj-map-page .view-btn i { display: none; }
}
/* A short screen - a phone held sideways: the legend and the "?" are placed from the foot
   of the map, which is right for a tall one, and at 360-400 px they climbed under the
   filter bar and its summary chip. They join the basemap switcher's row instead,
   [switcher] [?] [legend], the legend top-aligned with the switcher. */
@media (max-height: 460px) {
    .cj-map-page #cesium-legend { left: 156px; bottom: 176px; }
}
@media (max-height: 460px) and (max-width: 768px) {
    body.cj-map-page:has(#cesium-basemap-switcher[style*="display: flex"]) #map-help { left: 82px; bottom: 195px; }
    .cj-map-page #cesium-legend { left: 138px; bottom: 162px; }
}
/* Short and touch: the camera sliders lay across the legend and the switcher; a finger
   tilts and turns the map itself, as on the phones below 769 px that never show them. */
@media (max-height: 460px) and (pointer: coarse) {
    #cam-pitch, #cam-heading { display: none !important; }
}
/* A narrow phone held upright: the legend, the "?" and "Pamja 3D" (154 px) need 386 px for
   one row, and below that "Pamja 3D" covered the "?". It goes above "Pamja 3D", at the right
   edge: "Pamja 3D" stands 244-290 px from the foot there (client-journey.css), 8 px below. */
@media (max-width: 385px) and (orientation: portrait) {
    body.cj-map-page:has(#cesium-basemap-switcher[style*="display: flex"]) #map-help { left: auto; right: 12px; bottom: 298px; }
}
/* "Kate min" in the "Pamja 3D" settings, after the sun and the terrain: moved from the
   removed "Navigim" panel (2026-09-24), in the settings' own rhythm. */
.cj-map-page .cj-scene-sep { display: block; height: 1px; margin: 12px 0; background: rgba(255, 255, 255, 0.14); }
.cj-map-page #floors-min { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--gp-on-dark); font-size: var(--fs-xs); font-weight: 700; }
.cj-map-page #floors-min .fa { color: var(--glass-mint); }
/* Over #sun-control input[type=range] (190 px, 110 on a phone, explore.html): this one
   runs the settings' full width. */
.cj-map-page #sun-control #floors-min-slider { display: block; width: 100%; margin: 0; accent-color: var(--gp-accent-on-dark); cursor: pointer; }
@media (max-width: 768px) and (max-height: 500px) {
    .cj-map-page #building-panel { --bp-snap: 72dvh; }
    .cj-map-page #building-panel.tall { --bp-snap: 90dvh; }
}
/* Keep the floor and apartment row usable on a phone held sideways. */
@media (max-width: 768px) and (max-height: 500px) and (orientation: landscape) {
    .cj-map-page.bp-open #building-panel {
        top: 12px !important;
        bottom: 12px !important;
        height: auto !important;
        max-height: calc(100dvh - 24px) !important;
        padding: 8px 12px !important;
        border-radius: 16px;
    }
    .cj-map-page #building-panel .bp-head { padding-top: 0; margin-bottom: 6px; }
    .cj-map-page.bp-open #building-panel[data-snap="peek"] { bottom: auto !important; height: fit-content !important; }
    .cj-map-page #building-panel[data-step="units"] .bp-foot { margin-top: 6px; padding-top: 6px; gap: 6px; }
    .cj-map-page #building-panel .bp-foot #bp-detail-link { min-height: 44px; padding: 8px 12px; }
    .cj-map-page #building-panel .bp-media-actions a { min-height: 44px; padding: 4px 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .cj-map-page #building-panel,
    .cj-map-page #building-panel *,
    .cj-map-page #floor-rail * { transition: none !important; animation: none !important; }
}
/* A short viewport keeps one scrollable side panel and a clear map area. */
@media (min-width: 769px) and (max-height: 500px) {
    .cj-map-page.bp-open #building-panel {
        top: 16px !important;
        right: 12px !important;
        width: 340px !important;
        max-height: calc(100dvh - 32px) !important;
    }
    .cj-map-page.bp-open #view-toggle { display: none; }
    .cj-map-page #floor-rail { top: 16px; max-height: calc(100dvh - 32px); }
    .cj-map-page.bp-open #cesium-container .cesium-viewer-bottom { top: 12px !important; bottom: auto !important; left: auto !important; right: 360px !important; }
}
@media (max-height: 500px) {
    .cj-map-page #building-panel .bp-floor-stepper,
    .cj-map-page #building-panel .bp-unit-nav { position: static !important; }
}

.cj-map-page #building-panel .bp-unit.unknown {
    --unit-fill: #F4F6F5;
    --unit-ink: #243F36;
    --unit-line: var(--gp-st-sold-line);
}

.cj-map-page #building-panel[data-step="units"] .bp-context { display: none; }
/* The floor switch and its strip of floors belong to the phone's one row (above); the
   wider panel keeps the steppers and the cards. */
.cj-map-page #building-panel .bp-floor-switch,
.cj-map-page #building-panel .bp-levels,
.cj-map-page #building-panel .bp-unit-nav { display: none !important; }
/* The floor column is the phone's (above); the wider panel has the stepper and the lift panel. */
.cj-map-page #building-panel .bp-floor-col { display: none; }
.cj-map-page #building-panel[data-step="units"] #bp-units .bp-units-head { display: block !important; }

/* ── The map filter: a closed bar that says what the map shows, one panel that opens from it ──
   Closed by default on every screen (Besnik, 2026-09-19: "te qendroj i mbyllur"). The
   controls inside are the same elements with the same handlers as before; what changed
   is where they sit. The price and availability selects stay in the DOM as the single
   source of truth and are driven by the chips and the switch (explore.js,
   mapFilterPanel). */
body.cj-map-page #filter-panel {
    top: 16px; left: 16px; right: auto; width: auto;
    /* 16 + the 2D/3D toggle (181 px at right 20) + 8: at 800 px the bar's own width touched it. */
    max-width: calc(100vw - 225px);
    padding: 6px 6px 6px 16px; border-radius: 16px;
}
body.cj-map-page #brand { gap: 6px; padding-right: 0; justify-content: flex-start; }
body.cj-map-page #brand > a { margin-right: 6px; font-size: var(--fs-md); white-space: nowrap; }
body.cj-map-page #brand-actions { gap: 6px; flex: none; }
#fp-summary {
    display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px;
    padding: 0 12px 0 0; border: 0; border-radius: 12px; background: transparent;
    color: #fff; font-family: inherit; cursor: pointer;
}
#fp-summary::before {
    content: ''; flex: none; width: 1px; height: 28px; margin-right: 4px;
    background: rgba(255, 255, 255, 0.16);
}
#fp-summary > .fa { flex: none; color: var(--glass-mint); font-size: var(--fs-sm); }
#fp-summary:hover #fp-summary-text { text-decoration: underline; text-underline-offset: 3px; }
#fp-summary-text {
    min-width: 0; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--fs-sm); font-weight: 700;
}
#fp-summary-count { flex: none; font-size: var(--fs-xs); font-weight: 500; color: var(--gp-on-dark); white-space: nowrap; }
#fp-summary-count:empty { display: none; }
body.cj-map-page #filter-collapse {
    height: 44px; padding: 0 16px; gap: 8px; border-radius: 12px;
    border: 1px solid rgba(0, 224, 138, 0.45); background: rgba(0, 224, 138, 0.12);
    font-size: var(--fs-sm);
}
body.cj-map-page #filter-collapse .chev { display: none; }
body.cj-map-page #filter-collapse[aria-expanded="true"] {
    background: var(--glass-mint); color: var(--glass-ink); border-color: var(--glass-mint);
}
.fp-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
    background: var(--glass-mint); color: var(--glass-ink); font-size: var(--fs-2xs); font-weight: 800;
}
#filter-collapse[aria-expanded="true"] .fp-badge { background: var(--glass-ink); color: var(--glass-mint); }
body.cj-map-page #nav-menu-btn { border-radius: 12px; }

/* The panel. */
body.cj-map-page #filter-body {
    position: absolute; top: calc(100% + 10px); left: 0; z-index: 1;
    width: 448px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 120px);
    box-sizing: border-box; overflow-y: auto; margin: 0; padding: 20px;
    border: 1px solid var(--glass-line); border-radius: 18px;
    background: rgba(6, 32, 30, 0.97); backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
}
body.cj-map-page #filter-body.collapsed { display: none; }
body.cj-map-page .fp-sheet-head { display: none; }
body.cj-map-page #fp-rail {
    display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    gap: 18px; overflow: visible; max-height: none; padding: 0;
}
body.cj-map-page .fp-label {
    display: block; margin: 0 0 8px;
    font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--gp-on-dark);
}
body.cj-map-page #fp-rail .fp-seg {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px;
}
body.cj-map-page #fp-rail .fp-seg .kind-chip {
    justify-content: center; min-height: 44px; padding: 0 12px; border-radius: 9px; font-size: var(--fs-sm);
}
body.cj-map-page #fp-rail .fp-seg .kind-chip i { display: inline-block; }
body.cj-map-page #fp-rail .fp-select {
    width: 100%; max-width: none; height: 46px; min-height: 46px; padding: 0 14px;
    box-sizing: border-box; border-radius: 12px;
}
/* 16px, or iOS zooms the whole page when the list takes focus. */
body.cj-map-page #fp-rail .fp-select select { width: 100%; max-width: none; font-size: var(--fs-base); }
body.cj-map-page #fp-rail .fp { position: static; }
/* The old popover triggers: the options now show in place. */
body.cj-map-page #fp-rail .fp > .fp-pill { display: none; }
body.cj-map-page #fp-rail .fp-pop {
    display: flex; position: static; flex-direction: row; flex-wrap: wrap; gap: 8px;
    min-width: 0; max-width: none; padding: 0; border: 0;
    background: none; box-shadow: none; backdrop-filter: none;
}
body.cj-map-page .fp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.cj-map-page #fp-rail .fp-pop .filter-chip,
body.cj-map-page .fp-chips .filter-chip {
    width: auto; min-height: 44px; padding: 0 14px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18); background: transparent;
    color: #D7EAE3; font-size: var(--fs-sm); font-weight: 600;
}
body.cj-map-page #fp-rail .fp-pop .filter-chip.active,
body.cj-map-page .fp-chips .filter-chip.active {
    border-color: var(--glass-mint); background: rgba(0, 224, 138, 0.16); color: #fff; font-weight: 700;
}
body.cj-map-page .fp-price-select,
body.cj-map-page .fp-avail-select { display: none; }
.fp-switch {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 48px; padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.05);
    color: #fff; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.fp-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fp-switch-ui {
    position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.2); transition: background 0.15s;
}
.fp-switch-ui::after {
    content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; transition: transform 0.15s;
}
.fp-switch input:checked + .fp-switch-ui { background: var(--glass-mint); }
.fp-switch input:checked + .fp-switch-ui::after { transform: translateX(18px); }
.fp-switch input:focus-visible + .fp-switch-ui { outline: 3px solid var(--glass-mint); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fp-switch-ui, .fp-switch-ui::after { transition: none; } }
body.cj-map-page .cj-more-filters { position: static; }
body.cj-map-page .cj-more-filters > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; height: auto; min-height: 44px; box-sizing: border-box; padding: 0 14px;
    border-radius: 12px; background: transparent; list-style: none; font-size: var(--fs-sm);
}
body.cj-map-page .cj-more-filters > summary::-webkit-details-marker { display: none; }
body.cj-map-page .cj-more-filters > summary::after {
    content: ''; flex: none; width: 7px; height: 7px; box-sizing: border-box;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
body.cj-map-page .cj-more-filters[open] > summary::after { transform: translateY(2px) rotate(225deg); }
body.cj-map-page .cj-more-body {
    position: static; display: flex; flex-direction: column; gap: 16px;
    min-width: 0; padding: 16px 2px 2px; background: none; box-shadow: none;
}
body.cj-map-page .fp-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
body.cj-map-page .fp-foot .fp-clear {
    height: 44px; padding: 0 6px; border: 0; background: none; color: var(--gp-on-dark);
    font-size: var(--fs-sm); text-decoration: underline;
}
body.cj-map-page .fp-foot .fp-clear .fa { display: none; }
.fp-apply {
    margin-left: auto; height: 46px; padding: 0 22px; border: 0; border-radius: 12px;
    background: var(--glass-mint); color: var(--glass-ink);
    font-family: inherit; font-size: var(--fs-base); font-weight: 800; cursor: pointer;
}
/* The count now lives in the closed bar and on the Shfaq button. */
body.cj-map-page #fp-count { display: none !important; }
#fp-scrim { display: none; }

@media (max-width: 768px) {
    body.cj-map-page #filter-panel {
        top: 12px; left: 12px; max-width: calc(100vw - 112px); padding: 4px 4px 4px 12px;
    }
    body.cj-map-page #brand > a { font-size: var(--fs-base); margin-right: 2px; }
    /* On a phone the summary hangs under the bar as a small chip. */
    #fp-summary {
        position: absolute; left: 0; top: calc(100% + 8px); height: 32px; min-height: 0;
        max-width: calc(100vw - 24px); padding: 0 12px; gap: 8px; border-radius: 999px;
        background: var(--glass-bg); border: 1px solid var(--glass-line);
    }
    #fp-summary::before, #fp-summary > .fa { display: none; }
    #fp-summary-text { max-width: 230px; font-size: var(--fs-xs); }
    #fp-summary-count { font-size: var(--fs-xs); }
    body.cj-map-page #filter-collapse { padding: 0 12px; font-size: var(--fs-sm); }
    /* The panel becomes a sheet from the bottom. The bar's backdrop-filter would make it
       the containing block of a fixed child, so it goes while the sheet is open. */
    body.cj-map-page #filter-panel:has(#filter-body:not(.collapsed)) { backdrop-filter: none; z-index: 300; }
    body.cj-map-page #filter-body {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        width: auto; max-width: none; max-height: 82dvh; padding: 0 20px;
        border-width: 1px 0 0; border-radius: 22px 22px 0 0;
        background: rgb(6, 32, 30); backdrop-filter: none;
    }
    body.cj-map-page .fp-sheet-head {
        position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
        padding: 14px 0 8px; background: rgb(6, 32, 30);
    }
    .fp-sheet-head strong { font-size: var(--fs-md); font-weight: 800; color: #fff; }
    #fp-close {
        display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
        border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer;
    }
    body.cj-map-page #fp-rail { padding: 4px 0; }
    body.cj-map-page .fp-foot {
        position: sticky; bottom: 0; margin: 16px -20px 0;
        padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); background: rgb(6, 32, 30);
    }
    .fp-apply { flex: 1; max-width: 260px; }
    body.cj-map-page #filter-panel:has(#filter-body:not(.collapsed)) #fp-scrim {
        display: block; position: fixed; inset: 0; z-index: 0; background: rgba(4, 20, 18, 0.45);
    }
}
/* Phone discovery: one compact view menu and a readable, quiet results shelf. */
@media (max-width: 768px) {
    body.cj-map-page:not(.bp-open) #sun-control {
        top: auto; bottom: 156px; right: 12px; width: 132px; transform: none;
        background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 3px 16px #102d2520;
    }
    body.cj-map-page:not(.bp-open) #sun-control > summary { color: #15483d; padding: 0 12px; min-height: 44px; }
    body.cj-map-page .cj-scene-settings-body { box-sizing: border-box; max-height: min(460px, calc(100dvh - 260px)); }
    body.cj-map-page .mobile-map-tools { display: grid; gap: 14px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid #ffffff26; }
    body.cj-map-page .mobile-map-tools #map3d-controls,
    body.cj-map-page .mobile-map-tools #cesium-basemap-switcher,
    body.cj-map-page .mobile-map-tools #cesium-legend,
    body.cj-map-page .mobile-map-tools #map-help {
        position: static !important; inset: auto !important; transform: none !important;
        width: auto; max-width: 100%; margin: 0; box-shadow: none;
    }
    body.cj-map-page .mobile-map-tools #map3d-controls { justify-content: space-between; gap: 4px; }
    body.cj-map-page .mobile-map-tools #cesium-basemap-switcher { flex-wrap: wrap; gap: 6px; padding: 0; background: none; }
    body.cj-map-page .mobile-map-tools #cesium-basemap-switcher .bm-tile { flex: 1; min-width: 50px; }
    body.cj-map-page .mobile-map-tools #cesium-legend { padding: 0; background: none; border: 0; }
    body.cj-map-page .mobile-map-tools #map-help { justify-self: start; border-radius: 10px; min-width: 44px; }
    body.cj-map-page .mobile-map-tools #map-help::after { content: ' Ndihmë'; font: 600 13px var(--gp-font); }
    body.cj-map-page .mobile-map-tools #map-help { width: auto; padding: 0 12px; gap: 8px; }
    /* The shelf of projects: small and see-through, glass cards over the foot of the map
       (Besnik, 2026-10-03) where it was a 130 px band of its own. The city is on screen
       already, so a card says the name and the one line under it. */
    body.cj-map-page:not(.bp-open) #promo-strip { padding: 0 10px 10px; background: transparent; border-top: 0; }
    body.cj-map-page:not(.bp-open) #promo-strip .promo-head { display: none; }
    body.cj-map-page:not(.bp-open) .promo-track { gap: 8px; padding: 2px 0 0; }
    body.cj-map-page:not(.bp-open) .promo-card {
        width: auto; max-width: 260px; min-height: 0; box-sizing: border-box; gap: 10px; padding: 6px 14px 6px 6px;
        background: rgba(255, 255, 255, .3); border: 1px solid rgba(255, 255, 255, .7); border-radius: 14px;
        -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
        box-shadow: 0 4px 14px rgba(12, 51, 47, .18);
    }
    body.cj-map-page:not(.bp-open) .promo-thumb { width: 44px; height: 44px; flex-basis: 44px; border-radius: 10px; }
    body.cj-map-page:not(.bp-open) .promo-name { max-width: 180px; font-size: 13.5px; line-height: 1.3; color: #183e33; }
    body.cj-map-page:not(.bp-open) .promo-price { font-size: 11.5px; line-height: 1.4; font-weight: 600; color: #476259; }
    body.cj-map-page:not(.bp-open) .promo-sub { display: none; }
    /* What the shorter shelf frees comes down to it: the credits, the scale, the "?" and
       the right-hand column - fullscreen, zoom, the layers, the basemap tile. */
    body.cj-map-page.has-strip:not(.bp-open) #cesium-container .cesium-viewer-bottom { bottom: 80px !important; left: 12px !important; right: auto !important; top: auto !important; z-index: 60; background: #15483d; border-radius: 4px; padding: 0 4px; }
    body.cj-map-page.has-strip:not(.bp-open) #sun-control { bottom: 80px; }
    /* One line, cut with "…" (the satellite's credits run three lines), right of the scale. */
    body.cj-map-page.has-strip:not(.bp-open) .ol-attribution { bottom: 70px; right: 12px; max-width: calc(100% - 172px); overflow: hidden; z-index: 60; font-size: 10px; }
    body.cj-map-page.has-strip:not(.bp-open) .ol-attribution ul { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    body.cj-map-page.has-strip:not(.bp-open) .ol-attribution li { display: inline; }
    body.cj-map-page.has-strip:not(.bp-open) .ol-scale-line { bottom: 74px; left: 70px; }
    body.cj-map-page.has-strip:not(.bp-open) #map-help { bottom: 70px; }
    body.cj-map-page.has-strip #basemap-tile { bottom: 96px; }
    body.cj-map-page.has-strip #toggle-layers { bottom: 162px; }
    body.cj-map-page.has-strip #poi-toggle { bottom: 162px; }
    body.cj-map-page.has-strip #poi-panel { bottom: 214px; }
    /* The map's notice ("Në Ferizaj ende s'ka listime…") centres in the room left of the
       two button columns: centred on the page it lay over the places-nearby button. */
    .cj-map-page #map-toast { left: calc(50% - 52px); max-width: calc(100vw - 136px); }
    body.cj-map-page.has-strip .ol-zoom { bottom: 214px !important; }
    body.cj-map-page.has-strip .ol-full-screen { bottom: 318px !important; }
    /* The layers open beside their column, under the filter bar, never behind it, and
       stop short of the places-nearby button (#poi-toggle, right 64 + 44), which
       otherwise stood over their edge (2026-10-04). */
    body.cj-map-page #layer-panel { left: 12px; right: 120px; bottom: 116px; }
}
@media (min-width: 769px) { .mobile-map-tools { display: none; } }
@media (max-width: 768px) { body.cj-map-page #cesium-info { display: none !important; } }

/* Unlock richer views after choosing an area; shared links bypass this entry state. */
body.gp-city-first #btn-3d,
body.gp-city-first #toggle-layers,
body.gp-city-first #poi-toggle,
body.gp-city-first #poi-panel,
body.gp-city-first #basemap-tile,
body.gp-city-first #layer-panel{display:none!important}
/* With neither of those two under it, the column keeps its old place on the overview. */
body.gp-city-first .ol-zoom{bottom:252px!important}
body.gp-city-first .ol-full-screen{bottom:356px!important}

/* Municipality-only discovery has no raster backdrop or listing shelf. */
body.gp-city-first #map{background:#f6f8f5}
body.gp-city-first #promo-strip{display:none!important}

/* The map's own buttons in glass too (Besnik, 2026-10-03: "edhe ne butona tjere"). "Pamja 3D"
   carries words, so its dark glass keeps the map's 0.62 (white text at 4.5:1 over a light
   map); the round ones carry only icons and go lighter, still 3:1 over white. Hover and an
   open layers panel keep their own fill. */
.cj-map-page #sun-control { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.cj-map-page .ol-control button { background: rgba(6, 32, 30, .5) !important; }
.cj-map-page #toggle-layers:not(:hover):not(.active),
.cj-map-page #poi-toggle:not(:hover):not(.active):not(.on),
.cj-map-page #map-help:not(:hover),
.cj-map-page #map3d-controls button:not(:hover) { background: rgba(6, 32, 30, .5); }
.cj-map-page #m3d-compass:not(:hover) { background: rgba(6, 32, 30, .5) !important; }