/* Velveflix — Discover / Provider filterbar (S2). Scoped under .vf-scope.
   База (.vf-grid/.vf-card/.vf-btn/.vf-container/.vf-hero) — в vf-components.css.
   Здесь только фасеты/чипы/sheet/пагинация. */

.vf-scope .vf-page-head{margin:var(--vf-space-6) 0 var(--vf-space-4)}
.vf-scope .vf-page-head h1{font-size:var(--vf-fs-display);font-weight:var(--vf-fw-extrabold);letter-spacing:var(--vf-ls-tight)}
.vf-scope .vf-page-head p{color:var(--vf-text-muted);margin-top:var(--vf-space-2)}

/* sticky-offset = высота прод-навбара (#header.vf-nav-scope .vf-nav min-height:64px),
   иначе липкий фильтр-бар уезжает под навбар (оба sticky top:0, навбар z-index:100 перекрывает). */
.vf-scope .vf-filterbar{position:sticky;top:64px;z-index:90;background:var(--vf-bg);padding:var(--vf-space-4) 0;border-bottom:1px solid var(--vf-line)}
.vf-scope .vf-filterbar__row{display:flex;align-items:center;gap:var(--vf-space-3);flex-wrap:wrap}

.vf-scope .vf-facet{position:relative}
.vf-scope .vf-facet__btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:var(--vf-radius-pill);background:var(--vf-surface-2);border:1px solid var(--vf-line);color:var(--vf-text-2);font-size:var(--vf-fs-sm);font-weight:var(--vf-fw-medium);cursor:pointer}
.vf-scope .vf-facet__btn:hover{border-color:var(--vf-line-strong);color:var(--vf-text)}
.vf-scope .vf-facet__btn.has-active{border-color:var(--vf-accent);color:var(--vf-text);background:var(--vf-accent-soft)}
.vf-scope .vf-facet__btn .vf-count{background:var(--vf-accent);color:var(--vf-text-on-accent);border-radius:var(--vf-radius-pill);font-size:11px;padding:1px 7px;font-weight:700}
.vf-scope .vf-facet__btn .vf-count[hidden]{display:none}
.vf-scope .vf-facet__btn svg{transition:transform var(--vf-dur-fast)}
.vf-scope .vf-facet.is-open .vf-facet__btn svg{transform:rotate(180deg)}
.vf-scope .vf-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:var(--vf-z-dropdown);min-width:240px;max-width:340px;background:var(--vf-surface-2);border:1px solid var(--vf-line-strong);border-radius:var(--vf-radius-md);box-shadow:var(--vf-shadow-3);padding:var(--vf-space-3);display:none}
.vf-scope .vf-facet.is-open .vf-pop{display:block}
.vf-scope .vf-pop__list{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow:auto}
.vf-scope .vf-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--vf-radius-sm);min-height:40px;cursor:pointer}
.vf-scope .vf-opt:hover{background:var(--vf-surface-3)}
.vf-scope .vf-opt input{accent-color:var(--vf-accent);width:18px;height:18px}
.vf-scope .vf-opt img{width:24px;height:24px;border-radius:5px;background:#fff;object-fit:contain;padding:1px}
.vf-scope .vf-opt .vf-opt__count{margin-left:auto;color:var(--vf-text-muted);font-size:var(--vf-fs-xs)}
.vf-scope .vf-pop input[type=range]{width:100%}

/* My Services toggle (chip + Edit). CLS-safe: фикс. высота 40px как у фасетов. */
.vf-scope .vf-mysvc{display:inline-flex;align-items:center;gap:6px;min-height:40px}
.vf-scope .vf-mysvc__toggle{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 12px;border-radius:var(--vf-radius-pill);background:var(--vf-surface-2);border:1px solid var(--vf-line);color:var(--vf-text-2);font-size:var(--vf-fs-sm);font-weight:var(--vf-fw-semibold);cursor:pointer}
.vf-scope .vf-mysvc__toggle:hover{border-color:var(--vf-line-strong);color:var(--vf-text)}
.vf-scope .vf-mysvc__toggle.is-on{border-color:var(--vf-accent);color:var(--vf-text);background:var(--vf-accent-soft)}
.vf-scope .vf-mysvc__track{position:relative;width:34px;height:18px;border-radius:var(--vf-radius-pill);background:var(--vf-surface-4);border:1px solid var(--vf-line);flex:0 0 auto;transition:background var(--vf-dur-fast)}
.vf-scope .vf-mysvc__toggle.is-on .vf-mysvc__track{background:var(--vf-accent);border-color:var(--vf-accent)}
.vf-scope .vf-mysvc__knob{position:absolute;top:1px;left:1px;width:14px;height:14px;border-radius:var(--vf-radius-round);background:#fff;transition:transform var(--vf-dur-fast) var(--vf-ease-out)}
.vf-scope .vf-mysvc__toggle.is-on .vf-mysvc__knob{transform:translateX(16px)}
@media(prefers-reduced-motion:reduce){.vf-scope .vf-mysvc__knob,.vf-scope .vf-mysvc__track{transition:none}}
.vf-scope .vf-mysvc__edit{min-height:40px;padding:0 12px;border-radius:var(--vf-radius-pill);background:transparent;border:1px solid var(--vf-line);color:var(--vf-text-2);font-size:var(--vf-fs-sm);font-weight:var(--vf-fw-medium);cursor:pointer}
.vf-scope .vf-mysvc__edit:hover{border-color:var(--vf-line-strong);color:var(--vf-text)}

.vf-scope .vf-seg{display:inline-flex;background:var(--vf-surface-2);border:1px solid var(--vf-line);border-radius:var(--vf-radius-pill);padding:3px}
.vf-scope .vf-seg button{min-height:34px;padding:0 14px;border-radius:var(--vf-radius-pill);background:transparent;color:var(--vf-text-2);font-size:var(--vf-fs-sm);font-weight:var(--vf-fw-semibold);border:0;cursor:pointer}
.vf-scope .vf-seg button.is-on{background:var(--vf-accent);color:var(--vf-text-on-accent)}

.vf-scope .vf-sort{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--vf-text-muted);font-size:var(--vf-fs-sm)}
.vf-scope .vf-sort select{height:40px;background:var(--vf-surface-2);color:var(--vf-text);border:1px solid var(--vf-line);border-radius:var(--vf-radius-pill);padding:0 14px;font:inherit;font-size:var(--vf-fs-sm)}

.vf-scope .vf-chips{display:flex;flex-wrap:wrap;gap:var(--vf-space-2);margin-top:var(--vf-space-3);min-height:0}
.vf-scope .vf-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 8px 6px 12px;border-radius:var(--vf-radius-pill);background:var(--vf-accent-soft);border:1px solid var(--vf-accent);color:var(--vf-text);font-size:var(--vf-fs-sm)}
.vf-scope .vf-chip button{background:transparent;border:0;color:var(--vf-text-2);display:grid;place-items:center;width:20px;height:20px;border-radius:var(--vf-radius-round);cursor:pointer}
.vf-scope .vf-chip button:hover{background:var(--vf-surface-4);color:var(--vf-text)}
.vf-scope .vf-chip--reset{background:transparent;border-color:var(--vf-line);color:var(--vf-text-2);cursor:pointer}

