/* Filter buttons - Modern glassmorphism style */
.sw-icon-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.sw-icon-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  color: #e5e7eb;
  -webkit-tap-highlight-color: transparent;
}

.sw-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(148, 163, 184, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sw-icon-circle i {
  font-size: 18px;
  color: currentColor;
  transition: transform 0.2s ease;
}

.sw-icon-label {
  font-size: 0.65rem;
  font-weight: 500;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  opacity: 0.9;
}

.sw-icon-btn:hover .sw-icon-circle {
  transform: scale(1.08);
  border-color: rgba(148, 163, 184, 0.6);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.sw-icon-btn:hover .sw-icon-circle i {
  transform: scale(1.1);
}

.sw-icon-btn:active .sw-icon-circle {
  transform: scale(0.95);
}

.sw-icon-active .sw-icon-circle {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9));
  border-color: rgba(96, 165, 250, 0.8);
  color: #fff;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.5), 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.sw-icon-active .sw-icon-label {
  color: #93c5fd;
  font-weight: 600;
}

/* Right-side filter stack alignment */
.map-overlay-right .sw-icon-column { align-items:center; }
.map-overlay-right .sw-icon-btn { align-items:center; }
.map-overlay-right .sw-icon-label {
  width:64px;
  text-align:center;
}

.sw-bottom-row {
  display:flex;
  gap:.35rem;
  padding:.2rem .6rem;
  background: transparent;
  border-radius: 999px;
  box-shadow: none;
}

.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: 90px !important;
  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, same logique que catégories) */
.sw-bottom-item{ color:#e5e7eb; }
.sw-bottom-circle{ color:#e5e7eb; }
.sw-bottom-circle i{
  color: currentColor;
  font-size: 20px;
  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 + aligné avec catégories) ---------- */
body[data-theme="light"] .sw-bottom-row{
  background: transparent;
  border: none;
  box-shadow: none;
}

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 (même couleurs) */
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);
  color:#0B1220;
}
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 */

/* ===== THEME PILLS D / B / L : blanc sur fond noir comme les catégories ===== */
.sw-theme-toggle{
  display:flex;
  gap:.35rem;
  align-items:center;
}

.sw-theme-pill{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1.5px solid rgba(148,163,184,0.8);
  background:rgba(15,23,42,0.96);
  color:#e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.72rem;
  font-weight:600;
  box-shadow:0 3px 10px rgba(0,0,0,.8);
  cursor:pointer;
  transition: transform .22s ease, box-shadow .22s ease,
              border-color .22s ease, background .22s ease, color .22s ease;
}

.sw-theme-pill-active{
  background: rgba(37,99,235,0.94);
  border-color:#60a5fa;
  color:#f9fafb;
  box-shadow:0 0 14px rgba(56,189,248,.9);
}

/* Version clair */
body[data-theme="light"] .sw-theme-pill{
  background:rgba(255,255,255,0.95);
  color:#0B1220;
  border-color:rgba(148,163,184,0.9);
  box-shadow:0 3px 10px rgba(15,23,42,.18);
}
body[data-theme="light"] .sw-theme-pill-active{
  background:rgba(30,107,255,0.95);
  border-color:rgba(30,107,255,1);
  color:#F9FAFB;
  box-shadow:0 0 14px rgba(30,107,255,.55);
}

/* ===== TOP QUICK ACTION BUTTONS: MY SPOT / NEW WIRE ===== */
/* on cible plusieurs noms possibles au cas où : */
.sw-quick-actions,
.sw-top-quick-actions,
.sw-header-quick-actions{
  display:flex;
  gap:.6rem;
}

.sw-quick-btn,
.sw-top-quick-btn,
.sw-header-quick-btn{
  padding:.45rem .9rem;
  border-radius:999px;
  border:1.5px solid rgba(148,163,184,0.85);
  background:rgba(15,23,42,0.96);   /* fond noir */
  color:#e5e7eb;                    /* texte blanc */
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  box-shadow:0 3px 10px rgba(0,0,0,.8);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:.35rem;
  transition: background .22s ease, color .22s ease,
              box-shadow .22s ease, border-color .22s ease,
              transform .18s ease;
}

.sw-quick-btn i,
.sw-top-quick-btn i,
.sw-header-quick-btn i{
  font-size:1rem;
}

/* bouton principal (NEW WIRE) plus bleu */
.sw-quick-primary,
.sw-top-quick-primary,
.sw-header-quick-primary{
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  border-color:#60a5fa;
  color:#f9fafb;
  box-shadow:0 0 18px rgba(56,189,248,.85);
}

.sw-quick-btn:hover,
.sw-top-quick-btn:hover,
.sw-header-quick-btn:hover{
  transform: translateY(-1px);
  box-shadow:0 5px 14px rgba(0,0,0,.9);
}

.sw-quick-btn:active,
.sw-top-quick-btn:active,
.sw-header-quick-btn:active{
  transform: scale(.97);
  box-shadow:0 2px 8px rgba(0,0,0,.9);
}

/* version clair */
body[data-theme="light"] .sw-quick-btn,
body[data-theme="light"] .sw-top-quick-btn,
body[data-theme="light"] .sw-header-quick-btn{
  background:rgba(255,255,255,0.95);
  color:#0B1220;
  border-color:rgba(148,163,184,0.95);
  box-shadow:0 3px 10px rgba(15,23,42,.15);
}

body[data-theme="light"] .sw-quick-primary,
body[data-theme="light"] .sw-top-quick-primary,
body[data-theme="light"] .sw-header-quick-primary{
  background:linear-gradient(135deg, #1d4ed8, #38bdf8);
  color:#F9FAFB;
  border-color:#1d4ed8;
  box-shadow:0 0 16px rgba(37,99,235,.45);
}

/* === OVERRIDE: top quick action buttons (MY SPOT / NEW WIRE) === */
[title="My spot"],
[title="My Spot"],
[title="New wire"],
[title="New Wire"],
[title="NEW WIRE"] {
  background: #050816;              /* noir comme les catégories */
  color: #ffffff;                   /* icône + texte blanc */
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 18px rgba(0,0,0,0.7);
}

/* Icônes dedans prennent la couleur blanche */
[title="My spot"] > *,
[title="My Spot"] > *,
[title="New wire"] > *,
[title="New Wire"] > *,
[title="NEW WIRE"] > * {
  color: inherit;
  fill: currentColor;
}
