/* 
* used to handel all list on the frontend
*/
.cl_container {
    width: 100%;
    /* Keep position: relative - required for absolute positioning of the loading element to center it within this container */
    position: relative;
}
.cl_reset_buttons_and_list_and_pagination {
    /* DO NOT remove width:100% without min-width:0 — both are needed together.
       Parent .cl_filter_and_list has align-items:start, which does NOT stretch children in column layouts.
       — width:100% is required for column layouts (horizontal_top, horizontal_bottom, modal_*)
         so this element fills the parent width instead of shrinking to content size.
       — min-width:0 is required for row layouts (vertical_left, vertical_right)
         so this element can shrink below its content width to make room for the 300px filter sidebar.
         Without it, the element overflows and carousel arrows/content break. */
    width: 100%;
    min-width: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    /* Moved from .cl_filter_and_list — respects product box min-width
       by showing a scroll when there is no space, without clipping
       absolutely-positioned filter dropdowns in the sibling container. */
    overflow: auto;
}
/* Carousel mode: hide vertical scrollbar caused by cumulative gap overflow.
   Carousel handles its own horizontal scroll via .cl_list overflow-x. */
.cl_container.cl_carousel .cl_reset_buttons_and_list_and_pagination {
    overflow: hidden;
}
.list-filter-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px;
    /* flex-shrink: 0; Prevents the block from shrinking below 300px */
}
.list-filter-groups {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 15px;
    width: 100%;
}
ul.list-filter-group-items {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.list-filter-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.list-filter-header {
    display: flex;
    flex-direction: row !important;
    justify-content: space-between;
    width: 100%;
}
.list-input-label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.list-input-label [type=checkbox], .list-input-label [type=radio] {
    height: 1rem;
    width: 1rem;
}

.open-filtre-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px
}

/*----group icons close and open-------
.list-filter-group .cl_toggle_header:after, 
.list-filter-group .cl_toggle_header[is_open="yes"] .cl_filter_open,
.list-filter-group .cl_toggle_header[is_open="no"] .cl_filter_close {
    display: none;
}

/*---------*/

.cl_filter_modal_bt_and_pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}
.close-filtre-modal {
    cursor: pointer;
    display: flex;
    align-items: center;
}
.cl_filter_all_buttons {
    display: flex; 
    align-items: center; 
    gap: 10px;
}
.list-filter-actions {
    display: flex;
    gap: 10px;
    padding-top: 10px;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: row !important;
}
/* Let action buttons share space equally and shrink in narrow containers (e.g. sidebar) */
.list-filter-actions button {
    flex: 1 1 0;
    max-width: 145px;
}
/* Sticky bottom bar only inside modal — non-modal layouts inherit the container background via Style Manager */
.filtre-modal .list-filter-actions {
    position: sticky;
    bottom: 0;
    background-color: #ffffff;
    padding-bottom: 10px;
    z-index: 2;
}
.cl_filter_reset_buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
}
/*.cl_filter_reset_buttons:not(:empty) {
    margin-bottom: 10px;
}*/
.cl_filter_and_list {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
    flex-grow: 1;
    /* NOTE: overflow was moved to .cl_reset_buttons_and_list_and_pagination
       so that absolutely-positioned filter dropdowns are not clipped. */
}
.cl_list:has(.list-filter-no-results) {
  grid-template-columns: 1fr !important;
}
.list-filter-no-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
}
.list-loading {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: #fff;
    padding: 15px;
    color: #000;
    border-radius: 8px;
    box-shadow: 0 4px 12px #0b0b0b;
}
.list-loading-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #2c5aa0;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* ====================================================
 * Filter — Buttons display type
 * Hidden checkbox with button-style label.
 * Instance-specific styles (colors, borders) come from generated_css.php.
 * ==================================================== */
