.afiwai-ssb{
  --afiwai-ssb-size: 22px;
  --afiwai-ssb-gap: 10px;
  --afiwai-ssb-radius: 12px;
  --afiwai-ssb-border-w: 1px;

  --afiwai-ssb-color:#111;
  --afiwai-ssb-bg:#fff;
  --afiwai-ssb-border:rgba(0,0,0,.10);

  --afiwai-ssb-hover-color:#fff;
  --afiwai-ssb-hover-bg:#0064C0;
  --afiwai-ssb-hover-border:#0064C0;

  --afiwai-ssb-capsule-bg: rgba(255,255,255,.85);
  --afiwai-ssb-capsule-border: rgba(0,0,0,.08);

  --afiwai-ssb-offset-x: 12px;
  --afiwai-ssb-offset-y: 120px;
  --afiwai-ssb-z: 9999;
}

/* Inline */
.afiwai-ssb--inline{ width:100%; margin:14px 0; }

/* Floating */
.afiwai-ssb--floating{
  position: fixed;
  z-index: var(--afiwai-ssb-z);
  pointer-events: none;
}
.afiwai-ssb--floating .afiwai-ssb__inner{ pointer-events:auto; }

/* Positions */
.afiwai-ssb--pos-left{ left:var(--afiwai-ssb-offset-x); top:var(--afiwai-ssb-offset-y); }
.afiwai-ssb--pos-right{ right:var(--afiwai-ssb-offset-x); top:var(--afiwai-ssb-offset-y); }
.afiwai-ssb--pos-top{ top:var(--afiwai-ssb-offset-x); left:50%; transform:translateX(-50%); }
.afiwai-ssb--pos-bottom{ bottom:var(--afiwai-ssb-offset-x); left:50%; transform:translateX(-50%); }

/* Capsule */
.afiwai-ssb--capsule .afiwai-ssb__inner{
  background: var(--afiwai-ssb-capsule-bg);
  border: 1px solid var(--afiwai-ssb-capsule-border);
  border-radius: 18px;
  padding: 10px;
  backdrop-filter: saturate(150%) blur(10px);
}
.afiwai-ssb--capsule-shadow .afiwai-ssb__inner{ box-shadow:0 10px 30px rgba(0,0,0,.10); }

/* Layout */
.afiwai-ssb__inner{
  display:inline-flex;
  align-items:center;
  gap:var(--afiwai-ssb-gap);
}

.afiwai-ssb--vertical .afiwai-ssb__inner{ flex-direction:row; align-items:center; }
.afiwai-ssb--horizontal .afiwai-ssb__inner{ flex-direction:column; align-items:center; }

.afiwai-ssb__tray{ display:inline-flex; align-items:center; transition:transform .25s ease, opacity .18s ease, max-width .25s ease, max-height .25s ease; }
.afiwai-ssb__list{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  display:flex;
  gap:var(--afiwai-ssb-gap);
}
.afiwai-ssb--vertical .afiwai-ssb__list{ flex-direction:column; }
.afiwai-ssb__item{ margin:0 !important; padding:0 !important; }

/* Buttons */
.afiwai-ssb__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: calc(var(--afiwai-ssb-size) + 16px);
  height: calc(var(--afiwai-ssb-size) + 16px);
  border-radius: var(--afiwai-ssb-radius);
  border: var(--afiwai-ssb-border-w) solid var(--afiwai-ssb-border);
  color: var(--afiwai-ssb-color);
  background: var(--afiwai-ssb-bg);
  text-decoration:none !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.afiwai-ssb__link:hover,
.afiwai-ssb__link:focus-visible{
  color: var(--afiwai-ssb-hover-color);
  background: var(--afiwai-ssb-hover-bg);
  border-color: var(--afiwai-ssb-hover-border);
}

/* Presets */
.afiwai-ssb--preset-minimal .afiwai-ssb__link{ background:transparent; border-color:transparent; }
.afiwai-ssb--preset-outline .afiwai-ssb__link{ background:transparent; }
.afiwai-ssb--preset-glass .afiwai-ssb__link{
  background: rgba(255,255,255,.65);
  border-color: rgba(255,255,255,.55);
  backdrop-filter: saturate(150%) blur(10px);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}

.afiwai-ssb__icon svg{
  width: var(--afiwai-ssb-size);
  height: var(--afiwai-ssb-size);
  display:block;
  fill: currentColor;
}

