/**
 * Category Page - Mobile Sticky Filter Bar
 * Mobile only (max-width: 549px based on Flatsome breakpoints)
 */

/* Hide on desktop/tablet - show only on mobile */
.category-sticky-bar {
    display: none;
}

/* Category description text (WooCommerce built-in) - visible on all screens */
.term-description {
    text-align: center;
    font-size: 15px;
    color: #555;
}

@media (max-width: 549px) {
    /* Hide ALL original filter/sort elements on mobile */
    .page-title .category-filtering,
    .page-title .woocommerce-ordering,
    .archive-page-header .woocommerce-ordering,
    .shop-page-title .woocommerce-ordering,
    .category-page-row .filter-button,
    .category-page-row .woocommerce-ordering,
    .shop-container .filter-button,
    .shop-container .woocommerce-ordering,
    .woocommerce-notices-wrapper + .filter-button,
    .woocommerce-notices-wrapper + .woocommerce-ordering,
    /* Flatsome's default mobile filter row */
    .shop-container > .row > .col > .filter-button,
    .products-header .filter-button,
    .products-header .woocommerce-ordering {
        display: none !important;
    }

    /* Mobile adjustments for description text */
    .term-description {
        font-size: 14px;
    }

    /* Sticky filter bar container */
    .category-sticky-bar {
        display: flex;
        position: sticky;
        top: 100px;
        z-index: 99;
        background: #fff;
        padding: 12px 20px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin: 0 -15px 15px;
    }

    /* Shared button styles - compact rounded pills */
    .category-sticky-bar .sticky-filter-btn,
    .category-sticky-bar .sticky-sort-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 25px;
        padding: 8px 20px;
        font-size: 14px;
        font-weight: 500;
        color: #333;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06);
        cursor: pointer;
        transition: all 0.2s ease;
        text-decoration: none;
        white-space: nowrap;
        /* Flexible - spread/shrink based on available space */
        flex: 1 1 auto;
        min-width: 100px;
        max-width: 180px;
        line-height: 1;
        box-sizing: border-box;
    }

    .category-sticky-bar .sticky-filter-btn:hover,
    .category-sticky-bar .sticky-filter-btn:active {
        background: #fafafa;
        text-decoration: none;
        color: #333;
    }

    /* Filter button icon */
    .category-sticky-bar .sticky-filter-btn .icon-equalizer {
        font-size: 16px;
        color: #666;
    }

    /* Filter count bubble */
    .filter-count-bubble {
        background: var(--aliza-pink, #e91e63);
        color: white;
        border-radius: 50%;
        min-width: 18px;
        height: 18px;
        font-size: 10px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Sort dropdown wrapper */
    .category-sticky-bar .sticky-sort-wrapper {
        position: relative;
        padding: 0;
        overflow: hidden;
    }

    .category-sticky-bar .sticky-sort-dropdown {
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        border: none;
        padding: 8px 20px;
        padding-left: 32px; /* Space for chevron on left (RTL) */
        font-size: 14px;
        font-weight: 500;
        color: #333;
        cursor: pointer;
        width: 100%;
        text-align: center;
        direction: rtl;
        /* Reset default form element styles */
        margin: 0;
        margin-bottom: 0 !important;
        line-height: 1;
        box-sizing: border-box;
    }

    .category-sticky-bar .sticky-sort-dropdown:focus {
        outline: none;
    }

    /* Sort label overlay - shows "סדר לפי" but dropdown still works */
    .category-sticky-bar .sort-label {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        pointer-events: none;
        font-size: 14px;
        font-weight: 500;
        color: #333;
    }

    /* Hide default select text, show label instead */
    .category-sticky-bar .sticky-sort-dropdown {
        color: transparent;
    }

    /* Chevron for sort dropdown */
    .category-sticky-bar .sticky-sort-wrapper::before {
        content: '';
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid #666;
        pointer-events: none;
    }
}

/* ==========================================================================
   Category & Shop Header Styling
   ========================================================================== */

/* Add space under the category/shop header */
.category-page-title,
.woocommerce-shop .page-title {
    margin-bottom: 20px;
}

/* Position breadcrumbs at top of header using absolute positioning */
.category-page-title .page-title-inner,
.woocommerce-shop .page-title .page-title-inner {
    position: relative;
}

/* Breadcrumbs - position at top of header */
.category-page-title .flex-col.flex-center > [class^="is-"],
.woocommerce-shop .page-title .flex-col.flex-center > [class^="is-"] {
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
}

/* Breadcrumbs styling */
.category-page-title .breadcrumbs,
.category-page-title .breadcrumbs a,
.category-page-title .breadcrumbs span,
.woocommerce-shop .page-title .breadcrumbs,
.woocommerce-shop .page-title .breadcrumbs a,
.woocommerce-shop .page-title .breadcrumbs span {
    font-size: 14px !important;
    opacity: 0.9;
}

/* Hide the filter row in header on mobile (we have sticky bar) */
.category-page-title .category-filtering.show-for-medium,
.woocommerce-shop .page-title .category-filtering.show-for-medium {
    display: none !important;
}

/* ==========================================================================
   DESKTOP CATEGORY & SHOP PAGE FIXES (min-width: 850px)
   ========================================================================== */

/* Desktop sort bar - hidden on mobile */
.desktop-sort-bar {
    display: none;
}

@media screen and (min-width: 850px) {
    /* Increase banner height for better visuals */
    .category-page-title,
    .woocommerce-shop .page-title {
        min-height: 300px;
    }

    /* Better image quality - use cover and center */
    .category-page-title .title-bg,
    .woocommerce-shop .page-title .title-bg {
        background-size: cover !important;
        background-position: center center !important;
    }

    /* Make the banner title section centered both horizontally AND vertically */
    .category-page-title .page-title-inner,
    .woocommerce-shop .page-title .page-title-inner {
        justify-content: center !important;
        align-items: center !important;
        min-height: 300px;
    }

    /* Hide the empty left spacer (first child with just  ) */
    .category-page-title .page-title-inner > .flex-col:first-child:not(.flex-center),
    .woocommerce-shop .page-title .page-title-inner > .flex-col:first-child:not(.flex-center) {
        display: none !important;
    }

    /* Hide the right column with result count and ordering (we show it below instead) */
    .category-page-title .page-title-inner > .flex-col.flex-right,
    .woocommerce-shop .page-title .page-title-inner > .flex-col.flex-right {
        display: none !important;
    }

    /* Center column - ensure it's centered */
    .category-page-title .page-title-inner > .flex-col.flex-center,
    .woocommerce-shop .page-title .page-title-inner > .flex-col.flex-center {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Title styling */
    .category-page-title .shop-page-title,
    .woocommerce-shop .page-title .shop-page-title {
        font-size: 2.4em;
        text-shadow: 0 2px 4px rgba(0,0,0,0.25);
    }

    /* Position breadcrumbs at top of banner on desktop (same as mobile) */
    .category-page-title .flex-col.flex-center > .is-large,
    .woocommerce-shop .page-title .flex-col.flex-center > .is-large {
        position: absolute !important;
        top: 20px !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Hide the filter button from banner (sidebar filter is visible on desktop) */
    .category-page-title .category-filtering,
    .woocommerce-shop .page-title .category-filtering {
        display: none !important;
    }

    /* Desktop Sort Bar - show above products */
    .desktop-sort-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
        margin-bottom: 20px;
        border-bottom: 1px solid #eee;
    }

    .desktop-sort-bar .woocommerce-result-count {
        margin: 0;
        font-size: 14px;
        color: #666;
    }

    .desktop-sort-bar .woocommerce-ordering {
        margin: 0;
    }

    .desktop-sort-bar .woocommerce-ordering select {
        min-width: 200px;
        padding: 8px 15px;
        padding-left: 35px; /* Space for chevron */
        border: 1px solid #ddd;
        border-radius: 25px;
        font-size: 14px;
        background: #fff;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    /* Chevron for desktop sort dropdown */
    .desktop-sort-bar .woocommerce-ordering {
        position: relative;
    }

    .desktop-sort-bar .woocommerce-ordering::after {
        content: '';
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid #666;
        pointer-events: none;
    }

    /* Category description text - larger on desktop, aligned right */
    .term-description {
        font-size: 17px;
        line-height: 1.7;
        max-width: none;
        margin: 0;
        text-align: right;
    }

    /* ==========================================================================
       Stage Icons Widget - Centered with light background container
       ========================================================================== */

    .stage-icons-wrapper,
    .animate-icons-wrapper.stage-icons-wrapper {
        background: #f7f7f7;
        border-radius: 16px;
        padding: 25px 40px 30px;
        margin: 0 0 30px;
        box-sizing: border-box;
    }

    /* Title inside container - adjust spacing */
    .stage-icons-wrapper .stage-icons-title {
        margin-bottom: 0.8em;
    }

    /* ==========================================================================
       Desktop Sticky Sidebar Filter - Position & Background
       Header total height is ~175px (top bar 30 + main 70 + nav 55 + padding)
       ========================================================================== */

    /* Fix sticky sidebar position - account for full header height */
    .is-sticky-column {
        top: 180px !important;
    }

}