/* ============================================================================
   TestKav · فهرست طراحان آزمون و فهرست آموزشگاه‌ها — روی پوستهٔ صفحهٔ فهرست آزمون‌های یک دسته
   (market-category-v2.css + market-category-v3.css). فقط تفاوت‌های این دو صفحه این‌جاست؛ همه‌چیز زیر .tkp محدود شده است.
   ============================================================================ */

/* ---------- top: breadcrumb, then the invitation box, then the toolbar (12px between each) ---------- */
.tkp .tk3-intro{overflow:visible}                                   /* the box's soft shadow must not be clipped */
.sk-mkt-body .tkp .provider-cta{margin:12px 0 0;border-radius:8px}  /* same corners as the toolbar and the cards */
/* below 900px the shared styles make the button full width but only stack the box below 760px, so between the two
   the text was squeezed to one word per line beside a full-width button; the box stacks at 900px here */
@media (max-width:900px){
  .sk-mkt-body .tkp .provider-cta{flex-direction:column;align-items:stretch;gap:14px}
  .sk-mkt-body .tkp .provider-cta .sk-btn.sk-btn--primary{width:100%}
}

/* ---------- toolbar: one row with the search box on desktop ----------
   Designers offer six sorts, institutes four. Below 1180px the sort group drops to a second row of the same panel
   (filter button, search and view toggle stay on the first) and scrolls sideways if it must. */
.tkp .tkc-search{flex:1 1 200px;min-width:170px}
.tkp .tkc-sort{flex:0 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tkp .tkc-sort::-webkit-scrollbar{display:none}
.tkp .tkc-sort .tkc-sbtn{flex:none}
@media (max-width:1179px){
  .tkp .tkc-bar-in{flex-wrap:wrap}
  .tkp .tkc-sort{order:3;flex:1 1 100%;justify-content:flex-start}
}

/* ---------- side column: one category list under a small header (the exam page has tabs here) ---------- */
.tkp .tk3-head{display:flex;align-items:center;height:46px;padding:0 14px;border-radius:8px;background:var(--sk-surface-2);color:var(--sk-ink);font-size:13px;font-weight:800}
.tkp .tkc-drawer .tk3-head{height:40px;padding:0 12px}
/* the category boxes stay in the form (the side column flips them) but are never drawn in the drawer */
.tkp .tkc-drawer [data-fg="category"]{display:none}

/* ---------- drawer: facet counts (certificates) ---------- */
.tkp .sk-mkt-fcheck .cnt{margin-inline-start:auto;font-size:10.5px;font-weight:800;background:rgba(245,190,47,.16);color:var(--sk-amber-deep,#9a6700);border-radius:999px;padding:2px 8px;line-height:1.6;flex-shrink:0}

/* ---------- cards: the same 8px corners as the exam cards; the grid itself comes from market-category-v3.css ---------- */
.sk-mkt-body .tkp .sk-mkt-provcard{border-radius:8px}
.sk-mkt-body .tkp .sk-mkt-provgrid.is-list .sk-mkt-provcard{border-radius:8px}
.sk-mkt-body .tkp .sk-mkt-provgrid--institute.is-list .pc-av svg{width:34px;height:34px;padding:0}   /* box-sizing is border-box site-wide: 22px with 9px padding left a 4px drawing */
.tkp #marketItems > .sk-mkt-empty{grid-column:1/-1}
/* grid view: the exam page zeroes the grid's row gap because its cards are subgrids that carry their own bottom
   margin; provider cards are plain flex boxes, so the 12px row gap has to come back here */
.tkp #marketItems:not(.is-list){row-gap:12px}
/* list view: the category chips wrap onto extra lines instead of being clipped, so every category stays readable */
.sk-mkt-body .tkp .sk-mkt-provgrid.is-list .pc-tags{flex-wrap:wrap;overflow:visible;row-gap:6px}

/* designer card without a photo: the base styles paint the placeholder icon white on no background, so the circle
   was simply empty; it gets the same quiet treatment as the institute placeholder (soft disc, muted icon) */
.sk-mkt-body .tkp .sk-mkt-provgrid--designer .pc-av{background:var(--sk-surface-2);border:1px solid var(--sk-line)}
.sk-mkt-body .tkp .sk-mkt-provgrid--designer .pc-av svg{width:24px;height:24px;color:var(--sk-ink-soft)}
[data-theme="dark"] .sk-mkt-body .tkp .sk-mkt-provgrid--designer .pc-av{border-color:rgba(255,255,255,.14)}

/* institute card: «حوزهٔ فعالیت» is a multi-line field in the profile; its lines (up to three) are stacked
   one under the other, plain — no bullets, no indent */
.tkp .sk-mkt-provcard .pc-fields{display:flex;flex-direction:column;gap:1px;white-space:normal;overflow:visible;line-height:1.55}
.tkp .sk-mkt-provcard .pc-fields span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ---------- phones and small tablets: the list row stacks ----------
   marketplace-polish.css lays the list row out as three columns ("id | tags | stats") with a 240px first column and only
   switches to one column below 900px with a 4-class selector; on these two pages the desktop rule also carries the
   5-class .sk-mkt-provider-layout selector, so it kept winning on phones and the stats column was pushed out of the
   card (ch-066). Here, with the page scope added, the row becomes a single column: avatar + name, the category chips,
   then the numbers on their own line under a hairline. */
@media (max-width:900px){
  .sk-mkt-body .tkp .sk-mkt-provider-layout .sk-mkt-provgrid.is-list .sk-mkt-provcard{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:14px 16px;min-height:0}
  .sk-mkt-body .tkp .sk-mkt-provgrid.is-list .pc-top{min-width:0;width:100%}
  .sk-mkt-body .tkp .sk-mkt-provgrid.is-list .pc-id{min-width:0;flex:1 1 auto}
  .sk-mkt-body .tkp .sk-mkt-provgrid.is-list .pc-tags{margin:0;flex-wrap:wrap;overflow:visible;row-gap:6px}
  .sk-mkt-body .tkp .sk-mkt-provgrid.is-list .pc-bio{margin:0}
  .sk-mkt-body .tkp .sk-mkt-provgrid.is-list .pc-stats{margin:0;padding:10px 0 0;border:0;border-top:1px solid var(--sk-line,#ececec);flex-wrap:wrap;white-space:normal;gap:6px 14px;max-width:100%}
  .sk-mkt-body .tkp .sk-mkt-provgrid.is-list .pc-stats .pc-m{white-space:nowrap;max-width:100%}
}