.list-filter-display-buttons input[type="checkbox"] {
    display: none;
}
.list-filter-display-buttons li label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    transition: all 0.15s ease;
}
.list-filter-display-buttons li .list-filter-btn-close {
    display: none;
    font-size: 0.85em;
    line-height: 1;
    opacity: 0.7;
}
.list-filter-display-buttons li.is-selected .list-filter-btn-close {
    display: inline;
}
.list-filter-color-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}

/* ====================================================
 * Filter — Switch display type
 * Hidden checkbox with toggle switch track/knob.
 * ==================================================== */
.list-filter-display-switch input[type="checkbox"] {
    display: none;
}
.list-filter-display-switch li label {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    user-select: none;
}
.list-filter-display-switch .list-filter-switch-track {
    position: relative;
    width: 36px;
    min-width: 36px;
    height: 20px;
    background-color: #d1d5db;
    border-radius: 10px;
    transition: background-color 0.2s ease;
}
.list-filter-display-switch .list-filter-switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}
.list-filter-display-switch li.is-selected .list-filter-switch-track {
    background-color: #3b5bdb;
}
.list-filter-display-switch li.is-selected .list-filter-switch-track::after {
    transform: translateX(16px);
}

/* ====================================================
 * Filter — Show More / Show Less button
 * ==================================================== */
.list-filter-show-more-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    user-select: none;
    transition: opacity 0.15s ease;
    background: none;
    border: none;
    padding: 4px 0;
    font-size: 0.85em;
}
.list-filter-show-more-btn:hover {
    opacity: 0.8;
}

/* end list css  */

@media (max-width: 767px) {
    .cl_filter_and_list {
        gap: 10px;
        flex-wrap: wrap;
    }
    .cl_filter_all_buttons {
        justify-content: center;
        flex-direction: column;
        width: 100%;
    }
    .cl_filter_and_list .list-filter-group {
        width: 100% !important;
    }

    button.open-filtre-modal {
        width: 100%;
    }
}

/* ====================================================
 * Carousel — shared structural layout for any listing
 * The .cl_carousel class is added dynamically when pagination_type=carousel.
 * Specificity: 0-3-0 — intentionally beats .plist1 .cl_list (0-2-0)
 *   from instance generated_css, ensuring flex overrides grid.
 * Config-dependent values (flex-basis, gap, button colours)
 *   remain in the per-instance inline <style> in views/index.php.
 * ==================================================== */

.cl_container.cl_carousel .cl_list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.cl_container.cl_carousel .cl_list::-webkit-scrollbar {
    display: none;
}

.cl_container.cl_carousel .cl_list .cl_item,
.cl_container.cl_carousel .cl_list .cl_product {
    scroll-snap-align: start;
    min-width: 0;
}

/* Carousel nav always stretches full width regardless of pagination_position
   (align-items on .list-pagination-wrapper would otherwise shrink it) */
.cl_container.cl_carousel .cl_carousel_nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 0;
    align-self: stretch;
}

