/* ==========================================================================
   Medelz Shop Filters v4.4.3
   Layout is PHP-driven via woocommerce_before/after_main_content hooks.
   CSS sets the flex layout immediately — ZERO layout shift on load.
   ========================================================================== */

/* ── LAYOUT ──────────────────────────────────────────────────────────────── */

.msf-shop-layout {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    width: 100%;
    box-sizing: border-box;
}

.msf-products-col {
    flex: 1 1 0%;
    min-width: 0;
}

/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */

#msf-filter-sidebar {
    width: 25%;
    min-width: 240px;
    flex-shrink: 0;
    background: #0D0D0D;
    border: 1px solid #f43b413b;
    border-radius: 10px;
    overflow: hidden;
    position: sticky;
    top: 90px;
    max-height: calc(200vh - 110px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

#msf-filter-sidebar::-webkit-scrollbar { width: 4px; }
#msf-filter-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* ── HEADER ──────────────────────────────────────────────────────────────── */

.msf-sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: #181818;
    border-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.msf-sidebar-header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: capitalize!important;
    letter-spacing: 1.5px;
    color: #fff;
    flex: 1;
}

.msf-filter-icon { width: 15px; height: 15px; color: #fff; flex-shrink: 0; }
.msf-filter-icon svg { width: 100%; height: 100%; display: block; }

.msf-clear-all {
    font-size: 13px;
    color: #c8a96e;
    text-decoration: none;
    /* text-transform: uppercase; */
    letter-spacing: 0.8px;
    white-space: nowrap;
}
/* .msf-clear-all:hover { opacity: 0.7; color: #c8a96e; } */

/* ── FILTER GROUPS ───────────────────────────────────────────────────────── */

.msf-filter-group { 
    /* border-bottom: 1px solid rgba(255,255,255,0.06); */
    margin-bottom: 15px; }
.msf-filter-group:last-child { border-bottom: none; }

.msf-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    /* padding: 12px 18px; */
    padding: 16px;
    background: none;
    border: none;
    cursor: pointer;
    color: #cccccc;
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 1px;
    gap: 8px;
    text-align: left;
    transition: color 0.2s, background 0.2s;
    background: #1A1A1A;
    border-radius: 10px;    
}

