/* =============================================================
   FSSN – Fixed Side Smart Navigation v2  |  Frontend
   All values driven by CSS custom properties injected by PHP
   ============================================================= */

/* ── Shell ──────────────────────────────────────────────────── */
.fssn-nav {
  position: fixed;
  top: var(--fssn-top-offset, 50%);
  transform: translateY(-50%);
  z-index: var(--fssn-z, 99900);
  display: flex;
  flex-direction: column;
  width: var(--fssn-collapsed-w, 68px);
  transition: width var(--fssn-speed, 350ms) cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--fssn-radius, 16px);
  overflow: hidden;
  will-change: width;
  /* Background */
  background: rgba(
    var(--fssn-bg-r, 15),
    var(--fssn-bg-g, 15),
    var(--fssn-bg-b, 20),
    var(--fssn-bg-opacity, 0.92)
  );
  backdrop-filter: blur(var(--fssn-backdrop-blur, 14px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--fssn-backdrop-blur, 14px)) saturate(160%);
  border: 1px solid rgba(
    var(--fssn-border-r, 255),
    var(--fssn-border-g, 255),
    var(--fssn-border-b, 255),
    var(--fssn-border-opacity, 0.07)
  );
  box-shadow: var(--fssn-shadow, 0 8px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3));
}

/* PHP injects full background via rgba — we just apply the bg_color directly */
.fssn-nav { background-color: var(--fssn-bg-rgba, rgba(15,15,20,0.92)); }

.fssn-pos-left  { left: 20px; }
.fssn-pos-right { right: 20px; }

/* ── Theme fallbacks (when no custom bg set) ────────────────── */
.fssn-theme-dark  { --fssn-bg-rgba: rgba(15,15,20, var(--fssn-bg-opacity,0.92)); }
.fssn-theme-light { --fssn-bg-rgba: rgba(255,255,255, var(--fssn-bg-opacity,0.94)); }
.fssn-theme-glass { --fssn-bg-rgba: rgba(255,255,255, calc(var(--fssn-bg-opacity,0.92) * 0.13)); }

/* When user sets a custom bg_color, PHP writes --fssn-bg-hex and we apply it */
/* The PHP injects: background-color overriding via inline style on :root */

/* ── Expand ─────────────────────────────────────────────────── */
.fssn-expandable:hover,
.fssn-expandable:focus-within {
  width: var(--fssn-expanded-w, 210px);
}
.fssn-show-labels:not(.fssn-expandable) {
  width: var(--fssn-expanded-w, 210px);
}

/* ── List ───────────────────────────────────────────────────── */
.fssn-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  width: 100%;
}
.fssn-item { position: relative; width: 100%; }

/* ── Link ───────────────────────────────────────────────────── */
.fssn-link {
  display: flex;
  align-items: center;
  gap: var(--fssn-item-gap, 12px);
  height: var(--fssn-item-h, 52px);
  padding: 0 var(--fssn-item-px, 16px);
  text-decoration: none !important;
  font-family: var(--fssn-font-family, inherit);
  font-size: var(--fssn-font-size, 13px);
  font-weight: var(--fssn-font-weight, 500);
  letter-spacing: var(--fssn-letter-spacing, 0.01em);
  color: var(--fssn-label-color, rgba(255,255,255,0.55));
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition:
    color var(--fssn-speed, 350ms) ease,
    background var(--fssn-speed, 350ms) ease;
}

/* Highlight pill */
.fssn-link::before {
  content: '';
  position: absolute;
  inset: 4px 6px;
  border-radius: calc(var(--fssn-radius, 16px) * 0.65);
  background: transparent;
  transition: background var(--fssn-speed, 350ms) ease;
  z-index: -1;
}
.fssn-link:hover::before {
  background: rgba(var(--fssn-highlight-rgb, var(--fssn-accent-rgb, 108,99,255)), var(--fssn-highlight-opacity, 0.12));
}
.fssn-item--active .fssn-link::before {
  background: rgba(var(--fssn-highlight-rgb, var(--fssn-accent-rgb, 108,99,255)), var(--fssn-ahl-opacity, 0.18));
}

