/* Sella.dk - search.css: filterbar og resultatliste på forsiden */

.new-today-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0 0 var(--space-3);
    padding: var(--space-1) var(--space-2);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.new-today-badge svg {
    width: 14px;
    height: 14px;
    color: var(--color-primary);
}

.category-shortcuts {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-4);
}

.category-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    flex: 0 0 auto;
    min-width: 76px;
    padding: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-align: center;
}

.category-shortcut__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-primary);
}

.category-shortcut__icon svg {
    width: 18px;
    height: 18px;
}

.category-shortcut__label {
    font-size: 0.75rem;
    white-space: nowrap;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-shortcut.is-active {
    border-color: var(--color-primary);
}

.category-shortcut.is-active .category-shortcut__icon {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.filter-bar {
    position: relative;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.filter-bar__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.filter-bar__field:last-child {
    margin-bottom: 0;
}

.filter-bar__field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.filter-bar__field input,
.filter-bar__field select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--color-bg);
    color: var(--color-text);
    width: 100%;
}

.filter-bar__group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.filter-bar__group .filter-bar__field {
    flex: 1 1 160px;
    margin-bottom: 0;
}

.filter-bar__field--checkbox {
    flex-direction: row;
    align-items: center;
    min-width: auto;
}

.filter-bar__field--checkbox .form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9rem;
    white-space: nowrap;
}

/* [hidden] alene skjules ikke her, da display sættes ubetinget ovenfor -
   samme faldgrube som beskrevet i AGENTS.md ("Ting vi har lært"). */
.filter-bar__group[hidden] {
    display: none;
}

/* Kompakt værktøjslinje (altid synlig) - erstatter den tidligere altid-udfoldede
   filterrække. Alle detaljerede filtre bor i stedet i #filters-panel (megamenu),
   se nedenfor. */
.search-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.search-toolbar__filters-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
}

.search-toolbar__filters-btn svg {
    width: 16px;
    height: 16px;
}

.search-toolbar__filters-btn[aria-expanded="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-contrast);
}

.filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-danger);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

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

.search-toolbar__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-width: 0;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.8rem;
    max-width: 100%;
}

.filter-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-chip button {
    display: flex;
    flex-shrink: 0;
    border: 0;
    background: none;
    padding: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 0;
}

.filter-chip button svg {
    width: 12px;
    height: 12px;
}

.search-toolbar__sort {
    margin-left: auto;
}

.search-toolbar__sort select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    font-size: 0.85rem;
    font-family: inherit;
    background: var(--color-bg);
    color: var(--color-text);
}

/* Filter-megamenuen - som default (uden JS) vises den inline i normal flow,
   så hele filterformularen forbliver brugbar uden JavaScript. Med JS starter
   den skjult og åbnes/lukkes af #filters-toggle-btn (se search.js). */
.filters-panel {
    margin-top: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.filters-panel[hidden] {
    display: none;
}

.js-enhanced .filters-panel:not([hidden]) {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.filters-panel__header {
    display: none;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.filters-panel__header h2 {
    margin: 0;
    font-size: 1.05rem;
}

.filters-panel__close {
    display: flex;
    border: 0;
    background: none;
    padding: var(--space-1);
    color: var(--color-text-muted);
    cursor: pointer;
}

.js-enhanced .filters-panel__header {
    display: flex;
}

.filters-panel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
}

.filters-panel__section h3 {
    margin: 0 0 var(--space-2);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}

.filters-panel__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.filters-panel__apply {
    margin-left: auto;
}

@media (max-width: 640px) {
    .js-enhanced .filters-panel:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 200;
        border-radius: 0;
        max-height: none;
    }

    .filters-panel__apply {
        margin-left: 0;
        width: 100%;
    }

    .filters-panel__actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* Fastholder filtre/sortering synligt ved scroll ned i et langt annonce-grid
       på mobil, hvor pladsen til at scrolle tilbage til toppen er dyrest.
       Sticky sættes på selve .filter-bar (ikke .search-toolbar) - en sticky
       elements "rækkevidde" er bundet af dens egen containing block, og
       .search-toolbar's nærmeste forælder (.filter-bar) er kun så høj som
       toolbaren selv, når filters-panel er skjult, så den ville aldrig kunne
       "løsne sig" fra normal flow. .filter-bar's egen forælder (.listing-feed)
       er derimod høj (indeholder resten af gridet), så den fungerer korrekt. */
    .js-enhanced .filter-bar {
        position: sticky;
        top: var(--header-height);
        z-index: 30;
    }

    .js-enhanced .search-toolbar {
        background: var(--color-bg);
        padding: var(--space-2) 0;
        border-bottom: 1px solid var(--color-border);
    }
}

.filter-bar__view-toggle {
    display: flex;
    gap: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 2px;
    flex-shrink: 0;
}

.view-toggle__btn {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: none;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    cursor: pointer;
}

.view-toggle__btn.is-active {
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 600;
}

.view-toggle__btn svg {
    width: 16px;
    height: 16px;
}

.map-view {
    height: 60vh;
    min-height: 320px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
}

.map-view[hidden] {
    display: none;
}

.listing-feed__load-more {
    display: flex;
    justify-content: center;
    margin-top: var(--space-5);
}

.listing-feed[aria-busy="true"] {
    opacity: 0.6;
}

.recently-viewed {
    margin: var(--space-4) 0;
}

.recently-viewed__title {
    font-size: 1.1rem;
    margin: 0 0 var(--space-3);
}

.recently-viewed__scroller {
    position: relative;
}

.recently-viewed__list {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-behavior: smooth;
    /* Scrollbaren skjules visuelt (funktionen bevares) - pilekontrollerne
       (.recently-viewed__nav) erstatter den som navigationsaffordance. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.recently-viewed__list::-webkit-scrollbar {
    display: none;
}

.recently-viewed__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.recently-viewed__nav svg {
    width: 18px;
    height: 18px;
}

.recently-viewed__nav--prev {
    left: calc(-1 * var(--space-3));
}

.recently-viewed__nav--next {
    right: calc(-1 * var(--space-3));
}

.recently-viewed__nav[hidden] {
    display: none;
}

@media (max-width: 640px) {
    .recently-viewed__nav--prev {
        left: 0;
    }

    .recently-viewed__nav--next {
        right: 0;
    }
}

/* Kortene genbruger .listing-card (se main.css) for at matche søgeresultat-gridet
   visuelt - kun bredden er bespoke her, da listen er vandret-scrollende i stedet for et grid. */
.recently-viewed__card {
    flex: 0 0 160px;
}

.popular-searches {
    margin: var(--space-4) 0;
}

.popular-searches__title {
    font-size: 1.1rem;
    margin: 0 0 var(--space-3);
}

.popular-searches__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.popular-search-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.85rem;
    text-decoration: none;
}

.popular-search-tag:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.listing-card__compare-checkbox {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px var(--space-2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: #111;
    font-size: 0.75rem;
    cursor: pointer;
}

[data-theme="dark"] .listing-card__compare-checkbox {
    background: rgba(20, 20, 20, 0.85);
    color: #fff;
}

.listing-card__compare-checkbox input {
    margin: 0;
    cursor: pointer;
}

.compare-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
}

.compare-bar[hidden] {
    display: none;
}

body.has-compare-bar {
    padding-bottom: 76px;
}

.compare-bar__items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-width: 0;
}

.compare-bar__chip {
    display: inline-flex;
    align-items: center;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 4px var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-size: 0.8rem;
}

.compare-bar__actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}