/*
 * Starosta Filters у вигляді теми Rukola (05.10.2026).
 *
 * Вигляд той самий, що був на Filter Everything: заголовки секцій 10,5px
 * uppercase, квадратні чекбокси з SVG-галочкою, рядки 38px у шторці, чипси з
 * тонкою рамкою, нульові скруглення, без тіней. Плагін задає вигляд змінними
 * --stf-*; що змінними не передати — перебиваємо класами нижче (файл іде після
 * stf.css завдяки залежності в inc/filters.php).
 *
 * Шаблони кнопки, сортування, низу сітки й порожнього стану — у
 * starosta-filters/*.php теми; тут лише їхня підгонка.
 */

:root{
  --stf-accent:var(--ink);
  --stf-accent-text:var(--paper);
  --stf-ink:var(--ink);
  --stf-muted:var(--muted);
  --stf-line:var(--hair);
  --stf-line-strong:var(--hair);
  --stf-bg:var(--paper);
  --stf-soft:var(--wash);
  --stf-radius:0px;
  --stf-radius-s:0px;
  --stf-font:var(--ui);
  --stf-size:13.5px;
  --stf-size-s:12px;
  --stf-control:46px;
  --stf-row:30px;
  --stf-focus:0 0 0 2px var(--herb);
  --stf-drawer-top:0px;
  --stf-scroll-offset:0px;
}
/* Після фільтра плагін прокручує до результатів з відступом на липке зверху:
   на телефоні це наша шапка (54px) + повітря. */
@media (max-width:760px){
  :root{--stf-scroll-offset:66px}
}