.vf-scope .vf-results__count{color:var(--vf-text-muted);font-size:var(--vf-fs-sm);margin:var(--vf-space-5) 0 var(--vf-space-4)}
.vf-scope .vf-empty{text-align:center;padding:var(--vf-space-12) var(--vf-space-4);color:var(--vf-text-muted)}
.vf-scope .vf-empty b{display:block;color:var(--vf-text);font-size:var(--vf-fs-h3);margin-bottom:8px}

/* mobile sheet */
.vf-scope .vf-filters-mobile{display:none}
.vf-sheet{position:fixed;inset:0;z-index:var(--vf-z-modal);display:none}
.vf-sheet.is-open{display:block}
.vf-sheet__scrim{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.vf-sheet__panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;background:var(--vf-surface-1);border-radius:var(--vf-radius-lg) var(--vf-radius-lg) 0 0;padding:var(--vf-space-5);transform:translateY(100%);transition:transform var(--vf-dur-base) var(--vf-ease-out)}
.vf-sheet.is-open .vf-sheet__panel{transform:none}
@media(prefers-reduced-motion:reduce){.vf-sheet__panel{transition:none}}
.vf-sheet__grab{width:40px;height:4px;border-radius:var(--vf-radius-pill);background:var(--vf-line-strong);margin:0 auto var(--vf-space-4)}
.vf-sheet__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--vf-space-4)}
.vf-sheet__head h2{font-size:var(--vf-fs-h3);font-weight:var(--vf-fw-bold)}
.vf-sheet__head .vf-nav__icon{background:transparent;border:0;color:var(--vf-text);font-size:18px;cursor:pointer;width:40px;height:40px;border-radius:var(--vf-radius-round)}
.vf-sheet__sect{margin-bottom:var(--vf-space-5)}
.vf-sheet__sect>h3{font-size:var(--vf-fs-sm);text-transform:uppercase;letter-spacing:var(--vf-ls-caps);color:var(--vf-text-muted);margin-bottom:var(--vf-space-3)}
.vf-sheet__chips{display:flex;flex-wrap:wrap;gap:var(--vf-space-2)}
.vf-pick{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:var(--vf-radius-pill);background:var(--vf-surface-2);border:1px solid var(--vf-line);color:var(--vf-text-2);font-size:var(--vf-fs-sm);cursor:pointer}
.vf-pick img{width:22px;height:22px;border-radius:5px;background:#fff;object-fit:contain;padding:1px}
.vf-pick.is-on{background:var(--vf-accent-soft);border-color:var(--vf-accent);color:var(--vf-text)}
.vf-sheet__foot{position:sticky;bottom:0;background:var(--vf-surface-1);padding-top:var(--vf-space-3);display:flex;gap:var(--vf-space-3)}
.vf-sheet__foot .vf-btn{flex:1}

/* pagination */
.vf-scope .vf-pagination{display:flex;flex-wrap:wrap;gap:var(--vf-space-2);align-items:center;justify-content:center;margin:var(--vf-space-8) 0 var(--vf-space-6)}
.vf-scope .vf-page{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border-radius:var(--vf-radius-pill);background:var(--vf-surface-2);border:1px solid var(--vf-line);color:var(--vf-text-2);font-size:var(--vf-fs-sm);font-weight:var(--vf-fw-medium)}
.vf-scope .vf-page:hover{border-color:var(--vf-line-strong);color:var(--vf-text)}
.vf-scope .vf-page.is-on{background:var(--vf-accent);border-color:var(--vf-accent);color:var(--vf-text-on-accent)}
.vf-scope .vf-page-gap{color:var(--vf-text-muted);padding:0 4px}

/* provider hero */
.vf-scope .vf-provider-hero{background:var(--vf-surface-1);border-radius:var(--vf-radius-lg);min-height:200px;margin-top:var(--vf-space-6)}
.vf-scope .vf-provider-hero .vf-hero__eyebrow{display:inline-block;color:var(--vf-accent);font-size:var(--vf-fs-sm);font-weight:var(--vf-fw-semibold);text-transform:uppercase;letter-spacing:var(--vf-ls-caps);margin-bottom:var(--vf-space-2)}
.vf-scope .vf-provider-hero .vf-hero__title{font-size:var(--vf-fs-display);font-weight:var(--vf-fw-extrabold);letter-spacing:var(--vf-ls-tight)}
.vf-scope .vf-provider-hero .vf-hero__desc{color:var(--vf-text-muted);margin-top:var(--vf-space-3);max-width:60ch}

/* loading state */
.vf-scope #vf-results-wrap.is-loading{pointer-events:none}

/* AJAX skeleton (motion_spec: только transform/opacity, prefers-reduced-motion off) */
.vf-skel{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--vf-grid-gap)}
@media(min-width:480px){.vf-skel{grid-template-columns:repeat(4,1fr)}}
@media(min-width:768px){.vf-skel{grid-template-columns:repeat(5,1fr);gap:var(--vf-grid-gap-lg)}}
@media(min-width:1024px){.vf-skel{grid-template-columns:repeat(6,1fr)}}
@media(min-width:1280px){.vf-skel{grid-template-columns:repeat(7,1fr)}}
.vf-skel__card{display:flex;flex-direction:column;gap:8px}
.vf-skel__bar{position:relative;overflow:hidden;border-radius:var(--vf-radius-md);background:var(--vf-surface-2)}
.vf-skel__bar--poster{aspect-ratio:2/3}
.vf-skel__bar--line{height:12px;border-radius:var(--vf-radius-sm)}
.vf-skel__bar--line.s2{width:60%}
.vf-skel__bar::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--vf-surface-3),transparent);
  animation:vf-skel-shimmer 1.2s infinite}
@keyframes vf-skel-shimmer{100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){
  .vf-skel__bar::after{animation:none;transform:none;opacity:.4}
}

@media(max-width:779px){
  .vf-scope .vf-filterbar .vf-filterbar__row .vf-facet,
  .vf-scope .vf-filterbar .vf-sort{display:none}
  .vf-scope .vf-filters-mobile{display:flex;gap:var(--vf-space-3);align-items:center;width:100%}
  .vf-scope .vf-filters-mobile .vf-btn{flex:0 0 auto}
  .vf-scope .vf-filters-mobile .sort-m{margin-left:auto;display:flex}
  .vf-scope .vf-filterbar .vf-seg{order:-1}
  /* My Services остаётся видимым на мобайле (ключевая фича). Wrap на свою строку. */
  .vf-scope .vf-filterbar .vf-mysvc{order:-2;flex:1 1 100%}
  .vf-scope .vf-mysvc__toggle{flex:1 1 auto}
}