.max-h-50 {
    max-height: 50% !important;
}

/* Filter sidebar and container scrolling - only on large screens */
@media (min-width: 1024px) {
    .h-lg-100 {
        height: 100% !important;
        max-height: none !important;
    }
}

/* Cap map height on very tall screens */
@media (min-height: 800px) {
    .map-container {
        max-height: 700px;
    }
}

@media (min-height: 800px) {
    .shuls-scroll-container {
        display: flex;
        flex-direction: column;
    }
}

/* Hide the input when the dropdown is NOT active */
.multi.ts-wrapper:not(.dropdown-active)>.ts-control>input[type="text"] {
    display: none !important;
}

.leaflet-container {
    font-family: unset;
}

.shuls-found-control {
    cursor: initial;
}

/* Popup */
.shul-cluster-popup {
    pointer-events: none;
}

/* Tall enough that a single-room shul's accordion item (name/badge, edit/directions
   row, kaddish, and one room card) fits without scrolling, assuming the shul and
   room names don't wrap. The offcanvas switches in below a 600px viewport height
   (see isSmallScreen() in shuls.html), so a non-offcanvas popup is never shown below
   that - at that floor the map is still comfortably taller than this fixed value. */
.shul-popup-body {
    max-height: 360px;
}

.shul-cluster-popup .leaflet-popup-content {
    pointer-events: initial;
    max-width: 425px;
    width: calc(100vw - 40px) !important;
}

.shuls-offcanvas {
    /* Same width as popups */
    max-width: 425px;
    margin: auto;
}

.leaflet-popup-content {
    font-size: 1rem;
    margin: 0;
    margin-top: 40px;
}

.leaflet-popup-content-wrapper {
    border-radius: var(--bs-border-radius) !important;
    padding: 0px;
}


.text-blur {
    filter: blur(5px);
    user-select: none;
}

/* MarkerCluster.Default.css only sets margin-left to center this circle, which centers it */
/* correctly in ltr by luck but not in rtl. Adding margin-right centers it in both. */
.marker-cluster div {
    margin-right: 5px;
}

/* Single cluster icon */
.marker-cluster-wrapper {
    background: none;
}

.marker-cluster-single {
    background-color: rgba(110, 204, 255, 0.6);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    position: relative;
}

.marker-cluster-single::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    background-color: rgba(110, 204, 255, 0.85);
    border-radius: 50%;
}

.marker-cluster-single span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    z-index: 1;
}

/* Map city search: full width on narrow screens, fixed width beside the badges otherwise */
.city-search {
    width: 100%;
}

@media (min-width: 768px) {
    .city-search {
        flex: 0 0 320px;
        width: 320px;
    }
}

/*
  The map's bottom corner (the credit, and the "Exact locations" notice above it) is inset, and
  both are badge-styled like the other overlays on the map, instead of Leaflet's default flush strip.
  The inset is padding on the corner itself so the notice can still match the credit's width:
  width: 0 with min-width: 100% makes it as wide as the corner's content, which shrinks to fit its
  widest control (the credit), whatever the notice's text wraps to.
*/
.leaflet-bottom {
    padding-bottom: .5rem;
}

.leaflet-bottom.leaflet-right {
    padding-right: .5rem;
}

.leaflet-bottom.leaflet-left {
    padding-left: .5rem;
}

/* .badge's .75em is relative to the map's 12px, which would make the credit tiny. It shrinks
   smoothly on narrow phones so it doesn't run over the zoom buttons, and the notice above
   it (as wide as the credit) shrinks with it */
.leaflet-container .leaflet-control-attribution {
    font-size: clamp(10px, 3.2vw, .8rem);
}

/* Leaflet's default margins for controls are dropped: the corner's padding does the insetting,
   and the gap above the credit comes from mb-1, the same gap as between the other overlays */
.leaflet-bottom .leaflet-control.approx-location-notice {
    width: 0;
    min-width: 100%;
    margin: 0;
    font-size: .8rem;
}

/*
  From tablets up there's room for the notice on one line, at its natural width. The credit keeps
  its own width, and both stay aligned to the corner's edge (the floats' sides).
*/
@media (min-width: 768px) {
    .leaflet-bottom .leaflet-control.approx-location-notice {
        width: max-content;
        min-width: 0;
        white-space: nowrap;
    }
}

/*
  The feedback tab (fixed to the screen's edge, from base.css) sits 78% down on phones, where the
  map's bottom corner (the notice and credit) can end up, since on tall phones the map stops well
  short of the screen's bottom. 53% clears both that corner and the count badge at the top-right
  (also at the right edge) on phone heights from 568px to 932px. Any lower and it overlaps the
  corner on tall phones; any higher and it overlaps the count badge on short ones. This file
  only loads on the map page, so other pages keep the tab where it is.
*/
@media (max-width: 768px) {
    body .feedback-tab {
        top: 53%;
    }
}