/* ---------- панель (ПК — колонка сайдбара) ---------- */
.stf-panel{font-size:13.5px;line-height:1.35}
.stf-filter{padding:14px 0;border-bottom:1px solid var(--hair)}
.stf-filter:first-child{padding-top:14px}
.stf-filter__toggle{min-height:24px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.stf-filter__toggle .stf-chevron{width:12px;height:12px;color:var(--muted)}
/* Лічильник обраних у заголовку секції — зайва цифра (обране видно чипсами й галочками). */
.stf-filter__badge{display:none}
.stf-filter__body{padding-top:9px}

.stf-values{gap:0}
.stf-value{gap:9px;min-height:30px;padding:0}
.stf-value__name{flex:0 1 auto;font-size:13.5px;line-height:1.35}
.stf-value:hover .stf-value__name{color:var(--herb)}
.stf-value.is-selected .stf-value__name{font-weight:400}
/* «· 19» одразу за назвою, як раніше, а не притиснуто до правого краю. */
.stf-value__count{font-size:12px;color:var(--muted)}
.stf-value__count::before{content:"·";margin-right:6px}
.stf-value.is-empty{opacity:.4}

.stf-box{width:15px;height:15px;border:1px solid var(--hair);border-radius:0;background:var(--paper)}
.stf-value.is-selected .stf-box{
  background:var(--ink) center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3.1 3.1 6.5-7' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E");
  border-color:var(--ink)
}

.stf-more{
  margin-top:8px;min-height:24px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-decoration:underline dashed;text-underline-offset:4px
}
.stf-more:hover{color:var(--herb)}

/* ---------- кнопка «Фільтри» (≤1080) ---------- */
.stf-open.rk-filters-btn{
  display:none;width:auto;min-height:44px;padding:0;gap:9px;border:0;background:transparent;color:var(--ink);
  font:500 10.5px/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:pointer
}
.stf-open.rk-filters-btn svg{width:18px;height:18px;stroke-width:1.5}
.stf-open.rk-filters-btn:hover{color:var(--herb)}
.stf-open.rk-filters-btn:focus-visible{outline:2px solid var(--herb);outline-offset:2px;box-shadow:none}
/* stf.js дописує лічильник обраного — у темі цифр на кнопці немає. */
.stf-open__badge{display:none !important}

/* ---------- чипси обраного ---------- */
.stf-chips{margin:0 0 16px}
.stf-chips__list{gap:8px}
.stf-chip{
  min-height:32px;padding:0 11px;gap:9px;border:1px solid var(--hair);border-radius:0;background:transparent;color:var(--ink);
  font:600 10.5px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;transition:border-color .15s,color .15s
}
.stf-chip:hover{border-color:var(--ink)}
.stf-chip svg{width:11px;height:11px;stroke-width:2;color:var(--muted);opacity:1}
.stf-chip:hover svg{color:var(--ink)}
.stf-chip--reset{border-color:transparent;padding:0;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.stf-chip--reset:hover{border-color:transparent;color:var(--herb)}
.stf-chip:focus-visible{outline:2px solid var(--herb);outline-offset:2px;box-shadow:none}

/* ---------- низ сітки (starosta-filters/footer.php) ---------- */
.stf-footer{display:block;margin:0;font:inherit}
.stf-footer .loadmore{margin-top:34px}
.stf-load-more.is-loading{opacity:.6;pointer-events:none}

/* ---------- шторка (≤1080) ----------
   CSS плагіна вмикає шторку з 1023px, а точка зламу теми — 1080. Між ними
   повторюємо його правила, інакше на 1024–1080 панель стояла б колонкою над
   сіткою. Плюс наша мова: без скруглень і тіні, кнопки прямокутні. */
@media (max-width:1080px){
  .stf-open.rk-filters-btn{display:inline-flex}
  .stf-panel{
    position:fixed;z-index:100000;left:0;right:0;bottom:0;top:var(--stf-drawer-top);
    display:flex;flex-direction:column;background:var(--paper);border-radius:0;box-shadow:none;
    transform:translateY(105%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s
  }
  .stf-panel.is-open{transform:none;visibility:visible;transition:transform .25s ease}
  .stf-panel__head{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:6px 8px 6px var(--pad);border-bottom:1px solid var(--hair);flex:none
  }
  .stf-panel__title{font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
  .stf-icon-btn{border-radius:0}
  .stf-icon-btn svg{width:20px;height:20px;stroke-width:1.5}
  .stf-panel__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px var(--pad) 20px;-webkit-overflow-scrolling:touch}
  .stf-panel__foot{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;
    padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--hair);flex:none;background:var(--paper)
  }
  .stf-panel__foot .stf-btn{
    min-height:46px;padding:0 12px;border:1px solid var(--ink);border-radius:0;
    font:600 10.5px/1.2 var(--ui);letter-spacing:.16em;text-transform:uppercase
  }
  .stf-panel__foot .stf-btn--ghost{background:transparent;color:var(--ink)}
  .stf-panel__foot .stf-btn--primary{background:var(--ink);color:var(--paper)}
  /* Рядок натискається на всю ширину — 38px вистачає (рішення 23.09). */
  .stf-value{min-height:38px}
  .stf-filter__toggle{min-height:44px}
  .stf-more{min-height:44px}
  .stf-overlay{position:fixed;inset:0;z-index:99999;background:rgba(14,14,12,.45);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s linear .25s}
  .stf-drawer-open .stf-overlay{opacity:1;visibility:visible;transition:opacity .25s}
  .stf-drawer-open,.stf-drawer-open body{overflow:hidden}
  .stf-chip{min-height:40px}
}
/* Планшет (600–1080): шторка — бокова панель праворуч, як у плагіні з 05.10,
   але в нашій мові (без скруглень і тіні) і до нашої точки зламу 1080. */
@media (min-width:600px) and (max-width:1080px){
  .stf-panel{left:auto;right:0;top:0;width:420px;border-radius:0;transform:translateX(105%)}
  .stf-panel.is-open{transform:none}
}
@media (max-width:1080px) and (prefers-reduced-motion:reduce){
  .stf-panel,.stf-overlay{transition:none !important}
}