/*
 * Floating Contact Widget CSS
 * Pinned bottom-right, always visible, plugin-free (wa.me / tel: / mailto).
 * Three channels: WhatsApp, Phone, Email.
 */

.st-float-widget {
  position: fixed;
  bottom: var(--st-space-5);
  right: var(--st-space-5);
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--st-space-2);
}

/* Panel (options) — hidden by default */
.st-float-widget__panel {
  display: flex;
  flex-direction: column;
  gap: var(--st-space-2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.97);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.st-float-widget.is-open .st-float-widget__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Individual option button */
.st-float-widget__option {
  display: flex;
  align-items: center;
  gap: var(--st-space-3);
  padding: 0.6rem 1rem;
  border-radius: 0;
  text-decoration: none;
  font-family: var(--st-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: filter var(--st-transition);
}
.st-float-widget__option:hover {
  filter: brightness(1.05);
  text-decoration: none;
}

.st-float-widget__option--whatsapp {
  background: #25D366;
  color: var(--st-white);
}
.st-float-widget__option--phone {
  background: var(--st-blue-700);
  color: var(--st-white);
}
.st-float-widget__option--email {
  background: var(--st-blue-500);
  color: var(--st-white);
}

/* Toggle button */
.st-float-widget__toggle {
  width: 52px;
  height: 52px;
  background: var(--st-blue-900);
  color: var(--st-white);
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(30,79,160,0.35);
  transition: background var(--st-transition);
  flex-shrink: 0;
}
.st-float-widget__toggle:hover { background: var(--st-blue-700); }
.st-float-widget__icon { transition: transform 0.2s ease; }
.st-float-widget.is-open .st-float-widget__icon { transform: rotate(90deg); }

/* Mobile: slightly smaller */
@media (max-width: 480px) {
  .st-float-widget {
    bottom: var(--st-space-4);
    right: var(--st-space-3);
  }
  .st-float-widget__option span { display: none; }
  .st-float-widget__option { padding: 0.6rem; }
}