/* ================================================================
   Floating Social Bar — עמודה אנכית בצד שמאל
   מחביא את כפתורי הנגישות/וואטסאפ הישנים הנפרדים
   ================================================================ */

/* הסתרת הכפתורים הישנים */
.floating-whatsapp,
.acc-trigger {
  display: none !important;
}

/* ── הבר ── */
.floating-bar {
  position: fixed;
  top: 50%;
  left: 1.5rem;
  transform: translateY(-50%);
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  background: rgba(10, 18, 35, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0.6rem 0.45rem;
  border-radius: 100px;
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.07);
}

/* מפריד אופקי (עבור עמודה אנכית) */
.fb-divider {
  width: 26px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
  margin: 0.1rem 0;
}

/* ── כפתור בסיסי ── */
.fb-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  cursor: pointer;
  text-decoration: none;
  border: none;
  position: relative;
  flex-shrink: 0;
  color: #fff;
}

.fb-btn:hover {
  transform: scale(1.14) translateX(2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.fb-btn:focus-visible {
  outline: 3px solid #c79a36;
  outline-offset: 3px;
}

.fb-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  pointer-events: none;
}

/* ── צבעי הרשתות ── */
.fb-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.fb-facebook {
  background: #1877f2;
}

.fb-tiktok {
  background: #010101;
  border: 1px solid rgba(255,255,255,0.12);
}

.fb-accessibility {
  background: #c79a36;
}

.fb-whatsapp {
  background: linear-gradient(135deg, #25d366, #128c7e);
}

/* ── Tooltip — מימין לכפתור ── */
.fb-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: rgba(10, 18, 35, 0.95);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.28rem 0.55rem;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  direction: rtl;
  font-family: system-ui, -apple-system, sans-serif;
}

.fb-btn:hover::after,
.fb-btn:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ── מובייל: בר אופקי כדי לא לכסות את התוכן ── */
@media (max-width: 760px) {
  body {
    padding-bottom: 80px;
  }

  .floating-bar {
    top: auto;
    left: 50%;
    bottom: 0.75rem;
    flex-direction: row;
    gap: 0.3rem;
    width: max-content;
    max-width: calc(100vw - 24px);
    padding: 0.45rem 0.55rem;
    border-radius: 999px;
    transform: translateX(-50%);
  }

  .fb-btn {
    width: 38px;
    height: 38px;
  }

  .fb-btn svg {
    width: 17px;
    height: 17px;
  }

  .fb-btn:hover {
    transform: scale(1.08);
  }

  .fb-divider {
    width: 1px;
    height: 24px;
    margin: 0 0.08rem;
  }

  /* על מובייל הטולטיפ מוסתר כי אין hover */
  .fb-btn::after {
    display: none;
  }
}

/* ── iPhone safe area (mobile only — desktop uses top:50%) ── */
@media (max-width: 760px) {
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .floating-bar {
      bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }
  }
}