.msf-group-toggle:hover { color: #fff; background: #000; }
.msf-group-toggle > span:first-child { flex: 1; }
.msf-has-active .msf-group-toggle { color: #f43b41ba; }

.msf-active-badge {
    background: #f43b41ba; color: #fff;
    font-size: 10px; font-weight: 700;
    width: 17px; height: 17px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

.msf-chevron {
    width: 25px; height: 25px;
    color: #fff;
    transition: transform 0.22s ease;
    flex-shrink: 0;
}
.msf-group-toggle[aria-expanded="true"] .msf-chevron { transform: rotate(180deg); }

.msf-group-body { overflow: hidden;margin: 15px 0px; }

/* ── RADIO ITEMS (Sort By) ───────────────────────────────────────────────── */

.msf-radio-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 18px;
    color: #aaa; text-decoration: none; font-size: 13px;
    transition: color 0.15s, background 0.15s;
}
.msf-radio-item:hover { color: #fff; background: rgba(255,255,255,0.04); }
.msf-radio-item.msf-radio-active { color: #c8a96e; }

.msf-radio {
    width: 13px; height: 13px;
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.03);
    transition: border-color 0.15s;
}
.msf-radio-item.msf-radio-active .msf-radio { border-color: #c8a96e; background: rgba(200,169,110,0.1); }
.msf-radio-item:hover .msf-radio { border-color: rgba(200,169,110,0.5); }
.msf-radio-dot { width: 5px; height: 5px; background: #c8a96e; border-radius: 50%; }

/* ── CATEGORY ITEMS ──────────────────────────────────────────────────────── */

.msf-category-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 18px; gap: 8px;
    color: #aaa; text-decoration: none; font-size: 13px;
    transition: color 0.15s, background 0.15s, padding-left 0.15s;
}
.msf-category-item:hover { color: #fff; background: rgba(255,255,255,0.04); padding-left: 22px; }
.msf-category-item.msf-active { color: #c8a96e; font-weight: 600; }
.msf-category-all { font-style: italic; font-size: 12px; color: rgba(255,255,255,0.35); border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 2px; }
.msf-category-child { padding-left: 30px; font-size: 12px; }
.msf-category-child:hover { padding-left: 34px; }

/* ── PRICE FILTER ────────────────────────────────────────────────────────── */

.msf-price-form { padding: 6px 18px 10px; }
.msf-price-inputs { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

.msf-price-field {
    flex: 1; display: flex; align-items: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 3px; overflow: hidden;
    transition: border-color 0.2s;
}
.msf-price-field:focus { border-color: #f43b413b; }
.msf-price-field label { padding: 0 5px; color: rgba(255,255,255,0.3); font-size: 11px; flex-shrink: 0; margin-bottom: 0px; }
.msf-price-field input {
    background: transparent; border: none; color: #fff; font-size: 12px;
    padding: 7px 6px 7px 0; width: 100%; outline: none;
    -moz-appearance: textfield;
}
.msf-price-field input::-webkit-outer-spin-button,
.msf-price-field input::-webkit-inner-spin-button { -webkit-appearance: none; }
.msf-price-sep { color: rgba(255,255,255,0.25); font-size: 12px; }

.msf-price-submit {
    width: 100%; padding: 8px; 
    background: #1A1A1A; 
    color: #fff;
    border: none; border-radius: 10px; font-size: 11px; font-weight: 700;
    text-transform: capitalize; letter-spacing: 1px; cursor: pointer;
    transition: background 0.2s;
    border: 1px solid #f43b413b;
}
.msf-price-submit:hover { 
    background: linear-gradient(91.19deg, #fa8e4d -2.85%, #f43b41 40.79%, #cd2761 68.98%, #743bb5 105.86%);
    background-repeat: no-repeat;
 }

/* ── CHECKBOX ITEMS ──────────────────────────────────────────────────────── */

.msf-checkbox-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 18px; color: #aaa; text-decoration: none; font-size: 13px;
    transition: color 0.15s, background 0.15s;border-radius: 10px;
}
.msf-checkbox-item:hover { color: #fff; background: rgba(255,255,255,0.04); }
.msf-checkbox-item.msf-checked { color: #f43b41ba; }

.msf-checkbox {
    width: 13px; height: 13px; flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.2); border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.03); transition: border-color 0.15s, background 0.15s;
}
.msf-checkbox-item.msf-checked .msf-checkbox { background: #f43b41ba; border-color: #f43b41ba; }
.msf-checkbox-item:hover .msf-checkbox { border-color: #f43b411f; }
.msf-checkbox svg { width: 9px; height: 9px; color: #111; display: block; }

/* ── SHARED ──────────────────────────────────────────────────────────────── */

.msf-term-name { flex: 1; }
.msf-count { color: rgba(255,255,255,0.28); font-size: 11px; flex-shrink: 0; }

/* ── ACTIVE TAGS ─────────────────────────────────────────────────────────── */

.msf-active-filters { padding: 10px 18px 14px; border-top: 1px solid rgba(200,169,110,0.12); background: rgba(200,169,110,0.03); }
.msf-active-label { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.3); }
.msf-active-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.msf-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; 
    /* background: rgba(200,169,110,0.1); */
    border: 1px solid #f43b413b; border-radius: 10px;
    /* color: #c8a96e; */
     font-size: 12px; text-decoration: none;
    white-space: nowrap; transition: background 0.15s;
}
.msf-tag:hover { 
    background: linear-gradient(91.19deg, #fa8e4d -2.85%, #f43b41 40.79%, #cd2761 68.98%, #743bb5 105.86%);
    background-repeat: no-repeat;
    color: #c8a96e; }

/* ── LOADING ─────────────────────────────────────────────────────────────── */

.msf-products-col.msf-loading { opacity: 0.4; pointer-events: none; transition: opacity 0.25s; }

/* ── MOBILE ──────────────────────────────────────────────────────────────── */

.msf-mobile-toggle {
    display: none; align-items: center; gap: 8px;
    padding: 10px 16px; background: #111;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
    color: #fff; font-size: 13px; font-weight: 500;
    cursor: pointer; margin-bottom: 14px; width: 100%;
    transition: background 0.2s;
}
.msf-mobile-toggle svg { color: #c8a96e; }
.msf-mobile-toggle span { flex: 1; text-align: left; }
.msf-mobile-toggle:hover { background: #1a1a1a; }

.msf-filter-count-badge {
    background: #c8a96e; color: #111;
    font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: 10px;
}

/* ── WC OVERRIDES ────────────────────────────────────────────────────────── */

/* Hide default WC ordering bar — it's in our sidebar */
.woocommerce-ordering { display: none !important; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */

@media ( max-width: 1024px ) {
    #msf-filter-sidebar { width: 210px; min-width: 200px; }
}

@media ( max-width: 768px ) {
    .msf-shop-layout { display: flex !important; flex-direction: column; gap: 0; }
    #shop-index .entry-product img{
        width: 100% !important;
    }

    #msf-filter-sidebar {
        width: 100%; min-width: 100%;
        position: static; max-height: none; overflow: visible;
        margin-bottom: 18px;
    }

    #msf-filter-sidebar.msf-mobile-hidden { display: none; }

    .msf-mobile-toggle { display: flex; }
}

/* ==========================================================================
   MSF TOOLBAR — search, category pills, sort by (above product grid)
   ========================================================================== */

.msf-toolbar {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── TOP ROW: search + sort ──────────────────────────────────────────────── */

.msf-toolbar-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── SEARCH ──────────────────────────────────────────────────────────────── */

.msf-search-form {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    min-width: 0;
}

.msf-search-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background: #1a1a1a;
    border: 1px solid #f43b413b;
    border-right: none;
    border-radius: 6px 0 0 6px;
    padding: 0 12px;
    gap: 8px;
    transition: border-color 0.2s;
}

/* .msf-search-wrap:focus-within {
    border-color: rgba(200,169,110,0.5);
} */

.msf-search-icon {
    width: 15px;
    height: 15px;
    color: rgba(255,255,255,0.35);
    flex-shrink: 0;
}

.msf-search-wrap input[type="text"] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 13px;
    padding: 11px 0;
    min-width: 0;
}

.msf-search-wrap input[type="text"]::placeholder {
    color: rgba(255,255,255,0.3);
}

.msf-search-clear {
    color: rgba(255,255,255,0.35);
    font-size: 12px;
    text-decoration: none;
    flex-shrink: 0;
    padding: 2px 4px;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}

.msf-search-clear:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

.msf-search-btn {
    padding: 0 20px;
    height: -webkit-fill-available;
    background: #c8a96e;
    color: #111;
    border: none;
    border-radius: 0 10px 10px 0;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    flex-shrink: 0;
}

.msf-search-btn:hover { background: #d4b87a; }

/* ── SORT DROPDOWN ───────────────────────────────────────────────────────── */

.msf-sort-wrap {
    position: relative;
    flex-shrink: 0;
}

.msf-sort-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    /* height: 42px; */
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s, background 0.2s;
    padding: 16px 30px !important;
}

.msf-sort-btn:hover,
.msf-sort-btn.msf-sort-open {
    border-color: rgba(200,169,110,0.5);
    background: #222;
}

.msf-sort-btn svg { color: #fff; }

.msf-sort-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    overflow: hidden;
    z-index: 999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.msf-sort-dropdown.msf-sort-open { display: block; }

.msf-sort-header {
    padding: 10px 16px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: white;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.msf-sort-option {
    display: flex;
    align-items: center;
    padding: 9px 16px;
    color: #aaa;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.15s, background 0.15s;
    gap: 8px;
}

.msf-sort-option:hover {
    color: #fff;
    background: rgba(255,255,255,0.05);
}

.msf-sort-option.msf-sort-active {
    color: #f43b41ba;
    font-weight: 600;
}

.msf-sort-option.msf-sort-active::before {
    content: '';
    width: 5px;
    height: 5px;
    background: #f43b41ba;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── CATEGORY PILLS ──────────────────────────────────────────────────────── */

.msf-cat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.msf-cat-pill {
    display: inline-flex;
    align-items: center;
    /* padding: 7px 18px; */
    padding: 9.5px 0px;
    background: #1a1a1a;
    border: 1px solid #f43b413b;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.1s;
    flex: 1;
    justify-content: center;
}

.msf-cat-pill:hover {
    color: #fff;
    /* background: #252525; */
    /* border-color: rgba(255,255,255,0.22); */
    /* transform: translateY(-1px); */
    background: linear-gradient(91.19deg, #fa8e4d -2.85%, #f43b41 40.79%, #cd2761 68.98%, #743bb5 105.86%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    background-repeat: no-repeat;
}

.msf-cat-pill-active {
    /* background: #c8a96e !important; */
    background: linear-gradient(91.19deg, #fa8e4d -2.85%, #f43b41 40.79%, #cd2761 68.98%, #743bb5 105.86%);
    background-repeat: no-repeat;
    /* border-color: #c8a96e !important; */
    /* color: #111 !important; */
    font-weight: 700;
}

.msf-cat-pill-active:hover {
    /* background: #d4b87a !important; */
    background: linear-gradient(91.19deg, #fa8e4d -2.85%, #f43b41 40.79%, #cd2761 68.98%, #743bb5 105.86%);
    background-repeat: no-repeat;
    /* border-color: #d4b87a !important; */
    /* transform: translateY(-1px); */
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */

@media ( max-width: 768px ) {
    .msf-toolbar-top { flex-wrap: wrap; }
    .msf-search-form { width: 100%; }
    .msf-sort-wrap { width: 100%; }
    .msf-sort-wrap .msf-sort-btn { width: 100%!important;padding: 16px 30px !important; justify-content: center; }
    .msf-sort-dropdown { left: 0; right: 0; }
    .msf-cat-pills { gap: 6px; }
    .msf-cat-pill { padding: 6px 14px; font-size: 12px; }
}

/* ── RESULT COUNT ────────────────────────────────────────────────────────── */

/* Hide WC default just in case theme re-adds it */
.woocommerce-result-count { display: none !important; }

.msf-result-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.msf-result-count__number {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.3px;
}

.msf-result-count__filtered {
    font-size: 10px;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 1px;
    /* color: #c8a96e; */
    background: rgba(200,169,110,0.1);
    border: 1px solid rgba(200,169,110,0.2);
    border-radius: 10px;
    padding: 2px 7px;
    background: linear-gradient(91.19deg, #fa8e4d -2.85%, #f43b41 40.79%, #cd2761 68.98%, #743bb5 105.86%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    background-repeat: no-repeat;
}

@media only screen and (max-width: 768px) {
    .msf-search-btn {
        width: auto !important;
    }
}