/**
 * @file style-mobile.css
 * @description Mobile-specific styles for the Freeperie catalog UX.
 *              Loaded conditionally via media query (max-width: 999px).
 * @since 2.0.0
 * @package Blocksy_Child_Freeperie
 *
 * Table of Contents:
 * 1. Product Overlays (Mobile)
 * 2. Lightbox Mobile Adjustments
 * 3. Lightbox Onboarding (Mobile)
 * 4. Lightbox Article Navigation (Mobile)
 * 5. Filter Panel (Mobile Off-canvas)
 *    5.1  FAB — Floating Action Button
 *    5.2  Active Filter Pills
 *    5.3  Scroll Lock
 *    5.4  Off-canvas Panel
 *    5.5  Panel Header
 *    5.6  Main Scroll Area
 *    5.7  List Panel & Detail Panel
 *    5.8  Active Chips
 *    5.9  Filter Sections — Menu List
 *    5.10 Mes Recherches & Sticky Top
 *    5.11 Filter Term Items (Checkbox Rows)
 *    5.12 Search Field
 *    5.13 Overlay
 *    5.14 Footer — OK Button
 *    5.15 Active Filters (Chips) Handling
 *    5.16 Active Filter Preview
 *    5.17 Title Button Layout
 */

/* ==========================================================================
   1. Product Overlays (Mobile)
   ========================================================================== */
