/* Isolated fix for sticky positioning on this page only */
body.pg_gallery {
  max-height: none !important;
}

#triggerGalleryFilters,
#clearAllFilters {
  position: sticky;
  top: 60px;
  z-index: 100;
  float: right;
  margin-top: 0.5rem; /* Slight adjustment to center with H1 text */
  padding: 2px 4px;
  margin-right: 8px;
  font-size: 0.75rem;
}

/* Align H1 with the floated button and ensure it doesn't force a line break */
.pg_gallery h1 {
  display: inline-block;
  vertical-align: middle;
}

/* Gallery Filters */
.gallery_filters {
    clear: both; /* Ensures the gallery starts below the floated button and H1 */
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;

    .offcanvas-title {
        font-weight: 500;
    }

    ul {
        padding-left: 0;
        list-style: none;
        &  > :nth-child(n+3) {
            display: inline-block;
        }
        li:first-child,
        li:nth-child(2) {
            flex-basis: 100%;
        }
    }

    .availability-toggle {
        width: 100%;
    }

    .filter-label {
        color: #000;
        letter-spacing: 0.1em;
        font-weight: 700;
    }

    .sticky-sidebar {
        position: sticky;
        top: 80px; /* Adjust based on your header height */
        height: fit-content;
    }

    [id^="filter-"] {
        /* background-color: beige; */
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: stretch;
        gap: 4px;
        button:not(:first-child) {
            width: 100%;
        }
        li {
            flex: 1;
        }
        .filter-link {
            flex: 1;
            background-color: white;
            color: #000;
            text-decoration: none;
            padding: 2px 4px;
            font-size: 0.75rem;
            line-height: 1.1;
            transition: color 0.3s ease;
            display: block;
            width: 100%;
            height: 100%;
            text-align: left;
            border-width: 1px;
            border-radius: 4px;
        }
    }



    /* .filter-link:hover, .filter-link.active {
        background-color: rgb(230, 180, 255);
        color: #fff;
        font-weight: 500;
    } */

    .filter-link {
        color: #000;
        font-weight: 500;
        &:hover {
            background-color: rgb(230, 180, 255);
        }
        &.active {
            background-color: var(--secondary-bg-color);
            color: #fff;
        }
    
    }

    .btn-check + .btn-outline-light {
        background-color: white;
        color: #000;
        border: 1px solid var(--secondary-bg-color);
    }

    .btn-check + .btn:hover {
        background-color: rgb(230, 180, 255);
        color: #000;
        border: 1px solid var(--secondary-bg-color);
        font-weight: 500;
    }

    .btn-check:checked + .btn-outline-light {
        background-color: var(--secondary-bg-color);
        border-color: var(--secondary-bg-color);
        color: #fff;
    }
}



#filter-messaging {
    margin-left: 1rem;
    padding: 2rem;
    background-color: aliceblue;
    color: #000;
    font-size: 1rem;
    font-weight: 700;
}


#offcanvas-reset-btn {
  position: absolute;
  top: 110vh; /* Initial hidden position */
  max-width: 160px;
  left: 140px;
  padding: .5rem 1rem;
  opacity: 0;
  pointer-events: none;
  transition: top 0.6s, opacity 0.3s ease;
  z-index: 10;
}

#offcanvas-reset-btn.show {
  top: 16px; /* Final visible position */
  opacity: 1;
  pointer-events: auto;
}