/*
 * floating-buttons.css - stack the three floating contact buttons in one
 * right-aligned column instead of letting them overlap (requested 2026-09-28).
 *
 * Three plugins each pinned themselves to the bottom-right corner:
 *   Click to Chat  #ht-ctc-chat   WhatsApp icon, 50x50    (inline bottom/right 15px)
 *   Royal Addons   .wpr-pc-btn    "Call Now" pill, ~42 tall (right/bottom 30px)
 *   Chaty          .chaty-widget  "Contact us" launcher, 54x54 (right/bottom 25px)
 * Their positions are set inline or by plugin CSS, hence !important.
 *
 * Column, bottom to top, 12px gaps, right edges aligned at --fab-right:
 *   WhatsApp -> Call Now -> Contact us (Chaty opens its menu upwards).
 */
:root {
  --fab-right: 20px;
  --fab-bottom: 20px;
  --fab-gap: 12px;
  --fab-whatsapp: 50px;   /* ht-ctc icon height */
  --fab-call: 42px;       /* Call Now pill height */
}

/* 1. WhatsApp - bottom of the column */
#ht-ctc-chat {
  right: var(--fab-right) !important;
  bottom: var(--fab-bottom) !important;
}

/* 2. Call Now - directly above WhatsApp */
.wpr-pc-btn {
  right: var(--fab-right) !important;
  bottom: calc(var(--fab-bottom) + var(--fab-whatsapp) + var(--fab-gap)) !important;
  left: auto !important;
  top: auto !important;
}

/* 3. Chaty "Contact us" - top of the column. The widget box is 0x0 and its
      launcher sits 4px inside the box's right edge, so offset by 4px less. */
.chaty-widget {
  right: calc(var(--fab-right) - 4px) !important;
  bottom: calc(var(--fab-bottom) + var(--fab-whatsapp) + var(--fab-gap)
               + var(--fab-call) + var(--fab-gap)) !important;
  left: auto !important;
  top: auto !important;
}

/* Pages without a Call Now button (the 5 standalone landing pages and 404 -
   no shared footer) get body.fab-no-call from fix_floating_buttons.py, so
   Chaty sits directly above WhatsApp instead of leaving a gap. */
.fab-no-call .chaty-widget {
  bottom: calc(var(--fab-bottom) + var(--fab-whatsapp) + var(--fab-gap)) !important;
}

@media (max-width: 767px) {
  :root {
    --fab-right: 14px;
    --fab-bottom: 14px;
    --fab-gap: 10px;
  }
}