/*
 * Altawazun Shop Filter — Stylesheet
 * v1.0.0
 *
 * Uses Ignavo theme CSS custom properties where available with safe fallbacks.
 * BEM-style class naming: asf-[block]__[element]--[modifier]
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Local custom properties ─────────────────────────────────────────────── */
:root {
    /* Brand colours — mirrors Ignavo theme tokens */
    --asf-primary:        rgb(var(--colors-primary-background, 0, 103, 178));
    --asf-primary-hover:  rgb(0, 82, 148);
    --asf-secondary:      rgb(var(--colors-secondary-background, 223, 0, 36));

    /* Neutrals */
    --asf-text:           #0f172a;
    --asf-text-muted:     #64748b;
    --asf-text-light:     #94a3b8;
    --asf-bg:             #ffffff;
    --asf-bg-hover:       #f8fafc;
    --asf-border:         #e2e8f0;
    --asf-border-focus:   var(--asf-primary);

    /* Typography */
    --asf-font:           var(--theme-body-font, Inter, sans-serif);
    --asf-text-xs:        var(--text-xs, 12px);
    --asf-text-sm:        var(--text-sm, 14px);
    --asf-text-base:      var(--text-base, 16px);

    /* Geometry */
    --asf-radius:         var(--theme-radius, 8px);
    --asf-radius-sm:      calc(var(--theme-radius, 8px) - 2px);
    --asf-radius-full:    9999px;

    /* Shadows */
    --asf-shadow-sm:      var(--shadow-sm, 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1));
    --asf-shadow-lg:      var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1));

    /* Transitions */
    --asf-ease:           var(--theme-ease-primary, cubic-bezier(0.7,0,0.3,1));
    --asf-ease-out:       var(--theme-ease-out, cubic-bezier(0,0,.2,1));
    --asf-dur-fast:       var(--theme-ease-time-fast, 0.15s);
    --asf-dur-med:        var(--theme-ease-time-medium, 0.3s);

    /* Controls */
    --asf-ctrl-size:      16px;     /* checkbox / radio hit area */
    --asf-section-gap:    20px;
}

/* ── Panel wrapper ────────────────────────────────────────────────────────── */
.asf-panel {
    font-family:  var(--asf-font);
    font-size:    var(--asf-text-sm);
    color:        var(--asf-text);
    background:   var(--asf-bg);
    border:       1px solid var(--asf-border);
    border-radius:var(--asf-radius);
    position:     relative;
}

/* ── Panel header ─────────────────────────────────────────────────────────── */
.asf-panel__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 16px;
    border-bottom:   1px solid var(--asf-border);
    background:      var(--asf-bg);
}

.asf-panel__title {
    font-size:    var(--text-sm, 14px);
    font-weight:  700;
    letter-spacing: -0.02em;
    color:        var(--asf-text);
    text-transform: uppercase;
}

.asf-panel__close {
    display:        none;  /* shown on mobile via JS */
    align-items:    center;
    justify-content:center;
    width:          32px;
    height:         32px;
    background:     transparent;
    border:         none;
    border-radius:  var(--asf-radius-sm);
    cursor:         pointer;
    color:          var(--asf-text-muted);
    padding:        0;
    transition:     background var(--asf-dur-fast) var(--asf-ease);
}
.asf-panel__close:hover {
    background: var(--asf-bg-hover);
    color:      var(--asf-text);
}

/* ── Active filters bar ───────────────────────────────────────────────────── */
/* Standalone: JS moves this element to sit above the product grid.
   Column layout: Row 1 = chips + Clear All; Row 2 = text filter (if enabled). */
.asf-active-bar {
    display:        none;
    flex-direction: column;
    gap:            8px;
    padding:        10px 14px;
    background:     #fafbfc;
    border:         1px solid var(--asf-border);
    border-radius:  var(--asf-radius);
    margin-bottom:  16px;
}
.asf-active-bar--visible {
    display: flex;
}

/* Row 1 — chips + clear all */
.asf-active-bar__controls {
    display:     flex;
    flex-wrap:   wrap;
    gap:         6px;
    align-items: center;
}

@media (max-width: 640px) {
    .asf-active-bar {
        margin-bottom: 12px;
        padding:       8px 12px;
    }
    .asf-clear-all {
        width:      100%;
        text-align: center;
    }
}

