/* ============================================================================
   TestKav · صفحهٔ دسته — بخش‌های مشترک صفحه
   نوار ابزار چسبان، کشوی فیلتر، فیلترهای فعال، شبکهٔ کارت‌ها و هم‌ترازی پویا، ردیف در حال خواندن، نمای سریع.
   چیدمان صفحه (سرتیتر، ستون فیلتر هدفمند) در market-category-v3.css است. همه‌چیز زیر .tkc محدود شده است.
   ============================================================================ */

/* ---------- sticky toolbar: one white panel, like the sort bar on the other listing pages ---------- */
.tkc-bar{position:sticky;top:var(--tkc-hdr,68px);z-index:50;margin-top:14px;padding-block:8px;transition:background-color .2s ease,box-shadow .2s ease}
.tkc-bar.is-stuck{background:color-mix(in srgb,var(--sk-surface) 88%,transparent);-webkit-backdrop-filter:saturate(1.3) blur(10px);backdrop-filter:saturate(1.3) blur(10px);box-shadow:0 12px 26px -24px rgba(0,0,0,.45)}
.tkc-bar-in{display:flex;align-items:center;gap:10px;padding:8px;background:var(--sk-surface);border:1px solid var(--sk-line);border-radius:18px;box-shadow:0 1px 2px rgba(24,26,29,.04)}

.tkc .tkc-fbtn{position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:12px;border:1px solid transparent;background:var(--sk-surface-2);color:var(--sk-ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:border-color .15s,background .15s}
.tkc .tkc-fbtn svg{width:18px;height:18px;flex:none}
.tkc .tkc-fbtn:hover{border-color:var(--sk-line-strong)}
.tkc .tkc-fbtn.has-active{border-color:var(--sk-amber);background:var(--sk-amber-soft,rgba(255,194,24,.14))}
.tkc-badge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--sk-ink);color:var(--sk-surface);font-size:11.5px;font-weight:800;display:inline-grid;place-items:center;line-height:1}
.tkc-badge[hidden]{display:none}

.tkc-search{flex:1 1 240px;min-width:0}
.tkc-search .mls{margin:0;height:42px;padding:0 8px;padding-inline-start:14px;border-radius:12px;border-color:transparent;background:var(--sk-surface-2)}
.tkc-search .mls:focus-within{border-color:var(--sk-amber);background:var(--sk-surface)}
.tkc-search .mls input{height:40px;font-size:14px}

.tkc-sort,.tkc-view{flex:none;display:flex;gap:3px;padding:3px;border-radius:13px;background:var(--sk-surface-2)}
.tkc .tkc-sbtn{height:36px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:var(--sk-ink-soft);font:inherit;font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.tkc .tkc-sbtn:hover{color:var(--sk-ink)}
/* حالت فعال: قطعهٔ برجستهٔ سفید روی ریل خاکستری، هم‌شکل تب‌های «مهارت تخصصی / شغل / ابزار» همین صفحه.
   نه زرد (زرد فقط برای اقدام اصلی) و نه مشکی توپر (پرکنتراست‌ترین نقطهٔ صفحه می‌شد و چشم را می‌کشید). */
.tkc .tkc-sbtn.active{background:var(--sk-surface);color:var(--sk-ink);box-shadow:0 0 0 1px var(--sk-line),0 2px 6px -3px rgba(10,14,40,.18);font-weight:800}
.tkc .tkc-vbtn{width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--sk-ink-faint);display:grid;place-items:center;cursor:pointer}
.tkc .tkc-vbtn svg{width:18px;height:18px}
.tkc .tkc-vbtn.is-on{background:var(--sk-surface);color:var(--sk-ink);box-shadow:0 0 0 1px var(--sk-line),0 2px 6px -3px rgba(10,14,40,.18)}
.tkc .tkc-fbtn:focus-visible,.tkc .tkc-sbtn:focus-visible,.tkc .tkc-vbtn:focus-visible{outline:2px solid var(--sk-amber);outline-offset:2px}

