/* ==========================================================================
   DINKOMART — the floating WhatsApp button

   Replaced Raitha Mitra (raitha.css) on 2026-10-05, in the same place in the
   load order — after micro.css, before viewer.css and mobile.css — and on the
   same geometry, so nothing that was laid out around the old launcher moves:
   bottom right, a 60px disc (56px on a small phone) that opens into a pill
   with the label on hover or keyboard focus.

   WhatsApp green rather than the brand green, deliberately: this is the one
   control on the page whose whole job is to be recognised as WhatsApp at a
   glance. Built by req/js/whatsapp.js mountFab().
   ========================================================================== */

.wa-fab {
  position: fixed;
  right: clamp(14px, 2.4vw, 28px);
  bottom: clamp(14px, 2.4vw, 28px);
  z-index: var(--z-overlay);

  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 60px;
  padding: 0;
  border-radius: var(--r-pill);
  overflow: hidden;

  background:
    radial-gradient(120% 120% at 30% 12%, rgba(255, 255, 255, .28) 0%, transparent 58%),
    #25D366;
  color: #fff;
  box-shadow:
    0 2px 6px rgba(7, 60, 30, .28),
    0 14px 30px -8px rgba(7, 60, 30, .42),
    inset 0 1px 0 rgba(255, 255, 255, .3);

  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;

  transition: transform var(--dur-2) var(--ease-spring),
              box-shadow var(--dur-2) var(--ease-out),
              gap var(--dur-2) var(--ease-soil),
              padding var(--dur-2) var(--ease-soil);
}
.wa-fab:hover,
.wa-fab:focus-visible {
  color: #fff;
  gap: var(--s-3);
  padding-right: var(--s-6);
  transform: translateY(-2px);
  box-shadow:
    0 3px 8px rgba(7, 60, 30, .3),
    0 20px 40px -10px rgba(7, 60, 30, .5),
    inset 0 1px 0 rgba(255, 255, 255, .34);
}
.wa-fab:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 3px; }
.wa-fab:active { transform: translateY(0) scale(.96); }

.wa-fab-mark {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  flex: none;
  border-radius: 50%;
}
.wa-fab-mark .ico { width: 28px; height: 28px; stroke-width: 1.7; }

/* the label is clipped to zero at rest and opens with the button */
.wa-fab-text {
  display: grid;
  line-height: 1.1;
  text-align: left;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width var(--dur-2) var(--ease-soil), opacity var(--dur-1) var(--ease-out);
}
.wa-fab:hover .wa-fab-text,
.wa-fab:focus-visible .wa-fab-text { max-width: 180px; opacity: 1; }
.wa-fab-text b { font-size: var(--t-sm); font-weight: 800; }
.wa-fab-text span {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .06em;
  opacity: .9;
  margin-top: 3px;
}

/* a finger has no hover, so on touch the disc is the whole control */
@media (hover: none), (pointer: coarse) {
  .wa-fab-text { display: none; }
}

@media (max-width: 560px) {
  .wa-fab { height: 56px; }
  .wa-fab-mark { width: 56px; height: 56px; }
}

/* the buy bar on the product page and the button would otherwise stack */
@media (max-width: 979px) {
  .wa-fab { bottom: calc(72px + env(safe-area-inset-bottom)); }
}

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

@media print {
  .wa-fab { display: none !important; }
}