/**
 * WhatsApp hand-off — floating button styling.
 *
 * ONE JOB: a click-to-chat button pinned to the bottom of the viewport that
 * never covers anything the visitor needs. Everything below exists to keep it
 * out of the way of the five other fixed surfaces the theme already has:
 *
 *   chatbot launcher   bottom-LEFT,  z-index 900
 *   cookie consent     bottom-left (above the legal bar), z-index 60
 *   sticky legal bar   full width at the very bottom,      z-index 45
 *   mobile cart bar    full width at the very bottom,      z-index 60 (cart/checkout only)
 *   announce bar       bottom, when configured
 *
 * The button therefore claims the bottom-RIGHT corner — the one edge none of
 * them uses — and is lifted by `--legal-bar-h`, the variable consent.js keeps
 * in sync with the real measured height of the legal bar. That variable is why
 * this file needs no breakpoint for the bar's height: on a phone the bar wraps
 * to two rows, the variable grows, and the button moves up with it.
 *
 * Colours come only from the theme tokens, so both palettes work unchanged.
 * The side is written physically (`right`), never as `inset-inline-end`: in
 * Hebrew the logical property resolves to the LEFT, which is where the chatbot
 * already lives. Same lesson as chatbot.css (2026-09-12) — do not "tidy" this
 * back into a logical property.
 */

.nxwa {
  position: fixed;
  z-index: 55;
  /* Physical bottom-right, above the sticky legal bar. */
  inset-block-end: calc(var(--legal-bar-h) + 1.25rem);
  right: 1.25rem;
  left: auto;

  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.5rem;
  padding: 0.68rem 1.05rem;

  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent);

  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.nxwa:hover,
.nxwa:focus-visible {
  color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
}

.nxwa:focus-visible {
  outline: 2px solid var(--accent-glow);
  outline-offset: 3px;
}

.nxwa__icon {
  flex: 0 0 auto;
  display: block;
}

.nxwa__label {
  white-space: nowrap;
}

/* ------------------------------------------------------------------ desktop */

/*
 * The long list of fixed surfaces in the sidebar is the one place the button
 * would sit on top of a control the visitor is trying to use (filters, price
 * inputs, the back-to-top link). Rather than guess a width, ask the layout:
 * `:has()` covers the sidebar at whatever width the page actually gives it.
 * Already used by checkout.css (`:has(input:checked)`), so it is an accepted
 * dependency in this theme, and it is allowed to fail — an unsupported browser
 * simply keeps the button, which is the safe direction.
 */
@media (min-width: 40rem) {
  body:has(.sidebar) .nxwa,
  body:has(.shop-sidebar) .nxwa,
  body:has(.widget-area) .nxwa {
    display: none;
  }
}

/* ------------------------------------------------------- smartphone: icon */

/*
 * Up to 40rem the button collapses to the round icon bubble. A labelled pill
 * competes with the cart bar and the legal bar for a 360px-wide strip, and the
 * speech bubble reads on its own at this size. The label stays in the DOM for
 * screen readers, so nothing is lost by hiding it visually.
 */
@media (max-width: 40rem) {
  .nxwa {
    inset-block-end: calc(var(--legal-bar-h) + 0.9rem);
    right: 0.9rem;
    padding: 0.8rem;
    gap: 0;
  }

  .nxwa__label {
    display: none;
  }
}

/* --------------------------------------------------- never cover the chat */

/*
 * On a phone the assistant's panel becomes a full-screen sheet (chatbot.css,
 * ≤30rem). The WhatsApp button must not float over an open conversation, and
 * here the label is hidden anyway, so the selector costs nothing on desktop.
 */
@media (max-width: 30rem) {
  body:has(.nxchat[data-open="true"]) .nxwa {
    display: none;
  }
}

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

  .nxwa:hover,
  .nxwa:focus-visible {
    transform: none;
  }
}