/* ================================================================
   IKHAYALAMI FILTER PANEL — RIGHT-SIDE OFFCANVAS
   Premium "Digital Jewelry" Upgrade • Glassmorphism
   Full Viewport Height • Fixed Footer Buttons
   ================================================================ */

:root {
    --fp-bg: #ffffff;
    --fp-glass: rgba(255, 255, 255, 0.65);
    --fp-shadow-light: rgba(255, 255, 255, 0.95);
    --fp-shadow-dark: rgba(0, 0, 0, 0.08);
    --fp-text: #1A1D20;
    --fp-muted: #6b7280;
    --fp-orange: #F58220;
    --fp-blue: #56C4F8;
    --fp-teal: #0ABFBC;
    --fp-border: rgba(0, 0, 0, 0.06);
    --fp-panel-width: 420px;
}

/* ── BACKDROP OVERLAY ── */
.fp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 16, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

    .fp-overlay.active {
        opacity: 1;
        pointer-events: all;
    }

/* ── PANEL SHELL ── */
.fp-side-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--fp-panel-width);
    max-width: 100vw;
    height: 100dvh;
    height: 100vh;
    background: var(--fp-bg);
    display: flex;
    flex-direction: column;
    z-index: 10999;
    transform: translateX(100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
    box-shadow: -30px 0 80px rgba(0, 0, 0, 0.25);
    border-radius: 32px 0 0 32px;
    overflow: hidden;
}

    .fp-side-panel.open {
        transform: translateX(0);
    }

    /* Animated top accent bar */
    .fp-side-panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--fp-orange), var(--fp-blue), var(--fp-teal), var(--fp-orange));
        background-size: 200% 100%;
        animation: fpShimmer 4s linear infinite;
        z-index: 1;
    }

@keyframes fpShimmer {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 200% 0%;
    }
}

/* ── PANEL HEADER ── */
.fp-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 20px;
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(245, 130, 32, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    position: relative;
    z-index: 2;
}

.fp-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fp-header-title {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--fp-text);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    line-height: 1;
}

    .fp-header-title i, .fp-header-title svg {
        color: var(--fp-orange);
    }

.fp-header-location {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fp-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    padding-left: 2px;
}

    .fp-header-location i {
        color: var(--fp-orange);
        font-size: 0.85rem;
    }

    .fp-header-location .fp-loc-text {
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.fp-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Alert button */
.fp-alert-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #fff;
    border: 1px solid rgba(245, 130, 32, 0.3);
    color: var(--fp-orange);
    border-radius: 50px;
    padding: 8px 16px;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(245, 130, 32, 0.08);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

    .fp-alert-btn:hover {
        background: linear-gradient(135deg, var(--fp-orange), #ff9f4d);
        color: white;
        border-color: transparent;
        box-shadow: 0 8px 24px rgba(245, 130, 32, 0.3);
        transform: translateY(-2px);
    }

    .fp-alert-btn.alert-active {
        background: linear-gradient(135deg, var(--fp-orange), #ff9f4d);
        color: white;
        border-color: transparent;
        box-shadow: 0 6px 18px rgba(245, 130, 32, 0.4);
    }

        .fp-alert-btn.alert-active i {
            animation: fpBell 1.8s ease-in-out infinite;
        }

@keyframes fpBell {
    0%, 100% {
        transform: rotate(0);
    }

    10%, 30% {
        transform: rotate(-15deg);
    }

    20%, 40% {
        transform: rotate(15deg);
    }

    50% {
        transform: rotate(0);
    }
}

/* Close button */
.fp-close-btn {
    width: 40px;
    height: 40px;
    background: #f8f9fa;
    border: 1px solid var(--fp-border);
    border-radius: 50%;
    color: var(--fp-text);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

    .fp-close-btn:hover {
        background: #fee2e2;
        color: #ef4444;
        border-color: rgba(239, 68, 68, 0.3);
        transform: rotate(90deg) scale(1.1);
    }

/* Active filter count badge in header */
.fp-active-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fp-orange);
    color: white;
    font-size: 0.65rem;
    font-weight: 900;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-left: 6px;
    opacity: 0;
    transform: scale(0);
    transition: all 0.4s cubic-bezier(0.34, 1.5, 0.64, 1);
}

    .fp-active-count.visible {
        opacity: 1;
        transform: scale(1);
    }

/* ── SCROLLABLE BODY ── */
.fp-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 24px 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 130, 32, 0.5) transparent;
}

    .fp-body::-webkit-scrollbar {
        width: 4px;
    }

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

    .fp-body::-webkit-scrollbar-thumb {
        background: rgba(245, 130, 32, 0.5);
        border-radius: 10px;
    }

/* ── SECTION WRAPPERS (Premium Cards) ── */
.fp-section {
    background: #ffffff;
    border-radius: 18px;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

    .fp-section:hover {
        border-color: rgba(245, 130, 32, 0.2);
        box-shadow: 0 8px 30px rgba(245, 130, 32, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
    }

/* ── COLLAPSIBLE HEADERS ── */
.fp-sec-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 12px 16px;
    user-select: none;
    transition: background 0.3s ease;
    background: transparent;
}

    .fp-sec-header:hover {
        background: rgba(245, 130, 32, 0.02);
    }

.fp-sec-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ── DIGITAL JEWELRY ICON CONTAINERS ── */
.fp-sec-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 243, 232, 0.95), rgba(255, 228, 196, 0.6));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fp-orange);
    font-size: 1rem;
    flex-shrink: 0;
    border: 1px solid rgba(245, 130, 32, 0.25);
    box-shadow: 0 2px 8px rgba(245, 130, 32, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
    /* Removed float animation — reduces visual noise in a dense panel */
}

    /* Add a subtle scan beam to the jewelry icons */
    .fp-sec-icon::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
        transform: skewX(-20deg);
        animation: fpScanSweep 4s ease-in-out infinite;
    }

@keyframes fpScanSweep {
    0%, 20% {
        left: -100%;
    }

    80%, 100% {
        left: 200%;
    }
}

@keyframes fpFloatBob {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.fp-sec-label {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--fp-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    line-height: 1;
}

.fp-sec-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fp-sec-badge {
    background: var(--fp-orange);
    color: white;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 20px;
    display: none;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(245, 130, 32, 0.3);
}

    .fp-sec-badge.visible {
        display: inline-block;
        animation: fpBadgePop 0.4s cubic-bezier(0.34, 1.5, 0.64, 1);
    }

@keyframes fpBadgePop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.fp-sec-arrow {
    width: 28px;
    height: 28px;
    background: #f8f9fa;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fp-muted);
    font-size: 0.85rem;
    font-weight: 900;
    transition: all 0.4s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.fp-sec-header:hover .fp-sec-arrow {
    background: rgba(245, 130, 32, 0.1);
    color: var(--fp-orange);
    border-color: rgba(245, 130, 32, 0.2);
}

.fp-sec-header.collapsed .fp-sec-arrow {
    transform: rotate(-90deg);
}

/* ── COLLAPSIBLE BODY ── */
.fp-sec-body {
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, padding 0.4s ease;
    /* Generous cap — calendar + quick-picks can reach ~500px */
    max-height: 1600px;
    opacity: 1;
    padding: 4px 20px 20px;
}

    .fp-sec-body.collapsed {
        max-height: 0;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

/* ── FORM ELEMENTS (Neumorphic / Glassmorphic) ── */
.fp-field-row {
    margin-bottom: 12px;
}

.fp-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--fp-muted);
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    display: block;
}

.fp-select, .fp-price-input, .fp-neu-input {
    width: 100%;
    padding: 12px 16px;
    background: #f8f9fa;
    border: 1.5px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--fp-text);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Outfit', sans-serif;
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.fp-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%236B7280'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

    .fp-select:focus, .fp-price-input:focus, .fp-neu-input:focus {
        background: #ffffff;
        border-color: var(--fp-orange);
        box-shadow: 0 0 0 4px rgba(245, 130, 32, 0.1), inset 0 1px 2px rgba(0,0,0,0.02);
    }

/* ── EXACT ROOM PILLS ── */
.fp-room-row {
    margin-bottom: 14px;
}

.fp-room-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--fp-muted);
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.fp-exact-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fp-exact-pill {
    background: #ffffff;
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--fp-muted);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    min-width: 48px;
    text-align: center;
}

    .fp-exact-pill:hover {
        border-color: var(--fp-orange);
        color: var(--fp-orange);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(245, 130, 32, 0.12);
    }

    .fp-exact-pill.active {
        background: linear-gradient(135deg, var(--fp-orange), #ff9f4d);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 8px 20px rgba(245, 130, 32, 0.3);
        transform: translateY(-2px);
    }

/* ── PRICE MODE GRID ── */
.fp-price-mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.fp-price-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 10px;
    background: #ffffff;
    border: 1.5px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--fp-muted);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    line-height: 1;
}

    .fp-price-mode-btn i {
        font-size: 1.2rem;
        color: #9ca3af;
        transition: color 0.3s;
    }

    .fp-price-mode-btn:hover {
        border-color: var(--fp-blue);
        color: var(--fp-text);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(86, 196, 248, 0.15);
    }

        .fp-price-mode-btn:hover i {
            color: var(--fp-blue);
        }

    .fp-price-mode-btn.active {
        background: linear-gradient(135deg, rgba(86, 196, 248, 0.1), rgba(14, 165, 233, 0.05));
        border-color: var(--fp-blue);
        color: var(--fp-blue);
        box-shadow: 0 0 0 3px rgba(86, 196, 248, 0.15), 0 8px 20px rgba(86, 196, 248, 0.2);
        transform: translateY(-2px);
    }

        .fp-price-mode-btn.active i {
            color: var(--fp-blue);
        }

/* ── PRICE DROPDOWN WRAPPER ── */
.fp-price-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.fp-price-dd-wrap {
    position: relative;
}

.fp-price-dd-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    background: #f8f9fa;
    border: 1.5px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--fp-text);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

    .fp-price-dd-btn:hover {
        background: #ffffff;
        border-color: var(--fp-orange);
        box-shadow: 0 4px 12px rgba(245, 130, 32, 0.1);
    }

/* The dropdown panel uses position:fixed via JS to escape clipping */
.fp-price-dd-panel {
    position: fixed;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    z-index: 20500;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px;
    scrollbar-width: thin;
}

.fp-price-dd-item {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--fp-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .fp-price-dd-item:hover, .fp-price-dd-item.active {
        background: rgba(245, 130, 32, 0.1);
        color: var(--fp-orange);
    }

/* ── CRYPTO TOGGLE ── */
.fp-crypto-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(247, 147, 26, 0.05), rgba(255, 255, 255, 1));
    border: 1.5px solid rgba(247, 147, 26, 0.2);
    border-radius: 16px;
    margin-top: 16px;
    box-shadow: 0 4px 12px rgba(247, 147, 26, 0.05);
}

.fp-crypto-label {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fp-crypto-icon {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #f7931a, #e8820d);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 900;
    color: #fff;
    box-shadow: 0 4px 12px rgba(247, 147, 26, 0.3);
}

.fp-crypto-title {
    font-size: 0.85rem;
    font-weight: 900;
    color: var(--fp-text);
    display: block;
}

.fp-crypto-sub {
    font-size: 0.7rem;
    color: var(--fp-muted);
    font-weight: 600;
    margin-top: 2px;
}

.fp-crypto-toggle {
    width: 50px;
    height: 28px;
    background: rgba(0,0,0,0.1);
    border: none;
    border-radius: 30px;
    cursor: pointer;
    position: relative;
    transition: background 0.4s ease;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

    .fp-crypto-toggle.on {
        background: linear-gradient(135deg, #f7931a, #e8820d);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 4px 12px rgba(247, 147, 26, 0.3);
    }

.fp-crypto-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.4s cubic-bezier(0.34, 1.5, 0.64, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.fp-crypto-toggle.on .fp-crypto-toggle-knob {
    transform: translateX(22px);
}

/* ── FEATURE / SECURITY CHIPS ── */
.fp-chip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.fp-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #ffffff;
    border: 1.5px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    user-select: none;
    min-height: 0;
}

    .fp-chip:hover {
        border-color: rgba(245, 130, 32, 0.4);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(245, 130, 32, 0.1);
    }

    .fp-chip.active {
        border-color: var(--fp-orange);
        background: linear-gradient(135deg, rgba(245, 130, 32, 0.08), rgba(255, 255, 255, 1));
        box-shadow: 0 0 0 2px rgba(245, 130, 32, 0.15), 0 6px 16px rgba(245, 130, 32, 0.15);
        transform: translateY(-2px);
    }

.fp-chip-icon {
    font-size: 0.95rem;
    color: var(--fp-muted);
    width: 20px;
    text-align: center;
    transition: color 0.3s;
    flex-shrink: 0;
}

.fp-chip.active .fp-chip-icon {
    color: var(--fp-orange);
}

.fp-chip-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--fp-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    /* Allow wrapping but keep it tight */
    white-space: normal;
    word-break: break-word;
}

.fp-chip.active .fp-chip-label {
    color: var(--fp-orange);
}

/* ── PROPERTY AGE PILLS ── */
.fp-age-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fp-age-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--fp-muted);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    white-space: nowrap;
}

    .fp-age-pill:hover {
        border-color: var(--fp-orange);
        color: var(--fp-orange);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(245, 130, 32, 0.12);
    }

    .fp-age-pill.active {
        background: linear-gradient(135deg, var(--fp-orange), #ff9f4d);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 8px 20px rgba(245, 130, 32, 0.3);
        transform: translateY(-2px);
    }

.fp-age-custom-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    animation: fpFadeIn 0.3s ease;
}

.fp-range-sep {
    font-weight: 900;
    color: var(--fp-muted);
}

