/* ==========================================================================
   ALTMEZ — FLOATING CONTACT CONTROLS
   RIGHT: phone (call-now-button plugin)   ·   LEFT: WhatsApp (altmez-child)
   Positions are physical (left/right), not logical, so RTL cannot flip them.
   ========================================================================== */

:root {
  --altmez-float-size:   56px;
  --altmez-float-inset:  24px;
  --altmez-float-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 599px) {
  :root {
    --altmez-float-size:   54px;
    --altmez-float-inset:  16px;
    --altmez-float-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------
   1. Shared shell
   -------------------------------------------------------------------------- */
.altmez-float {
  position: fixed;
  z-index: 2147483646;                 /* just under the plugin's phone button */
  inline-size: var(--altmez-float-size);
  block-size: var(--altmez-float-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(16, 21, 28, .28);
  transition: transform var(--altmez-dur) var(--altmez-ease),
              box-shadow var(--altmez-dur) var(--altmez-ease);
}
.altmez-float:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16, 21, 28, .34); }
.altmez-float:active { transform: translateY(0); }

.altmez-float svg {
  position: relative;
  z-index: 1;
  inline-size: 58%;
  block-size: 58%;
  fill: #fff;
  color: #fff;
}

/* --------------------------------------------------------------------------
   2. WhatsApp — LEFT
   -------------------------------------------------------------------------- */
.altmez-float--wa {
  left: var(--altmez-float-inset);
  right: auto;
  bottom: var(--altmez-float-bottom);
  background: var(--altmez-whatsapp);   /* #25D366 */
  isolation: isolate;
}
.altmez-float--wa:hover { background: var(--altmez-whatsapp-700); }

/*
 * Pulse. A pseudo-element scales behind the button, so the button itself never
 * moves and nothing is ever laid out — no reflow, no CLS. `pointer-events:none`
 * keeps the halo from stealing the click.
 */
.altmez-float--wa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--altmez-whatsapp);
  pointer-events: none;
  animation: altmez-wa-pulse 2.1s cubic-bezier(.25, .6, .35, 1) infinite;
}

@keyframes altmez-wa-pulse {
  0%   { transform: scale(1);    opacity: .45; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* --------------------------------------------------------------------------
   3. Phone — RIGHT (plugin element, restyled only)
   -------------------------------------------------------------------------- */
/*
 * The plugin ships an inline `background-color:#008A00`, i.e. green — which
 * would read as a second WhatsApp button now that a real one exists. Green is
 * reserved for WhatsApp; the phone takes the ALTMEZ dark. !important is needed
 * to beat the inline style.
 */
#callnowbutton.call-now-button {
  background-color: var(--altmez-dark) !important;
  inline-size: var(--altmez-float-size) !important;
  block-size: var(--altmez-float-size) !important;
  right: var(--altmez-float-inset) !important;
  left: auto !important;
  bottom: var(--altmez-float-bottom) !important;
  border-radius: 50% !important;
  background-size: 58% 58% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 6px 20px rgba(16, 21, 28, .28);
  transition: background-color var(--altmez-dur) var(--altmez-ease),
              transform var(--altmez-dur) var(--altmez-ease);
}
#callnowbutton.call-now-button:hover {
  background-color: var(--altmez-dark-2) !important;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   4. Keep Kadence's back-to-top clear of the phone button
   -------------------------------------------------------------------------- */
/*
 * Kadence pins scroll-to-top to the bottom-right too, which lands it on top of
 * the phone button once the page is scrolled. Lift it above by one button plus
 * a gap.
 */
#kt-scroll-up,
#kt-scroll-up-reader,
.kadence-scroll-to-top {
  right: calc(var(--altmez-float-inset) + 3px) !important;
  left: auto !important;
  bottom: calc(var(--altmez-float-bottom) + var(--altmez-float-size) + 14px) !important;
}

/* --------------------------------------------------------------------------
   5. Accessibility
   -------------------------------------------------------------------------- */
.altmez-float:focus-visible,
#callnowbutton.call-now-button:focus-visible {
  outline: 3px solid var(--altmez-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .altmez-float--wa::before { animation: none; opacity: 0; }
  .altmez-float,
  #callnowbutton.call-now-button { transition: none; }
  .altmez-float:hover { transform: none; }
}

/* Print: floating controls are noise on paper. */
@media print {
  .altmez-float,
  #callnowbutton.call-now-button { display: none !important; }
}