/**
 * WCIF Product Filter — filter.css
 * Plugin Version: 3.9.1
 */

/* ══ عمومی ══════════════════════════════════════════════════ */
.w-filter-item.wcif-hidden { display: none !important; }

/* ══ Chips — دسکتاپ ════════════════════════════════════════ */
#wcif-active-chips {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}
#wcif-active-chips:empty { display: none; }
@media (max-width: 768px) {
    #wcif-active-chips { display: none !important; }
}
.wcif-chips-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wcif-chips-group-label { font-size: .8em; font-weight: 600; color: #888; white-space: nowrap; }
.wcif-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px 4px 10px; border-radius: 20px;
    background: rgba(0,0,0,.07); font-size: .82em;
}
.wcif-chip-remove {
    background: none; border: none; width: 16px; height: 16px;
    font-size: 14px; cursor: pointer; color: #666; border-radius: 50%;
    padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
.wcif-chip-remove:hover { background: rgba(0,0,0,.12); color: #222; }

/* چیپ‌های موبایل — داخل خود panel */
#wcif-mp-chips {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}
#wcif-mp-chips:empty { display: none; }

/* ══ دکمه‌های دسکتاپ ════════════════════════════════════════ */
.wcif-apply-wrap {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 0 8px; border-top: 1px solid rgba(0,0,0,.1); margin-top: 8px;
}
.wcif-apply-btn {
    font-family: var(--font-family); font-style: normal;
    text-transform: none; font-size: 14px; line-height: 1.28 !important;
    font-weight: 400; letter-spacing: 0em; padding: 0.85em 1.6em;
    transition-duration: 0.3s; border-radius: 10px; transition-timing-function: ease;
    background: var(--color-header-middle-text-hover);
    border: none; border-image: none;
    color: var(--color-header-middle-bg) !important;
    cursor: pointer; flex: 1;
}
.wcif-reset-btn {
    background: none; border: none; font-size: .82em; color: #888;
    cursor: pointer; text-decoration: underline; white-space: nowrap; padding: 4px 0;
}
.wcif-reset-btn:hover { color: #333; }


/* ══ دکمه فیلترها — فیکس پایین صفحه ════════════════════════ */
#wcif-filterToggle { display: none; }
@media (max-width: 768px) {
    #wcif-filterToggle {
        display: flex !important;
        align-items: center; justify-content: center; gap: 8px;
        position: fixed !important;
        bottom: 76px; left: 15px; right: 15px;
        height: 48px; border: none; border-radius: 12px;
        background: #ff3434; color: #fff !important;
        font-size: 16px; font-weight: 700;
        z-index: 9998 !important; cursor: pointer;
        box-shadow: 0 4px 16px rgba(255,52,52,.35);
    }
}

/* ══ موبایل overlay ══════════════════════════════════════════ */
#wcif-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 9999;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
#wcif-overlay.wcif-open { display: block !important; }

/* ══ موبایل panel ════════════════════════════════════════════ */
#wcif-mobile-panel { display: none; }
@media (max-width: 768px) {
    #wcif-mobile-panel {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        bottom: 70px; left: 0; right: 0;
        height: 75vh;
        background: #fff;
        border-radius: 20px 20px 0 0;
        z-index: 10000 !important;
        transform: translateY(100%);
        transition: transform .35s cubic-bezier(.32,.72,0,1);
        box-shadow: 0 -8px 32px rgba(0,0,0,.15);
        overflow: hidden;
    }
    #wcif-mobile-panel.wcif-open { transform: translateY(0) !important; }
    #wcif-mobile-panel::before {
        content: ''; display: block;
        width: 40px; height: 4px; border-radius: 2px;
        background: #ddd; margin: 10px auto 0; flex-shrink: 0;
    }

    .wcif-mp-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 20px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
    }
    .wcif-mp-title { font-size: 1rem; font-weight: 700; color: #222; }
    .wcif-mp-close {
        display: flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; border: none; border-radius: 50%;
        background: #f5f5f5; cursor: pointer; color: #444; font-size: 16px;
    }

    .wcif-mp-body {
        flex: 1; overflow-y: auto; padding: 16px 20px;
        -webkit-overflow-scrolling: touch;
    }

    .wcif-panel-form {
        display: block !important;
        position: static !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important; margin: 0 !important;
        width: 100% !important; height: auto !important;
    }

    /* ── آکاردئون (دراپ‌باکس) ───────────────────────────────── */
    .wcif-panel-form .w-filter-item.wcif-accordion-ready {
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 10px;
    }
    .wcif-panel-form .w-filter-item.wcif-accordion-ready:last-child {
        border-bottom: none;
    }
    .wcif-panel-form .w-filter-item-title.wcif-fi-toggle {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        font-weight: bold;
        padding: 14px 0;
        cursor: pointer;
        border: none;
        text-align: right;
    }
    .wcif-panel-form .w-filter-item-title.wcif-fi-toggle::after {
       content:'';
  position:absolute;
  top:calc( var(--inputs-height,2em) / 2 + var(--inputs-border-width,1px) );
  inset-inline-end:0;
  margin:-.2em calc( var(--inputs-padding,.6em) + var(--inputs-border-width,1px) );
  font-size:var(--inputs-font-size,inherit);
  pointer-events:none;
  border:.4em solid;
  border-left-color:transparent;
  border-right-color:transparent;
  border-bottom-color:transparent;
  border-radius:var(--site-border-radius)
    }

    .wcif-panel-form .wcif-fi-content {
        overflow: hidden;
        max-height: 1000px;
        transition: max-height .3s ease, opacity .25s ease, padding .25s ease;
        opacity: 1;
        padding-bottom: 14px;
    }
    .wcif-panel-form .w-filter-item.wcif-fi-collapsed .wcif-fi-content {
        max-height: 0px;
        opacity: 0;
        padding-bottom: 0;
    }
.wcif-panel-form .w-filter-item.wcif-fi-collapsed .w-filter-item-content {
    display: none !important;
}

.wcif-panel-form .w-filter-item:not(.wcif-fi-collapsed) .w-filter-item-content {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    position: static !important;
    transform: none !important;
}

    .wcif-panel-form .w-filter-list-panel .w-filter-button-submit,
    .wcif-panel-form .w-filter-list-panel .w-btn {
        display: flex !important;
        align-items: center; justify-content: center;
        width: 100% !important; height: 48px !important;
        border: none !important; border-radius: 12px !important;
        background: #ff3434 !important; color: #fff !important;
        font-size: 15px !important; font-weight: 700 !important;
        cursor: pointer; line-height: 1 !important;
    }

    /* footer — فقط دکمه حذف فیلترها */
    .wcif-mp-footer {
        display: flex; align-items: center; gap: 10px;
        padding: 12px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom));
        border-top: 1px solid #f0f0f0; background: #fff; flex-shrink: 0;
    }
    .wcif-mp-reset {
        width: 30%; height: 44px; padding: 0 16px;
        border: 1.5px solid #e0e0e0; border-radius: 12px;
        background: none; font-size: 13px; color: #555;
        cursor: pointer; white-space: nowrap;
        font-family: var(--font-family);
    }
    .wcif-mp-apply{
         font-family: var(--font-family); font-style: normal;
    text-transform: none; font-size: 14px; line-height: 1.28 !important;
    font-weight: 400; letter-spacing: 0em; padding: 0.85em 1.6em;
    transition-duration: 0.3s; border-radius: 10px; transition-timing-function: ease;
    background: var(--color-header-middle-text-hover);
    border: none; border-image: none;
    color: var(--color-header-middle-bg) !important;
    cursor: pointer; flex: 1;
    }

    body.wcif-no-scroll { overflow: hidden !important; }
    body { padding-bottom: 140px !important; }
}