/* Label color states */
.fssn-link:hover { color: var(--fssn-label-hover, #fff); }
.fssn-item--active .fssn-link { color: var(--fssn-label-active, #fff); }

/* ── Icon ───────────────────────────────────────────────────── */
.fssn-icon-wrap {
  flex-shrink: 0;
  width: var(--fssn-icon-size, 20px);
  height: var(--fssn-icon-size, 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fssn-icon-color, rgba(255,255,255,0.55));
  transition:
    transform var(--fssn-speed, 350ms) cubic-bezier(0.34,1.56,0.64,1),
    color var(--fssn-speed, 350ms) ease;
}
.fssn-link:hover .fssn-icon-wrap {
  color: var(--fssn-icon-hover, var(--fssn-accent, #6c63ff));
  transform: scale(1.18);
}
.fssn-item--active .fssn-icon-wrap {
  color: var(--fssn-icon-active, var(--fssn-accent, #6c63ff));
  transform: scale(1.12);
}

/* ── Label text ─────────────────────────────────────────────── */
.fssn-label-text {
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity var(--fssn-speed, 350ms) ease,
    transform var(--fssn-speed, 350ms) ease;
  pointer-events: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fssn-expandable:hover .fssn-label-text,
.fssn-expandable:focus-within .fssn-label-text,
.fssn-show-labels:not(.fssn-expandable) .fssn-label-text {
  opacity: 1;
  transform: translateX(0);
}

/* ── Active dot ─────────────────────────────────────────────── */
.fssn-active-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fssn-accent, #6c63ff);
  margin-left: auto;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(var(--fssn-accent-rgb, 108,99,255), 0.7);
  animation: fssn-pulse 2s ease-in-out infinite;
}
@keyframes fssn-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.7; transform:scale(.85); }
}

/* ── Sliding indicator ──────────────────────────────────────── */
.fssn-indicator {
  position: absolute;
  left: 6px;
  width: var(--fssn-indicator-w, 3px);
  border-radius: 2px;
  background: var(--fssn-accent, #6c63ff);
  box-shadow: 0 0 10px rgba(var(--fssn-accent-rgb, 108,99,255), 0.8);
  transition:
    top 0.35s cubic-bezier(0.4,0,0.2,1),
    height var(--fssn-speed, 350ms) ease,
    opacity var(--fssn-speed, 350ms) ease;
  opacity: 0;
  pointer-events: none;
}
.fssn-pos-right .fssn-indicator { left: auto; right: 6px; }
.fssn-indicator.fssn-indicator--visible { opacity: 1; }

/* ── SVG Icon mask set ──────────────────────────────────────── */
.fssn-icon {
  display: block;
  width: var(--fssn-icon-size, 20px);
  height: var(--fssn-icon-size, 20px);
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  flex-shrink: 0;
}

.fssn-icon-home{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E")}
.fssn-icon-megaphone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l19-9-9 19-2-8-8-2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l19-9-9 19-2-8-8-2z'/%3E%3C/svg%3E")}
.fssn-icon-code{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E")}
.fssn-icon-flask{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M9 3v8l-4 9h14l-4-9V3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M9 3v8l-4 9h14l-4-9V3'/%3E%3C/svg%3E")}
.fssn-icon-star{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E")}
.fssn-icon-heart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E")}
.fssn-icon-user{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")}
.fssn-icon-settings{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E")}
.fssn-icon-mail{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E")}
.fssn-icon-bell{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E")}
.fssn-icon-search{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")}
.fssn-icon-chart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E")}
.fssn-icon-lock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")}
.fssn-icon-globe{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E")}
.fssn-icon-zap{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E")}
.fssn-icon-layers{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E")}

/* ── Tooltip ────────────────────────────────────────────────── */
.fssn-expandable:not(:hover):not(:focus-within) .fssn-item::after {
  content: attr(data-label);
  position: absolute;
  left: calc(var(--fssn-collapsed-w, 68px) + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: rgba(15,15,20,0.92);
  color: #fff;
  font-size: calc(var(--fssn-font-size, 13px) - 1px);
  font-family: var(--fssn-font-family, inherit);
  font-weight: var(--fssn-font-weight, 500);
  padding: 5px 10px;
  border-radius: 7px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 10;
}
.fssn-expandable:not(:hover):not(:focus-within) .fssn-item:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.fssn-pos-right.fssn-expandable:not(:hover):not(:focus-within) .fssn-item::after {
  left: auto;
  right: calc(var(--fssn-collapsed-w, 68px) + 10px);
  transform: translateY(-50%) translateX(6px);
}
.fssn-pos-right.fssn-expandable:not(:hover):not(:focus-within) .fssn-item:hover::after {
  transform: translateY(-50%) translateX(0);
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fssn-nav,.fssn-link,.fssn-label-text,.fssn-icon-wrap,.fssn-indicator,.fssn-active-dot {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Mobile bottom bar ──────────────────────────────────────── */
@media (max-width: 480px) {
  .fssn-nav {
    top: auto !important;
    bottom: 12px;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    flex-direction: row;
    width: auto !important;
    border-radius: 999px;
  }
  .fssn-list { display: flex; flex-direction: row; padding: 0 6px; }
  .fssn-item { width: auto; }
  .fssn-link {
    flex-direction: column;
    height: auto;
    padding: 10px 14px;
    gap: 4px;
    font-size: 10px;
  }
  .fssn-label-text { opacity: 1 !important; transform: none !important; font-size: 10px; }
  .fssn-active-dot,.fssn-indicator { display: none !important; }
  .fssn-item::after { display: none !important; }
}