/* Marketplace desktop filter panel (≥1024px): components/market/filter_panel.php, driven by market-filter.js.
 * The panel is the floating #filterSidebar card (market-v5.css, same shape as the hero). Inside it nothing is boxed:
 * header, chips and sections are split by full-width hairlines. Header is as tall as the nav bar beside it; the active
 * filters sit under it as removable chips; Length and Price sort are one-row segments, Type a list of radio rows,
 * Price From / To + preset pills. Each section shows its current value on the right.
 * Colours are the --mk-* tokens from market-v5.css, so light mode needs no rules of its own; spacing is logical (RTL-safe).
 * Phone / tablet keep the older sheet controls in the same #filterSidebar and never see .mkf. */

.mkf { display: none; }

@media (min-width: 1024px) {
    /* The sheet's own controls (grab, header, category accordion, sort, price steppers, reset) stay on phone. */
    #mk5 #filterSidebar > :not(.mkf) { display: none; }
    #mk5 .mkf { display: block; }
    .mkf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    .mkf-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0; }

    /* ---- Header: "Filters (n)" + Clear all; pinned to the top of the column so it never scrolls away.
     * It has no colour of its own: it sits on the column's lit corner (market-v5.css). Only when the filters scroll
     * under it (short windows; .is-stuck, set by market-filter.js) does it take the column's top colour, so they
     * never show through. ---- */
    .mkf-head {
        position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
        min-height: 64px; padding: 0 18px; background: transparent; border-bottom: 1px solid rgb(var(--mk-fg) / 0.08);
        transition: background-color .2s ease;
    }
    .mkf.is-stuck .mkf-head { background: rgb(var(--mk-s1)); }
    .mkf-head__title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: rgb(var(--mk-fg)); }
    .mkf-head__n {
        display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
        background: rgb(var(--mk-acc)); color: rgb(var(--mk-on-acc)); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
    }
    .mkf-head__n[hidden] { display: none; }
    .mkf-clear {
        padding: 4px 2px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500;
        color: rgb(var(--mk-fg) / calc(0.7 * var(--mk-tk))); transition: color .2s ease;
    }
    .mkf-clear:hover:not(:disabled) { color: rgb(var(--mk-fg)); }
    .mkf-clear:disabled { cursor: default; color: rgb(var(--mk-fg) / calc(0.3 * var(--mk-tk))); }

    /* ---- Active filter chips ---- */
    .mkf-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; border-bottom: 1px solid rgb(var(--mk-fg) / 0.08); }
    .mkf-chips[hidden] { display: none; }
    .mkf-chip {
        display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 30px; padding-inline: 12px 10px;
        border: 1px solid rgb(var(--mk-fg) / 0.16); border-radius: 999px; background: rgb(var(--mk-fg) / 0.04); cursor: pointer;
        font: inherit; font-size: 12.5px; font-weight: 600; color: rgb(var(--mk-fg)); transition: border-color .2s ease, background .2s ease;
    }
    .mkf-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mkf-chip > i { flex: none; font-size: 10px; opacity: .55; transition: opacity .2s ease; }
    .mkf-chip:hover { border-color: rgb(var(--mk-fg) / 0.32); background: rgb(var(--mk-fg) / 0.07); }
    .mkf-chip:hover > i { opacity: 1; }

    /* ---- Sections ---- */
    /* style.css lifts every <section> (relative, z 5), which would paint them over the pinned header. */
    .mkf-sec { position: static; z-index: auto; padding: 18px 18px 20px; }
    .mkf-sec + .mkf-sec { border-top: 1px solid rgb(var(--mk-fg) / 0.08); }
    .mkf-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
    .mkf-sec__title { flex: none; font-size: 14px; font-weight: 700; color: rgb(var(--mk-fg)); }
    .mkf-sec__val {
        min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        font-size: 12.5px; font-weight: 500; color: rgb(var(--mk-fg) / calc(0.5 * var(--mk-tk))); transition: color .2s ease;
    }
    .mkf-sec__val.is-on { color: rgb(var(--mk-fg) / calc(0.8 * var(--mk-tk))); }
    .mkf-hint { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: rgb(var(--mk-fg) / calc(0.45 * var(--mk-tk))); }

    /* The radio stays focusable (arrow keys move the choice) but sits invisible over its option. */
    .mkf :is(.mkf-opt, .mkf-row) { position: relative; cursor: pointer; }
    .mkf :is(.mkf-opt, .mkf-row) > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
    #mk5 .mkf :is(.mkf-opt, .mkf-row):has(> input:focus-visible) { outline: 2px solid rgb(var(--mk-fg) / 0.85); outline-offset: 1px; }
    /* Nothing of this kind in the current results: still pickable, just quiet. */
    .mkf .is-empty:not(:has(> input:checked)) { opacity: .4; }

    /* ---- Segments: Length (label over its live count) and Price sort, one row each ---- */
    .mkf-seg {
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; padding: 3px;
        border: 1px solid rgb(var(--mk-fg) / 0.1); border-radius: 12px; background: var(--mk-well);
    }
    .mkf-opt {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 36px; padding: 0 6px;
        border-radius: 9px; text-align: center; color: rgb(var(--mk-fg) / calc(0.62 * var(--mk-tk)));
        transition: background .2s var(--mk-ease), color .2s ease, box-shadow .2s ease, opacity .2s ease;
    }
    .mkf-opt:hover { background: rgb(var(--mk-fg) / 0.06); color: rgb(var(--mk-fg)); }
    .mkf-opt__main { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; line-height: 1.15; }
    .mkf-opt--len { min-height: 54px; }
    .mkf-opt--len .mkf-opt__main { font-size: 16px; font-weight: 700; color: rgb(var(--mk-fg)); }
    /* Length: columns as wide as their label ("Palabras" needs more than "3"), the rest shared; word labels a size down. */
    .mkf-seg--len { grid-auto-columns: minmax(max-content, 1fr); }
    .mkf-opt--word .mkf-opt__main { font-size: 13.5px; overflow: visible; }
    .mkf-opt__n { font-size: 10.5px; font-weight: 500; line-height: 1; opacity: .7; font-variant-numeric: tabular-nums; }
    /* A picked segment is filled with the accent (white in dark mode, blue in light mode). */
    .mkf-opt:has(> input:checked) {
        background: rgb(var(--mk-acc)); color: rgb(var(--mk-on-acc));
        box-shadow: 0 1px 2px rgb(var(--mk-sh) / calc(0.3 * var(--mk-shk))), 0 6px 14px -4px rgb(var(--mk-sh) / calc(0.5 * var(--mk-shk)));
    }
    .mkf-opt:has(> input:checked) .mkf-opt__main { color: inherit; }

    /* ---- Type: radio rows (dot · name · example · live count) ---- */
    .mkf-list { display: flex; flex-direction: column; gap: 2px; margin-inline: -8px; }
    .mkf-row {
        display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 8px; border-radius: 10px;
        color: rgb(var(--mk-fg) / calc(0.66 * var(--mk-tk))); transition: background .2s var(--mk-ease), color .2s ease, opacity .2s ease;
    }
    .mkf-row:hover { background: rgb(var(--mk-fg) / 0.05); color: rgb(var(--mk-fg)); }
    .mkf-row:has(> input:checked) { background: rgb(var(--mk-fg) / 0.08); color: rgb(var(--mk-fg)); }
    .mkf-row__dot {
        flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgb(var(--mk-fg) / 0.32);
        transition: border-color .2s ease, box-shadow .2s ease;
    }
    .mkf-row:hover .mkf-row__dot { border-color: rgb(var(--mk-fg) / 0.6); }
    .mkf-row:has(> input:checked) .mkf-row__dot { border-color: rgb(var(--mk-acc)); background: radial-gradient(circle, rgb(var(--mk-acc)) 0 3.5px, transparent 4px); }
    .mkf-row__name { min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.2; color: rgb(var(--mk-fg)); }
    .mkf-row__eg { flex: none; padding: 2px 6px; border-radius: 6px; background: rgb(var(--mk-fg) / 0.07); color: rgb(var(--mk-fg) / calc(0.7 * var(--mk-tk))); font-size: 10.5px; line-height: 1.2; }
    .mkf-row__n { flex: none; margin-inline-start: auto; min-width: 3ch; text-align: end; font-size: 11.5px; font-weight: 600; opacity: .6; font-variant-numeric: tabular-nums; }
    .mkf-row:has(> input:checked) .mkf-row__n { opacity: 1; }

    /* ---- Price: From / To + preset pills ---- */
    .mkf-range { display: flex; align-items: center; gap: 8px; }
    .mkf-range__dash { flex: none; font-size: 12px; color: rgb(var(--mk-fg) / 0.3); }
    .mkf-field {
        flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; height: 42px; padding: 0 12px;
        border: 1px solid rgb(var(--mk-fg) / 0.12); border-radius: 12px; background: var(--mk-well); cursor: text; transition: border-color .2s ease;
    }
    .mkf-field:hover { border-color: rgb(var(--mk-fg) / 0.22); }
    .mkf-field:focus-within { border-color: rgb(var(--mk-fg) / 0.45); }
    .mkf-field__k { flex: none; font-size: 11.5px; font-weight: 500; white-space: nowrap; color: rgb(var(--mk-fg) / calc(0.5 * var(--mk-tk))); }
    .mkf-field__cur { flex: none; font-size: 13px; font-weight: 600; color: rgb(var(--mk-fg) / calc(0.6 * var(--mk-tk))); }
    .mkf-field input {
        flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent;
        font: inherit; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(var(--mk-fg));
    }
    /* The field's border already shows focus. */
    #mk5 .mkf-field input:focus-visible { outline: none !important; }
    .mkf-field input::placeholder { color: rgb(var(--mk-fg) / 0.45); opacity: 1; }
    .mkf-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .mkf-preset {
        height: 32px; padding: 0 14px; border: 1px solid rgb(var(--mk-fg) / 0.14); border-radius: 999px; background: transparent; cursor: pointer;
        color: rgb(var(--mk-fg) / calc(0.75 * var(--mk-tk))); font: inherit; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
        transition: background .2s var(--mk-ease), border-color .2s ease, color .2s ease;
    }
    .mkf-preset:hover { border-color: rgb(var(--mk-fg) / 0.32); color: rgb(var(--mk-fg)); }
    .mkf-preset[aria-pressed="true"] { border-color: rgb(var(--mk-acc)); background: rgb(var(--mk-acc)); color: rgb(var(--mk-on-acc)); }
}

/* Arabic, Persian, Urdu: no negative tracking (it breaks letter joining). */
@media (min-width: 1024px) {
    html[dir="rtl"] .mkf-head__title { letter-spacing: 0; }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    .mkf :is(.mkf-opt, .mkf-row, .mkf-row__dot, .mkf-preset, .mkf-field, .mkf-clear, .mkf-chip, .mkf-sec__val) { transition: none; }
}