#stickyfilters {
    transition: none !important;
}

#resultsSummary:empty {
    display: none;
}

/* Google Places PAC */
.pac-container {
    z-index: 5000 !important;
    top: 150px;
}

/* Generic modal plumbing (your custom one, not Bootstrap's) */
.modal {
    display: none;
    position: fixed;
    z-index: 5000 !important;
    height: 300px;
    padding: 0;
}

.modal-content {
    position: relative;
}

.close {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

/* List fade animations */
#businessListContainer {
    transition: opacity 0.5s ease;
}

    #businessListContainer.is-fading-out {
        opacity: 0;
    }

    #businessListContainer.is-fading-in {
        opacity: 1;
    }

/* Layout sizing map vs listings (desktop) */
@media (min-width: 992px) {
    main .content-wrapper.d-lg-flex > .d-lg-flex.flex-grow-1 {
        display: flex;
        width: 100%;
    }

    #listingsSection.listings-section {
        flex: 1 1 55%;
        max-width: 55%;
        /* push listings down under fixed navbar */
        padding-top: var(--nav-h) !important;
    }

    main.content-wrapper {
        overflow-x: clip;
    }
}

/* --- Card grid consistency --- */
#businessListContainer .card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#businessListContainer .card-img-top {
    flex: 0 0 auto;
}

/* Cards: use fixed height approach */
:root {
    --card-img-h: 200px;
}

/*main.content-wrapper {
    padding-top: var(--nav-h, 84px) !important;
}*/

@media (min-width: 576px) {
    :root {
        --card-img-h: 190px;
    }
}

@media (min-width: 992px) {
    :root {
        --card-img-h: 210px;
    }
}

#businessListContainer .card-img-top {
    height: var(--card-img-h);
    overflow: hidden;
}

    #businessListContainer .card-img-top img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

#businessListContainer .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

    /* Title clamp */
    #businessListContainer .card-body .h5 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.2;
        margin-bottom: 0.5rem;
    }

    #businessListContainer .card-body h3 {
        margin-bottom: 0.5rem;
    }

        #businessListContainer .card-body h3 .text-body {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

    /* Tags clamp */
    #businessListContainer .card-body .fa-sm {
        max-height: 3.1rem;
        overflow: hidden;
        position: relative;
    }

        /* Fade hint that tags are clipped */
        #businessListContainer .card-body .fa-sm::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            width: 40%;
            height: 1.2rem;
            pointer-events: none;
            background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--bs-body-bg));
        }

/* ---------- Listing highlight (NO BLUR, HIGHLIGHT BG ONLY) ---------- */

/* Let highlight ring/shadow paint over neighbors */
#businessListContainer .business-list-item {
    position: relative;
    overflow: visible;
}

    /* Base transitions (lightweight) */
    #businessListContainer .business-list-item > article.card {
        position: relative;
        transition: background-color 140ms ease, outline-color 140ms ease, outline-offset 140ms ease, box-shadow 140ms ease;
    }

/* Do NOT de-emphasize other cards */
#businessListContainer.has-highlight .business-list-item > article.card:not(.is-highlighted) {
    filter: none;
    opacity: 1;
}

/* Highlighted card: background tint + on top */
#businessListContainer.has-highlight .business-list-item > article.card.is-highlighted {
    --hl: 47,128,237; /* marker blue as RGB */
    background-color: rgba(var(--hl), .18) !important;
    outline: 4px solid rgb(var(--hl));
    box-shadow: 0 0 0 6px rgba(var(--hl), .18);
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    #businessListContainer .business-list-item > article.card {
        transition: none !important;
    }
}

[data-bs-theme="dark"] #businessListContainer .card-body .fa-sm::after {
    background: linear-gradient(to right, rgba(0, 0, 0, 0), var(--bs-body-bg));
}

@media (min-width: 992px) {
    .map-section {
        position: sticky;
        top: var(--nav-h);
        height: calc(100vh - var(--nav-h));
        overflow: hidden;
    }

    #leafletMap {
        height: 100% !important;
    }
}

/* Sticky filters cd ..must sit below fixed navbar */
#listingsSection #stickyfilters.sticky-top {
    top: var(--nav-h, 84px) !important; /* fallback if var not set */
    z-index: 1020; /* below navbar (1030), above content */
}

/* Optional: ensure it paints over content behind it while stuck */
#listingsSection #stickyfilters {
    position: sticky;
    top: var(--nav-h);
    z-index: 50;
    /* Make it an opaque “mask” */
    background: var(--bs-body-bg);
    /* Overlap the column edges so outlines can’t peek through */
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 8px;
    padding-right: 8px;
    /* Prevent anything underneath from visually bleeding through */
    overflow: hidden;
    /* Optional: makes the separation look intentional */
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.business-list-loading-bar-track {
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0,0,0,.12);
}

.business-list-loading-bar-fill {
    height: 100%;
    width: 35%;
    border-radius: 999px;
    background: currentColor; /* inherits text color (nice for theme) */
    animation: loadingBar 1.1s ease-in-out infinite;
    transform-origin: left center;
}

@keyframes loadingBar {
    0% {
        width: 0%;
        transform: none;
    }

    70% {
        width: 100%;
        transform: none;
    }

    100% {
        width: 100%;
        transform: none;
    }
}

/* The frame is the positioning context */
/* Works for BOTH list wrapper (div.card-img-top) and slideout (.photo-frame) */
.card-img-top,
.photo-frame {
    position: relative;
}

    .card-img-top .attraction-img-unavailable-text,
    .photo-frame .attraction-img-unavailable-text {
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
        padding: 6px 10px;
        border-radius: 999px;
        font-size: .9rem;
        line-height: 1.2;
        color: #fff;
        background: rgba(0,0,0,.55);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .15s ease;
        white-space: nowrap;
    }

    /* Reveal when wrapper is marked unavailable */
    .card-img-top.is-unavailable .attraction-img-unavailable-text,
    .photo-frame.is-unavailable .attraction-img-unavailable-text {
        opacity: 1;
    }

.biz-photo-selected-strip {
    display: flex;
    gap: .5rem;
    overflow: auto;
    white-space: nowrap;
    min-height: 92px;
    align-items: center;
}

.biz-photo-selected-tile {
    width: 88px;
    flex: 0 0 auto;
    cursor: grab;
    position: relative;
}

    .biz-photo-selected-tile:active {
        cursor: grabbing;
    }

    .biz-photo-selected-tile img {
        width: 88px;
        height: 66px;
        object-fit: cover;
        border-radius: .5rem;
        display: block;
    }

    .biz-photo-selected-tile .badge {
        position: absolute;
        top: 4px;
        left: 4px;
    }

    .biz-photo-selected-tile .btn-close {
        position: absolute;
        top: 2px;
        right: 2px;
        background-color: rgba(255,255,255,.85);
        border-radius: 999px;
        padding: 6px;
    }