/* SS UX NovaBar 5.x — compact & unified (UI only; logic untouched) */
:root{
  --ss-gap:8px;
  --ss-br:rgba(0,0,0,.10);
  --ss-r:12px;
  --ss-ink:#0b1217;
  --ss-bg:#fff;
}

/* ====== Stack ====== */
.ssux-stack{ display:grid; gap:6px; margin:4px 0 6px; }
.ssux-stack > *{ width:100%; }

/* ====== NovaBar (górny pasek) ====== */
#ssux-novabar{
  margin:0;
  padding:4px;
  border:1px solid var(--ss-br);
  border-radius:12px;
  background:var(--ss-bg);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
#ssux-novabar .nv-row{
  display:grid;
  grid-template-columns:minmax(280px,1fr) auto;
  gap:6px;
  align-items:center;
}
#ssux-novabar .nv-q{
  height:32px;
  padding:0 10px;
  border:1px solid var(--ss-br);
  border-radius:9px;
  font-size:13px;
  min-width:0;
}
#ssux-novabar .nv-btns{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
#ssux-novabar .nv-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:30px; padding:0 8px;
  border:1px solid var(--ss-br);
  border-radius:999px; background:#fff;
  font-size:12px; line-height:28px; white-space:nowrap;
}
#ssux-novabar .nv-chips{ display:flex; gap:6px; flex-wrap:wrap; padding-top:4px; }
#ssux-novabar .chip{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid var(--ss-br);
  border-radius:999px; padding:2px 6px; font-size:11px;
}
#ssux-novabar .chip i{ cursor:pointer; opacity:.6; }

/* responsywność */
@media(min-width:900px){
  #ssux-novabar .nv-row{ grid-template-columns:minmax(360px,1fr) auto; }
  #ssux-novabar .nv-btns{ flex-wrap:nowrap; }
}
@media(max-width:768px){
  #ssux-novabar .nv-row{ grid-template-columns:1fr; gap:6px; }
  #ssux-novabar .nv-btns{ justify-content:space-between; gap:4px; }
}

/* schowaj pole radius w pasku */
#ssux-novabar input[name="radius"]{ display:none !important; }

/* ====== Underbar (rzęd przycisków pod paskiem) ====== */
#ssux-underbar-native{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.4rem;
  margin-top:.35rem;
}
@media (max-width:1024px){
  #ssux-underbar-native{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:768px){
  #ssux-underbar-native{
    display:flex; flex-wrap:nowrap; overflow-x:auto; gap:.5rem;
    -webkit-overflow-scrolling:touch; scrollbar-width:thin;
    padding-bottom:.2rem;
  }
  #ssux-underbar-native > *{ flex:0 0 auto; min-width:auto; }
  #ssux-underbar-native::-webkit-scrollbar{ height:6px; }
  #ssux-underbar-native::-webkit-scrollbar-thumb{ border-radius:999px; }
}
/* gradientowe podpowiedzi przewijania (gdy overflow) */
#ssux-underbar-native.ssux-scrollbar{ position:relative; }
#ssux-underbar-native.ssux-scrollbar:before,
#ssux-underbar-native.ssux-scrollbar:after{
  content:""; position:absolute; top:0; bottom:0; width:16px; pointer-events:none;
}
#ssux-underbar-native.ssux-scrollbar:before{
  left:0; background:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}
#ssux-underbar-native.ssux-scrollbar:after{
  right:0; background:linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* ====== Modal „sheet” (panel filtrów) ====== */
.nv-sheet{ position:fixed; inset:0; background:rgba(0,0,0,.25); display:flex; align-items:flex-end; z-index:9999; }
.nv-box{
  width:100%; max-width:520px; margin:0 auto; background:#fff;
  border-top-left-radius:14px; border-top-right-radius:14px;
  padding:12px; box-shadow:0 -16px 40px rgba(0,0,0,.18);
}
@media(min-width:900px){ .nv-sheet{ align-items:flex-start; } .nv-box{ margin-top:12vh; border-radius:12px; } }

/* kiedy nasz modal otwarty – wyłącz ewentualne nakładki motywu */
body.ssux-modal-open :where(.nv-sheet,.nv-popover,.nv-modal,.nv-tooltip){ display:none !important; }
body.ssux-modal-open :where(.radius,.distance,[class*="radius"],[class*="distance"],[id*="radius"],[id*="distance"],.pac-container,#topcontrol){ display:none !important; }

/* layout pól w sheet */
.nv-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:10px; }
.nv-input,.nv-select{ width:100%; height:34px; border:1px solid var(--ss-br); border-radius:10px; padding:0 10px; }
.nv-list{ display:flex; flex-direction:column; gap:6px; }
.nv-list button{
  display:block; width:100%; text-align:left; padding:8px 10px;
  border:1px solid var(--ss-br); background:#fff; border-radius:10px; font-size:13px;
}
.nv-check{ display:flex; align-items:center; gap:8px; font-size:13px; }