/* ── Text filter (Row 2 of active bar, compact) ──────────────────────────── */
.asf-text-search-wrap {
    display:       flex;
    align-items:   center;
    gap:           5px;
    padding:       0 8px;
    background:    var(--asf-bg);
    border:        1px solid var(--asf-border);
    border-radius: var(--asf-radius-sm);
    transition:    border-color var(--asf-dur-fast);
    max-width:     320px;   /* stays compact, doesn't stretch full width */
}
.asf-text-search-wrap:focus-within {
    border-color: var(--asf-primary);
}
.asf-text-search-icon {
    flex-shrink:    0;
    color:          var(--asf-text-light);
    pointer-events: none;
}
.asf-text-search {
    flex:        1;
    border:      none;
    outline:     none;
    background:  transparent;
    padding:     5px 0;
    font-size:   var(--asf-text-xs);   /* compact */
    font-family: var(--asf-font);
    color:       var(--asf-text);
    min-width:   0;
    width:       160px;
}
.asf-text-search::placeholder { color: var(--asf-text-light); }
.asf-text-search::-webkit-search-cancel-button { display: none; }

@media (max-width: 640px) {
    .asf-text-search-wrap { max-width: 100%; }
    .asf-text-search      { width: 100%; }
}

.asf-active-bar__chips {
    display:  flex;
    flex-wrap:wrap;
    gap:      6px;
    flex:     1;
}

.asf-chip {
    display:        inline-flex;
    align-items:    center;
    gap:            4px;
    padding:        3px 10px 3px 12px;
    background:     var(--asf-primary);
    color:          #fff;
    border:         none;
    border-radius:  var(--asf-radius-full);
    font-size:      var(--asf-text-xs);
    font-weight:    600;
    cursor:         pointer;
    line-height:    1.4;
    transition:     background var(--asf-dur-fast);
}
.asf-chip:hover {
    background: var(--asf-primary-hover);
}
.asf-chip__x {
    font-size:   15px;
    line-height: 1;
    opacity:     .8;
}

.asf-clear-all {
    flex-shrink:  0;
    padding:      4px 10px;
    font-size:    var(--asf-text-xs);
    font-weight:  600;
    color:        var(--asf-text-muted);
    background:   transparent;
    border:       1px solid var(--asf-border);
    border-radius:var(--asf-radius-sm);
    cursor:       pointer;
    white-space:  nowrap;
    transition:   color var(--asf-dur-fast), border-color var(--asf-dur-fast);
}
.asf-clear-all:hover {
    color:         var(--asf-secondary);
    border-color:  var(--asf-secondary);
}

/* ── Section ──────────────────────────────────────────────────────────────── */
.asf-section {
    border-bottom: 1px solid var(--asf-border);
}
.asf-section:last-child {
    border-bottom: none;
}
/* Small breathing gap between adjacent sections (visible when collapsed) */
.asf-section + .asf-section {
    margin-top: 6px;
}

.asf-section__toggle {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    padding:         14px 16px;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    color:           var(--asf-text);
    font-size:       var(--asf-text-sm);
    font-weight:     600;
    font-family:     var(--asf-font);
    letter-spacing:  -0.02em;
    text-align:      left;
    transition:      background var(--asf-dur-fast);
    -webkit-tap-highlight-color: transparent;
}
.asf-section__toggle:hover {
    background: var(--asf-bg-hover);
}
.asf-section__toggle[aria-expanded="false"] .asf-chevron {
    transform: rotate(-90deg);
}
.asf-chevron {
    flex-shrink: 0;
    color:       var(--asf-text-muted);
    transition:  transform var(--asf-dur-fast) var(--asf-ease);
}

.asf-section__body {
    padding: 4px 16px 16px;
    overflow: hidden;
}
.asf-section__body[hidden] {
    display: none;
}

/* ── Trees (checkboxes / radios / models) ────────────────────────────────── */
.asf-tree {
    list-style: none;
    margin:     0;
    padding:    0;
}
.asf-tree__item {
    margin: 0;
    padding: 0;
}

/* Children sub-tree — jQuery slideDown/slideUp handles the animation */
.asf-tree--children {
    margin-left:   22px;
    margin-top:    2px;
    border-left:   2px solid var(--asf-border);
    padding-left:  10px;
    display:       none;   /* JS controls visibility via slideDown/slideUp */
    overflow:      hidden;
}

