/* ═══════════════════════════════════════════════════════════════════
 * LMKT Cat Filter — Frontend styles
 *
 * Tất cả selector scope dưới prefix .lmkt-cf (BEM) để KHÔNG ảnh hưởng
 * theme Flatsome (header/search) hay element khác. Không có bare element
 * selector (svg{}, button{}, input{}, ul{}, li{}...).
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Container ─────────────────────────────────────────────────── */
.lmkt-cf{--cf-accent:#0073aa;--cf-accent-light:#e8f4fd;--cf-radius:10px;--cf-gap:10px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#fff;border:1px solid #e2e8f0;border-radius:var(--cf-radius);padding:20px;margin-bottom:24px;position:relative}
.lmkt-cf--vertical{max-width:320px}

/* ── Search ────────────────────────────────────────────────────── */
.lmkt-cf__search{position:relative;margin-bottom:16px}
.lmkt-cf__search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;max-width:18px;max-height:18px;color:#94a3b8;pointer-events:none}
.lmkt-cf__search-icon svg{display:block;width:18px;height:18px;max-width:18px;max-height:18px;fill:currentColor}
.lmkt-cf__input{width:100%;height:46px;padding:0 42px 0 42px;border:2px solid #e2e8f0;border-radius:var(--cf-radius);font-size:15px;color:#1e293b;background:#f8fafc;transition:border-color .2s,box-shadow .2s,background .2s;outline:none;box-sizing:border-box}
.lmkt-cf__input:focus{border-color:var(--cf-accent);box-shadow:0 0 0 3px var(--cf-accent-light);background:#fff}
.lmkt-cf__input::placeholder{color:#94a3b8}
.lmkt-cf__clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:none;background:#e2e8f0;border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;color:#64748b;font-size:14px;line-height:1;transition:background .15s,color .15s;padding:0}
.lmkt-cf__clear:hover{background:#cbd5e1;color:#1e293b}
.lmkt-cf--has-query .lmkt-cf__clear{display:flex}

/* ── Tabs ──────────────────────────────────────────────────────── */
.lmkt-cf__tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.lmkt-cf__tab{padding:8px 18px;border:2px solid #e2e8f0;border-radius:var(--cf-radius);background:#f8fafc;color:#475569;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap;line-height:1.4;text-transform:uppercase;letter-spacing:.3px}
.lmkt-cf__tab:hover{border-color:var(--cf-accent);color:var(--cf-accent);background:var(--cf-accent-light)}
.lmkt-cf__tab.is-active{border-color:var(--cf-accent);background:var(--cf-accent);color:#fff}

/* ── Search results overlay ────────────────────────────────────── */
.lmkt-cf__results{display:none;margin-bottom:16px}
.lmkt-cf--has-query .lmkt-cf__results{display:block}
.lmkt-cf__results-header{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #e2e8f0;margin-bottom:8px}
.lmkt-cf__results-count{font-size:13px;color:#64748b;font-weight:600}
.lmkt-cf__results-clear{font-size:12px;color:var(--cf-accent);cursor:pointer;border:none;background:none;padding:4px 8px;border-radius:4px;transition:background .15s}
.lmkt-cf__results-clear:hover{background:var(--cf-accent-light)}
.lmkt-cf__results-list{list-style:none;padding:0;margin:0}
.lmkt-cf__result{border-radius:8px;transition:background .15s}
.lmkt-cf__result a{display:flex;align-items:center;padding:10px 14px;color:#1e293b;text-decoration:none;font-size:14px;gap:10px;border-radius:8px;transition:background .15s,color .15s}
.lmkt-cf__result a:hover,.lmkt-cf__result.is-focused a{background:var(--cf-accent-light);color:var(--cf-accent)}
.lmkt-cf__result-icon{width:20px;height:20px;max-width:20px;max-height:20px;color:#94a3b8;flex-shrink:0}
.lmkt-cf__result-icon svg{display:block;width:20px;height:20px;max-width:20px;max-height:20px;fill:currentColor}
.lmkt-cf__result mark{background:transparent;color:var(--cf-accent);font-weight:700}
.lmkt-cf__result-count{margin-left:auto;font-size:12px;color:#94a3b8;flex-shrink:0}

/* ── Empty state ───────────────────────────────────────────────── */
.lmkt-cf__empty{text-align:center;padding:24px 16px;color:#94a3b8}
.lmkt-cf__empty-icon{font-size:32px;margin-bottom:8px}
.lmkt-cf__empty-text{font-size:14px;margin-bottom:12px}
.lmkt-cf__empty-btn{display:inline-block;padding:8px 16px;border:1px solid #e2e8f0;border-radius:var(--cf-radius);font-size:13px;color:#64748b;cursor:pointer;background:#f8fafc;transition:all .15s}
.lmkt-cf__empty-btn:hover{border-color:var(--cf-accent);color:var(--cf-accent)}

/* ── Content panels ────────────────────────────────────────────── */
.lmkt-cf__panel{display:none}
.lmkt-cf__panel.is-active{display:block}
.lmkt-cf--has-query .lmkt-cf__panel{display:none!important}

/* ── Group menu items ──────────────────────────────────────────── */
.lmkt-cf__menu{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.lmkt-cf__menu li a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid #e2e8f0;border-radius:8px;color:#475569;text-decoration:none;font-size:13px;transition:all .2s}
.lmkt-cf__menu li a:hover{border-color:var(--cf-accent);color:var(--cf-accent);background:var(--cf-accent-light)}
.lmkt-cf__menu li a small{color:#94a3b8;font-size:11px}

/* ── Alpha nav ─────────────────────────────────────────────────── */
.lmkt-cf__alpha-nav{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:16px}
.lmkt-cf__alpha-link,.lmkt-cf__alpha-disabled{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;font-size:12px;font-weight:600;text-decoration:none;transition:all .15s}
.lmkt-cf__alpha-link{color:var(--cf-accent);border:1px solid #e2e8f0;background:#fff}
.lmkt-cf__alpha-link:hover{background:var(--cf-accent);color:#fff;border-color:var(--cf-accent)}
.lmkt-cf__alpha-disabled{color:#cbd5e1;cursor:default}
.lmkt-cf__alpha-group{margin-bottom:12px}
.lmkt-cf__alpha-letter{font-size:16px;font-weight:700;color:var(--cf-accent);padding:4px 0;border-bottom:2px solid var(--cf-accent-light);margin-bottom:8px}
.lmkt-cf__alpha-list{list-style:none;padding:0;margin:0 0 4px;columns:2;column-gap:16px}
.lmkt-cf__alpha-list li{break-inside:avoid;padding:4px 0}
.lmkt-cf__alpha-list li a{color:#475569;text-decoration:none;font-size:13px;transition:color .15s}
.lmkt-cf__alpha-list li a:hover{color:var(--cf-accent)}

/* ── Fallback ──────────────────────────────────────────────────── */
.lmkt-cf__fallback{text-align:center;padding:20px;color:#94a3b8;font-size:14px}

/* ── Responsive ────────────────────────────────────────────────── */
@media(max-width:600px){
.lmkt-cf{padding:14px}
.lmkt-cf__alpha-list{columns:1}
.lmkt-cf__input{height:42px;font-size:14px}
.lmkt-cf__tab{padding:6px 12px;font-size:12px}
}