@keyframes fpFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── ON SHOW TOGGLE ── */
.fp-onshow-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #ffffff;
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: 16px;
    padding: 14px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--fp-text);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

    .fp-onshow-btn:hover {
        transform: translateY(-2px);
        border-color: rgba(245, 130, 32, 0.4);
        box-shadow: 0 8px 20px rgba(245, 130, 32, 0.1);
    }

    .fp-onshow-btn.on-show-active {
        background: linear-gradient(135deg, var(--fp-orange), #ff9f4d);
        color: white;
        border-color: transparent;
        box-shadow: 0 8px 24px rgba(245, 130, 32, 0.35);
    }

.fp-on-show-calendar {
    margin-top: 12px;
    animation: fpFadeIn 0.3s ease;
}

/* ── FIXED FOOTER ── */
.fp-footer {
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    padding: 20px 24px 24px;
    background: rgba(255, 255, 255, 0.85);
    border-top: 1px solid rgba(245, 130, 32, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.fp-footer-reset, #fpResetBtn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 20px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--fp-muted);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

#fpResetBtn {
    padding: 8px 16px;
    font-size: 0.7rem;
    border-radius: 50px;
    background: transparent;
    border: none;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .fp-footer-reset:hover, #fpResetBtn:hover {
        color: #ef4444;
        background: #fee2e2;
        border-color: transparent;
        text-decoration: none;
    }

.fp-apply-btn, #fpApplyBtn {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--fp-orange), #ff9f4d);
    border: none;
    border-radius: 16px;
    font-size: 0.9rem;
    font-weight: 900;
    color: white;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 8px 24px rgba(245, 130, 32, 0.35);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

    .fp-apply-btn:hover, #fpApplyBtn:hover {
        box-shadow: 0 12px 32px rgba(245, 130, 32, 0.45);
        transform: translateY(-2px);
    }

    .fp-apply-btn:active, #fpApplyBtn:active {
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(245, 130, 32, 0.3);
    }

/* ── ALERT MODAL ── */
.fp-alert-modal {
    position: fixed;
    inset: 0;
    z-index: 11100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 12, 16, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

    .fp-alert-modal.visible {
        opacity: 1;
        pointer-events: all;
    }

.fp-alert-modal-inner {
    background: #ffffff;
    border-radius: 32px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
    transform: translateY(30px) scale(0.95);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.fp-alert-modal.visible .fp-alert-modal-inner {
    transform: translateY(0) scale(1);
}

.fp-alert-modal-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--fp-orange), var(--fp-blue), var(--fp-orange));
    background-size: 200% 100%;
    animation: fpShimmer 3s ease-in-out infinite;
}

.fp-alert-modal-header {
    padding: 24px 24px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--fp-text);
}

    .fp-alert-modal-header i {
        color: var(--fp-orange);
        margin-right: 8px;
    }

.fp-alert-modal-close {
    width: 36px;
    height: 36px;
    background: #f8f9fa;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .fp-alert-modal-close:hover {
        background: #fee2e2;
        color: #ef4444;
    }

.fp-alert-modal-body {
    padding: 0 24px 24px;
}

.fp-alert-criteria {
    background: linear-gradient(135deg, rgba(245, 130, 32, 0.05), rgba(86, 196, 248, 0.05));
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid rgba(0,0,0,0.05);
    font-size: 0.8rem;
    color: var(--fp-text);
    font-weight: 600;
    line-height: 1.5;
}

.fp-alert-criteria-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

    .fp-alert-criteria-item i {
        color: var(--fp-orange);
        font-size: 0.9rem;
    }

.fp-alert-modal-footer {
    padding: 20px 24px;
    background: #f8f9fa;
    border-top: 1px solid rgba(0,0,0,0.05);
    display: flex;
    justify-content: flex-end;
}

/* ── TOAST NOTIFICATION ── */
.fp-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(26, 29, 32, 0.95);
    backdrop-filter: blur(12px);
    color: white;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    z-index: 12000;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    gap: 10px;
}

    .fp-toast i {
        color: var(--fp-orange);
        font-size: 1.1rem;
    }

    .fp-toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

/* ── LEGACY SAFETY (Ensures old class structure doesn't conflict) ── */
.filter-panel {
    display: none !important;
}

/* ── RESPONSIVE TWEAKS ── */
@media (max-width: 480px) {
    :root {
        --fp-panel-width: 100vw;
    }

    .fp-side-panel {
        border-radius: 0;
    }

    .fp-header {
        padding: 20px 16px 16px;
    }

    .fp-body {
        padding: 16px 16px 20px;
    }

    .fp-footer {
        padding: 16px 16px 20px;
    }

    /* On narrow phones chips go single-column so labels never wrap mid-word */
    .fp-chip-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .fp-chip {
        padding: 7px 8px;
    }

    .fp-chip-label {
        font-size: 0.65rem;
    }

    .fp-price-pair {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   v2.2 — FILTER PANEL REDESIGN: MODERN, CLEAN, TIGHT SPACING
   ------------------------------------------------------------
   Fix 1: .fp-loc-row — the DOM uses this class but CSS was
          targeting .fp-header-location (wrong). Add proper
          rule so the location pin + text renders right.
   Fix 2: Reduce whitespace throughout — header, body, section
          padding all tightened without losing breathing room.
   Fix 3: Polish the section cards — smaller radii, cleaner
          shadows, better visual rhythm top-to-bottom.
   ============================================================ */

/* ── The location indicator bar under the header ─────────── */
.fp-loc-row {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    background: linear-gradient(180deg, rgba(245, 130, 32, 0.04) 0%, rgba(245, 130, 32, 0.01) 100%);
    border-bottom: 1px solid rgba(245, 130, 32, 0.08);
    font-size: 0.76rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: -0.005em;
    min-height: 40px;
}

    .fp-loc-row .fp-loc-icon {
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--fp-orange) 0%, #F97316 100%);
        color: #ffffff !important;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        box-shadow: 0 2px 6px rgba(245, 130, 32, 0.3), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
    }

    .fp-loc-row .fp-loc-text {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #0F172A;
        font-weight: 700;
    }

/* ── Header — tighter padding, better visual weight ─────── */
.fp-header {
    padding: 18px 24px 14px !important;
}

.fp-header-title {
    font-size: 0.95rem !important;
    letter-spacing: 0.08em !important;
}

.fp-header-badge {
    background: var(--fp-orange);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 2px 8px;
    min-width: 22px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(245, 130, 32, 0.35);
}

/* ── Body — tighter top/bottom, same horizontal ─────────── */
.fp-body {
    padding: 14px 18px 14px !important;
}

/* ── Sections — smaller radius, tighter margin ──────────── */
.fp-section {
    border-radius: 16px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

/* ── Section header — tighter padding ───────────────────── */
.fp-sec-header {
    padding: 13px 16px !important;
}

.fp-sec-header-left {
    gap: 12px !important;
}

/* ── Section body — default padding for open sections ──── */
.fp-sec-body {
    padding: 0 16px 14px !important;
}

/* ── Icon container refinement ──────────────────────────── */
.fp-sec-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, rgba(245, 130, 32, 0.1) 0%, rgba(245, 130, 32, 0.04) 100%) !important;
    border: 1px solid rgba(245, 130, 32, 0.15) !important;
    color: var(--fp-orange) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 2px rgba(245, 130, 32, 0.08) !important;
}

    .fp-sec-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

.fp-sec-label {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    letter-spacing: -0.01em !important;
}

.fp-sec-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.fp-sec-badge {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: var(--fp-orange) !important;
    background: rgba(245, 130, 32, 0.08) !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    min-width: 18px !important;
}

    .fp-sec-badge:empty {
        display: none !important;
    }

.fp-sec-arrow {
    color: #94A3B8 !important;
    font-size: 0.8rem !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── Mobile override — full-width + stack ───────────────── */
@media (max-width: 768px) {
    .fp-header {
        padding: 14px 18px 12px !important;
    }

    .fp-loc-row {
        padding: 8px 18px !important;
        font-size: 0.72rem !important;
    }

    .fp-body {
        padding: 12px 14px !important;
    }

    .fp-section {
        margin-bottom: 8px !important;
        border-radius: 14px !important;
    }

    .fp-sec-header {
        padding: 12px 14px !important;
    }

    .fp-sec-body {
        padding: 0 14px 12px !important;
    }

    .fp-sec-icon {
        width: 30px !important;
        height: 30px !important;
    }
}

/* ================================================================
   v3 ADDITIONS — Category/Type selects · Hints · Premium calendar
   Brand: Charcoal #0E0E11/#1A1A1F · Sunset Orange #F58220/#F89622 ·
          Sky Blue #56C4F8/#3FA9D9
   ================================================================ */

/* ── Premium native <select> wrapper ────────────────────────── */
.fp-select-wrap {
    position: relative;
    width: 100%;
}

    .fp-select-wrap .fp-select {
        width: 100%;
        background: #ffffff;
        border: 1.5px solid rgba(0, 0, 0, 0.08);
        border-radius: 14px;
        padding: 13px 44px 13px 16px;
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--fp-text);
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: none; /* we use the chevron icon below */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
        line-height: 1.2;
    }

        .fp-select-wrap .fp-select:hover {
            border-color: var(--fp-orange);
            box-shadow: 0 4px 14px rgba(245, 130, 32, 0.10);
        }

        .fp-select-wrap .fp-select:focus {
            outline: none;
            border-color: var(--fp-orange);
            box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.18), 0 4px 14px rgba(245, 130, 32, 0.12);
        }

.fp-select-chev {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fp-muted);
    font-size: 0.85rem;
    pointer-events: none;
    transition: color 0.25s ease, transform 0.25s ease;
}

.fp-select-wrap:hover .fp-select-chev,
.fp-select-wrap .fp-select:focus + .fp-select-chev {
    color: var(--fp-orange);
}

/* ── Inline hint copy beneath fields/sections ───────────────── */
.fp-hint {
    margin: 8px 0 0;
    font-size: 0.75rem;
    color: var(--fp-muted);
    line-height: 1.4;
    font-weight: 500;
    font-style: italic;
}

/* ── Room rows — icon + label inline, then pill row beneath ── */
.fp-room-row + .fp-room-row {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px dashed rgba(0, 0, 0, 0.06);
}

.fp-room-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .fp-room-label i {
        color: var(--fp-orange);
        font-size: 0.95rem;
    }

