.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;
    }
}

/*
  Squeezes the map+sidebar to make room for the footer within one viewport ("above the fold")
  on tall screens. This is a height question, not a device-category one: even the tallest current
  phones (iPhone Pro Max, Pixel Pro, Moto G Power, ...) top out around 930-950px of CSS height, so
  950px sits right above ordinary phones - where scrolling for the footer is the normal
  pattern and the map, the page's main content, should get the space instead - while still
  catching genuinely tall viewports (portrait tablets, a resized desktop window, ...) regardless
  of width. The threshold was previously 800px with no floor at all, which also fired on ordinary
  tall phones, shrinking their map to squeeze the footer into view unnecessarily.
*/
@media (min-height: 950px) {
    .shuls-scroll-container {
        display: flex;
        flex-direction: column;
    }
}

/* Same threshold: without this cap the map (once the rule above lets it grow to fill the flex
   column) could get absurdly tall on a very tall/large monitor. */
@media (min-height: 950px) {
    .map-container {
        max-height: 700px;
    }
}

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

/*
  Leaflet's own base CSS sets a blanket 12px on .leaflet-container ("general typography"), which
  anything of ours placed inside the map (the notice, the credit, the count badge) inherits -
  .badge's default .75em would compute against that instead of the normal 16px, rendering at 9px.
  Reset here at the source instead of overriding each badge's own size (same fix
  .leaflet-popup-content applies below, just for badges inside shul popups specifically).
*/
.leaflet-container {
    font-family: unset;
    font-size: 1rem;
}

.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;
}


/* Logged-out popups: a frosted layer over the decorative top of the popup, with the sign-in
   button (or the rate-limit message) centered on it. */
.shul-popup-gate {
    background: rgb(199 199 199 / 35%);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
}

/* The gate sits above the scrolling body, so the body gets what's left of the signed-in cap
   (the name and action rows, about 160px, count against it there). */
.card:has(.shul-popup-gate) .shul-popup-body {
    max-height: 208px;
}

/* 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.
*/
.leaflet-bottom {
    padding-bottom: .5rem;
}

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

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

/* 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 {
    margin: 0;
}

/*
  Caps the CORNER (not the chips inside it directly: they're floated, shrink-to-fit children with
  no definite width of their own, so a % max-width on them would resolve against that same
  shrink-to-fit box - circular, and not what's wanted). 100vw is the viewport's actual width,
  not relative to any ancestor, so this is a flat, reliable cap regardless of DOM nesting; the map
  spans close to the full viewport width everywhere this matters (phones, where the sidebar
  stacks above rather than beside it). 105px leaves room for the opposite corner's column (~42px)
  plus its own inset and a gap, at any width whatsoever. Each chip then wraps within whatever
  width that leaves it, rather than matching the other's width or shrinking its font indefinitely
  (a fixed font floor still overlaps at some width).
*/
.leaflet-bottom.leaflet-right,
.leaflet-bottom.leaflet-left {
    max-width: calc(100vw - 105px);
}

/*
  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%;
    }
}