/*!
 * Floating Contact Buttons — Jayam Construction Kumbakonam
 * floating-contact.css
 *
 * Scoped to #fc-wrap and .fc-* to avoid conflicts with existing styles.
 */

/* ── Wrapper ──────────────────────────────────────────────────── */
#fc-wrap {
  position: fixed;
  bottom: 20px;
  right: 8px;
  z-index: 9999;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  /* Let pointer events fall through the gap between buttons */
  pointer-events: none;
}

/* ── Base button ─────────────────────────────────────────────── */
.fc-btn {
  display: block;
  line-height: 0;          /* removes gap below inline img */
  pointer-events: auto;
  transition: transform 0.2s ease, filter 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.fc-btn:hover {
  transform: scale(1.06);
  filter: brightness(1.08);
}

.fc-btn:active {
  transform: scale(0.94);
  filter: brightness(0.95);
}

/* ── WhatsApp button ─────────────────────────────────────────── */
.fc-whatsapp img {
  width: 190px;
  height: auto;
  display: block;
}

/* Subtle pulse to draw attention without being intrusive */
@keyframes fc-wa-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.fc-whatsapp {
  animation: fc-wa-pulse 3s ease-in-out infinite;
}

/* Pause animation on hover so the scale interaction feels clean */
.fc-whatsapp:hover,
.fc-whatsapp:active {
  animation: none;
}

/* ── Phone button ────────────────────────────────────────────── */
.fc-phone {
  display: none;           /* hidden by default (desktop) */
}

.fc-phone img {
  width: 52px;
  height: auto;
  display: block;
}

/* ── Desktop (≥ 1100px) ──────────────────────────────────────── */
@media only screen and (min-width: 1100px) {
  #fc-wrap {
    bottom: 26px;
    right: 26px;
  }

  .fc-whatsapp img {
    width: 250px;
  }
}

/* ── Mobile (≤ 600px) ────────────────────────────────────────── */
@media only screen and (max-width: 600px) {
  .fc-phone {
    display: block;        /* show phone icon on mobile */
    margin-left: 4px;
    margin-right: 6px;
  }
}