/* „SSUX sheet” – spójne style formularzy */
.ssux-sheet{ background:#fff; color:#111827; }
.ssux-sheet .sheet-inner{ max-width:900px; padding:1rem 1.2rem 1.1rem; }
.ssux-sheet .grid-auto{ display:grid; grid-template-columns:1fr; gap:.8rem; }
@media (min-width:640px){ .ssux-sheet .grid-auto{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .ssux-sheet .grid-auto{ grid-template-columns:1fr 1fr 1fr; } }
#ssux-sheet-actions{ position:sticky; bottom:0; background:#fff; padding:.65rem 0 0; box-shadow: 0 -8px 20px rgba(0,0,0,.04); }
.ssux-row{ display:flex; gap:.5rem; }
.ssux-field{ margin:.6rem 0; }
.ssux-check{ display:flex; align-items:center; gap:.5rem; }
.ssux-sheet h2{ font-size:1.18rem; line-height:1.3; font-weight:700; margin:0 0 .75rem; letter-spacing:.2px; }
.ssux-sheet label{ font-size:.95rem; color:#111827; font-weight:600; margin-bottom:.25rem; display:block; }
.ssux-sheet .hint{ font-size:.85rem; color:#6b7280; }
.ssux-sheet input[type="text"],
.ssux-sheet input[type="search"],
.ssux-sheet input[type="number"],
.ssux-sheet select{
  display:block; width:100%; height:40px; padding:.5rem .75rem;
  border:1px solid #e5e7eb; border-radius:12px; background:#fff; color:#111827;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ssux-sheet input::placeholder{ color:#9ca3af; }
.ssux-sheet input:focus, .ssux-sheet select:focus{
  outline:0; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
/* price min/max obok siebie na md+ */
#ssux-price-block .ssux-row{ display:flex; gap:.6rem; }
@media (max-width:640px){ #ssux-price-block .ssux-row{ flex-direction:column; } }
#ssux-price-block label{ margin-bottom:.35rem; }
#ssux-price-block .ssux-row input{ height:40px; border-radius:12px; }
/* checki inline */
.ssux-sheet .check-inline{ display:flex; align-items:center; gap:.55rem; margin:.35rem 0; }
.ssux-sheet .check-inline input[type="checkbox"]{ width:18px; height:18px; accent-color:#2563eb; }
/* actions */
#ssux-sheet-actions .row{ display:flex; gap:.8rem; }
#ssux-apply.nv-btn{
  background:#111827; color:#fff; border:1px solid #111827;
  border-radius:12px; min-height:38px; font-weight:600; min-width:140px;
}
#ssux-cancel.nv-btn{
  background:#fff; color:#111827; border:1px solid #e5e7eb;
  border-radius:12px; min-height:38px; min-width:120px;
}
#ssux-clear, .ssux-sheet .link-clear{
  display:inline-flex; align-items:center; gap:.4rem;
  border:0; background:transparent; color:#111827;
  font-weight:600; padding:.4rem .2rem; border-radius:8px;
}
#ssux-clear:hover{ text-decoration:underline; }
@media (max-width:640px){
  #ssux-sheet-actions .row{ flex-direction:column; }
  #ssux-apply.nv-btn, #ssux-cancel.nv-btn{ width:100%; }
}

/* ====== „Ostatnio oglądane / kategorie” – półki ====== */
.ssux-recent-shelf,.ssux-recent-ads{
  position:relative; padding:4px 28px; border:1px solid var(--ss-br);
  border-radius:12px; background:#fff; margin:0;
}
.ssux-chip-row,.ssux-ads-track{
  display:flex; gap:8px; overflow:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.ssux-chip-row::-webkit-scrollbar,.ssux-ads-track::-webkit-scrollbar{ display:none; }
.ssux-chip{
  display:inline-flex; align-items:center; padding:6px 10px;
  border:1px solid var(--ss-br); border-radius:999px; background:#fff;
  font-size:12px; white-space:nowrap;
}
.ssux-ad{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px;
  border:1px solid var(--ss-br); border-radius:10px; background:#fff;
  text-decoration:none; font-size:12px; color:inherit;
}
.ssux-ad img{ width:40px; height:40px; object-fit:cover; border-radius:8px; display:block; }

/* strzałki przewijania półek */
.ssux-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:999px;
  border:1px solid var(--ss-br); background:#fff; opacity:.9; color:#444;
}
.ssux-nav::before{ content:'‹'; display:block; line-height:24px; text-align:center; font-size:16px; }
.ssux-next::before{ content:'›'; }
.ssux-prev{ left:2px; } .ssux-next{ right:2px; }

/* drobne wyrównanie */
#ssux-underbar-native .nv-btn{ min-height:32px; padding:.35rem .6rem; }
