/* ==========================
   FILTERS POPUP
   Shared modal opened from either the desktop or mobile header-search
   "Filters" trigger (assets/js/header-search.js toggles the [hidden]
   attribute). Reuses .filter-panel/.filter-group (header, title, grouping)
   as-is; the actual options use .filter-pill below, not .filter-option.
========================== */

.filter-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.filter-modal[hidden] {
    display: none;
}

.filter-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(42, 27, 18, 0.45);
}

.filter-modal__panel {
    position: relative;
    z-index: 1;
    width: min(640px, 100%);
    max-height: min(780px, 92vh);
    /* Wider panel + pill-style options (below) are meant to fit without
       scrolling in the common case — auto stays only as a fallback for very
       short viewports or an unusually long term list. */
    overflow-y: auto;
    padding: 1.75rem;
}

.filter-modal__apply {
    width: 100%;
    justify-content: center;
}

.filter-modal__search-input {
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(60, 40, 30, 0.08);
    background: rgba(255, 255, 255, 0.95);
    font-family: var(--font-primary);
    font-size: 0.95rem;
    color: var(--color-text);
}

.filter-modal__search-input::placeholder {
    color: var(--color-text-light);
}

.filter-modal__search-input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* filter-panel.css only shows .filter-panel__close below 1024px, written for
   the old sidebar drawer — inside this popup it's the only way to close it at
   any width, so it must always show. */
.filter-modal__panel .filter-panel__close {
    display: inline-flex;
}

/* .filter-panel__clear is a real <button> here (the reference style-guide
   page uses it as an <a>) — strip the native button chrome, filter-panel.css
   already sets the color/size/weight it should look like. */
.filter-modal__panel .filter-panel__clear {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
.filter-panel__clear:focus {
    color: inherit;
}
/* ==========================
   FILTER PILLS
   Category/amenity/featured/sort options as checkable chips instead of a
   vertical checkbox list — wrap onto as many rows as needed instead of each
   option taking its own row, which is most of what let the wider panel above
   fit without scrolling.
========================== */

.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-pills--row {
    flex-wrap: nowrap;
}

.filter-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(60, 40, 30, 0.14);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.filter-pills:not(.filter-pills--row) .filter-pill {
    flex: 0 1 auto;
}

.filter-pill input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.filter-pill:hover {
    background: rgba(251, 146, 60, 0.14);
}

.filter-pill:has(input:checked) {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg);
}

.filter-pill:has(input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* "Use My Location" is a plain <button>, not a checkbox/radio label — this
   is its equivalent of the checked state above, toggled by assets/js/nearby.js
   once a location actually resolves. */
.filter-pill.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg);
}

/* ==========================
   NEAR ME
========================== */

.filter-modal__area-select {
    width: 100%;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(60, 40, 30, 0.14);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 0.85rem;
    cursor: pointer;
}

.filter-modal__nearby-status {
    font-size: 0.82rem;
    color: var(--color-text-light);
}

/* The banner instance (archive.php) is a bare sibling paragraph, not a
   .filter-group flex child like the modal's copy — needs its own spacing. */
.cta-banner + .filter-modal__nearby-status {
    margin-top: 0.75rem;
}

/* Slightly denser text once this popup is reached via the burger menu
   (mobile) rather than the inline desktop search bar. */
@media (max-width: 768px) {
    .filter-modal__panel .filter-group__title {
        font-size: 0.78rem;
    }

    .filter-pill {
        font-size: 0.78rem;
        padding: 0.42rem 0.85rem;
    }

    .filter-modal__search-input {
        font-size: 0.88rem;
    }
}