/* ── Widget Container ─────────────────────────────────── */
#contact-widget {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
}

/* ── Main Toggle Button ───────────────────────────────── */
#main-btn {
  position: relative;
  z-index: 10;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #ff5c35, #ff923a);
  box-shadow: 0 0 0 0 rgba(255,92,53,.5), 0 8px 32px rgba(255,92,53,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  animation: pulse-ring 2.4s ease-in-out infinite;
}

#main-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 8px rgba(255,92,53,.15), 0 12px 40px rgba(255,92,53,.5);
}

#main-btn.open {
  animation: none;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  box-shadow: 0 0 0 4px rgba(255,92,53,.3), 0 8px 32px rgba(0,0,0,.6);
  transform: rotate(45deg) scale(1.05);
}

#main-btn i {
  font-size: 22px;
  color: #fff;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(255,92,53,.55), 0 8px 32px rgba(255,92,53,.4); }
  60%  { box-shadow: 0 0 0 14px rgba(255,92,53,0), 0 8px 32px rgba(255,92,53,.4); }
  100% { box-shadow: 0 0 0 0 rgba(255,92,53,0), 0 8px 32px rgba(255,92,53,.4); }
}

/* ── Orbital Icons ────────────────────────────────────── */
.orb-btn {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  opacity: 0;
  transform: scale(0) translate(0, 0);
  transition: opacity .25s, transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, filter .25s;
  pointer-events: none;
  text-decoration: none;
}

.orb-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

.orb-btn:hover {
  filter: brightness(1.25) saturate(1.2);
  box-shadow: 0 0 20px var(--glow), 0 6px 24px rgba(0,0,0,.5);
  transform: var(--pos) scale(1.18) !important;
}

#btn-call  { background: linear-gradient(135deg, #00c6ff, #0072ff); --glow: rgba(0,114,255,.6); }
#btn-mail  { background: linear-gradient(135deg, #f7971e, #ffd200); --glow: rgba(255,210,0,.6); color: #1a1a1a; }
#btn-loc   { background: linear-gradient(135deg, #56ab2f, #a8e063); --glow: rgba(86,171,47,.6); }
#btn-insta { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); --glow: rgba(220,39,67,.6); }
#btn-fb    { background: linear-gradient(135deg, #3b5998, #4c70ba); --glow: rgba(75,101,186,.6); }

/* ── Tooltips ─────────────────────────────────────────── */
/* .orb-btn::after {
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: rgba(15,15,25,.85);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s .1s, transform .2s .1s;
  pointer-events: none;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.08);
}

.orb-btn.visible:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
} */

/* ── Ripple ───────────────────────────────────────────── */
.orb-btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  width: 100%;
  height: 100%;
  animation: ripple-out .55s ease forwards;
  pointer-events: none;
}

@keyframes ripple-out {
  from { transform: scale(0); opacity: 1; }
  to   { transform: scale(2.5); opacity: 0; }
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 480px) {
  #contact-widget { right: 16px; }
  #main-btn { width: 52px; height: 52px; }
  .orb-btn  { width: 44px; height: 44px; font-size: 16px; }
}