/* Make the "Any" pill visually distinct from numeric pills */
.fp-exact-pill[data-value="0"] {
    background: #f8f9fa;
    color: #6b7280;
    border-style: dashed;
}

    .fp-exact-pill[data-value="0"].active {
        background: linear-gradient(135deg, #1A1A1F, #34343b);
        color: #fff;
        border-color: transparent;
        border-style: solid;
        box-shadow: 0 8px 20px rgba(14, 14, 17, 0.25);
    }

/* ── Small numeric inputs (year-from / year-to) ─────────────── */
.fp-input-sm,
.fp-input {
    width: 100%;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fp-text);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

    .fp-input-sm:focus,
    .fp-input:focus {
        outline: none;
        border-color: var(--fp-blue);
        box-shadow: 0 0 0 3px rgba(86, 196, 248, 0.18);
    }

.fp-date-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ── ON SHOW — Premium On-Show button ───────────────────────── */
.fp-onshow-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 14px;
    background: #ffffff;
    border: 1.5px dashed rgba(245, 130, 32, 0.4);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--fp-text);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: 0.02em;
}

    .fp-onshow-btn i {
        font-size: 1.15rem;
        color: var(--fp-orange);
    }

    .fp-onshow-btn:hover {
        border-style: solid;
        border-color: var(--fp-orange);
        background: linear-gradient(135deg, #fff5ec, #fff);
        transform: translateY(-1px);
        box-shadow: 0 8px 22px rgba(245, 130, 32, 0.18);
    }

    .fp-onshow-btn.on-show-active {
        background: linear-gradient(135deg, var(--fp-orange), #F89622);
        border-color: transparent;
        border-style: solid;
        color: #fff;
        box-shadow: 0 10px 26px rgba(245, 130, 32, 0.32);
    }

        .fp-onshow-btn.on-show-active i {
            color: #fff;
        }

/* ── PREMIUM CALENDAR ──────────────────────────────────────── */
.fp-on-show-calendar {
    margin-top: 14px;
    background: linear-gradient(180deg, #ffffff, #fcfcfd);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 18px;
    padding: 16px 16px 14px;
    box-shadow: 0 12px 32px rgba(14, 14, 17, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    animation: fpCalIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fpCalIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fp-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.fp-cal-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--fp-text);
    letter-spacing: 0.02em;
    text-transform: capitalize;
}

.fp-cal-nav {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f8f9fa;
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--fp-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.22s ease;
}

    .fp-cal-nav:hover {
        background: rgba(245, 130, 32, 0.1);
        color: var(--fp-orange);
        border-color: rgba(245, 130, 32, 0.2);
        transform: translateY(-1px);
    }

.fp-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 6px;
}

    .fp-cal-weekdays span {
        text-align: center;
        font-size: 0.68rem;
        font-weight: 800;
        color: var(--fp-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 4px 0;
    }

.fp-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.fp-cal-day {
    aspect-ratio: 1 / 1;
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--fp-text);
    cursor: pointer;
    transition: all 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

    .fp-cal-day:hover {
        background: rgba(86, 196, 248, 0.1);
        color: var(--fp-blue);
        border-color: rgba(86, 196, 248, 0.3);
        transform: scale(1.05);
    }

    .fp-cal-day.today {
        background: rgba(245, 130, 32, 0.08);
        color: var(--fp-orange);
        border-color: rgba(245, 130, 32, 0.25);
    }

    .fp-cal-day.in-range {
        background: rgba(86, 196, 248, 0.18);
        color: #1A1A1F;
        border-radius: 0;
    }

    .fp-cal-day.range-end {
        background: linear-gradient(135deg, var(--fp-orange), #F89622);
        color: #ffffff;
        border-color: transparent;
        box-shadow: 0 4px 14px rgba(245, 130, 32, 0.32);
        transform: scale(1.04);
    }

        .fp-cal-day.range-end:hover {
            color: #ffffff;
        }

.fp-cal-blank {
    background: transparent !important;
    border: none !important;
    cursor: default;
    pointer-events: none;
}

.fp-cal-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 10px;
    padding-top: 12px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.fp-cal-quick-btn {
    background: #f8f9fa;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--fp-muted);
    cursor: pointer;
    transition: all 0.22s ease;
    letter-spacing: 0.02em;
}

    .fp-cal-quick-btn:hover {
        background: rgba(86, 196, 248, 0.12);
        color: var(--fp-blue);
        border-color: rgba(86, 196, 248, 0.3);
        transform: translateY(-1px);
    }

.fp-cal-summary {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--fp-muted);
    padding: 10px 12px;
    border-radius: 12px;
    background: #fafbfc;
    border: 1px dashed rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

    .fp-cal-summary.active {
        background: linear-gradient(135deg, rgba(86, 196, 248, 0.08), rgba(86, 196, 248, 0.02));
        color: var(--fp-text);
        border-color: rgba(86, 196, 248, 0.3);
        border-style: solid;
    }

    .fp-cal-summary i {
        color: var(--fp-blue);
        margin-right: 4px;
    }

/* ── Price separator dash ───────────────────────────────────── */
.fp-price-sep {
    align-self: end;
    color: var(--fp-muted);
    font-weight: 800;
    padding-bottom: 13px;
}

/* ── MOBILE TUNING (≤ 480px) ──────────────────────────────── */
@media (max-width: 480px) {
    .fp-side-panel {
        --fp-panel-width: 100vw;
        width: 100vw;
        max-width: 100vw;
        border-radius: 0;
    }

    .fp-exact-pill {
        padding: 7px 13px;
        font-size: 0.8rem;
        min-width: 42px;
    }

    .fp-cal-day {
        font-size: 0.74rem;
        border-radius: 8px;
    }

    .fp-cal-quick-btn {
        font-size: 0.68rem;
        padding: 5px 10px;
    }

    .fp-select-wrap .fp-select {
        font-size: 0.88rem;
        padding: 12px 40px 12px 14px;
    }

    .fp-onshow-btn {
        font-size: 0.85rem;
        padding: 12px 14px;
    }
}

/* ── TABLET (481–768px) — keep panel a comfortable width ──── */
@media (min-width: 481px) and (max-width: 768px) {
    .fp-side-panel {
        --fp-panel-width: 440px;
        width: 440px;
    }
}

/* ================================================================
   v4 ADDITIONS — Compact layout · Persistent context · Garage/Parking
   split · Property-Age & On-Show fixes · Intelligent alert modal
   ================================================================ */

/* ── 1. PERSISTENT CONTEXT BREADCRUMB ─────────────────────────
   Sticky strip just under the header that always shows the user's
   current Category › Type so they never lose track. */
.fp-context-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 12px;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: linear-gradient(180deg, rgba(245, 130, 32, 0.04), rgba(255, 255, 255, 0));
    flex-shrink: 0;
    position: relative;
}

.fp-context-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1A1A1F, #34343b);
    color: #F89622;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(14, 14, 17, 0.18);
}

.fp-context-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fp-context-label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fp-muted);
}

.fp-context-value {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--fp-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1.25;
}

    .fp-context-value strong {
        color: var(--fp-orange);
        font-weight: 800;
    }

.fp-context-sep {
    font-size: 0.7rem;
    color: var(--fp-muted);
    opacity: 0.6;
}

/* ── 2. COMPACT PRICE ROW — Min ── Max in a single line ─────── */
.fp-price-mode-grid--compact {
    margin-bottom: 12px;
}

    .fp-price-mode-grid--compact .fp-price-mode-btn {
        flex-direction: row;
        gap: 8px;
        padding: 9px 10px;
        font-size: 0.78rem;
    }

        .fp-price-mode-grid--compact .fp-price-mode-btn i {
            font-size: 1rem;
        }

/* The actual Min — Max single row */
.fp-price-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: end;
    margin-bottom: 14px;
}

.fp-price-cell {
    min-width: 0;
}

    .fp-price-cell .fp-price-dd-wrap,
    .fp-price-cell .fp-price-dd-btn {
        width: 100%;
    }

.fp-price-row .fp-price-sep {
    align-self: center;
    padding-bottom: 0;
    color: var(--fp-muted);
    font-weight: 800;
    margin-top: 18px; /* Drop dash to match input baseline */
    user-select: none;
}

.fp-label--inline {
    margin-bottom: 6px;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
}

/* ── 3. ROOMS — Compact single-line layout ────────────────────
   Each Bedrooms/Bathrooms/Garage/Parking is its own row:
   [icon + label]       [Any · 1 · 2 · 3 · 4 · 5+]
   Pills can horizontally scroll on narrow phones (no wrap). */
.fp-room-line {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}

    .fp-room-line:last-of-type {
        border-bottom: none;
        padding-bottom: 4px;
    }

.fp-room-line-label {
    flex: 0 0 auto;
    width: 96px; /* Fixed-width label column for a clean grid */
    min-width: 96px;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--fp-text);
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1.2;
}

    .fp-room-line-label i {
        color: var(--fp-orange);
        font-size: 0.95rem;
        flex-shrink: 0;
    }

.fp-exact-pills--inline {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: visible;
    flex-wrap: nowrap;
    padding: 2px 0 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

    .fp-exact-pills--inline::-webkit-scrollbar {
        display: none; /* WebKit */
    }

    .fp-exact-pills--inline .fp-exact-pill {
        flex: 0 0 auto;
        padding: 6px 12px;
        font-size: 0.78rem;
        min-width: 38px;
        border-radius: 10px;
    }

        .fp-exact-pills--inline .fp-exact-pill[data-value="0"] {
            min-width: 44px;
            font-size: 0.74rem;
        }

/* Tighter explanatory hint variant */
.fp-hint--tight {
    font-size: 0.7rem;
    line-height: 1.45;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(86, 196, 248, 0.06);
    border: 1px dashed rgba(86, 196, 248, 0.25);
    color: var(--fp-text);
    font-style: normal;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

    .fp-hint--tight i {
        color: var(--fp-blue);
        margin-top: 2px;
        flex-shrink: 0;
    }

    .fp-hint--tight strong {
        color: var(--fp-orange);
        font-weight: 800;
    }

/* ── 4. PROPERTY AGE — Pills layout fix (no truncation) ──────
   The pills container must be a wrapping flex grid with proper
   vertical padding so pills below the first row remain visible. */
.fp-age-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0 2px;
    overflow: visible;
}

.fp-age-pill {
    flex: 0 0 auto;
    padding: 7px 13px;
    border-radius: 999px;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--fp-muted);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    line-height: 1.2;
    white-space: nowrap;
}

    .fp-age-pill:hover {
        border-color: var(--fp-orange);
        color: var(--fp-orange);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(245, 130, 32, 0.12);
    }

    .fp-age-pill.active {
        background: linear-gradient(135deg, var(--fp-orange), #F89622);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 6px 16px rgba(245, 130, 32, 0.28);
        transform: translateY(-1px);
    }

/* Override any older max-height that may still be clipping age section */
#fpAgePills + .fp-age-custom-row,
.fp-age-custom-row {
    margin-top: 12px;
}

/* ── 5. ON SHOW BUTTON — Truncation fix ──────────────────────
   The label could overflow when a long date range was chosen.
   Use min-width:0 + overflow:hidden + ellipsis on the inner span. */
.fp-onshow-btn {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-items: center;
}

    .fp-onshow-btn i {
        flex-shrink: 0;
    }

.fp-onshow-btn-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

/* Ensure the section body for On Show isn't clipping the calendar
   when it grows beyond the default max-height. */
.fp-section .fp-sec-body:has(.fp-on-show-calendar) {
    max-height: none;
}

/* ── 6. INTELLIGENT ALERT MODAL ──────────────────────────────
   Premium structured criteria list, refine button, error inline,
   loading state, secondary "Subscribe anyway" button. */
.fp-alert-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fp-alert-intro {
    font-size: 0.85rem;
    color: var(--fp-muted);
    margin: 0;
    line-height: 1.45;
}

.fp-alert-criteria {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: linear-gradient(180deg, #fcfdff, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    max-height: 280px;
    overflow-y: auto;
}

.fp-alert-criteria-item {
    display: grid;
    grid-template-columns: 24px 110px 1fr;
    align-items: start;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
    font-size: 0.82rem;
    line-height: 1.4;
}

    .fp-alert-criteria-item:last-child {
        border-bottom: none;
    }

    .fp-alert-criteria-item i {
        color: var(--fp-orange);
        font-size: 0.95rem;
        margin-top: 2px;
    }

.fp-alert-criteria-key {
    font-weight: 800;
    color: var(--fp-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
    padding-top: 3px;
}

.fp-alert-criteria-val {
    font-weight: 600;
    color: var(--fp-text);
    word-break: break-word;
}

/* Empty state — when no filters are active */
.fp-alert-empty {
    text-align: center;
    padding: 22px 18px;
    background: linear-gradient(180deg, #fff8f1, #ffffff);
    border: 1.5px dashed rgba(245, 130, 32, 0.35);
    border-radius: 16px;
}

.fp-alert-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--fp-orange), #F89622);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 10px;
    box-shadow: 0 8px 22px rgba(245, 130, 32, 0.32);
}

.fp-alert-empty h4 {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--fp-text);
    margin: 0 0 8px;
    line-height: 1.35;
}

.fp-alert-empty p {
    font-size: 0.8rem;
    color: var(--fp-muted);
    line-height: 1.5;
    margin: 0;
}

/* Secondary "Refine filters" button */
.fp-alert-secondary {
    background: #ffffff;
    border: 1.5px solid rgba(245, 130, 32, 0.4);
    color: var(--fp-orange);
    font-weight: 800;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.24s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.02em;
}

    .fp-alert-secondary:hover {
        background: rgba(245, 130, 32, 0.08);
        border-color: var(--fp-orange);
        transform: translateY(-1px);
    }

/* When the primary button is "Subscribe anyway" (empty state) */
.fp-apply-btn.fp-alert-confirm-secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

/* Loading spinner inside the confirm button */
.fp-alert-confirm-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    margin-left: 8px;
    animation: fpSpin 0.8s linear infinite;
}

.fp-apply-btn.loading .fp-alert-confirm-spinner {
    display: inline-block;
}

.fp-apply-btn.loading {
    opacity: 0.85;
    pointer-events: none;
}

@keyframes fpSpin {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Inline error message under the email field */
.fp-alert-error {
    display: none;
    margin-top: 6px;
    font-size: 0.78rem;
    color: #dc2626;
    font-weight: 700;
}

    .fp-alert-error.visible {
        display: block;
    }

/* Alert modal footer — handle two buttons (refine + confirm) */
.fp-alert-modal-footer {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    .fp-alert-modal-footer .fp-apply-btn {
        flex: 1 1 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

/* ── MOBILE TUNING (≤ 480px) — keep compact UX intact ─────── */
@media (max-width: 480px) {
    .fp-context-bar {
        padding: 8px 14px 10px;
    }

    .fp-context-value {
        font-size: 0.8rem;
    }

    .fp-room-line {
        gap: 10px;
        padding: 9px 0;
    }

    .fp-room-line-label {
        width: 82px;
        min-width: 82px;
        font-size: 0.72rem;
    }

    .fp-exact-pills--inline .fp-exact-pill {
        padding: 5px 10px;
        font-size: 0.72rem;
        min-width: 34px;
    }

    .fp-price-row {
        gap: 8px;
    }

    .fp-alert-criteria-item {
        grid-template-columns: 22px 90px 1fr;
        font-size: 0.78rem;
        gap: 6px;
    }

    .fp-alert-criteria-key {
        font-size: 0.64rem;
    }

    .fp-alert-modal-footer {
        flex-direction: column-reverse;
    }

        .fp-alert-secondary,
        .fp-alert-modal-footer .fp-apply-btn {
            width: 100%;
        }
}

/* ── EXTRA-NARROW (≤ 360px) — shrink room labels onto one row ── */
@media (max-width: 360px) {
    .fp-room-line {
        flex-wrap: wrap;
    }

    .fp-room-line-label {
        width: 100%;
        margin-bottom: 4px;
    }
}

/* ================================================================
   v5 ADDITIONS — Alert success state · Guest conversion CTA
   ================================================================ */

.fp-alert-success {
    display: none;
    text-align: center;
    padding: 18px 8px 4px;
    animation: fpAlertSuccessIn 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fpAlertSuccessIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.fp-alert-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    margin: 0 auto 14px;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.32);
    animation: fpSuccessPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s both;
}

@keyframes fpSuccessPop {
    0% {
        transform: scale(0);
    }

    60% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

.fp-alert-success-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--fp-text);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.fp-alert-success-ref {
    font-size: 0.74rem;
    color: var(--fp-muted);
    margin: 0 0 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
}

    .fp-alert-success-ref strong {
        font-family: 'Courier New', ui-monospace, monospace;
        color: var(--fp-orange);
        font-weight: 800;
        margin-left: 4px;
    }

.fp-alert-success-body {
    font-size: 0.9rem;
    color: var(--fp-muted);
    line-height: 1.5;
    margin: 0 0 18px;
}

/* ── Guest conversion card ───────────────────────────────────── */
.fp-alert-cta-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #1A1A1F, #2a2a32);
    border-radius: 16px;
    margin-bottom: 18px;
    text-align: left;
    box-shadow: 0 12px 28px rgba(14, 14, 17, 0.18);
    position: relative;
    overflow: hidden;
}

    .fp-alert-cta-card::before {
        content: '';
        position: absolute;
        top: 0;
        right: -40%;
        width: 80%;
        height: 100%;
        background: radial-gradient(ellipse at center, rgba(245, 130, 32, 0.18), transparent 60%);
        pointer-events: none;
    }

.fp-alert-cta-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--fp-orange), #F89622);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(245, 130, 32, 0.4);
    position: relative;
    z-index: 1;
}

