/* /public/styles/clips/clips-filters.css */

/* ───────── hamburger (mobile) ───────── */
.cf-hamburger{
  position: fixed;
  left: calc(12px + env(safe-area-inset-left, 0px));
  top:  calc(env(safe-area-inset-top, 0px) + 10px);

  /* ✅ ниже .cm-modal (20000), чтобы не мешал комментариям */
  z-index: 19000;

  width: 44px;
  height: 44px;
  border-radius: 14px;

  border: 1px solid color-mix(in oklab, #fff 18%, transparent);
  background: color-mix(in oklab, #000 38%, transparent);
  color: #fff;

  display: grid;
  place-items: center;

  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cf-hamburger svg{ width: 22px; height: 22px; }

/* ✅ когда панель фильтров открыта — гамбургер прячем, чтобы не перекрывал поиск */
body.clips-drawer-open .cf-hamburger{
  opacity: 0;
  pointer-events: none;
}

/* ✅ когда открыты комментарии — гамбургер фильтров прячем */
body.cm-open .cf-hamburger,
html.cm-open .cf-hamburger{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* при открытой панели — лочим прокрутку */
html.clips-drawer-open,
body.clips-drawer-open{ overflow: hidden !important; }

/* ───────── drawer overlay (mobile) ───────── */
.cf-modal{
  position: fixed;
  inset: 0;
  z-index: 2147482600;

  background: rgba(0,0,0,.82);
  backdrop-filter: blur(6px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}
.cf-modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cf-panel{
  width: min(86vw, 360px);
  height: 100%;
  background: #050713;
  color: #fff;

  display: flex;
  flex-direction: column;

  transform: translateX(-110%);
  transition: transform .22s ease;
}
.cf-modal.is-open .cf-panel{ transform: translateX(0); }

/* ✅ вкладки над поиском */
.cf-tabs{
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cf-tab{
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 950;
  font-size: 12px;
  cursor: pointer;
}
.cf-tab.is-active{
  background: rgba(255,255,255,.92);
  color: #000;
  border-color: transparent;
}

.cf-head{
  padding: 0 14px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.cf-search{
  flex: 1;
  height: 42px;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  padding: 0 12px;
  outline: none;
}

.cf-close{
  height: 42px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 900;
}

.cf-tags{
  flex: 1;
  overflow: auto;
  padding: 12px 14px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
}

.cf-tagbtn{
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, #fff 16%, transparent);
  background: color-mix(in oklab, #000 35%, transparent);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.cf-tagbtn.is-on{
  background: rgba(255,255,255,.92);
  color: #000;
  border-color: transparent;
}

.cf-foot{
  padding: 12px 14px calc(var(--mbh, 0px) + env(safe-area-inset-bottom, 0px) + 12px);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.cf-reset{
  height: 38px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 900;
}
.cf-reset[disabled]{ opacity: .45; }

/* ───────── desktop panel ───────── */
body.clips--desktop .cf-hamburger{ display:none; }
body.clips--desktop .cf-modal{ display:none !important; }

.clips-filters-panel{
  border: 1px solid color-mix(in oklab, var(--border, #fff) 10%, transparent);
  background: color-mix(in oklab, var(--surface, #000) 18%, transparent);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
  color: var(--text, #fff);
}

body.clips--desktop .clips-filters-panel .cf-tabs{ padding: 0 0 10px; }
body.clips--desktop .clips-filters-panel .cf-head{ padding: 0 0 10px; }
body.clips--desktop .clips-filters-panel .cf-close{ display:none; }
body.clips--desktop .clips-filters-panel .cf-tags{ padding: 10px 0 0; }
body.clips--desktop .clips-filters-panel .cf-foot{
  padding: 10px 0 0;
  border-top: 0;
}