/* ==========================================================================
   DHARMIKAM — CONTACT FAB (Call / WhatsApp)
   Front page only. Everything is namespaced under .contact-fab / .contact-fab__*
   and uses the tokens declared in base.css.

   Stacking on the right edge, bottom up:
     chatbot launcher (62px) → back-to-top (50px, only once scrolled) → this.
   The widget sits just above the launcher and slides up to clear the
   back-to-top button while that button is visible.
   ========================================================================== */

.contact-fab{
  --fab-edge:clamp(14px,2.5vw,28px);
  --fab-size:54px;
  position:fixed;
  right:var(--fab-edge);
  bottom:calc(var(--fab-edge) + 74px);          /* clear of the chat launcher */
  z-index:1045;                                  /* above .to-top, below .chatbot */
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  font-family:var(--font-body);
  pointer-events:none;                           /* the wrapper never blocks the page */
  transition:bottom .45s var(--ease-out),opacity .35s var(--ease),visibility .35s;
}
.contact-fab > *{pointer-events:auto}

/* Back-to-top is showing — step up above it */
.to-top.is-visible ~ .contact-fab{bottom:calc(var(--fab-edge) + 130px)}

/* The chat panel is open — step aside so the two never overlap */
.chatbot.is-open ~ .contact-fab{opacity:0;visibility:hidden}

/* ==========================================================================
   1. TOGGLE
   ========================================================================== */
.contact-fab__toggle{
  position:relative;
  width:var(--fab-size);height:var(--fab-size);flex:none;
  display:grid;place-items:center;
  padding:0;border:0;border-radius:50%;
  background:linear-gradient(145deg,var(--herb) 0%,var(--forest) 70%);
  color:var(--cream);
  font-size:1.3rem;
  box-shadow:var(--sh-md),0 0 0 1px rgba(226,200,138,.22) inset;
  cursor:pointer;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),background .35s var(--ease);
}
.contact-fab__toggle:hover,
.contact-fab__toggle:focus-visible{
  transform:translateY(-3px) scale(1.04);
  box-shadow:var(--sh-lg),0 0 0 1px rgba(226,200,138,.42) inset;
}
.contact-fab__toggle:active{transform:translateY(-1px) scale(1)}

.contact-fab__glyph{
  grid-area:1/1;line-height:1;
  transition:transform .5s var(--ease-out),opacity .3s var(--ease);
}
.contact-fab__glyph--call{animation:contact-fab-ring 5s var(--ease) infinite}
.contact-fab__glyph--close{opacity:0;transform:rotate(-90deg) scale(.5);font-size:1.05rem;color:var(--gold-soft)}

/* Soft sage pulse — offset from the chat launcher's gold halo */
.contact-fab__toggle::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(116,169,141,.7);
  animation:contact-fab-pulse 2.8s var(--ease-out) 1.2s infinite;
  pointer-events:none;
}
.contact-fab__toggle:hover::after{animation-play-state:paused}

@keyframes contact-fab-pulse{
  0%  {opacity:.7;transform:scale(1)}
  70% {opacity:0;transform:scale(1.5)}
  100%{opacity:0;transform:scale(1.5)}
}
/* A brief, quiet "ring" every few seconds */
@keyframes contact-fab-ring{
  0%,86%,100%{transform:rotate(0)}
  88%{transform:rotate(-14deg)}
  90%{transform:rotate(12deg)}
  92%{transform:rotate(-10deg)}
  94%{transform:rotate(6deg)}
  96%{transform:rotate(0)}
}

/* Open — the phone becomes a close (×) */
.contact-fab.is-open .contact-fab__toggle{background:linear-gradient(145deg,var(--forest) 0%,var(--deep) 62%)}
.contact-fab.is-open .contact-fab__toggle::after{animation:none;opacity:0}
.contact-fab.is-open .contact-fab__glyph--call{animation:none;opacity:0;transform:rotate(90deg) scale(.5)}
.contact-fab.is-open .contact-fab__glyph--close{opacity:1;transform:none}

/* ==========================================================================
   2. MENU
   ========================================================================== */