.fp-alert-cta-text {
    min-width: 0;
    position: relative;
    z-index: 1;
}

    .fp-alert-cta-text h4 {
        margin: 0 0 4px;
        font-size: 0.92rem;
        font-weight: 800;
        color: #fff;
        letter-spacing: 0.01em;
    }

    .fp-alert-cta-text p {
        margin: 0;
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.78);
        line-height: 1.45;
    }

/* ── Actions row (Maybe later · Sign up free) ───────────────── */
.fp-alert-success-actions {
    display: flex;
    gap: 10px;
}

    .fp-alert-success-actions .fp-alert-secondary,
    .fp-alert-success-actions .fp-apply-btn {
        flex: 1 1 auto;
        text-decoration: none;
    }

.fp-alert-cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

@media (max-width: 480px) {
    .fp-alert-cta-card {
        padding: 14px 14px;
        gap: 11px;
    }

    .fp-alert-cta-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .fp-alert-cta-text h4 {
        font-size: 0.86rem;
    }

    .fp-alert-cta-text p {
        font-size: 0.74rem;
    }

    .fp-alert-success-actions {
        flex-direction: column-reverse;
    }
}
/* ================================================================
   v6 ADDITIONS — Spacing · Compactness · On-Show UX
   ----------------------------------------------------------------
   Goals (from screenshots):
   1. Adequate breathing room between the last section and the
      fixed footer so cards never appear pinned underneath the
      Create-Alert / Show-Results bar.
   2. Compact the PRICE RANGE mode toggle (Range / Open to offers)
      so it doesn't dominate the card.
   3. Fix the SECURITY / FEATURES chip grid: even row heights,
      single-line labels with ellipsis fallback, no awkward
      orphaned chips on their own row.
   4. Slightly tighter cards top-to-bottom — same hierarchy,
      less wasted vertical real estate.
   5. ON SHOW: when the user opens the calendar, auto-scroll
      the section header to the top of the panel so the calendar
      is fully visible — paired with JS in filter-v6-patch.js.
   ================================================================ */

/* ── 1. BODY · adequate space below the last section ─────────────
   The flex layout already keeps footer below body, but visually
   the last card sat flush against the footer. Adding generous
   bottom padding inside the scrollable body creates breathing
   room AND lets the calendar scroll into a comfortable position
   when On Show is opened near the bottom. */
.fp-body {
    padding-bottom: 32px !important;
    /* Allows the calendar to scroll up under the footer without
       being clipped by it. */
    scroll-padding-top: 8px;
    scroll-padding-bottom: 32px;
}

@media (max-width: 768px) {
    .fp-body {
        padding-bottom: 28px !important;
    }
}

/* Last section gets extra trailing margin so the gap to the
   footer feels intentional, not crowded. */
.fp-body > .fp-section:last-child {
    margin-bottom: 16px !important;
}

/* ── 2. PRICE RANGE · compact mode toggle ────────────────────────
   The Range / Open-to-offers buttons were oversized — chunky
   icons and large vertical padding made the card look heavy.
   Tighten them to match the rest of the panel's rhythm. */
.fp-price-mode-grid--compact {
    gap: 8px;
    margin-bottom: 10px;
}

    .fp-price-mode-grid--compact .fp-price-mode-btn {
        padding: 8px 10px;
        font-size: 0.76rem;
        border-radius: 12px;
        gap: 7px;
        min-height: 0;
        letter-spacing: 0.01em;
    }

        .fp-price-mode-grid--compact .fp-price-mode-btn i {
            font-size: 0.9rem;
        }

/* Tighten the crypto row — it was eating a lot of vertical
   space relative to its priority. */
.fp-crypto-row {
    padding: 10px 12px !important;
    margin-top: 12px !important;
    border-radius: 14px !important;
    gap: 10px;
}

.fp-crypto-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
}

.fp-crypto-title {
    font-size: 0.8rem !important;
}

.fp-crypto-sub {
    font-size: 0.66rem !important;
    margin-top: 1px !important;
}

.fp-crypto-toggle {
    width: 44px !important;
    height: 24px !important;
    flex-shrink: 0;
}

.fp-crypto-toggle-knob {
    width: 18px !important;
    height: 18px !important;
    top: 3px !important;
    left: 3px !important;
}

.fp-crypto-toggle.on .fp-crypto-toggle-knob {
    transform: translateX(20px) !important;
}

/* ── 3. CHIP GRID · even rows, compact, no awkward wraps ─────────
   Before: chips with longer labels ("24-Hour Security",
   "Guard / Concierge") wrapped to two lines, doubling the chip
   height while shorter neighbours stayed single-line. The grid
   looked uneven and oversized.

   After: rows stretch to equal height, labels stay on one line
   when they can, and a slightly smaller chip label font means
   most labels fit naturally. Long labels fall back to a tight
   two-line layout with consistent height via min-height. */
.fp-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}

.fp-chip {
    padding: 9px 12px;
    min-height: 40px;
    border-radius: 11px;
    gap: 9px;
    line-height: 1.2;
    /* Keep contents centered when min-height kicks in */
    justify-content: flex-start;
    box-sizing: border-box;
}

.fp-chip-icon {
    font-size: 0.95rem;
    width: 18px;
    flex-shrink: 0;
}

.fp-chip-label {
    font-size: 0.72rem;
    line-height: 1.15;
    letter-spacing: 0.01em;
    /* Allow up to two lines but no more, so the grid stays
       predictable on extreme cases. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-transform: none; /* uppercase made labels long */
    font-weight: 700;
}

.fp-chip.active .fp-chip-label {
    color: var(--fp-orange);
}

/* The chips in the Features section have inline icons (no
   .fp-chip-icon / .fp-chip-label wrappers). Apply the same
   sizing rules to the raw <button> contents so it lines up. */
.fp-chip > i {
    font-size: 0.95rem;
    color: var(--fp-muted);
    flex-shrink: 0;
    transition: color 0.3s;
}

.fp-chip.active > i {
    color: var(--fp-orange);
}

/* When the button text sits directly inside <button> (no span),
   constrain it the same way as .fp-chip-label so long labels
   like "24-Hour Security" don't blow up the chip. */
.fp-chip {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--fp-text);
    letter-spacing: 0.01em;
    text-transform: none;
    text-align: left;
    word-break: break-word;
}

@media (max-width: 480px) {
    .fp-chip {
        min-height: 38px;
        padding: 8px 10px;
        gap: 7px;
    }

    .fp-chip-label,
    .fp-chip {
        font-size: 0.68rem;
    }
}

/* ── 4. SECTION CARDS · tighter, more consistent rhythm ──────────
   Slightly less internal padding and a smaller gap between
   sections so the whole panel reads as one well-spaced list
   rather than a stack of oversized cards. */
.fp-section {
    margin-bottom: 8px !important;
}

.fp-sec-header {
    padding: 11px 14px !important;
}

.fp-sec-body {
    padding: 2px 14px 12px !important;
}

    .fp-sec-body.collapsed {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

.fp-sec-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
}

    .fp-sec-icon svg,
    .fp-sec-icon i {
        font-size: 0.95rem !important;
    }

.fp-sec-label {
    font-size: 0.82rem !important;
}

.fp-sec-header-left {
    gap: 11px !important;
}

/* ── 5. ON SHOW · improved UX ────────────────────────────────────
   When the calendar is open, give it a clear visual relationship
   to the trigger button (subtle connecting line) and ensure the
   section itself has enough room beneath it that the calendar
   doesn't end flush against the footer. */
.fp-onshow-btn {
    padding: 12px 16px !important;
    font-size: 0.85rem !important;
    border-radius: 13px !important;
}

    /* When the calendar is open, soften the button so the calendar
   itself becomes the focal point. */
    .fp-onshow-btn.calendar-open {
        background: linear-gradient(135deg, rgba(245, 130, 32, 0.06), #fff);
        border-style: solid;
        border-color: rgba(245, 130, 32, 0.35);
        color: var(--fp-text);
        box-shadow: 0 2px 8px rgba(245, 130, 32, 0.08);
    }

        .fp-onshow-btn.calendar-open i {
            color: var(--fp-orange);
        }

/* Trim the calendar internal padding so the whole experience
   reads as a single panel rather than a nested card. */
.fp-on-show-calendar {
    margin-top: 10px !important;
    padding: 14px 14px 12px !important;
    border-radius: 14px !important;
}

.fp-cal-header {
    margin-bottom: 10px !important;
}

.fp-cal-title {
    font-size: 0.9rem !important;
}

.fp-cal-nav {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.78rem !important;
}

.fp-cal-quick {
    margin: 12px 0 10px !important;
    padding-top: 10px !important;
}

.fp-cal-summary {
    padding: 9px 12px !important;
    font-size: 0.74rem !important;
}

/* The On-Show section is often the last in the panel, so when
   the calendar opens it needs extra trailing space to remain
   comfortably above the footer after auto-scroll. */
.fp-section:has(.fp-on-show-calendar[style*="block"]) {
    margin-bottom: 24px !important;
}

/* ── 6. NARROW PHONES · keep chip grid usable ────────────────────
   On very narrow viewports the 2-column chip grid can still feel
   cramped. Allow it to collapse but keep things tidy. */
@media (max-width: 360px) {
    .fp-chip-grid {
        grid-template-columns: 1fr;
    }

    .fp-chip {
        min-height: 36px;
    }
}
/* ================================================================
   v6.1 ADDITIONS — Section padding · Visible room pills
   ----------------------------------------------------------------
   Follow-up fixes to v6:

   1. PRICE RANGE (and all sections): horizontal padding inside
      .fp-sec-body was too tight — the Range / Open-to-offers
      buttons touched the card edge, especially with the blue
      focus ring active. Bump horizontal padding so contents
      have visible breathing room.

   2. ROOMS & PARKING: the exact-pills row (Any · 1 · 2 · 3 · 4 · 5+)
      was set to horizontal scroll with no visible scrollbar, so
      the "5+" pill was completely hidden — users had no way to
      know it existed. Switch to wrap-to-next-line so every pill
      is always visible. On the rare narrow viewport that needs
      two rows, the layout stays clean and predictable.
   ================================================================ */

/* ── 1. SECTION BODY · proper horizontal breathing room ─────────
   Was 14px each side; bumping to 16px so the focus ring on the
   active Range button doesn't sit flush against the card border. */
.fp-sec-body {
    padding: 4px 16px 14px !important;
}

    .fp-sec-body.collapsed {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

/* Header padding aligns with body so the icon and label line up
   visually with the content beneath. */
.fp-sec-header {
    padding: 12px 16px !important;
}

@media (max-width: 480px) {
    .fp-sec-body {
        padding: 4px 14px 12px !important;
    }

    .fp-sec-header {
        padding: 11px 14px !important;
    }
}

/* ── 2. PRICE MODE GRID · pull off the edges ────────────────────
   Even with the section body padding fixed, the focus shadow on
   the active button can visually crowd the edge. Add a tiny
   inner margin so the glow always has somewhere to fall. */
.fp-price-mode-grid--compact {
    margin-top: 2px;
    margin-bottom: 12px;
}

/* The focus/active outline glow on the Range button needs a
   slightly smaller spread so it stays neatly inside the card. */
.fp-price-mode-btn.active {
    box-shadow: 0 0 0 2px rgba(86, 196, 248, 0.18), 0 4px 12px rgba(86, 196, 248, 0.15) !important;
}

/* ── 3. ROOM PILLS · wrap instead of hide ───────────────────────
   Switching from horizontal-scroll to flex-wrap means every pill
   (including the previously-hidden "5+") is always visible. On
   wide panels they sit on one row; on narrow ones they wrap to
   two — but nothing is ever clipped or hidden. */
.fp-exact-pills--inline {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    gap: 6px !important;
    /* Slight vertical padding so the focus/active glow on the
       top row doesn't get cut by the row above. */
    padding: 3px 0 3px !important;
    /* Align with label baseline if wrapping pushes a second row. */
    align-content: flex-start;
}

    /* Each pill: slightly tighter padding so 6 pills fit on one
       row in the standard 420px panel without wrapping. */
    .fp-exact-pills--inline .fp-exact-pill {
        padding: 6px 10px !important;
        min-width: 36px !important;
        font-size: 0.78rem !important;
    }

        .fp-exact-pills--inline .fp-exact-pill[data-value="0"] {
            min-width: 42px !important;
        }

/* ── 4. ROOM LINE · let pills claim more of the row ─────────────
   The fixed 96px label column was eating space the pills need.
   Reduce it on standard widths so all six pills comfortably fit
   on one line. The icon + label remains clear and legible. */
.fp-room-line {
    gap: 10px !important;
    align-items: center !important;
    /* If pills wrap, give the second row clean spacing. */
    padding: 10px 0 !important;
}

.fp-room-line-label {
    width: 88px !important;
    min-width: 88px !important;
    font-size: 0.76rem !important;
    gap: 6px !important;
}

    .fp-room-line-label i {
        font-size: 0.9rem !important;
    }

/* On narrow phones, stack the label above the pills so each
   pill is comfortably tappable. Already partially handled by
   the existing 360px rule, but make it kick in earlier so the
   wrap layout always looks intentional. */
@media (max-width: 420px) {
    .fp-room-line {
        flex-wrap: wrap;
        gap: 6px !important;
    }

    .fp-room-line-label {
        width: 100%;
        min-width: 100%;
        margin-bottom: 2px;
    }

    .fp-exact-pills--inline {
        width: 100%;
    }
}

/* ================================================================
   ════════════════════════════════════════════════════════════════
   FILTER PANEL v5 — "QUICK-TUNE" REBUILD
   ════════════════════════════════════════════════════════════════
   • No-collapse layout — every primary control is visible
   • Digital-jewelry icons (custom SVG, stroke-based)
   • Sky-blue + sunset-orange brand palette
   • Mobile-first tap targets ≥ 40px
   • Hides legacy chevrons / arrow buttons via .fp-side-panel--v5
   ================================================================ */

:root {
    /* Brand-aligned tokens for v5 only — extends the existing :root */
    --fp-charcoal: #0E0E11;
    --fp-charcoal-2: #1A1A1F;
    --fp-orange-1: #F58220;
    --fp-orange-2: #F89622;
    --fp-blue-1: #56C4F8;
    --fp-blue-2: #3FA9D9;
    --fp-cloud: #F5F7FB;
    --fp-stroke: rgba(14, 14, 17, 0.08);
    --fp-stroke-hover: rgba(14, 14, 17, 0.16);
    --fp-ring-orange: rgba(245, 130, 32, 0.18);
    --fp-ring-blue: rgba(86, 196, 248, 0.22);
}

/* ── PANEL WIDTH BUMP — give the new layout more breathing room ── */
.fp-side-panel--v5 {
    --fp-panel-width: 440px;
}

/* On larger screens, lift to a more cinematic 480 */
@media (min-width: 1100px) {
    .fp-side-panel--v5 {
        --fp-panel-width: 480px;
    }
}

/* Hide legacy chevrons / section arrows — v5 doesn't use them */
.fp-side-panel--v5 .fp-sec-arrow {
    display: none !important;
}

/* Default panel "shimmer accent" stays — but tune the gradient toward
   the brand: sunset orange, sky blue, white-grey cloud, back. */
.fp-side-panel--v5::before {
    background: linear-gradient(90deg, var(--fp-orange-1) 0%, var(--fp-orange-2) 25%, var(--fp-blue-1) 55%, var(--fp-blue-2) 80%, var(--fp-orange-1) 100%) !important;
    background-size: 220% 100% !important;
}

/* ── HEADER refinements ──────────────────────────────────────── */
.fp-side-panel--v5 .fp-header {
    padding: 22px 22px 18px;
    background: #fff;
    border-bottom: 1px solid rgba(14, 14, 17, 0.05);
}

.fp-side-panel--v5 .fp-header-left {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.fp-side-panel--v5 .fp-header-title {
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    color: var(--fp-charcoal);
}

.fp-side-panel--v5 .fp-header-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--fp-orange-1), var(--fp-orange-2));
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(245, 130, 32, 0.32);
    transform: scale(0);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .fp-side-panel--v5 .fp-header-badge:not(:empty):not([data-count="0"]) {
        transform: scale(1);
    }

.fp-side-panel--v5 .fp-brand-mark {
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(245, 130, 32, 0.25));
}

