/* Mobile Support — floating social */

.ms-social-float {
  position: fixed;
  right: clamp(14px, 2.4vw, 28px);
  bottom: calc(clamp(20px, 4vh, 36px) + env(safe-area-inset-bottom));
  z-index: 38;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.ms-social-btn {
  pointer-events: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: #fff;
  font-size: 1.35rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 28px rgba(0, 17, 82, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ms-social-btn:hover {
  transform: translateY(-3px) scale(1.05);
  color: #fff;
}

.ms-social-btn--instagram {
  background: linear-gradient(135deg, #dd4aff, #1271ff);
}

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

@media (max-width: 860px) {
  .ms-social-float {
    bottom: calc(clamp(96px, 18vh, 148px) + env(safe-area-inset-bottom));
  }
}

@media (max-height: 720px) {
  .ms-social-float {
    transform: scale(0.88);
    transform-origin: right bottom;
  }
}

.ms-social-btn:focus-visible,
.ms-btn-primary:focus-visible,
.ms-btn-ghost:focus-visible {
  outline: 2px solid var(--ms-blue, #1271ff);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ms-social-btn {
    transition: none;
  }
}