.contact-fab__menu{
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  visibility:hidden;
  transition:visibility .45s;
}
.contact-fab.is-open .contact-fab__menu{visibility:visible;transition:visibility 0s}

.contact-fab__item{
  display:flex;align-items:center;gap:.8rem;
  min-width:212px;
  padding:.55rem 1.25rem .55rem .6rem;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  box-shadow:var(--sh-md);
  color:var(--ink);
  text-decoration:none;
  transform-origin:100% 100%;
  opacity:0;transform:translateY(14px) scale(.9);
  transition:opacity .35s var(--ease),transform .5s var(--ease-out),
             border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.contact-fab.is-open .contact-fab__item{opacity:1;transform:none}
/* Stagger: the item nearest the toggle arrives first */
.contact-fab.is-open .contact-fab__item:nth-child(1){transition-delay:.07s,.07s,0s,0s}
.contact-fab__item:hover,
.contact-fab__item:focus-visible{
  color:var(--ink);
  border-color:var(--sage-soft);
  box-shadow:var(--sh-lg);
}
.contact-fab.is-open .contact-fab__item:hover{transform:translateX(-3px)}

.contact-fab__ico{
  width:40px;height:40px;flex:none;
  display:grid;place-items:center;border-radius:50%;
  font-size:1.05rem;
}
.contact-fab__ico--call{background:var(--mist);color:var(--forest)}
.contact-fab__ico--wa{background:rgba(37,211,102,.14);color:#1DA851}

.contact-fab__text{display:flex;flex-direction:column;line-height:1.25}
.contact-fab__title{font-weight:600;font-size:.98rem;color:var(--ink)}
.contact-fab__sub{font-size:.82rem;color:var(--muted)}

/* ==========================================================================
   3. RESPONSIVE — matches the chatbot's mobile offsets (14px edge, 56px launcher,
   back-to-top at 78px)
   ========================================================================== */
@media (max-width:575.98px){
  .contact-fab{--fab-size:50px;right:14px;bottom:80px}
  .to-top.is-visible ~ .contact-fab{bottom:140px}
  .contact-fab__toggle{font-size:1.15rem}
  .contact-fab__item{min-width:0;padding:.45rem 1rem .45rem .5rem}
  .contact-fab__ico{width:36px;height:36px;font-size:.95rem}
}

/* ==========================================================================
   3b. RESPONSIVE VIEW (tablet & below) — one button for Chat / WhatsApp / Call
   The toggle carries a chat icon and its menu gains the Chat option, which
   opens the existing #chatbot panel. The chatbot's own launcher and the
   back-to-top button (hidden in responsive.css) step aside, so the toggle
   drops down to the corner.
   ========================================================================== */
.contact-fab__item--chat{display:none}
.contact-fab__glyph--chat{display:none}
button.contact-fab__item{font:inherit;text-align:left;cursor:pointer}
.contact-fab__ico--chat{background:rgba(192,153,63,.16);color:var(--deep)}

@media (max-width:991.98px){
  .contact-fab,
  .to-top.is-visible ~ .contact-fab{bottom:var(--fab-edge)}
  .chatbot__launcher{display:none}

  .contact-fab__item--chat{display:flex}
  .contact-fab__item{min-height:48px}

  /* Toggle shows the chat icon instead of the phone */
  .contact-fab__glyph--call{display:none}
  .contact-fab__glyph--chat{display:block}
  .contact-fab.is-open .contact-fab__glyph--chat{opacity:0;transform:rotate(90deg) scale(.5)}

  /* Stagger the three options: the one nearest the toggle arrives first */
  .contact-fab.is-open .contact-fab__item:nth-child(1){transition-delay:.12s,.12s,0s,0s}
  .contact-fab.is-open .contact-fab__item:nth-child(2){transition-delay:.06s,.06s,0s,0s}
}
@media (max-width:575.98px){
  .contact-fab,
  .to-top.is-visible ~ .contact-fab{bottom:14px}
}

/* ==========================================================================
   4. REDUCED MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .contact-fab__toggle::after{animation:none;opacity:.4}
  .contact-fab__glyph--call{animation:none}
  .contact-fab,.contact-fab__item,.contact-fab__glyph{transition-duration:.001ms!important}
}

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