/* Floating "message us on WhatsApp" button.
   - Desktop / tablet: a pill - WhatsApp glyph + the label "דברו איתנו".
   - Phones (<= 640px): a compact icon-only circle (label hidden) so it never
     crowds content or the consent banner on small screens.
   - Fixed to the visual bottom-right corner. The site is RTL, so the right
     edge is the inline-start side; positioning uses logical properties.
   - z-index 998: floats above page content but is intentionally covered by
     the mega-menu backdrop (999), the mobile drawer overlay (1050) and the
     cookie-consent banner (9500), so it never sits on top of a blocking layer.
   - Refined take on the official WhatsApp mark: real brand green for instant
     recognition, but quiet and shadowed in the site's cool-blue family so it
     reads as part of an elegant layout, not a loud widget. */

.whatsapp-fab {
  position: fixed;
  inset-inline-start: 28px; /* RTL: visual right edge */
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 998;

  /* Icon is first in source: in the RTL row it lands on the inline-start
     (right) side, hugging the corner, with the label to its left, interior. */
  display: inline-flex;
  align-items: center;
  gap: 11px;
  height: 56px;
  padding-inline: 22px;
  border-radius: var(--radius-full);

  /* Subtle vertical depth instead of a flat fill. */
  background: linear-gradient(180deg, #25d366 0%, #20bd5a 100%);
  color: #fff;
  text-decoration: none;

  /* Cool-blue ambient lift (per design system: never raw black) plus a faint
     green halo so the mark feels grounded without a heavy drop shadow. */
  box-shadow:
    0 10px 28px rgba(0, 60, 130, 0.16),
    0 3px 10px rgba(0, 60, 130, 0.10),
    0 0 0 1px rgba(37, 211, 102, 0.18);

  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s ease,
    filter 0.25s ease,
    bottom 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.whatsapp-fab__icon {
  font-size: 26px;
  line-height: 1;
}

.whatsapp-fab__label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.whatsapp-fab:hover {
  transform: translateY(-3px);
  filter: brightness(1.04);
  box-shadow:
    0 16px 38px rgba(0, 60, 130, 0.20),
    0 5px 14px rgba(0, 60, 130, 0.12),
    0 0 0 1px rgba(37, 211, 102, 0.26);
}

.whatsapp-fab:active {
  transform: translateY(-1px) scale(0.98);
}

/* Keyboard focus: clear, on-brand ring (not the green, which would vanish
   against the button). */
.whatsapp-fab:focus-visible {
  outline: none;
  box-shadow:
    0 10px 28px rgba(0, 60, 130, 0.16),
    0 0 0 3px #fff,
    0 0 0 6px var(--primary-color);
}

/* Lift clear of the cookie-consent banner while it is on screen. The banner
   is bottom-center; on narrow viewports it can reach this corner. This state
   only exists on a visitor's first session, until they accept/reject. */
.whatsapp-fab--with-consent {
  bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

/* Entrance: a gentle, late fade-and-rise so the button never competes with
   the hero on load. `backwards` fill applies the start state only during the
   delay - it does NOT persist a transform afterwards, so :hover stays free. */
@media (prefers-reduced-motion: no-preference) {
  .whatsapp-fab {
    animation: wa-fab-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.45s backwards;
  }

  @keyframes wa-fab-in {
    from {
      opacity: 0;
      transform: translateY(14px) scale(0.9);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab {
    transition: none;
  }
}

/* Phones: compact icon-only circle (no label), tighter to the corner, and a
   taller lift since the stacked consent banner is much taller here. */
@media (max-width: 640px) {
  .whatsapp-fab {
    inset-inline-start: 18px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    justify-content: center;
    gap: 0;
    width: 52px;
    height: 52px;
    padding-inline: 0;
  }

  .whatsapp-fab__label {
    display: none;
  }

  .whatsapp-fab--with-consent {
    bottom: calc(210px + env(safe-area-inset-bottom, 0px));
  }
}