/* ==========================================================================
   NHV-34 — WhatsApp float
   ==========================================================================
   The persistent "message us" button, bottom right of every page.

   Its URL is the one already in Settings > Extensions > Modules > NHV Footer
   (module_nhv_footer_whatsapp), injected into the footer by
   extension/module/nhv_footer. Blank there and the button does not render — so
   there is no second place to keep a phone number in step.

   NOT the ebwhatappchat extension. That is installed and enabled, and it is
   what draws the black circle on the live site, but its settings are still the
   demo's — heading "XXXX", description "YYYYYY", number "0123467…". This owes
   it nothing and does not touch it; see the docs for what to do about it.
   ========================================================================== */

.nhv-whatsapp {
  position: fixed;
  right: 22px;
  bottom: 22px;

  /* Below the cart modal (1050) and the toasts (1060) — both of those are
     responses to something the shopper just did and must not be sat on by a
     button that is always there. Above everything else. */
  z-index: 1040;

  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* On a phone the home indicator sits in the bottom inset, and a button placed
   22px from the bottom lands under it. */
@supports (padding: env(safe-area-inset-bottom)) {
  .nhv-whatsapp { bottom: calc(22px + env(safe-area-inset-bottom)); }
}

/* --- The button -----------------------------------------------------------
   Round, which is the one place this theme knowingly breaks its own
   square-edged rule. Two reasons and both are real: a floating affordance is
   not part of the page grid, so a square one reads as a banner someone dropped
   on the page; and the brand mark itself — the badge in the header and on the
   age gate — is a circle, so this is the brand's shape, not a borrowed one.

   Navy and copper rather than WhatsApp's own green. The glyph is the thing that
   says WhatsApp, and it carries that on its own; a #25D366 circle would be the
   only object of that colour anywhere on the site. */
.nhv-whatsapp-dial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: var(--nhv-cream-bright);              /* 13.68:1 at the dark end of the gradient */
  background-color: var(--nhv-navy-panel);
  background-image: linear-gradient(130deg, var(--nhv-navy-panel) 0%, var(--nhv-navy) 100%);
  border: 1px solid var(--nhv-navy-border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: border-color var(--nhv-transition), transform var(--nhv-transition), box-shadow var(--nhv-transition);
}

.nhv-whatsapp-dial .fa {
  font-size: 28px;
  line-height: 1;
}

.nhv-whatsapp:hover .nhv-whatsapp-dial,
.nhv-whatsapp:focus .nhv-whatsapp-dial {
  border-color: var(--nhv-copper);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

/* Bootstrap paints a:hover a different colour; the glyph is the link's text. */
.nhv-whatsapp:hover,
.nhv-whatsapp:focus { text-decoration: none; }
.nhv-whatsapp:hover .nhv-whatsapp-dial,
.nhv-whatsapp:focus .nhv-whatsapp-dial { color: var(--nhv-cream-bright); }

.nhv-whatsapp:focus-visible .nhv-whatsapp-dial { outline: 2px solid var(--nhv-copper); outline-offset: 3px; }
.nhv-whatsapp:focus .nhv-whatsapp-dial { outline: 2px solid var(--nhv-copper); outline-offset: 3px; }
.nhv-whatsapp:focus:not(:focus-visible) .nhv-whatsapp-dial { outline: none; }

/* --- The label ------------------------------------------------------------
   The glyph alone assumes everyone reads it. This is the caption, and it slides
   out on hover or keyboard focus rather than sitting there permanently, because
   a permanent pill in the corner of every page is clutter.

   Only where there is a real pointer. On a touch screen `:hover` fires on the
   first tap, so the label would flash open as the shopper is already leaving
   for WhatsApp — and the button's accessible name carries the same words
   regardless. */
.nhv-whatsapp-label {
  display: none;
  padding: 9px 14px;
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-small);
  font-weight: var(--nhv-fw-semi);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--nhv-cream);                     /* 12.50:1 at the dark end of the gradient */
  background-color: var(--nhv-navy-panel);
  background-image: linear-gradient(130deg, var(--nhv-navy-panel) 0%, var(--nhv-navy) 100%);
  border: 1px solid var(--nhv-navy-border);
  border-radius: var(--nhv-radius-sm);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

@media (hover: hover) and (pointer: fine) {
  .nhv-whatsapp-label {
    display: block;
    opacity: 0;
    transform: translateX(10px);
    pointer-events: none;
    transition: opacity var(--nhv-transition), transform var(--nhv-transition);
  }

  .nhv-whatsapp:hover .nhv-whatsapp-label,
  .nhv-whatsapp:focus .nhv-whatsapp-label {
    opacity: 1;
    transform: none;
  }
}

/* --- Getting out of the way ----------------------------------------------- */

/* The toasts are fixed to the same corner — 340px wide at bottom:16, which
   lands squarely on this button. Lifting them is done HERE rather than in
   toast.css so the offset sits with the thing that caused it, and because this
   stylesheet is linked after that one it wins at equal specificity. The value
   is the button's height plus its offset plus a gap. */
.nhv-toasts { bottom: 92px; }

/* While the age gate is up there is nothing to message about yet, and the
   button would sit under the veil as a grey smudge. The gate already puts this
   class on the body. */
body.nhv-agegate-open .nhv-whatsapp { display: none; }

@media print {
  .nhv-whatsapp { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nhv-whatsapp-dial,
  .nhv-whatsapp-label { transition: none; }
  .nhv-whatsapp:hover .nhv-whatsapp-dial,
  .nhv-whatsapp:focus .nhv-whatsapp-dial { transform: none; }
}

@media (max-width: 600px) {
  .nhv-whatsapp { right: 16px; bottom: 16px; }
  .nhv-whatsapp-dial { width: 52px; height: 52px; }
  .nhv-whatsapp-dial .fa { font-size: 25px; }
  .nhv-toasts { bottom: 80px; }
}
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 600px) {
    .nhv-whatsapp { bottom: calc(16px + env(safe-area-inset-bottom)); }
    .nhv-toasts { bottom: calc(80px + env(safe-area-inset-bottom)); }
  }
}