/* ============================================================
   WhatsApp side tab
   A square-edged vertical tab flush against the edge of the
   viewport, vertically centred. Icon on top, "WhatsApp" running
   down the tab. No rounded pill, no circle.
   ============================================================ */

.evi-wa-float {
  --evi-wa-green: #25d366;
  --evi-wa-green-dark: #1da851;

  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%);
  z-index: 99990;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;

  width: 46px;
  padding: 16px 0 18px;
  box-sizing: border-box !important;

  /* Square. Only the edge facing into the page is eased, and barely. */
  border-radius: 3px 0 0 3px !important;
  border: 0 !important;

  background: var(--evi-wa-green) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: -2px 0 14px rgba(0, 0, 0, 0.35);

  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
  line-height: 1 !important;
  cursor: pointer;

  transition: background 0.2s ease, width 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.evi-wa-right {
  right: 0 !important;
  left: auto !important;
}

.evi-wa-left {
  left: 0 !important;
  right: auto !important;
  border-radius: 0 3px 3px 0 !important;
  box-shadow: 2px 0 14px rgba(0, 0, 0, 0.35);
}

.evi-wa-float:hover,
.evi-wa-float:focus-visible {
  background: var(--evi-wa-green-dark) !important;
  color: #ffffff !important;
  width: 52px;
  box-shadow: -3px 0 18px rgba(0, 0, 0, 0.45);
}

.evi-wa-left:hover,
.evi-wa-left:focus-visible {
  box-shadow: 3px 0 18px rgba(0, 0, 0, 0.45);
}

.evi-wa-float:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: -4px;
}

.evi-wa-float:active {
  background: #179144 !important;
}

/* ---- Icon ---- */
.evi-wa-badge {
  flex: 0 0 auto;
  display: block !important;
  line-height: 0 !important;
}

.evi-wa-icon {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  color: #ffffff !important;
}

/* ---- Vertical wordmark ----
   vertical-rl runs the text downward with the glyphs turned a
   quarter-turn clockwise — the standard reading direction for a
   tab on the right edge. */
.evi-wa-text {
  display: block !important;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: mixed;

  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em;
  color: #ffffff !important;
  white-space: nowrap;
  text-transform: none;
  margin: 0 !important;
  padding: 0 !important;
}

/* Left-side tab reads bottom-to-top instead, so it still faces the page. */
.evi-wa-left .evi-wa-text {
  transform: rotate(180deg);
}

/* ---- Mobile: same tab, slightly slimmer ---- */
@media (max-width: 782px) {
  .evi-wa-float {
    width: 40px;
    padding: 13px 0 15px;
    gap: 7px;
  }

  .evi-wa-float:hover,
  .evi-wa-float:focus-visible { width: 40px; }

  .evi-wa-icon { width: 21px !important; height: 21px !important; }
  .evi-wa-text { font-size: 11.5px !important; letter-spacing: 0.09em; }
}

/* Very short screens: icon only, so the tab never runs off-screen */
@media (max-height: 420px) {
  .evi-wa-text { display: none !important; }
  .evi-wa-float { padding: 12px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .evi-wa-float { transition: none !important; }
}

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