/* Close button — switch to clean SVG stroke style */
.fp-side-panel--v5 .fp-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--fp-cloud);
    border: 1px solid var(--fp-stroke);
    color: var(--fp-charcoal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

    .fp-side-panel--v5 .fp-close-btn:hover {
        background: var(--fp-charcoal);
        border-color: var(--fp-charcoal);
        color: #fff;
        transform: rotate(90deg);
    }

.fp-side-panel--v5 .fp-reset-link {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fp-muted);
}

    .fp-side-panel--v5 .fp-reset-link:hover {
        color: var(--fp-orange-1);
        background: transparent;
    }

/* ── LOCATION ROW ────────────────────────────────────────────── */
.fp-side-panel--v5 .fp-loc-row {
    padding: 10px 22px;
    background: #fff;
    border-bottom: 1px solid rgba(14, 14, 17, 0.04);
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fp-charcoal);
    font-size: 0.82rem;
    font-weight: 600;
}

.fp-side-panel--v5 .fp-loc-icon {
    color: var(--fp-orange-1);
    flex-shrink: 0;
}

/* ── LIVE SUMMARY STRIP ─────────────────────────────────────── */
.fp-summary-strip {
    flex-shrink: 0;
    padding: 12px 22px 14px;
    background: linear-gradient(180deg, #fff, rgba(86, 196, 248, 0.04));
    border-bottom: 1px solid rgba(14, 14, 17, 0.05);
    position: relative;
    overflow: hidden;
}

    .fp-summary-strip::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 22px;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, #fff);
    }

.fp-summary-rail {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-right: 12px;
    min-height: 30px;
    align-items: center;
}

    .fp-summary-rail::-webkit-scrollbar {
        display: none;
    }

.fp-summary-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 12px;
    background: #fff;
    border: 1px solid var(--fp-stroke);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--fp-charcoal);
    box-shadow: 0 2px 6px rgba(14, 14, 17, 0.04);
    animation: fpSumChipIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: all 0.2s ease;
}

    .fp-summary-chip:hover {
        border-color: var(--fp-orange-1);
        transform: translateY(-1px);
        box-shadow: 0 6px 14px var(--fp-ring-orange);
    }

.fp-summary-chip--blue {
    background: linear-gradient(135deg, rgba(86, 196, 248, 0.08), #fff);
    border-color: rgba(86, 196, 248, 0.35);
    color: var(--fp-blue-2);
}

.fp-summary-chip--orange {
    background: linear-gradient(135deg, rgba(245, 130, 32, 0.08), #fff);
    border-color: rgba(245, 130, 32, 0.35);
    color: var(--fp-orange-1);
}

.fp-summary-chip-x {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(14, 14, 17, 0.08);
    color: var(--fp-charcoal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.fp-summary-chip:hover .fp-summary-chip-x {
    background: var(--fp-orange-1);
    color: #fff;
}

.fp-summary-empty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--fp-muted);
    font-weight: 600;
    font-style: italic;
}

.fp-summary-empty-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fp-blue-1);
    box-shadow: 0 0 0 4px rgba(86, 196, 248, 0.2);
    animation: fpDotPulse 2s ease-in-out infinite;
}

.fp-summary-strip.has-items .fp-summary-empty {
    display: none;
}

@keyframes fpSumChipIn {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(4px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes fpDotPulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(86, 196, 248, 0.2);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(86, 196, 248, 0.05);
    }
}

/* ── BODY — softer cloud-white background, more padding ─────── */
.fp-side-panel--v5 .fp-body {
    background: linear-gradient(180deg, #fafbfd 0%, #ffffff 100%);
    padding: 16px 18px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(14, 14, 17, 0.15) transparent;
}

    .fp-side-panel--v5 .fp-body::-webkit-scrollbar {
        width: 6px;
    }

    .fp-side-panel--v5 .fp-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .fp-side-panel--v5 .fp-body::-webkit-scrollbar-thumb {
        background: rgba(14, 14, 17, 0.15);
        border-radius: 999px;
    }

/* ── BLOCK CARD — new replacement for .fp-section/.fp-sec-header ─ */
.fp-block {
    background: #fff;
    border: 1px solid var(--fp-stroke);
    border-radius: 20px;
    padding: 16px 16px 18px;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(14, 14, 17, 0.03);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

    .fp-block:hover {
        border-color: rgba(245, 130, 32, 0.2);
        box-shadow: 0 8px 24px rgba(245, 130, 32, 0.06);
    }

.fp-block-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.fp-block-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(245, 130, 32, 0.1), rgba(248, 150, 34, 0.04));
    border: 1px solid rgba(245, 130, 32, 0.22);
    color: var(--fp-orange-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(245, 130, 32, 0.1);
    position: relative;
    overflow: hidden;
}

/* Sky-blue accent variant — used on Price + On-Show */
.fp-block-icon--blue {
    background: linear-gradient(135deg, rgba(86, 196, 248, 0.12), rgba(63, 169, 217, 0.04));
    border-color: rgba(86, 196, 248, 0.32);
    color: var(--fp-blue-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(86, 196, 248, 0.12);
}

/* Subtle scan beam — keep the digital-jewelry feel */
.fp-block-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    transform: skewX(-20deg);
    animation: fpScanSweep 5s ease-in-out infinite;
}

.fp-block-title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fp-charcoal);
    line-height: 1.1;
}

.fp-block-badge {
    display: none;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--fp-orange-1), var(--fp-orange-2));
    color: #fff;
    font-size: 0.68rem;
    font-weight: 900;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(245, 130, 32, 0.3);
}

    .fp-block-badge.visible {
        display: inline-flex;
        animation: fpBadgePop 0.4s cubic-bezier(0.34, 1.5, 0.64, 1);
    }

.fp-block-hint {
    margin: 0 0 12px;
    font-size: 0.72rem;
    color: var(--fp-muted);
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.fp-block-hint--tight {
    margin: 10px 0 0;
    padding: 8px 10px;
    background: rgba(86, 196, 248, 0.06);
    border-radius: 10px;
    border-left: 2px solid var(--fp-blue-1);
}

.fp-block-hint svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--fp-blue-2);
}

/* ── HIDDEN NATIVE SELECTS (chip-rail proxies) ──────────────── */
.fp-hidden-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* ── CHIP RAIL — horizontal-scroll category / subtype ─────── */
.fp-rail-wrap {
    position: relative;
    margin: 0 -6px 8px;
}

    .fp-rail-wrap::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 28px;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, #fff);
        z-index: 1;
        border-radius: 0 16px 16px 0;
    }

.fp-rail-wrap--subtype {
    margin-bottom: 0;
}

.fp-chip-rail {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 4px 22px 6px 6px;
    scrollbar-width: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

    .fp-chip-rail::-webkit-scrollbar {
        display: none;
    }

.fp-rail-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    background: #fff;
    border: 1.5px solid var(--fp-stroke);
    border-radius: 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--fp-charcoal);
    cursor: pointer;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(14, 14, 17, 0.03);
    white-space: nowrap;
    min-height: 38px;
    user-select: none;
}

    .fp-rail-chip svg {
        flex-shrink: 0;
        color: var(--fp-muted);
        transition: color 0.25s ease;
    }

    .fp-rail-chip:hover {
        border-color: rgba(245, 130, 32, 0.45);
        transform: translateY(-2px);
        box-shadow: 0 8px 18px var(--fp-ring-orange);
    }

        .fp-rail-chip:hover svg {
            color: var(--fp-orange-1);
        }

    .fp-rail-chip.active {
        background: linear-gradient(135deg, var(--fp-orange-1), var(--fp-orange-2));
        border-color: transparent;
        color: #fff;
        box-shadow: 0 8px 20px rgba(245, 130, 32, 0.4);
        transform: translateY(-2px);
    }

        .fp-rail-chip.active svg {
            color: #fff;
        }

/* Subtype rail uses sky-blue accent when active to differentiate */
.fp-chip-rail--subtype .fp-rail-chip {
    padding: 7px 12px;
    font-size: 0.74rem;
    min-height: 34px;
    border-radius: 12px;
}

    .fp-chip-rail--subtype .fp-rail-chip.active {
        background: linear-gradient(135deg, var(--fp-blue-1), var(--fp-blue-2));
        box-shadow: 0 8px 20px rgba(86, 196, 248, 0.4);
    }

    .fp-chip-rail--subtype .fp-rail-chip:hover {
        border-color: rgba(86, 196, 248, 0.5);
        box-shadow: 0 8px 18px var(--fp-ring-blue);
    }

        .fp-chip-rail--subtype .fp-rail-chip:hover svg {
            color: var(--fp-blue-2);
        }

/* ── MODE TABS (Price · Range vs Open to offers) ─────────── */
.fp-side-panel--v5 .fp-mode-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: var(--fp-cloud);
    padding: 4px;
    border-radius: 14px;
    margin-bottom: 14px;
}

.fp-side-panel--v5 .fp-mode-tab,
.fp-side-panel--v5 .fp-price-mode-grid .fp-price-mode-btn {
    flex-direction: row !important;
    gap: 6px !important;
    padding: 9px 12px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    color: var(--fp-muted) !important;
    box-shadow: none !important;
    transition: all 0.28s ease !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

    .fp-side-panel--v5 .fp-mode-tab svg,
    .fp-side-panel--v5 .fp-price-mode-grid .fp-price-mode-btn svg {
        color: currentColor !important;
    }

    .fp-side-panel--v5 .fp-mode-tab.active,
    .fp-side-panel--v5 .fp-price-mode-grid .fp-price-mode-btn.active {
        background: #fff !important;
        color: var(--fp-charcoal) !important;
        box-shadow: 0 4px 12px rgba(14, 14, 17, 0.06), 0 0 0 1px var(--fp-stroke) !important;
        transform: none !important;
    }

        .fp-side-panel--v5 .fp-mode-tab.active svg,
        .fp-side-panel--v5 .fp-price-mode-grid .fp-price-mode-btn.active svg {
            color: var(--fp-blue-2) !important;
        }

/* ── PRICE PRESET CLOUD ────────────────────────────────────── */
.fp-preset-cloud {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 14px;
}

@media (max-width: 480px) {
    .fp-preset-cloud {
        grid-template-columns: repeat(3, 1fr);
    }
}

.fp-preset-chip {
    padding: 9px 8px;
    background: #fff;
    border: 1.5px solid var(--fp-stroke);
    border-radius: 11px;
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--fp-charcoal);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: center;
    min-height: 38px;
    line-height: 1.15;
    user-select: none;
}

    .fp-preset-chip:hover {
        border-color: var(--fp-orange-1);
        color: var(--fp-orange-1);
        transform: translateY(-2px);
        box-shadow: 0 6px 14px var(--fp-ring-orange);
    }

    .fp-preset-chip.active {
        background: linear-gradient(135deg, var(--fp-orange-1), var(--fp-orange-2));
        border-color: transparent;
        color: #fff;
        box-shadow: 0 6px 16px rgba(245, 130, 32, 0.36);
        transform: translateY(-2px);
    }