.cl_container.cl_carousel .cl_carousel_arrows {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cl_container.cl_carousel .cl_carousel_arrow {
    min-width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.cl_container.cl_carousel .cl_carousel_arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

/* --- Nav layout: arrows_sides (default) — ‹ indicator › --- */
.cl_container.cl_carousel .cl_carousel_nav_arrows_sides .cl_carousel_arrows {
    display: contents;
}
.cl_container.cl_carousel .cl_carousel_nav_arrows_sides .cl_carousel_prev {
    order: 1;
}
.cl_container.cl_carousel .cl_carousel_nav_arrows_sides .cl_carousel_indicator {
    order: 2;
}
.cl_container.cl_carousel .cl_carousel_nav_arrows_sides .cl_carousel_next {
    order: 3;
}

/* --- Nav layout: arrows_end — indicator ‹ › --- */
.cl_container.cl_carousel .cl_carousel_nav_arrows_end {
    justify-content: space-between;
    align-self: stretch;
}
.cl_container.cl_carousel .cl_carousel_nav_arrows_end .cl_carousel_indicator {
    order: 1;
    flex-grow: 1;
}
.cl_container.cl_carousel .cl_carousel_nav_arrows_end .cl_carousel_arrows {
    order: 2;
}

/* --- Nav layout: arrows_start — ‹ › indicator --- */
.cl_container.cl_carousel .cl_carousel_nav_arrows_start {
    justify-content: space-between;
    align-self: stretch;
}
.cl_container.cl_carousel .cl_carousel_nav_arrows_start .cl_carousel_arrows {
    order: 1;
}
.cl_container.cl_carousel .cl_carousel_nav_arrows_start .cl_carousel_indicator {
    order: 2;
    flex-grow: 1;
}

/* --- Nav layout: arrows_overlay — arrows float over carousel edges --- */
.cl_container.cl_carousel .cl_carousel_nav_arrows_overlay {
    position: static;
    justify-content: center;
}
/* position:relative on .cl_list_and_pagination so overlay arrows anchor to
   the carousel+pagination area, not .cl_container (which includes filters). */
.cl_container.cl_carousel:has(.cl_carousel_nav_arrows_overlay) .cl_list_and_pagination {
    position: relative;
}
.cl_container.cl_carousel .cl_carousel_nav_arrows_overlay .cl_carousel_arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 2;
}
.cl_container.cl_carousel .cl_carousel_nav_arrows_overlay .cl_carousel_arrow {
    pointer-events: auto;
}
.cl_container.cl_carousel .cl_carousel_nav_arrows_overlay .cl_carousel_indicator {
    order: 1;
}

/* --- Indicator container (shared) --- */
.cl_container.cl_carousel .cl_carousel_indicator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
/* When indicator is the only child (arrows disabled), take full width
   so progress bar / scrollbar fills the carousel width */
.cl_container.cl_carousel .cl_carousel_indicator:only-child {
    width: 100%;
    justify-content: center;
}

/* --- Dots indicator --- */
.cl_container.cl_carousel .cl_carousel_dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ddd;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}
.cl_container.cl_carousel .cl_carousel_dot.active {
    background-color: #333;
    transform: scale(1.3);
}

/* --- Dash indicator --- */
.cl_container.cl_carousel .cl_carousel_dash {
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background-color: #ddd;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}
.cl_container.cl_carousel .cl_carousel_dash.active {
    background-color: #333;
    width: 36px;
}

/* --- Fraction indicator --- */
.cl_container.cl_carousel .cl_carousel_fraction {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    user-select: none;
}
.cl_container.cl_carousel .cl_carousel_fraction_separator {
    opacity: 0.5;
    margin: 0 1px;
}

/* --- Progress bar indicator --- */
.cl_container.cl_carousel .cl_carousel_progress_track {
    width: 100%;
    min-width: 80px;
    height: 3px;
    background-color: #ddd;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.cl_container.cl_carousel .cl_carousel_progress_fill {
    height: 100%;
    background-color: #333;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* --- Numbers indicator --- */
.cl_container.cl_carousel .cl_carousel_number {
    min-width: 28px;
    height: 28px;
    border-radius: 4px;
    background-color: transparent;
    border: 1px solid #ddd;
    padding: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.cl_container.cl_carousel .cl_carousel_number.active {
    background-color: #333;
    border-color: #333;
    color: #fff;
}

/* --- Scrollbar indicator --- */
.cl_container.cl_carousel .cl_carousel_scrollbar_track {
    width: 100%;
    min-width: 80px;
    height: 4px;
    background-color: #ddd;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}
.cl_container.cl_carousel .cl_carousel_scrollbar_thumb {
    height: 100%;
    background-color: #333;
    border-radius: 2px;
    position: absolute;
    top: 0;
    transition: left 0.2s ease;
    cursor: grab;
}
.cl_container.cl_carousel .cl_carousel_scrollbar_thumb:active {
    cursor: grabbing;
}

/* --- No-select helper for scrollbar drag --- */
.cl-no-select {
    user-select: none;
    -webkit-user-select: none;
}