.sw-icon-column { display:flex; flex-direction:column; gap:.55rem; align-items:center; }
.sw-icon-btn { background:none; border:none; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:.15rem; color:#e5e7eb; }
.sw-icon-circle {
  width:54px; height:54px; border-radius:50%;
  background: rgba(15, 23, 42, 0.86);
  border: 1.5px solid rgba(148, 163, 184, 0.7);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.75);
  transition: transform 0.36s ease, box-shadow 0.36s ease, border-color 0.36s ease, background 0.36s ease;
}
.sw-icon-circle i { font-size:22px; }
.sw-icon-label { font-size:.7rem; line-height:1; text-shadow:0 1px 2px rgba(0,0,0,.9); }
.sw-icon-btn:hover .sw-icon-circle { transform: translateY(-1px); box-shadow:0 5px 14px rgba(0,0,0,.85); }
.sw-icon-btn:active .sw-icon-circle { transform: scale(.96); box-shadow:0 2px 8px rgba(0,0,0,.9); }
.sw-icon-active .sw-icon-circle { background: rgba(37, 99, 235, 0.82); border-color:#60a5fa; box-shadow:0 0 14px rgba(56,189,248,.95); }
.sw-icon-active .sw-icon-label { color:#bfdbfe; font-weight:600; }

.sw-bottom-row {
  display:flex; gap:.35rem; padding:.2rem .6rem;
  background: rgba(15, 23, 42, 0.94);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,.85);
}
.sw-bottom-item { border:none; background:none; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:.12rem; min-width:54px; }
.sw-bottom-circle {
  width:40px; height:40px; border-radius:50%;
  background: rgba(15, 23, 42, 0.86);
  border: 1.5px solid rgba(148, 163, 184, 0.6);
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem;
  box-shadow:0 3px 10px rgba(0,0,0,.75);
}

/* SW_SUBCAT_ICON_CSS */
.sw-bottom-circle i{
  font-size: 18px;
  line-height: 1;
}
/* SW_SUBCAT_ICON_CSS:END */
.sw-bottom-label { font-size:.65rem; color:#e5e7eb; text-shadow:0 1px 2px rgba(0,0,0,.9); }
.sw-bottom-active .sw-bottom-circle { background: rgba(37, 99, 235, 0.82); border-color:#60a5fa; }
.sw-bottom-active .sw-bottom-label { color:#bfdbfe; font-weight:600; }

/* Floating subcategory dock (always above Sociowall, not coverable) */
.sw-subcats-float{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(14px + var(--sw-wall-overlap, 0px));
  z-index: 300;
  pointer-events: none;
}

.sw-subcats-float .sw-bottom-row{
  pointer-events: auto;
  max-width: min(980px, 96vw);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sw-subcats-float .sw-bottom-row::-webkit-scrollbar{ height: 0; }

/* SW_FILTER_ICON_VISIBILITY:BEGIN */

/* Make subcategory icons inherit color (so they show) */
.sw-bottom-item{ color:#e5e7eb; }
.sw-bottom-circle{ color:#e5e7eb; }
.sw-bottom-circle i{
  color: currentColor;
  font-size: 20px;           /* closer to right-side icons feel */
  line-height: 1;
  opacity: .96;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.65));
}

/* Active state: brighter icon/text like category buttons */
.sw-bottom-active .sw-bottom-circle{
  color:#dbeafe;
  box-shadow:0 0 14px rgba(56,189,248,.60);
  border-color: rgba(96,165,250,.95);
}
.sw-bottom-active .sw-bottom-label{
  color:#bfdbfe;
  font-weight:700;
}

/* ---------- LIGHT THEME FIXES (readable) ---------- */
body[data-theme="light"] .sw-bottom-row{
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(148,163,184,0.85);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

body[data-theme="light"] .sw-bottom-item{ color:#0B1220; }
body[data-theme="light"] .sw-bottom-circle{
  background: rgba(255,255,255,0.92);
  border-color: rgba(148,163,184,0.85);
  box-shadow: 0 3px 10px rgba(0,0,0,.10);
  color:#0B1220;
}
body[data-theme="light"] .sw-bottom-label{
  color:#0B1220;
  text-shadow:none;
}

body[data-theme="light"] .sw-bottom-active .sw-bottom-circle{
  background: rgba(30,107,255,0.92);
  border-color: rgba(30,107,255,0.95);
  color:#ffffff;
  box-shadow:0 0 14px rgba(30,107,255,.35);
}
body[data-theme="light"] .sw-bottom-active .sw-bottom-label{
  color:#0B1220;
  font-weight:800;
}

/* Also fix right-side category buttons in light theme */
body[data-theme="light"] .sw-icon-btn{ color:#0B1220; }
body[data-theme="light"] .sw-icon-circle{
  background: rgba(255,255,255,0.92);
  border-color: rgba(148,163,184,0.85);
  box-shadow: 0 3px 10px rgba(0,0,0,.10);
}
body[data-theme="light"] .sw-icon-label{
  color:#0B1220;
  text-shadow:none;
}
body[data-theme="light"] .sw-icon-active .sw-icon-circle{
  background: rgba(30,107,255,0.92);
  border-color: rgba(30,107,255,0.95);
  box-shadow:0 0 14px rgba(30,107,255,.35);
}
body[data-theme="light"] .sw-icon-active .sw-icon-label{
  color:#0B1220;
  font-weight:800;
}

/* SW_FILTER_ICON_VISIBILITY:END */

