/* inked/assets/css/location-v2/filters.css */
/**
 * Location Listing v2 -- Filter Bar
 * Location filter bar uses .masters-filter-bar classes from masters-v2/listing.css.
 * This file adds the .location-filter-bar alias and any location-specific tweaks.
 */

/* Location filter bar inherits all masters-filter-bar styling.
   The dual class selector provides location-specific overrides if needed. */

.location-filter-bar {
    /* Inherits masters-filter-bar positioning and glassmorphism */
}

/* Location-specific: the load more button reuses masters pattern */
.location-load-more-btn {
    /* Inherits masters-load-more-btn */
}

/* Context indicator for active filter state */
.location-filter-bar[data-context="country"] .masters-filter-inner,
.location-filter-bar[data-context="city"] .masters-filter-inner {
    /* No special overrides needed — keeping selector for future use */
}

/* 2026-05-10: H1 location accent — gold-italic highlight on country/city
   name inside h1 (Founder feedback: «нет подсветки локации в h1 страницы»).
   Lexicon templates wrap [[+name]] in <em class="h1-loc">. */
h1 .h1-loc {
    color: var(--color-accent, #c5a45e);
    font-style: italic;
    font-weight: inherit;
}

/* 2026-05-10: View-toggle (Grid/Map) was rendered but invisible (width=0)
   on desktop because masters-v2/listing.css scoped sizing only inside
   media query. Force visible sizing on location-filter-bar context. */
.location-filter-bar .masters-view-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
    align-items: center;
    margin-left: auto;
}

.location-filter-bar .view-toggle-btn {
    width: 36px;
    height: 36px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-fg-muted, rgba(255, 255, 255, 0.55));
    transition: color 120ms ease, border-color 120ms ease;
    padding: 0;
}

/* MP25 invisible 44px hit-zone — keeps the 36px visual */
.location-filter-bar .view-toggle-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.location-filter-bar .view-toggle-btn:hover {
    color: var(--color-fg, #fff);
    border-color: var(--color-border-hover, rgba(255, 255, 255, 0.24));
}

.location-filter-bar .view-toggle-btn.active {
    color: var(--color-accent, #c5a45e);
    border-color: var(--color-accent, #c5a45e);
}

.location-filter-bar .view-toggle-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   INFINITE SCROLL SENTINEL + SPINNER
   Replaces the old "Load More" button.
   Sentinel is a zero-height IntersectionObserver target;
   spinner shows only while the next page is fetching.
   ══════════════════════════════════════════ */
.location-scroll-sentinel {
    width: 100%;
    height: 1px;
}

.location-scroll-spinner {
    display: none;
    justify-content: center;
    align-items: center;
    padding: 40px 24px 64px;
}

.location-scroll-spinner .location-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border, rgba(255, 255, 255, 0.1));
    border-top-color: var(--gold, #c8a45e);
    border-radius: 50%;
    animation: location-spin 0.6s linear infinite;
}

@keyframes location-spin {
    to { transform: rotate(360deg); }
}