.fp-preset-chip-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--fp-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}

.fp-preset-chip.active .fp-preset-chip-label {
    color: rgba(255, 255, 255, 0.85);
}

/* Custom-range collapsible row */
.fp-custom-range {
    border-top: 1px dashed var(--fp-stroke);
    padding-top: 12px;
    margin-top: 4px;
}

.fp-custom-range-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--fp-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

/* Crypto row — slimmer in v5 */
.fp-side-panel--v5 .fp-crypto-row {
    padding: 12px 14px;
    margin-top: 14px;
    border-radius: 14px;
}

.fp-side-panel--v5 .fp-crypto-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #fff;
}

/* ── ROOMS — tighten the v5 spacing ─────────────────────── */
.fp-side-panel--v5 .fp-room-line {
    padding: 8px 0 !important;
    border-bottom: 1px dashed rgba(14, 14, 17, 0.05);
    gap: 12px !important;
    display: flex;
    align-items: center;
}

    .fp-side-panel--v5 .fp-room-line:last-of-type {
        border-bottom: none;
    }

.fp-side-panel--v5 .fp-room-line-label {
    width: 96px !important;
    min-width: 96px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: var(--fp-charcoal) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

    .fp-side-panel--v5 .fp-room-line-label svg {
        color: var(--fp-orange-1);
        flex-shrink: 0;
    }

/* Pills tighter inside v5 panel */
.fp-side-panel--v5 .fp-exact-pill {
    padding: 7px 11px !important;
    min-width: 38px;
    font-size: 0.78rem;
    font-weight: 800;
    border-radius: 11px;
    border-width: 1.5px;
    min-height: 34px;
    line-height: 1;
}

    .fp-side-panel--v5 .fp-exact-pill.active {
        background: linear-gradient(135deg, var(--fp-orange-1), var(--fp-orange-2));
        box-shadow: 0 5px 14px rgba(245, 130, 32, 0.32);
        transform: translateY(-1px);
    }

/* ── CHIP GRID (Security · Features) — v5 refined ───────── */
.fp-side-panel--v5 .fp-chip-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
}

@media (min-width: 520px) {
    .fp-side-panel--v5 .fp-chip-grid--features {
        grid-template-columns: repeat(2, 1fr);
    }
}

.fp-side-panel--v5 .fp-chip {
    padding: 9px 10px;
    background: #fff;
    border: 1.5px solid var(--fp-stroke);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(14, 14, 17, 0.02);
    min-height: 38px;
    gap: 7px;
    color: var(--fp-charcoal);
    align-items: center;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
}

    .fp-side-panel--v5 .fp-chip:hover {
        border-color: rgba(245, 130, 32, 0.45);
        transform: translateY(-2px);
        box-shadow: 0 7px 16px var(--fp-ring-orange);
    }

    .fp-side-panel--v5 .fp-chip.active {
        background: linear-gradient(135deg, rgba(245, 130, 32, 0.08), #fff);
        border-color: var(--fp-orange-1);
        box-shadow: 0 0 0 2px var(--fp-ring-orange), 0 6px 16px rgba(245, 130, 32, 0.15);
    }

.fp-side-panel--v5 .fp-chip-svg {
    color: var(--fp-muted);
    transition: color 0.25s ease;
    flex-shrink: 0;
}

.fp-side-panel--v5 .fp-chip:hover .fp-chip-svg,
.fp-side-panel--v5 .fp-chip.active .fp-chip-svg {
    color: var(--fp-orange-1);
}

.fp-side-panel--v5 .fp-chip span {
    flex: 1 1 auto;
    min-width: 0;
}

/* Hide any legacy <i class="bi"> still in old chips (defensive) */
.fp-side-panel--v5 .fp-chip > i.bi {
    display: none;
}

/* ── FEATURES "Show all" expand ─────────────────────────── */
.fp-block--features .fp-chip-grid--features {
    max-height: 220px;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.fp-block--features.is-expanded .fp-chip-grid--features {
    max-height: 2000px;
}

.fp-block--features:not(.is-expanded) .fp-chip-grid--features::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    background: linear-gradient(180deg, transparent, #fff);
    pointer-events: none;
}

.fp-features-expand {
    margin-top: 10px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    background: var(--fp-cloud);
    border: 1px dashed var(--fp-stroke-hover);
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--fp-charcoal);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.28s ease;
}

    .fp-features-expand:hover {
        background: #fff;
        border-color: var(--fp-orange-1);
        color: var(--fp-orange-1);
        border-style: solid;
    }

.fp-features-expand-icon {
    transition: transform 0.3s ease;
}

.fp-block--features.is-expanded .fp-features-expand-icon {
    transform: rotate(180deg);
}

.fp-block--features.is-expanded .fp-features-expand-label::before {
    content: 'Show fewer';
}

.fp-block--features.is-expanded .fp-features-expand-label {
    font-size: 0;
}

    .fp-block--features.is-expanded .fp-features-expand-label::before {
        font-size: 0.72rem;
    }

/* Hide if total scoped features ≤ visible (set by JS) */
.fp-features-expand.is-hidden {
    display: none;
}

/* ── AGE pills — refine within v5 ───────────────────────── */
.fp-side-panel--v5 .fp-age-pill {
    padding: 8px 14px;
    border-radius: 11px;
    border-width: 1.5px;
    font-size: 0.78rem;
    font-weight: 800;
    min-height: 36px;
}

    .fp-side-panel--v5 .fp-age-pill.active {
        background: linear-gradient(135deg, var(--fp-orange-1), var(--fp-orange-2));
        box-shadow: 0 5px 14px rgba(245, 130, 32, 0.32);
    }

/* ── ON-SHOW (always-inline calendar) ──────────────────── */
.fp-side-panel--v5 .fp-onshow-btn--hidden {
    display: none !important;
}

.fp-on-show-calendar--inline {
    display: block !important;
    margin-top: 4px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(86, 196, 248, 0.04), #fff);
    border: 1px solid rgba(86, 196, 248, 0.16);
    border-radius: 14px;
}

/* Top-row quick chips — fast paths */
.fp-cal-quick--top {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 0 0 12px;
    margin: 0;
    border: none;
}

@media (min-width: 460px) {
    .fp-cal-quick--top {
        grid-template-columns: repeat(4, 1fr);
    }
}

.fp-cal-quick--top .fp-cal-quick-btn {
    padding: 8px 10px;
    border-radius: 11px;
    font-size: 0.72rem;
    font-weight: 800;
    background: #fff;
    border: 1.5px solid var(--fp-stroke);
    color: var(--fp-charcoal);
    letter-spacing: 0;
    text-align: center;
    min-height: 36px;
    transition: all 0.25s ease;
}

    .fp-cal-quick--top .fp-cal-quick-btn:hover {
        background: linear-gradient(135deg, rgba(86, 196, 248, 0.08), #fff);
        border-color: var(--fp-blue-1);
        color: var(--fp-blue-2);
        transform: translateY(-2px);
        box-shadow: 0 5px 12px var(--fp-ring-blue);
    }

    .fp-cal-quick--top .fp-cal-quick-btn.active {
        background: linear-gradient(135deg, var(--fp-blue-1), var(--fp-blue-2));
        border-color: transparent;
        color: #fff;
        box-shadow: 0 6px 16px rgba(86, 196, 248, 0.36);
    }

/* Calendar header + nav refinements */
.fp-side-panel--v5 .fp-cal-header {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(14, 14, 17, 0.06);
}

.fp-side-panel--v5 .fp-cal-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--fp-charcoal);
    letter-spacing: 0.02em;
}

.fp-side-panel--v5 .fp-cal-nav {
    width: 30px;
    height: 30px;
    background: #fff;
    border: 1px solid var(--fp-stroke);
    color: var(--fp-charcoal);
}

    .fp-side-panel--v5 .fp-cal-nav:hover {
        background: linear-gradient(135deg, var(--fp-blue-1), var(--fp-blue-2));
        border-color: transparent;
        color: #fff;
        transform: translateY(-1px);
    }

/* Calendar day cells — clear, tappable, range-highlight refined */
.fp-side-panel--v5 .fp-cal-day {
    min-height: 38px;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 9px;
    color: var(--fp-charcoal);
}

    .fp-side-panel--v5 .fp-cal-day:hover {
        background: rgba(86, 196, 248, 0.12);
        color: var(--fp-blue-2);
        border-color: rgba(86, 196, 248, 0.3);
        transform: scale(1.06);
    }

    .fp-side-panel--v5 .fp-cal-day.today {
        background: rgba(245, 130, 32, 0.1);
        color: var(--fp-orange-1);
        border-color: rgba(245, 130, 32, 0.3);
        font-weight: 900;
    }

    .fp-side-panel--v5 .fp-cal-day.in-range {
        background: rgba(86, 196, 248, 0.16);
        color: var(--fp-charcoal);
        border-radius: 4px;
    }

    .fp-side-panel--v5 .fp-cal-day.range-end {
        background: linear-gradient(135deg, var(--fp-blue-1), var(--fp-blue-2));
        color: #fff;
        border-color: transparent;
        box-shadow: 0 5px 14px rgba(86, 196, 248, 0.4);
        transform: scale(1.04);
        font-weight: 900;
    }

.fp-side-panel--v5 .fp-cal-summary {
    margin-top: 12px;
    background: #fff;
    border: 1px solid var(--fp-stroke);
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 700;
    color: var(--fp-charcoal);
    text-align: center;
    font-size: 0.76rem;
    border-style: dashed;
}

    .fp-side-panel--v5 .fp-cal-summary.active {
        background: linear-gradient(135deg, rgba(86, 196, 248, 0.1), #fff);
        border-color: rgba(86, 196, 248, 0.4);
        border-style: solid;
        color: var(--fp-blue-2);
        font-weight: 800;
    }

/* ── FOOTER — v5 with live count button ────────────────── */
.fp-side-panel--v5 .fp-footer {
    background: #fff;
    border-top: 1px solid var(--fp-stroke);
    padding: 14px 18px 18px;
    box-shadow: 0 -8px 24px rgba(14, 14, 17, 0.04);
    gap: 10px;
    flex-shrink: 0;
}

.fp-side-panel--v5 .fp-alert-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 16px;
    background: #fff;
    border: 1.5px solid var(--fp-stroke);
    border-radius: 14px;
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--fp-charcoal);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: all 0.28s ease;
    min-height: 46px;
}

    .fp-side-panel--v5 .fp-alert-btn:hover {
        border-color: var(--fp-orange-1);
        color: var(--fp-orange-1);
        transform: translateY(-2px);
        box-shadow: 0 8px 18px var(--fp-ring-orange);
    }

    .fp-side-panel--v5 .fp-alert-btn svg {
        color: currentColor;
        flex-shrink: 0;
    }

.fp-side-panel--v5 .fp-apply-btn,
.fp-side-panel--v5 #fpApplyBtn {
    flex: 1 1 auto;
    padding: 13px 18px;
    background: linear-gradient(135deg, var(--fp-orange-1), var(--fp-orange-2));
    border: none;
    border-radius: 14px;
    font-size: 0.84rem;
    font-weight: 900;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 8px 24px rgba(245, 130, 32, 0.38);
    transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 46px;
    position: relative;
    overflow: hidden;
}

    .fp-side-panel--v5 .fp-apply-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
        transform: translateX(-100%);
        transition: transform 0.6s ease;
    }

    .fp-side-panel--v5 .fp-apply-btn:hover::before {
        transform: translateX(100%);
    }

    .fp-side-panel--v5 .fp-apply-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(245, 130, 32, 0.45);
    }

.fp-apply-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 0 6px;
    margin-left: 4px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(4px);
    font-size: 0.74rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.fp-apply-arrow {
    margin-left: 4px;
    color: #fff;
    transition: transform 0.3s ease;
}

.fp-side-panel--v5 .fp-apply-btn:hover .fp-apply-arrow {
    transform: translateX(3px);
}

/* ── MOBILE (≤ 480px) — v5 tightening ───────────────── */
@media (max-width: 480px) {
    .fp-side-panel--v5 {
        --fp-panel-width: 100vw;
        width: 100vw;
        max-width: 100vw;
        border-radius: 0;
    }

        .fp-side-panel--v5 .fp-header {
            padding: 18px 18px 14px;
        }

        .fp-side-panel--v5 .fp-header-title {
            font-size: 0.86rem;
            letter-spacing: 0.1em;
        }

        .fp-side-panel--v5 .fp-loc-row {
            padding: 9px 18px;
            font-size: 0.78rem;
        }

    .fp-summary-strip {
        padding: 10px 18px 12px;
    }

    .fp-side-panel--v5 .fp-body {
        padding: 14px 14px 22px;
    }

    .fp-block {
        padding: 14px 14px 16px;
        border-radius: 16px;
        margin-bottom: 10px;
    }

    .fp-block-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .fp-block-title {
        font-size: 0.78rem;
    }

    /* Make pills land naturally on mobile */
    .fp-side-panel--v5 .fp-room-line {
        flex-wrap: wrap;
        gap: 6px !important;
        padding: 10px 0 !important;
    }

    .fp-side-panel--v5 .fp-room-line-label {
        width: 100% !important;
        min-width: 100% !important;
        margin-bottom: 4px;
    }

    .fp-side-panel--v5 .fp-exact-pill {
        flex: 1 1 auto;
        min-width: 36px;
        padding: 8px 9px !important;
        font-size: 0.76rem;
    }

    .fp-preset-cloud {
        grid-template-columns: repeat(3, 1fr);
    }

    .fp-side-panel--v5 .fp-chip-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fp-side-panel--v5 .fp-cal-day {
        min-height: 36px;
        font-size: 0.78rem;
    }

    .fp-side-panel--v5 .fp-footer {
        padding: 12px 14px 16px;
        gap: 8px;
    }

    .fp-side-panel--v5 .fp-alert-btn {
        padding: 11px 12px;
        font-size: 0.7rem;
    }

    .fp-side-panel--v5 .fp-apply-btn {
        padding: 12px 14px;
        font-size: 0.78rem;
    }

    /* On narrow phones the alert button shrinks to icon only */
    @media (max-width: 380px) {
        .fp-side-panel--v5 .fp-alert-btn span {
            display: none;
        }

        .fp-side-panel--v5 .fp-alert-btn {
            min-width: 46px;
            padding: 11px;
            justify-content: center;
        }
    }
}