/* ---------- results ---------- */
.tkc-main{padding-top:10px;padding-bottom:56px}
.tkc-afrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px}
.tkc-afrow[hidden]{display:none}
.tkc-count{font-size:13px;color:var(--sk-ink-soft);white-space:nowrap;margin-inline-end:4px}
.tkc-count b{font-weight:800;color:var(--sk-ink)}
.tkc-afbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tkc-afbar.is-empty,.tkc-afbar .lead{display:none}
.tkc-afbar .sk-mkt-afchip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--sk-line-strong);background:var(--sk-surface);color:var(--sk-ink);font:inherit;font-size:12.5px;cursor:pointer}
.tkc-afbar .sk-mkt-afchip b{font-weight:600;color:var(--sk-ink-soft)}
.tkc-afbar .sk-mkt-afchip .x{font-size:16px;line-height:1;opacity:.5}
.tkc-afbar .sk-mkt-afchip:hover{border-color:var(--sk-ink)}
.tkc-afbar .sk-mkt-afchip:hover .x{opacity:1}
.tkc .tkc-clearall{border:0;background:none;padding:4px;color:var(--sk-ink-soft);font:inherit;font-size:12.5px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}

.tkc #marketItems{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch}
.tkc #marketItems.is-list{grid-template-columns:minmax(0,1fr);gap:12px}
.tkc #marketItems.sk-mkt-loading{opacity:.55;transition:opacity .15s}
.tkc #marketItems > .sk-mkt-devnote{grid-column:1/-1}
.tkc .mls-empty{margin:0 0 16px}
.tkc .tkc-more{display:flex;align-items:center;margin:30px auto 0;height:46px;padding:0 26px;border-radius:12px;border:1.5px solid var(--sk-line-strong);background:var(--sk-surface);color:var(--sk-ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.tkc .tkc-more:hover{border-color:var(--sk-ink)}
.tkc .tkc-more.hide{display:none}

/* dynamic row alignment: every card spans four rows of the grid (cover, title, facts, footer) and the
   rows are shared by the cards of one grid row. A two-line title only makes *its own row's* title band taller, so
   cards stay aligned with their neighbours and rows of short titles keep the designer right under the title.
   The footer works the same way: only a row that has a discounted card reserves the old-price line.
   Browsers without subgrid keep the fixed two-line title and fixed footer from market-cards-v2.css. */
@supports (grid-template-rows: subgrid){
  .tkc #marketItems:not(.is-list){row-gap:0}
  .tkc #marketItems:not(.is-list) > .sk-mkt-card.mkc2:not(.mls-hidden):not(.mls-lazy){display:grid!important;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;margin-bottom:12px}
  .tkc #marketItems:not(.is-list) > .sk-mkt-card.mkc2 .mkc2-body{display:contents}
  .tkc #marketItems:not(.is-list) > .sk-mkt-card.mkc2 .mkc2-head{padding:14px 16px 0}
  .tkc #marketItems:not(.is-list) > .sk-mkt-card.mkc2 .mkc2-head h3{min-height:0}
  /* same vertical scale as market-cards-v2.css: title → facts 14px, facts → divider 14px */
  .tkc #marketItems:not(.is-list) > .sk-mkt-card.mkc2 .mkc2-meta{padding:14px 16px 0}
  .tkc #marketItems:not(.is-list) > .sk-mkt-card.mkc2 .mkc2-foot{margin:14px 16px 0;padding:12px 0 14px}
  /* the old-price row is reserved only in rows that contain a discounted card */
  .tkc #marketItems:not(.is-list) > .sk-mkt-card.mkc2 .mkc2-was:empty{display:none}
}

/* focus row removed: card covers always keep their real colours (no scroll-driven desaturation) */
/* ---------- quick view: moved to market-quickview.css (shared with the package page) ---------- */

@keyframes tkc-swap{from{opacity:.35}to{opacity:1}}
.tkc #marketItems.tkc-swap{animation:tkc-swap .24s ease}

/* ---------- filter drawer (desktop: from the right / RTL start) ---------- */
.tkc-scrim{position:fixed;inset:0;z-index:2000;background:rgba(15,16,19,.44);opacity:0;transition:opacity .24s ease}
.tkc-scrim.is-on{opacity:1}
.tkc-scrim[hidden]{display:none}
.tkc-drawer{position:fixed;z-index:2001;top:0;bottom:0;inset-inline-start:0;inset-inline-end:auto;width:min(420px,92vw);
  display:flex;flex-direction:column;background:var(--sk-surface);color:var(--sk-ink);
  box-shadow:0 0 0 1px var(--sk-line),-30px 0 70px -40px rgba(0,0,0,.55);
  transform:translateX(104%);visibility:hidden;
  transition:transform .3s cubic-bezier(.22,.61,.2,1),visibility 0s linear .3s}
[dir="ltr"] .tkc-drawer{transform:translateX(-104%)}
.tkc-drawer.is-open{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.22,.61,.2,1),visibility 0s}
.tkc-drawer-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 14px;border-bottom:1px solid var(--sk-line)}
.tkc-drawer-h h2{margin:0;font-family:'TKTitlePinar','Pinar','Vazirmatn',Tahoma,sans-serif;font-size:20px;font-weight:800;color:var(--sk-ink)}
.tkc-t-m{display:none}
.tkc .tkc-x{flex:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--sk-line-strong);background:var(--sk-surface);color:var(--sk-ink);display:grid;place-items:center;cursor:pointer}
.tkc .tkc-x svg{width:18px;height:18px}
.tkc-drawer-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 20px 24px}
.tkc-drawer-f{display:flex;gap:10px;padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--sk-line);background:var(--sk-surface)}
.tkc .tkc-apply{flex:1;height:48px;border:0;border-radius:12px;background:var(--sk-amber);color:#181a1d;font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.tkc .tkc-apply b{font-weight:900}
.tkc .tkc-clear{flex:none;height:48px;padding:0 18px;border-radius:12px;border:1.5px solid var(--sk-line-strong);background:var(--sk-surface);color:var(--sk-ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.tkc .tkc-clear[hidden]{display:none}
.tkc .tkc-x:focus-visible,.tkc .tkc-apply:focus-visible,.tkc .tkc-clear:focus-visible{outline:2px solid var(--sk-amber);outline-offset:2px}

/* the shared filter form keeps its own controls; only the sidebar chrome is removed inside the drawer */
.tkc-drawer .sk-mkt-panel{position:static;top:auto;max-height:none;overflow:visible;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.tkc-drawer .sk-mkt-panel-h,.tkc-drawer .sk-mkt-fbtns{display:none}
.tkc-drawer .sk-mkt-fgroup:first-of-type{border-top:0}
.tkc-msort{display:none;padding:14px 0 16px;border-bottom:1px solid var(--sk-line)}
.tkc-msort .t{font-size:14px;font-weight:700;color:var(--sk-ink);margin-bottom:10px}
.tkc-msort-set{display:flex;flex-wrap:wrap;gap:6px}
.tkc-msort-set .tkc-sbtn{border:1px solid var(--sk-line-strong);background:var(--sk-surface)}
.tkc-msort-set .tkc-sbtn.active{border-color:var(--sk-ink-soft);background:var(--sk-surface-2);color:var(--sk-ink);font-weight:800}

html.tkc-lock{overflow:hidden;scrollbar-gutter:stable}

/* ---------- responsive ---------- */
@media (max-width:1180px){ .tkc #marketItems:not(.is-list){grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){
  .tkc #marketItems:not(.is-list){grid-template-columns:repeat(2,minmax(0,1fr))}
  .tkc-view{display:none}
}
@media (max-width:720px){
  .tkc-bar{margin-top:10px}
  .tkc-bar-in{gap:8px;padding:6px}
  .tkc-search{order:-1}
  .tkc-sort{display:none}
  .tkc .tkc-fbtn{padding:0 12px}
  .tkc #marketItems:not(.is-list){grid-template-columns:minmax(0,1fr);gap:12px}
  .tkc-drawer{top:auto;bottom:0;inset-inline:0;width:auto;max-height:88vh;max-height:88dvh;border-radius:22px 22px 0 0;transform:translateY(104%)}
  [dir="ltr"] .tkc-drawer{transform:translateY(104%)}
  .tkc-drawer.is-open{transform:none}
  .tkc-drawer-h{padding-top:20px;position:relative}
  .tkc-drawer-h::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--sk-line-strong)}
  .tkc-t-d{display:none}.tkc-t-m{display:inline}
  .tkc-msort{display:block}
}

@media (prefers-reduced-motion:reduce){
  .tkc-drawer,.tkc-scrim,.tkc-bar{transition:none}
  .tkc #marketItems.tkc-swap{animation:none}
  .tkc #marketItems > .sk-mkt-card.tkc-rv{opacity:1;transform:none}
}