/* assets/css/social-widget.css - floating social widget (neumorphic) */
.sw {
  --sw-bg: #b94a1a;
  --sw-ink: #ffffff;
  --sw-light: #d25a25;   /* highlight shadow (lighter than bg) */
  --sw-shade: #8a3510;   /* dark shadow (darker than bg) */
  --sw-size: 30px;
  --sw-gap: 4px;
  --sw-right: 20px;
  --sw-bottom: 20px;
  --sw-z: 990;
  --sw-cols: 1;          /* buttons per row when open */
    --sw-n: 10;            /* number of social icons (used for the open height) */
  --sw-list-w: calc(var(--sw-cols) * var(--sw-size) + (var(--sw-cols) - 1) * var(--sw-gap));

  position: fixed;
  right: var(--sw-right);
  bottom: calc(var(--sw-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: var(--sw-z);
  max-width: calc(100vw - (var(--sw-right) * 2));
}

.sw-tray {
  display: flex;
  flex-direction: column;   /* panel opens upward, toggle stays bottom-right */
  align-items: flex-end;
  padding: 10px;
  border-radius: 18px;
  background: var(--sw-bg);
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, .25), inset 1px 1px 2px rgba(255, 255, 255, .25); */
}

/* ---------- buttons ---------- */
.sw-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--sw-size);
  height: var(--sw-size);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: var(--sw-bg);
  color: var(--sw-ink);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 8px var(--sw-shade), -4px -4px 8px var(--sw-light);
  transition: box-shadow .2s ease, color .2s ease, transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.sw-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.sw-btn svg .sw-fill { fill: currentColor; stroke: none; }

.sw-btn:hover { color: var(--c, var(--sw-ink)); transform: translateY(-1px); }
.sw-btn:active,
.sw-toggle[aria-expanded="true"] {
  box-shadow: inset 3px 3px 6px var(--sw-shade), inset -3px -3px 6px var(--sw-light);
  transform: none;
}
.sw-btn:focus-visible { outline: 2px solid var(--sw-ink); outline-offset: 3px; }

/* tooltip (hover devices only) - shown to the LEFT of each icon */
@media (hover: hover) {
  .sw-list .sw-btn::after {
    content: attr(data-tip);
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translate(4px, -50%);
    padding: 4px 8px;
    border-radius: 6px;
    background: #1f1f1f;
    color: #fff;
    font: 500 12px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
  }
  .sw-list .sw-btn:hover::after,
  .sw-list .sw-btn:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
}
/* ---------- list: wraps into rows of --sw-cols buttons ---------- */
.sw-list {
  display: flex;
  flex-direction: column;
  gap: var(--sw-gap);
  width: var(--sw-list-w);
  margin: 0;
  padding: 0 0 var(--sw-gap) 0;
  list-style: none;
}
.sw-list li { margin: 0; padding: 0; list-style: none; }

/* ---------- JS-enhanced collapse (without JS everything stays visible) ---------- */
.sw-toggle { display: none; }
.sw--js .sw-toggle { display: grid; }

/* closed: drawer has zero height, so the tray is just the toggle button */
.sw--js .sw-drawer {
  max-height: 0;
  visibility: hidden;
  transition: max-height .35s ease, visibility 0s linear .35s;
}
.sw--js .sw-list li {
  opacity: 0;
  transform: translateY(8px) scale(.92);
  transition: opacity .25s ease, transform .25s ease;
}

/* open: grows upward from the toggle */
.sw--js.sw--open .sw-drawer {
  max-height: calc(var(--sw-n) * (var(--sw-size) + var(--sw-gap)) + var(--sw-gap));
  visibility: visible;
  transition: max-height .35s ease, visibility 0s;
}
.sw--js.sw--open .sw-list li { opacity: 1; transform: none; }
.sw--js.sw--open .sw-list li:nth-child(1)  { transition-delay: .05s; }
.sw--js.sw--open .sw-list li:nth-child(2)  { transition-delay: .08s; }
.sw--js.sw--open .sw-list li:nth-child(3)  { transition-delay: .11s; }
.sw--js.sw--open .sw-list li:nth-child(4)  { transition-delay: .14s; }
.sw--js.sw--open .sw-list li:nth-child(5)  { transition-delay: .17s; }
.sw--js.sw--open .sw-list li:nth-child(6)  { transition-delay: .20s; }
.sw--js.sw--open .sw-list li:nth-child(7)  { transition-delay: .23s; }
.sw--js.sw--open .sw-list li:nth-child(8)  { transition-delay: .26s; }
.sw--js.sw--open .sw-list li:nth-child(9)  { transition-delay: .29s; }
.sw--js.sw--open .sw-list li:nth-child(10) { transition-delay: .32s; }
/* no animation on first paint */
.sw--init, .sw--init * { transition: none !important; }

/* ---------- small screens ---------- */
@media (max-width: 420px) {
  .sw { --sw-size: 40px; --sw-gap: 6px; --sw-right: 12px; --sw-bottom: 14px; }
  .sw-tray { padding: 8px; border-radius: 16px; }
}
@media (max-height: 700px) {
  .sw { --sw-size: 38px; --sw-gap: 6px; --sw-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sw *, .sw *::after { transition: none !important; }
}

@media print { .sw { display: none; } }