/* ======================================================================
   Pit o Cuixa — WhatsApp Floating Contact Launcher
   
   Fixed-position floating launcher in bottom-right corner. The green
   toggle expands an upward popover with two options: WhatsApp (new tab)
   and the embedded chat widget.
   
   WF-001: Contact launcher — floating button visible on all pages
   WF-002: Fixed bottom-right positioning
   WF-003: WhatsApp brand green (#25D366)
   WF-004: z-index stacking between overlay (200) and modal (300)
   WF-005: Hover/focus tooltip with opacity transition
   WF-006: Keyboard-accessible tooltip (focus-visible)
   WF-007: Zero CLS contribution (fixed position)
   WF-008: Responsive safe zone
   WF-009: Upward popover menu with two options (WhatsApp / chat widget)
   WF-010: Popover opened via aria-expanded, closed on outside click/Escape
   ========================================================================== */

.whatsapp-float {
  position: fixed;
  bottom: 80px;
  right: 32px;
  z-index: 9999 !important;

  /* Prevent the aside from stealing clicks on catalog products.
     pointer-events: none makes the container inert; the toggle and
     the open menu re-enable it via pointer-events: auto. */
  pointer-events: none;

  /* WF-008: Prevent horizontal overflow on narrow viewports */
  max-width: 100vw;

  /* Stack menu above the toggle (upward opening) */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-sm);
}

/* ── Popover menu (opens upward) ─────────────────────────────────── */
.whatsapp-float__menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 200px;
  padding: var(--space-xs);
  background-color: var(--color-surface-container-lowest);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);

  /* WF-009: hidden by default, revealed via aria-hidden */
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.whatsapp-float__menu[aria-hidden="false"] {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.whatsapp-float__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.whatsapp-float__item:hover {
  background-color: var(--color-surface);
}

.whatsapp-float__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.whatsapp-float__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
}

.whatsapp-float__item--whatsapp .whatsapp-float__item-icon {
  color: #25D366;
}

/* ── Main toggle button ──────────────────────────────────────────── */
.whatsapp-float__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--radius-full);
  box-shadow: none;
  cursor: pointer;
  position: relative;
  opacity: 0.95;
  pointer-events: auto;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.whatsapp-float__toggle:hover {
  opacity: 1;
  transform: scale(1.12);
}

.whatsapp-float__toggle:active {
  transform: scale(0.95);
}

.whatsapp-float__toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  opacity: 1;
  transform: scale(1.12);
}

.whatsapp-float__icon {
  display: block;
  width: 56px;
  height: 56px;
}

.whatsapp-float__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
  transition: transform var(--transition-fast);
}

/* Tooltip follows launcher state: visible only while the WhatsApp menu is
   expanded, hidden when the launcher is at rest (cf. aria-expanded). */
.whatsapp-float__tooltip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--color-on-surface);
  color: #fff;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.whatsapp-float__toggle[aria-expanded="true"] .whatsapp-float__tooltip {
  opacity: 1;
}

/* Visually-hidden fallback text when SVG fails to load */
.whatsapp-float__fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile responsive safe zone */
@media (max-width: 767px) {
  .whatsapp-float {
    bottom: 72px;
    right: 16px;
  }

  .whatsapp-float__toggle,
  .whatsapp-float__icon {
    width: 48px;
    height: 48px;
  }

  .whatsapp-float__menu {
    min-width: 180px;
  }
  
}