/* Reduce-motion respect — kill scan beams & shimmer */
@media (prefers-reduced-motion: reduce) {
    .fp-side-panel--v5::before,
    .fp-block-icon::before,
    .fp-summary-empty-dot {
        animation: none !important;
    }
}

/* End v5 block ─────────────────────────────────────────── */

/* ================================================================
   v5.1 — RAIL SCROLL ARROWS + CUSTOM PRICE INPUTS
   ----------------------------------------------------------------
   • Floating left / right arrows over horizontal-scroll rails
     (category, subtype, and the summary chip strip).
   • Inline custom price input that surfaces when the user picks
     "Custom…" from the Min or Max price dropdown.
   ================================================================ */

/* ── Rail wrappers need positioning context for the arrows ─── */
.fp-rail-wrap,
.fp-summary-strip {
    /* set inline by JS as a fallback, but enforce via CSS too */
    position: relative;
}

    /* Slightly widen the right-edge fade-out gradient when there's
   actually content to scroll to (JS toggles .has-overflow). */
    .fp-rail-wrap.has-overflow::after {
        width: 36px;
    }

/* ── ARROW BUTTONS ──────────────────────────────────────── */
.fp-rail-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.85);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(14, 14, 17, 0.1);
    color: var(--fp-charcoal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.32s cubic-bezier(0.34, 1.5, 0.64, 1), background 0.2s ease, color 0.2s ease, box-shadow 0.25s ease;
    box-shadow: 0 6px 16px rgba(14, 14, 17, 0.1), 0 0 0 4px #fff;
    padding: 0;
}

    .fp-rail-arrow.is-visible {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(-50%) scale(1);
    }

    .fp-rail-arrow:hover {
        background: linear-gradient(135deg, var(--fp-orange-1), var(--fp-orange-2));
        border-color: transparent;
        color: #fff;
        box-shadow: 0 8px 20px rgba(245, 130, 32, 0.4), 0 0 0 4px #fff;
        transform: translateY(-50%) scale(1.08);
    }

    .fp-rail-arrow:active {
        transform: translateY(-50%) scale(0.94);
    }

.fp-rail-arrow--left {
    left: -6px;
}

.fp-rail-arrow--right {
    right: -6px;
}

/* On the summary strip, arrows align with the chip baseline */
.fp-summary-strip .fp-rail-arrow {
    /* The strip has its own vertical padding — recenter on the chip row */
    top: 50%;
}

/* The subtype rail on category uses sky-blue accent on hover for arrows */
.fp-chip-rail--subtype + .fp-hidden-select + .fp-rail-arrow:hover,
.fp-rail-wrap--subtype .fp-rail-arrow:hover {
    background: linear-gradient(135deg, var(--fp-blue-1), var(--fp-blue-2));
    box-shadow: 0 8px 20px rgba(86, 196, 248, 0.4), 0 0 0 4px #fff;
}

/* Hide arrows entirely on coarse-pointer devices without hover —
   touch users can swipe; we only need arrows for mouse / trackpad. */
@media (hover: none) and (pointer: coarse) {
    /* keep them but smaller and only at edges where overflow exists */
    .fp-rail-arrow {
        width: 24px;
        height: 24px;
    }
}

/* ── CUSTOM PRICE INPUT ROW ─────────────────────────────── */
.fp-custom-price-row {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 4px 4px 12px;
    background: #fff;
    border: 1.5px solid var(--fp-orange-1);
    border-radius: 12px;
    box-shadow: 0 0 0 3px var(--fp-ring-orange), 0 6px 16px rgba(245, 130, 32, 0.12);
    animation: fpCustomPriceIn 0.35s cubic-bezier(0.34, 1.5, 0.64, 1);
}

    .fp-custom-price-row.is-visible {
        display: flex;
    }

@keyframes fpCustomPriceIn {
    0% {
        opacity: 0;
        transform: translateY(-6px) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.fp-custom-price-prefix {
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--fp-orange-1);
    letter-spacing: 0.02em;
    flex-shrink: 0;
    user-select: none;
}

.fp-custom-price-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 4px;
    border: none;
    background: transparent;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--fp-charcoal);
    outline: none;
    letter-spacing: 0.01em;
    font-family: inherit;
}

    .fp-custom-price-input::placeholder {
        color: var(--fp-muted);
        font-weight: 500;
    }

.fp-custom-price-apply {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--fp-orange-1), var(--fp-orange-2));
    border: none;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.22s ease;
    box-shadow: 0 4px 10px rgba(245, 130, 32, 0.32);
}

    .fp-custom-price-apply:hover {
        transform: scale(1.06);
        box-shadow: 0 6px 14px rgba(245, 130, 32, 0.42);
    }

    .fp-custom-price-apply:active {
        transform: scale(0.96);
    }

/* When a custom price row is visible, the parent .fp-price-cell
   needs to allow its content to grow downward — already does by
   default. But make sure the cell's overflow doesn't clip the
   row's focus ring. */
.fp-price-cell {
    overflow: visible;
}

/* Mobile: tighten everything */
@media (max-width: 480px) {
    .fp-rail-arrow {
        width: 26px;
        height: 26px;
    }

    .fp-rail-arrow--left {
        left: -4px;
    }

    .fp-rail-arrow--right {
        right: -4px;
    }

    .fp-custom-price-input {
        font-size: 0.86rem;
    }

    .fp-custom-price-prefix {
        font-size: 0.8rem;
    }

    .fp-custom-price-apply {
        width: 30px;
        height: 30px;
    }
}

/* End v5.1 ────────────────────────────────────────────── */

/* ================================================================
   v5.2 — CONTEXT-AWARE PRICING MODES + UX FIXES
   ----------------------------------------------------------------
   • Features chip grid: more top-padding so the active chip's
     ring-glow shadow doesn't get clipped by the row above.
   • Summary chip rail: rail arrows pulled inward from the strip
     edge so they sit clear of the panel chrome.
   • New pricing-mode rail: horizontal-scroll pill rail (Buy/Rent
     and category-aware — Auction only when category=auction).
   • Pricing-mode explainer card: surfaces when a non-range mode
     is picked, hides when the user returns to "Set a range".
   ================================================================ */

/* ── Features grid · breathing room ────────────────────────
   The active chip has a glow shadow (0 6px 16px rgba…) that the
   parent grid was clipping when chips wrapped to a second row.
   Generous top-padding gives the glow somewhere to live. The
   first-row sits comfortably below the hint text. */
.fp-side-panel--v5 .fp-chip-grid--features {
    padding-top: 6px;
    padding-bottom: 6px;
    row-gap: 9px;
}

/* The collapsed-state max-height was 220px — bump it a touch so
   the extra padding doesn't crowd out a chip's bottom row. */
.fp-block--features .fp-chip-grid--features {
    max-height: 240px;
}

/* ── Summary strip · arrows pulled inward ──────────────────
   On the summary strip, the arrows sat flush with the rail's
   right edge (right: -6px). Visually they kissed the panel
   chrome. We pad both arrows in and increase the gradient fade
   so they land somewhere quiet. */
.fp-summary-strip .fp-rail-arrow--left {
    left: 6px;
}

.fp-summary-strip .fp-rail-arrow--right {
    right: 6px;
}

/* Push the rail's own content so it doesn't sit beneath the
   arrows. Also lift the right-edge fade to start a touch earlier
   so it visually wraps around the right arrow. */
.fp-summary-rail {
    padding-right: 30px; /* room for the right arrow */
    padding-left: 2px;
}

.fp-summary-strip.has-overflow::after {
    width: 40px;
}

.fp-summary-strip::after {
    width: 28px;
}

/* When the left arrow is visible (user has scrolled), mirror a
   matching left-edge fade for symmetry. */
.fp-summary-strip {
    /* base gradient is on ::after — we add ::before for the left */
    position: relative;
}

    .fp-summary-strip::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 0;
        pointer-events: none;
        background: linear-gradient(90deg, #fff, transparent);
        transition: width 0.25s ease;
        z-index: 1;
    }

    /* When the left arrow is visible (user has scrolled), mirror a
   matching left-edge fade for symmetry. JS toggles
   .has-overflow-left on the wrap whenever the left arrow shows. */
    .fp-summary-strip.has-overflow-left::before {
        width: 28px;
    }

/* ── PRICING MODE PILL RAIL ────────────────────────────────
   Replaces the old 2-col grid. Horizontal scroll on overflow,
   tap to set, sky-blue active state (since this lives inside
   the blue-accented Price block). */
.fp-side-panel--v5 .fp-mode-tabs--rail {
    display: flex !important;
    gap: 7px !important;
    background: transparent !important;
    padding: 4px 4px 6px 4px !important;
    border-radius: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 -4px 14px !important;
    grid-template-columns: none !important;
}

    .fp-side-panel--v5 .fp-mode-tabs--rail::-webkit-scrollbar {
        display: none;
    }

    .fp-side-panel--v5 .fp-mode-tabs--rail .fp-mode-tab,
    .fp-side-panel--v5 .fp-mode-tabs--rail .fp-price-mode-btn {
        flex: 0 0 auto !important;
        flex-direction: row !important;
        gap: 6px !important;
        padding: 9px 14px !important;
        background: #fff !important;
        border: 1.5px solid var(--fp-stroke) !important;
        border-radius: 13px !important;
        font-size: 0.74rem !important;
        font-weight: 700 !important;
        color: var(--fp-charcoal) !important;
        box-shadow: 0 2px 6px rgba(14, 14, 17, 0.03) !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        min-height: 38px !important;
        cursor: pointer !important;
        transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
        transform: none !important;
    }

        .fp-side-panel--v5 .fp-mode-tabs--rail .fp-mode-tab svg,
        .fp-side-panel--v5 .fp-mode-tabs--rail .fp-price-mode-btn svg {
            color: var(--fp-muted) !important;
            flex-shrink: 0;
            transition: color 0.25s ease;
        }

        .fp-side-panel--v5 .fp-mode-tabs--rail .fp-mode-tab:hover,
        .fp-side-panel--v5 .fp-mode-tabs--rail .fp-price-mode-btn:hover {
            border-color: rgba(86, 196, 248, 0.5) !important;
            color: var(--fp-blue-2) !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 8px 18px var(--fp-ring-blue) !important;
        }

            .fp-side-panel--v5 .fp-mode-tabs--rail .fp-mode-tab:hover svg,
            .fp-side-panel--v5 .fp-mode-tabs--rail .fp-price-mode-btn:hover svg {
                color: var(--fp-blue-2) !important;
            }

        .fp-side-panel--v5 .fp-mode-tabs--rail .fp-mode-tab.active,
        .fp-side-panel--v5 .fp-mode-tabs--rail .fp-price-mode-btn.active {
            background: linear-gradient(135deg, var(--fp-blue-1), var(--fp-blue-2)) !important;
            border-color: transparent !important;
            color: #fff !important;
            box-shadow: 0 8px 20px rgba(86, 196, 248, 0.4) !important;
            transform: translateY(-2px) !important;
        }

            .fp-side-panel--v5 .fp-mode-tabs--rail .fp-mode-tab.active svg,
            .fp-side-panel--v5 .fp-mode-tabs--rail .fp-price-mode-btn.active svg {
                color: #fff !important;
            }

        /* The Auction pill gets a sunset-orange accent on hover/active
   when it appears (only on category=auction). It's a visual nod
   to the auction "lightning bolt" identity. */
        .fp-side-panel--v5 .fp-mode-tabs--rail .fp-mode-tab[data-mode="auction"]:hover {
            border-color: rgba(245, 130, 32, 0.5) !important;
            color: var(--fp-orange-1) !important;
            box-shadow: 0 8px 18px var(--fp-ring-orange) !important;
        }

            .fp-side-panel--v5 .fp-mode-tabs--rail .fp-mode-tab[data-mode="auction"]:hover svg {
                color: var(--fp-orange-1) !important;
            }

        .fp-side-panel--v5 .fp-mode-tabs--rail .fp-mode-tab[data-mode="auction"].active {
            background: linear-gradient(135deg, var(--fp-orange-1), var(--fp-orange-2)) !important;
            box-shadow: 0 8px 20px rgba(245, 130, 32, 0.4) !important;
        }

/* ── PRICING MODE EXPLAINER CARD ───────────────────────────
   Shows when a non-range mode is selected. Quiet sky-blue
   card with the mode's icon, title and a short sentence so
   the user knows what they're filtering for. */
