/* ==========================================================================
   SERVICES — desktop filter sidebar (modern redesign)

   Scoped to `.filters-sidebar.fsx`. The mobile filter modal reuses the very
   same class names (.filter-section, .filter-option, .filter-title …), so
   every rule here is qualified with .fsx to keep the modal exactly as it is.
   The desktop sidebar is display:none below 769px anyway.

   Selectors are qualified with .services-page-container where they need to
   beat the equally-specific rules already in services.css.
   ========================================================================== */

.filters-sidebar.fsx {
    --fsx-brand: #667eea;
    --fsx-brand-2: #764ba2;
    --fsx-grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --fsx-accent: #ff6b35;
    --fsx-ink: #1e2a3a;
    --fsx-ink-2: #46536a;
    --fsx-muted: #7a8699;
    --fsx-line: #e7e9f3;
    --fsx-tint: #f6f7fe;
}

.filters-sidebar.fsx,
.filters-sidebar.fsx *,
.filters-sidebar.fsx *::before,
.filters-sidebar.fsx *::after {
    box-sizing: border-box;
}

/* The old sidebar capped its height and scrolled internally, which is what
   made it feel cramped. Collapsible sections keep it short enough that the
   cap is never reached in normal use — it stays only as a safety net for
   someone who expands every group at once. */
.services-page-container .filters-sidebar.fsx {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: visible;
    max-height: none;
    border: 1px solid var(--fsx-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(102, 126, 234, .08), 0 1px 4px rgba(0, 0, 0, .04);
}

/* ---------- Sidebar header ---------- */
.fsx-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--fsx-line);
}

.fsx-top-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fsx-ink);
}

.fsx-top-title i {
    color: var(--fsx-brand);
    font-size: .95rem;
}

.fsx-total {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--fsx-grad);
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
}

.fsx-total[hidden] {
    display: none;
}

.fsx-reset {
    margin-left: auto;
    border: none;
    background: none;
    padding: 0;
    color: var(--fsx-muted);
    font-family: inherit;
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
}

.fsx-reset:hover {
    color: var(--fsx-brand);
    border-bottom-color: currentColor;
}

.fsx-reset[hidden] {
    display: none;
}

/* ---------- Scroll body (only scrolls if everything is expanded) ---------- */
.fsx-body {
    flex: 1;
    min-height: 0;
    /* Only bites if someone expands every group at once — the default state
       (one group open) is far shorter than this. */
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d3d9ea transparent;
}

.fsx-body::-webkit-scrollbar {
    width: 6px;
}

.fsx-body::-webkit-scrollbar-thumb {
    background: #d3d9ea;
    border-radius: 999px;
}

.fsx-body::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- Section ---------- */
.services-page-container .filters-sidebar.fsx .filter-section {
    margin: 0;
    padding: 0;
    border: none;
    border-bottom: 1px solid var(--fsx-line);
}

.services-page-container .filters-sidebar.fsx .filter-section:last-of-type {
    border-bottom: none;
}

/* Collapsible header — replaces the old static .filter-title */
.fsx-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 15px 20px;
    border: none;
    background: none;
    color: var(--fsx-ink);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background .15s;
}

.fsx-head:hover {
    background: var(--fsx-tint);
}

.fsx-head:focus-visible {
    outline: 2px solid var(--fsx-brand);
    outline-offset: -2px;
}

.fsx-head > i:first-child {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    color: var(--fsx-brand);
    font-size: .9rem;
}

.fsx-head-label {
    flex: 1;
    min-width: 0;
}

/* Count of applied choices in a collapsed group, so nothing hides silently. */
.fsx-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--fsx-tint);
    color: var(--fsx-brand-2);
    font-size: .72rem;
    font-weight: 700;
}

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

.fsx-chev {
    flex-shrink: 0;
    color: var(--fsx-muted);
    font-size: .72rem;
    transition: transform .22s ease;
}

.filter-section.is-open .fsx-chev {
    transform: rotate(180deg);
}

/* ---------- Panel ---------- */
.fsx-panel {
    display: none;
    padding: 0 12px 14px;
}

.filter-section.is-open .fsx-panel {
    display: block;
}

/* ---------- Option rows ----------
   The radio stays a direct child of .filter-option: index-scripts.php shows
   and hides options via input.parentElement, so that relationship must not
   change. It is visually hidden rather than removed. */
.services-page-container .filters-sidebar.fsx .filter-option {
    position: relative;
    margin: 0;
    padding: 0;
}

.services-page-container .filters-sidebar.fsx .filter-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.services-page-container .filters-sidebar.fsx .filter-option label {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--fsx-ink-2);
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
    transition: background .14s, color .14s;
}

/* Radio dot drawn on the label so the real input can stay hidden. */
.services-page-container .filters-sidebar.fsx .filter-option label::before {
    content: "";
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    border: 2px solid #cbd2e3;
    border-radius: 50%;
    background: #fff;
    transition: border-color .14s, box-shadow .14s;
}

.services-page-container .filters-sidebar.fsx .filter-option label:hover {
    background: var(--fsx-tint);
    color: var(--fsx-brand);
}