/* Models sub-list */
.asf-tree--models {
    padding: 4px 0 2px;
}

/* ── Checkbox control ─────────────────────────────────────────────────────── */
.asf-checkbox-label {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     6px 0;
    cursor:      pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.asf-checkbox-label:hover .asf-checkbox__text {
    color: var(--asf-primary);
}

/* Hide native checkbox — visually hidden but keeps native behaviour.
   clip + overflow prevent browser scroll-into-view on focus. */
.asf-checkbox {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    clip-path:  inset(50%);
    white-space: nowrap;
    border:     0;
    opacity:    0;
}

/* Custom checkbox box */
.asf-checkbox__box {
    flex-shrink:   0;
    width:         var(--asf-ctrl-size);
    height:        var(--asf-ctrl-size);
    border:        2px solid var(--asf-border);
    border-radius: 4px;
    background:    var(--asf-bg);
    transition:    border-color var(--asf-dur-fast), background var(--asf-dur-fast);
    position:      relative;
}
.asf-checkbox__box::after {
    content:    '';
    position:   absolute;
    top:        2px;
    left:       4px;
    width:      5px;
    height:     9px;
    border:     2px solid transparent;
    border-top: none;
    border-left:none;
    transform:  rotate(45deg);
    transition: border-color var(--asf-dur-fast);
}

/* Checked state */
.asf-checkbox:checked + .asf-checkbox__box {
    border-color: var(--asf-primary);
    background:   var(--asf-primary);
}
.asf-checkbox:checked + .asf-checkbox__box::after {
    border-color: #fff;
}

/* Focus-visible ring */
.asf-checkbox:focus-visible + .asf-checkbox__box {
    outline:        2px solid var(--asf-primary);
    outline-offset: 2px;
}

.asf-checkbox__text {
    flex:          1;
    font-size:     var(--asf-text-sm);
    color:         var(--asf-text);
    transition:    color var(--asf-dur-fast);
    line-height:   1.4;
}

/* ── Radio control ────────────────────────────────────────────────────────── */
.asf-radio-label {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     5px 0;
    cursor:      pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.asf-radio-label:hover .asf-radio__text {
    color: var(--asf-primary);
}

.asf-radio {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    clip-path:  inset(50%);
    white-space: nowrap;
    border:     0;
    opacity:    0;
}

.asf-radio__dot {
    flex-shrink:   0;
    width:         var(--asf-ctrl-size);
    height:        var(--asf-ctrl-size);
    border:        2px solid var(--asf-border);
    border-radius: var(--asf-radius-full);
    background:    var(--asf-bg);
    position:      relative;
    transition:    border-color var(--asf-dur-fast);
}
.asf-radio__dot::after {
    content:    '';
    position:   absolute;
    inset:      3px;
    border-radius: var(--asf-radius-full);
    background: transparent;
    transition: background var(--asf-dur-fast);
}
.asf-radio:checked + .asf-radio__dot {
    border-color: var(--asf-primary);
}
.asf-radio:checked + .asf-radio__dot::after {
    background: var(--asf-primary);
}
.asf-radio:focus-visible + .asf-radio__dot {
    outline:        2px solid var(--asf-primary);
    outline-offset: 2px;
}

.asf-radio__text {
    flex:        1;
    font-size:   var(--asf-text-sm);
    color:       var(--asf-text);
    transition:  color var(--asf-dur-fast);
    line-height: 1.4;
}

/* ── Count badge ──────────────────────────────────────────────────────────── */
.asf-count {
    font-size:   var(--asf-text-xs);
    color:       var(--asf-text-light);
    margin-left: auto;
    white-space: nowrap;
}

/* ── Make grid ────────────────────────────────────────────────────────────── */
.asf-make-grid {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.asf-make {
    border-radius: var(--asf-radius-sm);
    overflow:      hidden;
    border:        1px solid transparent;
    transition:    border-color var(--asf-dur-fast);
}
.asf-make--active {
    border-color: var(--asf-primary);
    background:   rgba(0, 103, 178, 0.04);
}

.asf-make__btn {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    padding:         9px 12px;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    font-size:       var(--asf-text-sm);
    font-weight:     600;
    font-family:     var(--asf-font);
    letter-spacing:  -0.02em;
    color:           var(--asf-text);
    text-align:      left;
    border-radius:   var(--asf-radius-sm);
    transition:      background var(--asf-dur-fast), color var(--asf-dur-fast);
    -webkit-tap-highlight-color: transparent;
}
.asf-make__btn:hover {
    background: var(--asf-bg-hover);
}
.asf-make--active .asf-make__btn {
    color: var(--asf-primary);
    background: rgba(0, 103, 178, 0.06);
}

.asf-make__count {
    font-size:    var(--asf-text-xs);
    font-weight:  400;
    color:        var(--asf-text-light);
}
.asf-make--active .asf-make__count {
    color: var(--asf-primary);
    opacity: .7;
}

/* ── Model search ─────────────────────────────────────────────────────────── */
.asf-model-search {
    display:     flex;
    align-items: center;
    gap:         6px;
    margin:      8px 12px 4px 20px;
    padding:     0 10px;
    background:  var(--asf-bg-hover);
    border:      1px solid var(--asf-border);
    border-radius: var(--asf-radius-sm);
    transition:  border-color var(--asf-dur-fast);
}
.asf-model-search:focus-within {
    border-color: var(--asf-primary);
    background:   #fff;
}

.asf-model-search__icon {
    flex-shrink: 0;
    color:       var(--asf-text-light);
    pointer-events: none;
}

.asf-model-search__input {
    flex:          1;
    border:        none;
    background:    transparent;
    outline:       none;
    padding:       7px 0;
    font-size:     var(--asf-text-sm);
    font-family:   var(--asf-font);
    color:         var(--asf-text);
    letter-spacing: -0.02em;
    min-width:     0;
}
.asf-model-search__input::placeholder {
    color: var(--asf-text-light);
}
/* Hide browser's built-in clear (x) button on search inputs */
.asf-model-search__input::-webkit-search-cancel-button { display: none; }

/* Hidden model items during search */
.asf-tree__item--model.asf-hidden {
    display: none;
}

/* ── Model list (accordion) — jQuery slideDown/slideUp handles animation ──── */
.asf-model-list {
    display: none;   /* hidden until a make is selected */
    /* Note: overflow is NOT set here so the inner scroll is not clipped.
       jQuery adds overflow:hidden during animation only, then removes it. */
}
.asf-model-list--open {
    display: block;  /* set on page load for pre-selected makes; JS animates otherwise */
}
.asf-model-list > ul {
    padding: 0 12px 8px 20px;
}

/* ── Model list scroller ─────────────────────────────────────────────────── */
/* Applied to the inner <ul>, not the jQuery-animated wrapper, so the model
   search input above it stays visible while models scroll. */
.asf-tree--models {
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--asf-border) transparent;
    padding-right: 2px;
}
.asf-tree--models::-webkit-scrollbar {
    width: 4px;
}
.asf-tree--models::-webkit-scrollbar-track {
    background: transparent;
}
.asf-tree--models::-webkit-scrollbar-thumb {
    background-color: var(--asf-border);
    border-radius: 2px;
}

/* ── Make status line ────────────────────────────────────────────────────── */
/* Shown OUTSIDE the accordion so it remains visible when model list is
   collapsed. Displays "Showing all BMW parts" or "Showing E38, E46 parts". */
.asf-make-status {
    display:     none;
    margin:      2px 12px 4px 12px;
    padding:     4px 8px;
    font-size:   var(--asf-text-xs);
    font-style:  italic;
    color:       var(--asf-primary);
    background:  rgba(0, 103, 178, 0.06);
    border-radius: var(--asf-radius-sm);
    border-left: 2px solid var(--asf-primary);
    line-height: 1.4;
}
.asf-make-status--visible {
    display: block;
}

/* ── "All [Make]" checkbox row ───────────────────────────────────────────── */
/* First item inside the model list — selects all models for this make. */
.asf-model-all-row {
    padding:       2px 0 6px;
    border-bottom: 1px dashed var(--asf-border);
    margin-bottom: 4px;
}
.asf-model-all-row .asf-checkbox-label {
    font-weight: 600;
}
.asf-model-all-row .asf-checkbox__text {
    color:       var(--asf-text);
    font-weight: 600;
}
.asf-model-all-row .asf-checkbox:checked + .asf-checkbox__box {
    border-color: var(--asf-primary);
    background:   var(--asf-primary);
}

/* ── Loading overlay ──────────────────────────────────────────────────────── */
/* Applied to .shop-products-wrapper (Ignavo theme) or whatever element we
   detect as $productsWrap during init. */
.asf-loading {
    position:   relative;
    opacity:    .5;
    pointer-events: none;
    transition: opacity var(--asf-dur-fast);
}

/* Spinner */
.asf-spinner {
    position:  absolute;
    top:       50px;     /* avoid hiding the top product row */
    left:      50%;
    transform: translateX(-50%);
    z-index:   20;
    display:   none;
    width:     36px;
    height:    36px;
    border:    3px solid var(--asf-border);
    border-top-color: var(--asf-primary);
    border-radius: var(--asf-radius-full);
    animation: asf-spin .7s linear infinite;
}
.asf-loading .asf-spinner {
    display: block;
}

@keyframes asf-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Result count update ─────────────────────────────────────────────────── */
.asf-result-count {
    font-size:   var(--asf-text-sm);
    color:       var(--asf-text-muted);
    transition:  opacity var(--asf-dur-fast);
}
.asf-result-count.asf-updating {
    opacity: .4;
}

/* ── Pagination (inherits WC styles; minor overrides) ─────────────────────── */
.asf-pagination-wrap .page-numbers {
    display:     inline-flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         4px;
    padding:     0;
    margin:      16px 0 0;
    list-style:  none;
}
.asf-pagination-wrap .page-numbers li {
    margin: 0;
    padding: 0;
}
.asf-pagination-wrap .page-numbers a,
.asf-pagination-wrap .page-numbers span {
    display:       flex;
    align-items:   center;
    justify-content:center;
    width:         34px;
    height:        34px;
    border-radius: var(--asf-radius-sm);
    border:        1px solid var(--asf-border);
    font-size:     var(--asf-text-sm);
    font-weight:   500;
    color:         var(--asf-text);
    text-decoration: none;
    transition:    background var(--asf-dur-fast), border-color var(--asf-dur-fast), color var(--asf-dur-fast);
}
.asf-pagination-wrap .page-numbers a:hover {
    background:   var(--asf-bg-hover);
    border-color: var(--asf-primary);
    color:        var(--asf-primary);
}
.asf-pagination-wrap .page-numbers .current {
    background:   var(--asf-primary);
    border-color: var(--asf-primary);
    color:        #fff;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
/*
 * The Ignavo theme already provides a left-side mobile filter drawer
 * (.site-drawer.filter-drawer) that contains the first panel instance.
 * We simply let the panel render naturally inside it — no fixed positioning.
 *
 * .asf-mobile-trigger and .asf-backdrop are kept in the DOM but hidden;
 * they are not needed since the theme handles mobile drawer open/close.
 */
.asf-mobile-trigger,
.asf-backdrop {
    display: none !important;
}

/* Close button is only useful when we control the drawer ourselves */
.asf-panel__close {
    display: none;
}

/* Inside the theme's mobile drawer the panel should have no outer border
   (the drawer provides its own container styling). */
.site-filter-drawer .asf-panel {
    border:        none;
    border-radius: 0;
    box-shadow:    none;
}

/* ── Search / results button ─────────────────────────────────────────────── */
.asf-search-bar {
    padding:      12px 16px 16px;
    border-top:   1px solid var(--asf-border);
    background:   var(--asf-bg);
}

.asf-search-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             7px;
    width:           100%;
    padding:         10px 16px;
    background:      #16a34a;
    color:           #fff;
    border:          none;
    border-radius:   var(--asf-radius-sm);
    font-size:       var(--asf-text-sm);
    font-weight:     600;
    font-family:     var(--asf-font);
    cursor:          pointer;
    transition:      background var(--asf-dur-fast), transform var(--asf-dur-fast);
    -webkit-tap-highlight-color: transparent;
}
.asf-search-btn:hover {
    background: #15803d;
}
.asf-search-btn:active {
    transform: scale(0.98);
}

.asf-search-btn__label {
    flex: 1;
    text-align: left;
}

.asf-search-btn__count {
    font-size:   var(--asf-text-xs);
    font-weight: 400;
    opacity:     0.85;
    white-space: nowrap;
    background:  rgba(255,255,255,.15);
    padding:     2px 7px;
    border-radius: var(--asf-radius-full);
}