.fp-price-mode-explainer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px;
    background: linear-gradient(180deg, rgba(86, 196, 248, 0.06), #fff);
    border: 1px solid rgba(86, 196, 248, 0.22);
    border-radius: 14px;
    margin-bottom: 12px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.32s ease, transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

    .fp-price-mode-explainer.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .fp-price-mode-explainer[hidden] {
        display: none !important;
    }

.fp-price-mode-explainer-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(86, 196, 248, 0.16), rgba(63, 169, 217, 0.06));
    border: 1px solid rgba(86, 196, 248, 0.35);
    color: var(--fp-blue-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(86, 196, 248, 0.12);
}

.fp-price-mode-explainer-body {
    min-width: 0;
    flex: 1;
}

.fp-price-mode-explainer-title {
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--fp-charcoal);
    line-height: 1.25;
    margin-bottom: 3px;
}

.fp-price-mode-explainer-text {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--fp-muted);
    line-height: 1.45;
}

/* When the explainer is showing an auction-specific message
   (the rail puts the Auction pill in orange), shift the card
   accent to match. We detect this by checking if the .active
   pill has data-mode="auction" — done in JS by toggling an
   .is-auction class on the explainer when applicable. */
.fp-price-mode-explainer.is-auction {
    background: linear-gradient(180deg, rgba(245, 130, 32, 0.06), #fff);
    border-color: rgba(245, 130, 32, 0.25);
}

    .fp-price-mode-explainer.is-auction .fp-price-mode-explainer-icon {
        background: linear-gradient(135deg, rgba(245, 130, 32, 0.16), rgba(248, 150, 34, 0.06));
        border-color: rgba(245, 130, 32, 0.35);
        color: var(--fp-orange-1);
    }

/* End v5.2 ────────────────────────────────────────────── */

/* ── Pricing-mode rail · arrow alignment ─────────────────
   The mode rail has different vertical metrics than the chip
   rails (taller pills, 14px bottom margin). The arrow defaults
   `top: 50%` work, but we need the wrap to expose the same
   gradient-fade behaviour as the chip rails and a small bottom
   offset on the arrows so they vertically centre on the pills
   (the rail's bottom margin would otherwise drag the centre down). */
.fp-rail-wrap--modes {
    margin: 0 -4px 14px !important;
    padding-bottom: 0 !important;
}

    /* Match the right-fade gradient over the mode rail */
    .fp-rail-wrap--modes::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 14px; /* match the rail's bottom margin */
        width: 0;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, #fff);
        z-index: 1;
        transition: width 0.25s ease;
    }

    .fp-rail-wrap--modes.has-overflow::after {
        width: 36px;
    }

    .fp-rail-wrap--modes::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 14px;
        width: 0;
        pointer-events: none;
        background: linear-gradient(90deg, #fff, transparent);
        z-index: 1;
        transition: width 0.25s ease;
    }

    .fp-rail-wrap--modes.has-overflow-left::before {
        width: 28px;
    }

    /* The mode rail's bottom margin pushes the geometric centre down.
   Lift the arrows up by half of that so they centre on the pills. */
    .fp-rail-wrap--modes .fp-rail-arrow {
        top: calc(50% - 7px);
    }

/* Mode rail · zero out its bottom margin since the wrap owns it now */
.fp-side-panel--v5 .fp-rail-wrap--modes .fp-mode-tabs--rail {
    margin-bottom: 0 !important;
}

/* End v5.3 ────────────────────────────────────────────── */


/* ================================================================
   v6 ENHANCEMENT — Per-card COLLAPSE / EXPAND toggle
   ----------------------------------------------------------------
   Adds a chevron toggle button on every filter card (.fp-block) so
   users can collapse cards they don't need, reducing cognitive load
   on a dense panel. State persists to localStorage so the layout
   the user prefers survives reloads.

   Design notes:
   • The toggle is injected by filter.js into .fp-block-head.
   • Clicking anywhere on the header toggles the card.
   • The body wrapper (.fp-block-body) is also injected by JS;
     this stylesheet only defines the visual + motion behaviour.
   • Existing card visuals untouched — additive only.
   ================================================================ */

/* Make the header clickable + keep its existing layout intact */
.fp-side-panel .fp-block-head {
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

    .fp-side-panel .fp-block-head:hover .fp-block-toggle {
        background: rgba(245, 130, 32, 0.1);
        color: var(--fp-orange);
        border-color: rgba(245, 130, 32, 0.25);
    }

/* The chevron toggle button itself */
.fp-block-toggle {
    margin-left: auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #f8f9fa;
    color: var(--fp-muted, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

    .fp-block-toggle:hover {
        transform: scale(1.08);
        box-shadow: 0 4px 10px rgba(245, 130, 32, 0.15);
    }

    .fp-block-toggle:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.25);
        border-color: var(--fp-orange, #F58220);
        color: var(--fp-orange, #F58220);
    }

    .fp-block-toggle svg {
        display: block;
        transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    }

/* Rotate the chevron when the card is collapsed */
.fp-block.is-collapsed .fp-block-toggle svg {
    transform: rotate(-90deg);
}

/* The collapsible body wrapper */
.fp-block-body {
    overflow: hidden;
    max-height: 6000px; /* generous cap — covers the busiest section */
    opacity: 1;
    transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin-top 0.45s cubic-bezier(0.16, 1, 0.3, 1), padding 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.fp-block.is-collapsed .fp-block-body {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none;
}

/* Collapsed cards: keep a small but visible breathing room
   beneath the icon row so the card doesn't feel "amputated" with
   the icon flush against the bottom edge of the rounded container. */
.fp-block.is-collapsed {
    padding-bottom: 6px !important;
}

    .fp-block.is-collapsed .fp-block-head {
        margin-bottom: 0;
        padding-bottom: 6px;
    }

/* When a section badge is showing, place it just before the toggle */
.fp-side-panel .fp-block-head .fp-block-badge:empty {
    display: none;
}

/* Mobile tuning — slightly smaller toggle */
@media (max-width: 480px) {
    .fp-block-toggle {
        width: 28px;
        height: 28px;
    }
}

/* End v6 ────────────────────────────────────────────────── */


/* ================================================================
   v7 ENHANCEMENT — MULTI-CATEGORY SELECTION
   ----------------------------------------------------------------
   Visual treatment for the multi-select category rail, the "Search
   across" mini-rail inside the panel, the disabled-subtype state,
   and the section badge for "Categories (N)". Strictly additive —
   does not touch any existing rule.
   ================================================================ */

/* Tiny check-icon overlay on selected chips when N > 1.
   Anchored to the chip's top-right. Hidden by default — only
   shown when .fp-rail-chip.active sits inside a multi rail. */
.fp-chip-rail.is-multi .fp-rail-chip {
    position: relative;
}

.fp-chip-check {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--fp-orange, #F58220);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 0 0 1.5px var(--fp-orange, #F58220);
    pointer-events: none;
    animation: fp-check-pop 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fp-check-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    70% {
        transform: scale(1.15);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* The primary (first-selected) chip in multi-mode gets a subtle
   inner ring to mark it as the "driving" category. */
.fp-chip-rail.is-multi .fp-rail-chip.active.is-primary {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 2px 6px rgba(245, 130, 32, 0.32);
}

/* Section header badge — "Categories (N)" treatment.
   The base .fp-block-badge styling stays untouched; we only widen
   it so the multi-word text doesn't get cropped. */
.fp-block-badge.fp-block-badge--multi {
    min-width: auto;
    width: auto;
    height: auto;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
    background: rgba(245, 130, 32, 0.12);
    color: var(--fp-orange, #F58220);
    border: 1px solid rgba(245, 130, 32, 0.25);
}

/* ──────────── In-panel "Search across" mini-rail ────────────
   Surfaces between the category rail and the subtype rail when
   N > 1. Mirrors the sac-row in the search bar so the two stay
   visually consistent. */
.fp-across-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 4px;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(245, 130, 32, 0.06) 0%, rgba(245, 130, 32, 0.03) 100%);
    border: 1px dashed rgba(245, 130, 32, 0.28);
    border-radius: 12px;
    animation: fp-across-slide 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fp-across-slide {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fp-across-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fp-orange, #F58220);
    white-space: nowrap;
    flex-shrink: 0;
}

.fp-across-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    flex: 1 1 auto;
}

.fp-across-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #2a2a2a;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

    .fp-across-chip:hover {
        background: rgba(245, 130, 32, 0.06);
        border-color: rgba(245, 130, 32, 0.45);
        color: var(--fp-orange, #F58220);
    }

    .fp-across-chip:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.28);
    }

    .fp-across-chip.is-primary {
        background: rgba(245, 130, 32, 0.1);
        border-color: rgba(245, 130, 32, 0.4);
        color: var(--fp-orange, #F58220);
    }

.fp-across-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.5);
    transition: background 0.2s ease, color 0.2s ease;
}

.fp-across-chip:hover .fp-across-chip-x {
    background: var(--fp-orange, #F58220);
    color: #FFFFFF;
}

/* ──────────── Disabled subtype rail when N > 1 ────────────
   Greyed-out + non-interactive, with a tiny hint telling the user
   what to do to re-enable it. */
.fp-rail-wrap--subtype.is-disabled {
    position: relative;
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(0.6);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

    .fp-rail-wrap--subtype.is-disabled::after {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient( 45deg, transparent 0, transparent 6px, rgba(0, 0, 0, 0.025) 6px, rgba(0, 0, 0, 0.025) 12px );
        border-radius: 12px;
        pointer-events: none;
    }

.fp-subtype-lock-hint {
    margin-top: 8px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.55);
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    text-align: center;
    letter-spacing: 0.01em;
    pointer-events: auto;
}

/* ──────────── "You can't deselect the last one" shake ────────────
   Subtle horizontal shake when the user tries to deselect the only
   selected category — reinforces the floor without modal warnings. */
.fp-rail-chip.fp-shake {
    animation: fp-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes fp-shake {
    10%, 90% {
        transform: translateX(-1px);
    }

    20%, 80% {
        transform: translateX(2px);
    }

    30%, 50%, 70% {
        transform: translateX(-3px);
    }

    40%, 60% {
        transform: translateX(3px);
    }
}

/* Mobile tuning — across-row should stack the label above on
   very narrow screens to avoid label truncation. */
@media (max-width: 420px) {
    .fp-across-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 8px 10px;
    }

    .fp-across-chips {
        width: 100%;
    }
}

/* ──────────── v7.1 — Polish fixes (from user feedback) ────────────
   1) The check-circle overlay on selected chips was being clipped
      at the top because .fp-chip-rail uses overflow-x: auto (which
      crops vertical overflow too in most browsers). Bump its top
      padding so the -4px overlay clears the rail's edge cleanly.
   2) The location pin icon was sitting a hair too high inside its
      orange circle wrapper — nudge it down 2px so it reads centred.
   Both are tiny, scoped, and don't affect anything else. */

.fp-side-panel .fp-chip-rail {
    /* was 4px (set in the v5 rail block at line 3449). Now 10px so
       the 16px check-circle at top:-4px has room to breathe. */
    padding-top: 10px;
}

/* Slight extra top breathing room on the wrapper so the badge's
   subtle box-shadow ring also clears any sibling section above. */
.fp-rail-wrap {
    padding-top: 2px;
}

/* Location pin — 2px top padding nudges the SVG down inside the
   22x22 orange circle so it visually centres. */
.fp-loc-row .fp-loc-icon,
.fp-side-panel--v5 .fp-loc-icon {
    padding-top: 2px;
    box-sizing: border-box;
}

/* The Price-mode rail's first button ("Set a range") had its blue
   focus-glow box-shadow clipped on the left because the rail only
   had 4px of left padding. Bump it so the glow has room to fall. */
.fp-side-panel--v5 .fp-mode-tabs--rail,
.fp-side-panel .fp-mode-tabs--rail {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Match the visual: shift the wrap's negative margin back by the
   same amount so the rail keeps its end-to-end appearance and the
   right-edge fade still sits in the same place. */
.fp-rail-wrap--modes {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ──────────── v7.2 — Left-padding pass on active chips ────────────
   Several rails had active chips sitting flush against the card's
   inner edge. Their orange/blue box-shadow glows were getting
   visually amputated. Bump left padding so every active state has
   room to glow:
     • .fp-chip-rail            (category + subtype rails)
     • .fp-age-pills            (Property Age pills)
     • .fp-summary-rail         ("No filters yet" dot/text + filter chips)
*/

/* Category / subtype chip rails — was padding: 4px 22px 6px 6px.
   Override only the left edge to 12px. Right padding kept large
   to maintain the right-fade gradient overlap. */
.fp-side-panel .fp-chip-rail {
    padding-left: 12px;
}

/* Age pills container — no padding at all originally. Add 4px so
   the first active pill's glow has room. */
.fp-side-panel .fp-age-pills {
    padding-left: 4px;
    padding-right: 4px;
}

/* Summary strip empty-state — the "No filters yet" line was
   pinned to the very left edge of the strip. Push it in slightly
   so the dot sits visually balanced. */
.fp-summary-rail {
    padding-left: 8px !important;
}

/* ──────────── v7.3 — Kill the hover "rattle" on chips ────────────
   The original .fp-rail-chip:hover lifts the chip with
   transform: translateY(-2px). When the cursor sits near the
   chip's bottom edge: chip lifts → cursor no longer over it →
   hover ends → chip drops → cursor over again → rattles back and
   forth.

   Fix: kill the transform entirely. We keep the border-color +
   shadow hover affordance so the chip still feels interactive —
   just without the unstable translate. The lift was costing more
   than it earned. */
.fp-side-panel .fp-rail-chip:hover {
    transform: none !important;
}

/* Optional gentle scale-up that doesn't change the chip's hit area
   (transform-origin: center means the chip grows around its own
   centre, so the cursor stays inside it). 1% is barely perceptible
   but enough to feel responsive. */
.fp-side-panel .fp-rail-chip {
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* End v7 ────────────────────────────────────────────────── */