.services-page-container .filters-sidebar.fsx .filter-option input:checked + label {
    background: var(--fsx-tint);
    color: var(--fsx-brand-2);
    font-weight: 700;
}

.services-page-container .filters-sidebar.fsx .filter-option input:checked + label::before {
    border-color: var(--fsx-brand);
    box-shadow: inset 0 0 0 3.5px #fff, inset 0 0 0 12px var(--fsx-brand);
}

/* Keyboard focus has to live on the label, since the input is hidden. */
.services-page-container .filters-sidebar.fsx .filter-option input:focus-visible + label {
    outline: 2px solid var(--fsx-brand);
    outline-offset: -2px;
}

/* Rows beyond the fold, revealed by "show all". */
.services-page-container .filters-sidebar.fsx .filter-option.fsx-extra {
    display: none;
}

/* Must out-rank the .fsx-extra hide rule above, which carries the full
   .services-page-container .filters-sidebar.fsx prefix. */
.services-page-container .filters-sidebar.fsx .filter-section.fsx-expanded .filter-option.fsx-extra {
    display: block;
}

.fsx-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 4px 0 0 12px;
    padding: 6px 0;
    border: none;
    background: none;
    color: var(--fsx-brand);
    font-family: inherit;
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
}

.fsx-more:hover {
    text-decoration: underline;
}

.fsx-more i {
    font-size: .68rem;
    transition: transform .2s ease;
}

.filter-section.fsx-expanded .fsx-more i {
    transform: rotate(180deg);
}

.fsx-more[hidden] {
    display: none;
}

/* ---------- Car rental sub-group ---------- */
.services-page-container .filters-sidebar.fsx .car-rental-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 4px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--fsx-ink-2);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s, color .14s;
}

.services-page-container .filters-sidebar.fsx .car-rental-toggle:hover {
    background: var(--fsx-tint);
    color: var(--fsx-brand);
}

.services-page-container .filters-sidebar.fsx .car-rental-toggle i {
    font-size: .72rem;
    color: var(--fsx-muted);
    transition: transform .2s ease;
}

.services-page-container .filters-sidebar.fsx .car-rental-toggle.expanded i {
    transform: rotate(90deg);
}

.services-page-container .filters-sidebar.fsx .car-rental-filter-group {
    padding-left: 14px;
    margin-left: 12px;
    border-left: 2px solid var(--fsx-line);
}

/* ---------- Price ---------- */
.services-page-container .filters-sidebar.fsx .price-range-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
}

.services-page-container .filters-sidebar.fsx .price-range-inputs input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #d7dbe6;
    border-radius: 10px;
    background: #fff;
    color: var(--fsx-ink);
    font-family: inherit;
    font-size: .92rem;
    transition: border-color .15s, box-shadow .15s;
}

.services-page-container .filters-sidebar.fsx .price-range-inputs input:focus {
    outline: none;
    border-color: var(--fsx-brand);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, .15);
}

.services-page-container .filters-sidebar.fsx .price-range-inputs span {
    color: var(--fsx-muted);
}

/* ---------- Sticky actions ----------
   Pinned to the bottom of the sidebar so Apply is reachable without
   scrolling back up, which was the other half of the old annoyance. */
.services-page-container .filters-sidebar.fsx .filter-actions {
    display: flex;
    /* Wrap rather than let a long translation break a label mid-word: worst
       case the two buttons stack, they never grow a second text line. */
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 14px 20px;
    border-top: 1px solid var(--fsx-line);
    background: #fff;
    border-radius: 0 0 18px 18px;
}

.services-page-container .filters-sidebar.fsx .btn-apply-filters {
    flex: 1 1 auto;
    white-space: nowrap;
    min-height: 44px;
    padding: 11px 16px;
    border: none;
    border-radius: 12px;
    background: var(--fsx-grad);
    color: #fff;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(102, 126, 234, .28);
    transition: opacity .15s, transform .15s, box-shadow .15s;
}

.services-page-container .filters-sidebar.fsx .btn-apply-filters:hover {
    opacity: .96;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(102, 126, 234, .34);
}

.services-page-container .filters-sidebar.fsx .btn-clear-filters {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 44px;
    padding: 11px 16px;
    border: 1px solid var(--fsx-line);
    border-radius: 12px;
    background: #fff;
    color: var(--fsx-ink-2);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}

.services-page-container .filters-sidebar.fsx .btn-clear-filters:hover {
    border-color: rgba(102, 126, 234, .45);
    color: var(--fsx-brand);
}

/* Between the tablet breakpoint and desktop the sidebar sits above the
   results instead of beside them, so the viewport-based cap makes no sense. */
@media (max-width: 1199px) {
    .fsx-body {
        max-height: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .filters-sidebar.fsx .fsx-chev,
    .filters-sidebar.fsx .fsx-more i,
    .filters-sidebar.fsx .car-rental-toggle i,
    .filters-sidebar.fsx .btn-apply-filters {
        transition: none !important;
    }

    .services-page-container .filters-sidebar.fsx .btn-apply-filters:hover {
        transform: none;
    }
}