@media (max-width: 768px) {
    .fp-overlay-actions {
        display: none !important; /* Hide overlay buttons on product photos for mobile */
    }

    /* Layout to show brand/size on the left, and actions on the right on mobile */
    .fp-product-meta-wrap {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: calc(100% - 11px) !important; /* Account for 5px left margin and 6px right margin */
        margin-left: 5px !important;
        margin-right: 6px !important; /* Slight offset to the left */
        margin-top: 8px !important;
        box-sizing: border-box !important;
    }

    .fp-product-meta-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        flex-grow: 1 !important;
        min-width: 0 !important; /* Prevents overflow */
    }

    .fp-product-meta-actions {
        display: flex !important;
        flex-direction: column-reverse !important; /* Cart button on top, Details below */
        align-items: flex-end !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
        margin-left: 8px !important;
    }

    .fp-meta-action-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: 26px !important; /* Slightly more compact height for stacked buttons */
        border-radius: 4px !important; /* Square corners matching the product card */
        border: 1.5px solid var(--fp-border-light, #e5e7eb) !important;
        background-color: #ffffff !important;
        color: var(--fp-text-color) !important;
        cursor: pointer !important;
        padding: 0 8px !important; /* Horizontal padding for text and icon */
        gap: 4px !important; /* Gap between text and icon */
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
        transition: all 0.2s ease !important;
        min-width: 76px !important; /* Uniform minimal width to align nicely */
    }

    .fp-meta-action-btn svg {
        width: 12px !important;
        height: 12px !important;
        stroke-width: 2px !important;
    }

    .fp-meta-btn-text {
        font-size: 10px !important;
        font-weight: 600 !important;
        color: inherit !important;
        line-height: 1 !important;
    }

    .fp-meta-action-btn:active {
        background-color: #f6f6f6 !important;
        transform: scale(0.95) !important;
    }

    /* Active cart button styling (remove from cart) */
    .fp-meta-action-btn.fp-meta-cart-btn.lb-remove-from-cart {
        background-color: var(--fp-cart-added-color, #e67e22) !important;
        border-color: var(--fp-cart-added-color, #e67e22) !important;
        color: #ffffff !important;
    }

    /* Spinner for loading state on meta cart button */
    .fp-meta-action-btn.loading .fp-btn-spinner {
        width: 12px !important;
        height: 12px !important;
        border-width: 1.5px !important;
        border-color: rgba(0, 0, 0, 0.2) !important;
        border-top-color: var(--fp-primary-color, #38b849) !important;
    }

    .fp-meta-action-btn.fp-meta-cart-btn.lb-remove-from-cart.loading .fp-btn-spinner {
        border-color: rgba(255, 255, 255, 0.3) !important;
        border-top-color: #ffffff !important;
    }
}

/* ==========================================================================
   2. Lightbox Mobile Adjustments
   ========================================================================== */
@media (max-width: 768px) {
    /* Hide native navigation arrows when the current article has only 1 photo */
    .glightbox-container.has-single-photo .gnext,
    .glightbox-container.has-single-photo .gprev {
        display: none !important;
    }

    .fp-lb-info-bar-container {
        bottom: 10px !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    .fp-lb-info-bar {
        padding: 12px !important;
        gap: 8px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
        margin-bottom: env(safe-area-inset-bottom, 5px) !important;
    }

    .fp-lb-brand {
        font-size: 0.95em !important;
    }

    .fp-lb-price {
        font-size: 0.95em !important;
    }

    .fp-lb-size {
        font-size: 10px !important;
        padding: 2px 4px !important;
        line-height: 1.2 !important;
        opacity: 1 !important;
    }

    .fp-lb-desc {
        font-size: 0.75em !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
    }

    .fp-lb-tags {
        font-size: 0.65em !important;
    }

    .fp-lb-actions .button {
        padding: 8px 4px !important;
        font-size: 10px !important;
    }

    .fp-lb-actions {
        gap: 6px !important;
        padding-top: 8px !important;
    }

    .fp-lb-meta {
        gap: 6px !important;
    }
}

/* ==========================================================================
   3. Lightbox Onboarding (Mobile)
   ========================================================================== */
.fp-lb-onboarding-desktop {
    display: none;
}

.fp-lb-onboarding-mobile {
    display: flex;
}

/* ==========================================================================
   4. Lightbox Article Navigation (Mobile)
   ========================================================================== */
.fp-mobile-article-nav {
    position: fixed;
    top: 45%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 999999;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

@media (min-width: 769px) {
    .fp-mobile-article-nav {
        display: none !important;
    }
}

.fp-mobile-nav-btn {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    color: var(--fp-primary-color);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: background 0.2s ease;
}

.fp-mobile-nav-btn:active {
    background: #fff;
}

/* ==========================================================================
   5. Filter Panel (Mobile Off-canvas)
   ========================================================================== */
@media (max-width: 999px) {

    /* Hide elements on catalog page (appear inside panel instead) */
    .fp-profiles-row,
    .fp-active-chips-container {
        display: none !important;
    }

    /* ------------------------------------------------------------------
       5.1 FAB — Floating Action Button
       ------------------------------------------------------------------ */
    .fp-mobile-filter-btn {
        position: fixed !important;
        display: flex !important;
        right: 16px !important; /* better right alignment */
        left: auto !important;
        transform: translateY(0) !important;
        bottom: 25px !important; /* lowered since complianz is gone */
        width: 58px !important; /* slightly larger circle */
        height: 58px !important; /* slightly larger circle */
        border-radius: 50% !important;
        z-index: 9990 !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--fp-primary-color, #38b849) !important;
        color: #fff !important;
        box-shadow: 0 4px 16px rgba(56, 184, 73, 0.3) !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 1 !important;
        transition: bottom 0.3s ease, box-shadow 0.2s ease !important;
    }

    .fp-mobile-filter-btn:active {
        filter: brightness(0.94) !important;
        transform: scale(0.92) !important;
    }

    .fp-filter-btn-label {
        display: none !important;
    }

    /* FAB Badge — active filter count absolute at top right */
    .fp-fab-badge {
        display: none;
        position: absolute !important;
        top: -2px !important;
        right: -2px !important;
        min-width: 18px !important;
        height: 18px !important;
        background: #fff !important;
        color: var(--fp-primary-color, #38b849) !important;
        border: 2px solid var(--fp-primary-color, #38b849) !important;
        border-radius: 50% !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    }

    .fp-fab-badge.fp-fab-badge-visible {
        display: flex !important;
    }

    /* Filter row: collapsed on mobile */
    .fp-filter-row {
        min-height: 0;
        margin: 0;
        padding: 0;
    }

    /* ------------------------------------------------------------------
       5.2 Active Filter Pills — Fixed bar above FAB on catalog page
       ------------------------------------------------------------------ */
    .fp-mobile-active-pills {
        display: none !important;
    }

    .fp-catalog-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 10px 6px 13px;
        background: rgba(255, 255, 255, 0.96);
        border: 1.5px solid var(--fp-primary-color, #38b849);
        border-radius: 50px;
        font-size: 13px;
        font-weight: 600;
        color: var(--fp-primary-color, #38b849);
        white-space: nowrap;
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        flex-shrink: 0;
        transition: transform 0.15s ease;
    }

    .fp-catalog-pill:active { transform: scale(0.94); }

    .fp-pill-label { font-weight: 600; }

    .fp-pill-remove {
        font-size: 16px;
        line-height: 1;
        opacity: 0.6;
        margin-top: -1px;
    }

    /* ------------------------------------------------------------------
       5.3 Scroll Lock
       ------------------------------------------------------------------ */
    html.fp-lock-scroll,
    body.fp-lock-scroll {
        overflow: hidden !important;
        height: 100% !important;
    }

    /* ------------------------------------------------------------------
       5.4 Off-canvas Panel — Slide from Right (iOS style)
       ------------------------------------------------------------------ */

    /* Shared properties for both open and closed states to keep layout intact during animation */
    body #fp-vinted-filters-wrapper {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        z-index: 2147483647 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    visibility 0s linear 0.32s !important;
    }

    /* Closed: off-screen to the right */
    body:not(.fp-filter-open) #fp-vinted-filters-wrapper {
        transform: translateX(100%) !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Open: full viewport */
    body.fp-filter-open #fp-vinted-filters-wrapper {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
        transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    visibility 0s !important;
    }

    /* Admin bar offsets bypassed to cover entire viewport and prevent bottom button clipping */
    body.admin-bar.fp-filter-open #fp-vinted-filters-wrapper {
        top: 0 !important;
        height: 100dvh !important;
    }

    @media (max-width: 782px) {
        body.admin-bar.fp-filter-open #fp-vinted-filters-wrapper {
            top: 0 !important;
            height: 100dvh !important;
        }
    }

    /* ------------------------------------------------------------------
       5.5 Panel Header
       ------------------------------------------------------------------ */
    .fp-filter-mobile-title {
        grid-area: header !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 16px !important;
        min-height: 58px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        background: #fff !important;
        z-index: 10 !important;
        flex-shrink: 0 !important;
        position: relative !important;
    }

    .fp-filter-mobile-title > span {
        text-align: center;
        font-weight: 700;
        font-size: 17px;
        color: #111;
        letter-spacing: -0.02em;
    }

    /* Header right-side actions group */
    .fp-header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    /* Back button (←) */
    .fp-drilldown-back {
        display: none !important;
        background: none !important;
        border: none !important;
        padding: 8px !important;
        margin: 0 !important;
        cursor: pointer !important;
        color: var(--fp-primary-color, #38b849) !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
        transition: background 0.15s ease !important;
        position: absolute !important;
        left: 16px !important;
    }

    body.fp-drilldown-active .fp-drilldown-back {
        display: none !important;
    }

    .fp-drilldown-back:active {
        background: rgba(0, 0, 0, 0.06) !important;
    }

    /* Close button (✕) */
    .fp-filter-close-btn {
        background: #f4f4f4 !important;
        border: none !important;
        border-radius: 50% !important;
        width: 34px !important;
        height: 34px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        color: #555 !important;
        flex-shrink: 0 !important;
        transition: background 0.15s ease !important;
        position: absolute !important;
        right: 16px !important;
    }

    .fp-filter-close-btn:active {
        background: #e8e8e8 !important;
    }

    /* "Effacer tout" button */
    .fp-clear-all-btn {
        background: none !important;
        border: none !important;
        padding: 6px 8px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--fp-primary-color, #38b849) !important;
        cursor: pointer !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        transition: background 0.15s ease !important;
        display: none; /* shown via JS when filters active */
        align-items: center !important;
    }

    .fp-clear-all-btn:active {
        background: rgba(56, 184, 73, 0.08) !important;
    }

    /* ------------------------------------------------------------------
       5.6 Main Scroll Area (list view)
       ------------------------------------------------------------------ */
    body.fp-filter-open #fp-vinted-filters-inner {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: block !important;
        background: #fff !important;
        pointer-events: auto !important;
        overscroll-behavior: contain !important;
        position: relative !important;
    }

    /* Plugin wrapper overrides */
    .fp-vinted-filters-inner .wpc-filters-widget-content,
    .fp-vinted-filters-inner .wpc-filters-widget-content.wpc-closed {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
        background: transparent !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    body.fp-filter-open .fp-vinted-filters-inner .wpc-filters-main-wrap,
    body.fp-filter-open .fp-vinted-filters-inner .wpc-filters-widget-content {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    body .fp-vinted-filters-inner .wpc-filters-widget-wrapper {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .fp-vinted-filters-inner .wpc-filters-scroll-container {
        display: block !important;
        overflow: visible !important;
    }

    body.fp-filter-open #fp-vinted-filters-inner .wpc-filters-section {
        display: block !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* ------------------------------------------------------------------
       5.7 List Panel & Detail Panel
       ------------------------------------------------------------------ */

    /* List Panel — wraps all sections, slides left on drilldown */
    .fp-mobile-list-panel {
        min-height: 100%;
        padding-bottom: 0 !important;
        transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    opacity 0.25s ease;
        transform-origin: left center;
    }

    body.fp-drilldown-active .fp-mobile-list-panel {
        transform: translateX(-15%) scale(0.98);
        opacity: 0;
        pointer-events: none;
    }

    /* Detail Panel — absolute positioned overlay over list-panel */
    .fp-mobile-detail-panel {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        padding-bottom: 15px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
        background: #fff !important;
        z-index: 5 !important;
        transform: translateX(100%) !important;
        transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        pointer-events: none !important;
        overscroll-behavior: contain !important;
    }

    /* 2 columns for Mes Recherches */
    .fp-search-preferences-mobile-content .fp-bubbles {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
        width: 100% !important;
        padding: 0 !important;
    }
    .fp-search-preferences-mobile-content .fp-bubble {
        width: 100% !important;
        min-width: 0 !important;
    }

    body.fp-drilldown-active .fp-mobile-detail-panel {
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }

    /* Show filter content in detail panel and completely neutralize desktop fixed-popup styles */
    .fp-mobile-detail-panel .wpc-filter-content {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .fp-mobile-detail-panel .fp-search-preferences-mobile-content {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Hide section title in detail panel (shown in header instead) */
    .fp-mobile-detail-panel .wpc-filter-title,
    .fp-mobile-detail-panel .fp-pref-header {
        display: none !important;
    }

    /* ------------------------------------------------------------------
       5.8 Active Chips inside the panel
       ------------------------------------------------------------------ */
    .fp-filter-row .fp-active-chips-container {
        display: none !important;
    }

    /* Merged: single canonical rule for #fp-mobile-active-chips (was duplicated at two locations) */
    #fp-vinted-filters-wrapper #fp-mobile-active-chips,
    #fp-mobile-active-chips {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 10px 16px !important;
        background: #fafafa !important;
        border-bottom: 1px solid #f0f0f0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        margin: 0 !important;
    }

    #fp-mobile-active-chips::-webkit-scrollbar { display: none; }

    #fp-mobile-active-chips:empty { display: none !important; }

    .fp-active-chip {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 5px 8px 5px 12px !important;
        background: var(--fp-primary-color, #38b849) !important;
        color: #fff !important;
        border-radius: 50px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .fp-active-chip .fp-chip-label { font-weight: 500 !important; }
    .fp-active-chip .fp-chip-label strong { font-weight: 700 !important; }

    .fp-active-chip .fp-chip-remove {
        color: rgba(255,255,255,0.85) !important;
        background: rgba(255,255,255,0.2) !important;
        border-radius: 50% !important;
        width: 18px !important;
        height: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        line-height: 1 !important;
        text-decoration: none !important;
        flex-shrink: 0 !important;
    }

    /* ------------------------------------------------------------------
       5.9 Filter Sections — Menu List
       ------------------------------------------------------------------ */
    .fp-vinted-filters-inner .wpc-filters-section {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid #f2f2f2 !important;
        border-radius: 0 !important;
        float: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        pointer-events: all !important;
        transition: none !important;
    }

    /* Section title row (menu item) */
    .fp-vinted-filters-inner .wpc-filter-title {
        display: flex !important;
        align-items: center !important;
        padding: 0 20px !important;
        min-height: 56px !important;
        cursor: pointer !important;
    }

    .fp-vinted-filters-inner .wpc-filter-title button,
    .fp-vinted-filters-inner .wpc-filter-title-button {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 16px 0 !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #1a1a1a !important;
        border: none !important;
        background: none !important;
        text-align: left !important;
        cursor: pointer !important;
    }

    /* Chevron right */
    .fp-vinted-filters-inner .wpc-filter-title button::after,
    .fp-vinted-filters-inner .wpc-filter-title-button::after {
        content: '';
        display: inline-block;
        width: 7px;
        height: 7px;
        border-right: 2px solid #c8c8c8;
        border-top: 2px solid #c8c8c8;
        transform: rotate(45deg);
        flex-shrink: 0;
        transition: border-color 0.2s ease;
    }

    /* Section with active selections: green title + chevron */
    .fp-vinted-filters-inner .wpc-filters-section.fp-has-selections .wpc-filter-title button,
    .fp-vinted-filters-inner .wpc-filters-section.fp-has-selections .wpc-filter-title-button {
        color: var(--fp-primary-color, #38b849) !important;
        font-weight: 600 !important;
    }

    .fp-vinted-filters-inner .wpc-filters-section.fp-has-selections .wpc-filter-title button::after,
    .fp-vinted-filters-inner .wpc-filters-section.fp-has-selections .wpc-filter-title-button::after {
        border-color: var(--fp-primary-color, #38b849);
    }

    /* Hide filter content in list panel (only show titles) */
    .fp-mobile-list-panel .wpc-filter-content,
    .fp-mobile-list-panel .fp-search-preferences-mobile-content {
        display: none !important;
    }

    /* ------------------------------------------------------------------
       5.10 Mes Recherches & Sticky Top
       ------------------------------------------------------------------ */
    .fp-mobile-sticky-top {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: #fff !important;
        display: flex;
        flex-direction: column;
    }

    .fp-search-preferences-mobile {
        display: flex !important;
        align-items: center !important;
        padding: 0 20px !important;
        min-height: 56px !important;
        border-bottom: 1px solid #f2f2f2 !important;
        cursor: pointer !important;
    }

    .fp-pref-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .fp-pref-title {
        font-size: 15px;
        font-weight: 500;
        color: #1a1a1a;
    }

    .fp-search-preferences-mobile-content {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        padding: 20px !important;
    }

    .fp-search-preferences-mobile-content .fp-bubble-wrapper {
        margin: 0 !important;
    }

    /* ------------------------------------------------------------------
       5.11 Filter Term Items (checkbox rows in detail panel)
       ------------------------------------------------------------------ */
    .fp-vinted-filters-inner ul.wpc-filters-ul-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item,
    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item .wpc-term-item-content-wrapper,
    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item a,
    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item label,
    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item .wpc-filter-label-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-height: 48px !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item {
        padding: 12px 20px !important;
        border-bottom: 1px solid #f4f4f4 !important;
        min-height: 52px !important;
        cursor: pointer !important;
        position: relative !important;
        transition: background 0.12s ease !important;
    }

    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item:last-child {
        border-bottom: none !important;
    }

    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item:active {
        background: #f6f6f6 !important;
    }

    /* Round checkbox on mobile left side */
    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item input[type="checkbox"],
    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item input[type="radio"] {
        display: flex !important;
        visibility: visible !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        border: 2px solid #e0e0e0 !important;
        border-radius: 50% !important;
        margin: 0 14px 0 0 !important;
        position: relative !important;
        cursor: pointer !important;
        background: #fff !important;
        flex-shrink: 0 !important;
        order: -1 !important; /* Force first element on left */
        transition: all 0.15s ease !important;
    }

    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item input[type="checkbox"]:checked,
    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item input[type="radio"]:checked,
    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item.fp-item-checked input[type="checkbox"],
    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item.fp-item-checked input[type="radio"],
    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item.wpc-term-selected input[type="checkbox"],
    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item.wpc-term-selected input[type="radio"] {
        background-color: var(--fp-primary-color, #38b849) !important;
        border-color: var(--fp-primary-color, #38b849) !important;
    }

    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item input[type="checkbox"]:checked::after,
    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item input[type="radio"]:checked::after,
    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item.fp-item-checked input::after,
    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item.wpc-term-selected input::after {
        content: '' !important;
        position: absolute !important;
        left: 6px !important;
        top: 2px !important;
        width: 6px !important;
        height: 11px !important;
        border: solid white !important;
        border-width: 0 2px 2px 0 !important;
        transform: rotate(45deg) !important;
    }

    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item .wpc-term-name {
        order: 2 !important;
        flex: 1 !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        color: #1a1a1a !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        text-align: left !important;
    }

    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item .wpc-term-count {
        order: 3 !important;
        font-size: 13px !important;
        color: #9ca3af !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin-left: auto !important; /* Push count to the far right */
        font-weight: 400 !important;
    }

    /* Selected row — green text */
    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item.fp-item-checked .wpc-term-name,
    #fp-vinted-filters-inner .fp-mobile-detail-panel li.wpc-term-item.wpc-term-selected .wpc-term-name {
        color: var(--fp-primary-color, #38b849) !important;
        font-weight: 600 !important;
    }

    /* Purge all plugin box styles */
    .fp-vinted-filters-inner .wpc-term-name,
    .fp-vinted-filters-inner label,
    .fp-vinted-filters-inner a,
    .fp-vinted-filters-inner li.wpc-term-item,
    .fp-vinted-filters-inner .wpc-term-count {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .fp-vinted-filters-inner li.wpc-term-item:hover,
    .fp-vinted-filters-inner li.wpc-term-item.wpc-term-selected,
    .fp-vinted-filters-inner li.wpc-term-item.fp-item-checked,
    .fp-vinted-filters-inner li.wpc-term-item:hover *,
    .fp-vinted-filters-inner li.wpc-term-item.wpc-term-selected *,
    .fp-vinted-filters-inner li.wpc-term-item.fp-item-checked * {
        background: transparent !important;
        background-color: transparent !important;
    }

    /* ------------------------------------------------------------------
       5.12 Search field (inside detail panel)
       ------------------------------------------------------------------ */
    #fp-vinted-filters-inner .wpc-filter-search-wrapper,
    #fp-vinted-filters-inner .wpc-filter-search-form,
    .fp-mobile-detail-panel .wpc-filter-search-wrapper,
    .fp-mobile-detail-panel .wpc-filter-search-form {
        margin: 12px 16px !important;
        padding: 4px 14px !important;
        border: 1.5px solid #ebebeb !important;
        border-radius: 12px !important;
        background: #f6f6f6 !important;
        display: flex !important;
        align-items: center !important;
        width: calc(100% - 32px) !important;
        box-sizing: border-box !important;
        transition: border-color 0.2s ease, background 0.2s ease !important;
    }

    #fp-vinted-filters-inner .wpc-filter-search-wrapper:focus-within,
    .fp-mobile-detail-panel .wpc-filter-search-wrapper:focus-within {
        border-color: var(--fp-primary-color, #38b849) !important;
        background: #fff !important;
    }

    #fp-vinted-filters-inner .wpc-filter-search-wrapper::before,
    .fp-mobile-detail-panel .wpc-filter-search-wrapper::before {
        content: '🔍';
        font-size: 13px;
        opacity: 0.35;
        margin-right: 8px;
        flex-shrink: 0;
    }

    #fp-vinted-filters-inner .wpc-filter-search-field,
    .fp-mobile-detail-panel .wpc-filter-search-field {
        background: transparent !important;
        border: none !important;
        font-size: 15px !important;
        padding: 10px 4px !important;
        width: 100% !important;
        color: #333 !important;
        outline: none !important;
    }

    #fp-vinted-filters-inner .wpc-search-icon {
        display: none !important;
    }

    /* ------------------------------------------------------------------
       5.13 Overlay
       ------------------------------------------------------------------ */
    .fp-filter-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.45);
        z-index: 2147483640;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.32s ease, visibility 0s linear 0.32s;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    body.fp-filter-open .fp-filter-overlay {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.32s ease, visibility 0s;
    }

    /* ------------------------------------------------------------------
       5.14 Footer — OK Button with result count
       ------------------------------------------------------------------ */
    .fp-mobile-global-ok {
        grid-area: footer !important;
        background: #fff !important;
        padding: 12px 16px max(16px, env(safe-area-inset-bottom, 16px)) !important;
        border-top: 1px solid #f0f0f0 !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05) !important;
        flex-shrink: 0 !important;
        margin-top: 0 !important;
        position: static !important;
    }

    .fp-mobile-ok-btn {
        display: block !important;
        width: 100% !important;
        background: var(--fp-primary-color, #38b849) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 14px !important;
        padding: 16px !important;
        font-weight: 700 !important;
        font-size: 16px !important;
        text-align: center !important;
        cursor: pointer !important;
        letter-spacing: -0.01em !important;
        box-shadow: 0 4px 16px rgba(56, 184, 73, 0.3) !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    }

    .fp-mobile-ok-btn:active {
        transform: scale(0.98) !important;
        box-shadow: 0 2px 8px rgba(56, 184, 73, 0.2) !important;
    }

    @keyframes fpBtnPulse {
        0% { opacity: 0.55; }
        50% { opacity: 0.95; }
        100% { opacity: 0.55; }
    }

    body:not(.fp-drilldown-active) .fp-mobile-ok-btn.fp-btn-loading {
        animation: fpBtnPulse 1.2s infinite ease-in-out !important;
        pointer-events: none !important;
        background-color: #5bc86d !important;
    }

    /* ------------------------------------------------------------------
       5.15 Active Filters (Chips) Handling
       ------------------------------------------------------------------ */
    /* Hide original chips from main view on mobile */
    .wpc-custom-selected-terms {
        display: none !important;
    }

    /* Cloned chip list inside the panel */
    #fp-mobile-active-chips ul.wpc-filter-chips-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    #fp-mobile-active-chips li.wpc-filter-chip {
        margin: 0 !important;
        display: inline-flex !important;
    }

    /* ------------------------------------------------------------------
       5.16 Active filter preview on main list
       ------------------------------------------------------------------ */
    .fp-active-preview {
        display: none;
        font-size: 12px !important;
        color: var(--fp-primary-color, #38b849) !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: calc(100% - 30px) !important;
        line-height: 1.3 !important;
        margin-top: 2px !important;
    }
    .fp-active-preview[style*="block"] {
        display: block !important;
    }

    /* ------------------------------------------------------------------
       5.17 Title button: flex row, title+arrow on one line, preview below
       ------------------------------------------------------------------ */
    #fp-vinted-filters-inner .wpc-filter-title-button,
    #fp-vinted-filters-inner .wpc-filter-title button,
    #fp-vinted-filters-inner .fp-pref-header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0 !important;
    }
    /* The preview text is a separate element, not a flex child of the title row */
    #fp-vinted-filters-inner .wpc-filter-title,
    #fp-vinted-filters-inner .fp-pref-header-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }
}