/* Animations */
.afiwai-ssb--anim-none .afiwai-ssb__link:hover,
.afiwai-ssb--anim-none .afiwai-ssb__link:focus-visible{ transform:none; }

.afiwai-ssb--anim-lift .afiwai-ssb__link:hover,
.afiwai-ssb--anim-lift .afiwai-ssb__link:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
}

.afiwai-ssb--anim-pulse .afiwai-ssb__link:hover,
.afiwai-ssb--anim-pulse .afiwai-ssb__link:focus-visible{ animation: afiwai-ssb-pulse .6s ease; }
@keyframes afiwai-ssb-pulse{ 0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1)} }

.afiwai-ssb--anim-rotate .afiwai-ssb__link:hover .afiwai-ssb__icon,
.afiwai-ssb--anim-rotate .afiwai-ssb__link:focus-visible .afiwai-ssb__icon{ animation: afiwai-ssb-rotate .55s ease; }
@keyframes afiwai-ssb-rotate{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

.afiwai-ssb--anim-bounce .afiwai-ssb__link:hover,
.afiwai-ssb--anim-bounce .afiwai-ssb__link:focus-visible{ animation: afiwai-ssb-bounce .65s cubic-bezier(.2,.8,.2,1); }
@keyframes afiwai-ssb-bounce{ 0%{transform:translateY(0)} 35%{transform:translateY(-5px)} 70%{transform:translateY(0)} 100%{transform:translateY(-2px)} }

/* Toggle (rabattable) */
.afiwai-ssb__toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  color:#111;
  border-radius:999px;
  padding:10px 12px;
  cursor:pointer;
  user-select:none;
  line-height:1;
  font-size:13px;
  letter-spacing:.2px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}

.afiwai-ssb__toggle--pill{ box-shadow:0 8px 18px rgba(0,0,0,.08); }

.afiwai-ssb__toggle--vertical{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 12px 10px;
}

.afiwai-ssb__toggle-chevron{
  width:10px;
  height:10px;
  display:inline-block;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: rotate(-45deg);
  opacity:.55;
}

/* Collapsed: hide tray, keep only the toggle (like your example) */
.afiwai-ssb--collapsible.afiwai-ssb--collapsed .afiwai-ssb__tray{
  opacity:0;
  pointer-events:none;
  max-width:0;
  max-height:0;
  overflow:hidden;
  transform: translate3d(-8px,0,0);
}

.afiwai-ssb--pos-right.afiwai-ssb--collapsible.afiwai-ssb--collapsed .afiwai-ssb__tray{
  transform: translate3d(8px,0,0);
}

.afiwai-ssb--pos-top.afiwai-ssb--collapsible.afiwai-ssb--collapsed .afiwai-ssb__tray,
.afiwai-ssb--pos-bottom.afiwai-ssb--collapsible.afiwai-ssb--collapsed .afiwai-ssb__tray{
  transform: translate3d(0,-8px,0);
}

/* IMPORTANT: when collapsed + capsule enabled, remove capsule background so it looks like "FERMÉ" mockup */
.afiwai-ssb--capsule.afiwai-ssb--collapsible.afiwai-ssb--collapsed .afiwai-ssb__inner{
  background: transparent;
  border: none;
  padding: 0;
  backdrop-filter: none;
  box-shadow: none;
}

/* Chevron direction when collapsed */
.afiwai-ssb--collapsible.afiwai-ssb--collapsed .afiwai-ssb__toggle-chevron{ transform: rotate(135deg); }
.afiwai-ssb--pos-right.afiwai-ssb--collapsible.afiwai-ssb--collapsed .afiwai-ssb__toggle-chevron{ transform: rotate(-45deg); }
.afiwai-ssb--pos-top.afiwai-ssb--collapsible.afiwai-ssb--collapsed .afiwai-ssb__toggle-chevron{ transform: rotate(45deg); }
.afiwai-ssb--pos-bottom.afiwai-ssb--collapsible.afiwai-ssb--collapsed .afiwai-ssb__toggle-chevron{ transform: rotate(-135deg); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .afiwai-ssb__link,
  .afiwai-ssb__toggle,
  .afiwai-ssb__tray{
    transition:none !important;
    animation:none !important;
  }
}