/* ----------------------------------------------------
   1) MOBILE FILTER LAYOUT (PLP + SRP: all _Filters.*)
---------------------------------------------------- */
@media (max-width: 767.98px) {

    .ae-filters {
        border-radius: 18px;
        padding: 1.1rem 1rem;
        box-shadow: 0 10px 25px rgba(15, 23, 42, .06);
        margin-bottom: 1rem;
    }

        .ae-filters .d-flex.align-items-center.gap-2 span.fw-semibold {
            font-size: 1.05rem;
        }

        /* Stack fields into 1 column */
        .ae-filters .row.g-3 > [class^="col-"],
        .ae-filters .row.g-3 > [class*=" col-"] {
            flex: 0 0 100%;
            max-width: 100%;
        }

        .ae-filters .form-control,
        .ae-filters .form-select,
        .ae-filters .input-group-text {
            min-height: 44px;
            font-size: .95rem;
        }

        .ae-filters hr.my-3 {
            margin-top: 1rem;
            margin-bottom: .75rem;
        }

        /* Advanced filters padding */
        .ae-filters #moreFilters.show {
            border-top: 1px solid #e5e7eb;
            padding-top: .75rem;
            margin-top: .25rem;
        }

        /* Action buttons stacked */
        .ae-filters .d-flex.justify-content-center.gap-2.mt-3 {
            flex-direction: column;
            align-items: stretch;
            gap: .5rem;
        }

            .ae-filters .d-flex.justify-content-center.gap-2.mt-3 .btn {
                width: 100%;
            }


}


/* ----------------------------------------------------
   2) DESKTOP: force filter sheet to behave like a normal block
---------------------------------------------------- */
@media (min-width: 768px) {

    .collapse-filters-mobile {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }

    .offcanvas-filters {
        position: static;
        transform: none !important;
        visibility: visible !important;
        height: auto !important;
        max-height: none;
        /* 🔽 make wrapper invisible on desktop */
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
    }
        .offcanvas-filters .offcanvas-header {
            display: none;
        }

        .offcanvas-filters .offcanvas-body {
            padding: 0;
        }
}


/* ----------------------------------------------------
   3) FILTER SHEET (offcanvas) — MOBILE full screen
---------------------------------------------------- */
.offcanvas-filters {
    max-height: 80vh;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

@media (max-width: 767.98px) {

    .offcanvas-filters {
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto;
        padding-bottom: 3rem;
        box-shadow: 0 -12px 30px rgba(15, 23, 42, .25);
    }

        .offcanvas-filters .offcanvas-header {
            padding: 1rem 1.25rem;
            background: #fff;
            border-bottom: 1px solid #e5e7eb;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        }

        .offcanvas-filters .offcanvas-body {
            padding: 0.75rem 1rem 2rem 1rem;
            overflow-y: auto;
            max-height: calc(100vh - 60px);
        }
}


/* ----------------------------------------------------
   4) SEARCH FILTER TABS (SRP) — Carousel with arrows
---------------------------------------------------- */
.search-tabs-wrapper {
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* SCROLLABLE area */
.search-tabs-scroller {
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Tabs list */
#searchTabs {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 0;
}

/* Hide scrollbar on mobile */
@media (max-width: 767.98px) {

    .search-tabs-scroller {
        scrollbar-width: none;
    }

        .search-tabs-scroller::-webkit-scrollbar {
            display: none;
        }

    #searchTabs .nav-link {
        padding: 0.65rem 1rem !important;
        font-size: 1rem !important;
        border-radius: 999px !important;
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        white-space: nowrap;
    }
}

/* DESKTOP: normal tabs */
@media (min-width: 768px) {
    .search-tabs-wrapper {
        gap: 0;
    }

    .search-tabs-scroller {
        overflow: visible;
        display: flex;
        justify-content: center;
    }

    #searchTabs {
        flex-wrap: wrap;
        gap: .25rem;
    }

    .tabs-arrow {
        display: none !important;
    }
}


/* ----------------------------------------------------
   5) ARROW BUTTONS (mobile only)
---------------------------------------------------- */
/* Bigger, more visible carousel arrows */
.tabs-arrow {
    border: 1px solid #dbeafe;
    background: #eff6ff;
    border-radius: 999px;
    width: 40px;
    height: 40px;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

    .tabs-arrow i {
        font-size: 1.4rem;
        color: #1d4ed8;
    }



/* Blue chips for input labels (de la / până la / min / max) */
.ae-filters .input-group-text {
    background: #eff6ff;
    border-color: #dbeafe;
    color: #1d4ed8;
    font-weight: 500;
    min-width: 60px;
    justify-content: center;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    /* Clean, modern pill button for "Mai multe filtre" */
    .ae-filters button[data-bs-target="#moreFilters"] {
        width: 100%;
        border-radius: 999px !important;
        border: 1px solid #d4d7dd !important;
        background: #fafafa !important;
        color: #374151 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: .5rem;
        padding: .85rem 1rem !important;
        font-size: .95rem !important;
        font-weight: 500 !important;
        box-shadow: 0 3px 8px rgba(0,0,0,0.04) !important;
        transition: all .15s ease-in-out;
    }

        .ae-filters button[data-bs-target="#moreFilters"] i {
            font-size: 1.2rem !important;
            color: #1d4ed8 !important; /* blue icon */
        }

        .ae-filters button[data-bs-target="#moreFilters"]:hover {
            background: #f0f0f5 !important;
            border-color: #cdd0d6 !important;
            box-shadow: 0 4px 10px rgba(0,0,0,0.06) !important;
        }

    .offcanvas-filters .offcanvas-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem !important;
        background: linear-gradient(90deg, #10264a, #18427d) !important;
        color: #ffffff !important;
        border-bottom: none !important;
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
    }

    /* Restore title */
    .offcanvas-filters .offcanvas-header .offcanvas-title {
        display: block !important;
        color: #ffffff !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
    }

    /* Restore close button */
    .offcanvas-filters .offcanvas-header .btn-close {
        display: block !important;
        filter: invert(1) brightness(110%) !important; /* make it white */
        opacity: .95 !important;
        width: 20px !important;
        height: 20px !important;
    }
}