/* Section tabs for the Land and Commercial pages.
   Load AFTER main.css and buying.css (listing cards, filters, modal and loader styles come from buying.css). */

.ls-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 28px 16px 0;
}

.ls-tab {
    padding: 12px 30px;
    border: 1px solid #b8c4ce;
    border-radius: 999px;
    background: #ffffff;
    font: 500 13px 'Montserrat', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #14354d;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ls-tab:hover:not(.is-active) {
    background: #f6f8fa;
}

.ls-tab.is-active {
    background: #14354d;
    border-color: #14354d;
    color: #ffffff;
}

.ls-tab:focus-visible {
    outline: 3px solid #14354d;
    outline-offset: 2px;
}

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

@media screen and (max-width: 600px) {
    .ls-tab {
        flex: 1 1 40%;
        padding: 11px 14px;
        font-size: 12px;
    }
}

/* Prefixed ids can't use buying.css's #clearFilters / #resultCount rules, so mirror them by class */
.filter-footer span[id$="resultCount"] { font-weight: 500; }
.clear-filters {
    padding: 7px 16px;
    border: 1px solid #b8c4ce;
    border-radius: 999px;
    background: #ffffff;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}
.clear-filters:hover {
    background: #14354d;
    border-color: #14354d;
    color: #ffffff;
}
@media screen and (max-width: 600px) {
    .clear-filters { font-size: 11px; padding: 6px 14px; }
}