/* ============================================================
   Riderland — Sticky Contact Us Floating Button
   Brand: #FFCC00 (DeWalt Yellow), #25D366 (WhatsApp Green)
   ============================================================ */

/* ── WRAPPER ─────────────────────────────────────────────── */
.sticky-contact {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* ── EXPANDED ACTION PANEL ───────────────────────────────── */
.sticky-contact-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity .25s ease, transform .25s ease;
}
.sticky-contact.is-open .sticky-contact-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* ── INDIVIDUAL ACTION ITEMS ──────────────────────────────── */
.sticky-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 11px 18px 11px 14px;
  border-radius: 50px;
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  letter-spacing: .01em;
}
.sticky-contact-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(0,0,0,.45);
  filter: brightness(1.08);
}
.sticky-contact-item:active { transform: translateY(0); }

/* Phone — brand yellow */
.sticky-contact-item.sc-phone {
  background: var(--brand, #FFCC00);
  color: #09090F;
}

/* WhatsApp — green */
.sticky-contact-item.sc-whatsapp {
  background: #25D366;
  color: #fff;
}

/* Icon */
.sticky-contact-item .sc-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}

/* Label text */
.sticky-contact-item .sc-label {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
}

/* ── TOGGLE BUTTON ────────────────────────────────────────────── */
.sticky-contact-toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: transform .22s ease;
  position: relative;
  flex-shrink: 0;
  padding: 0;
}
.sticky-contact-toggle:hover {
  transform: scale(1.08);
}
.sticky-contact-toggle:active { transform: scale(0.96); }

/* Pulse ring — draws attention on page load */
.sticky-contact-toggle::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255,204,0,.45);
  animation: sc-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes sc-pulse {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Toggle icon images */
.sticky-contact-toggle .sc-toggle-icon {
  transition: transform .25s ease, opacity .2s ease;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}
.sticky-contact-toggle .sc-toggle-icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  border-radius: 50%;
}
.sticky-contact-toggle .sc-toggle-icon-open  { opacity: 1; transform: rotate(0deg) scale(1); }
.sticky-contact-toggle .sc-toggle-icon-close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
  /* close icon — simple X overlay */
  background: rgba(28,28,46,.85);
  border-radius: 50%;
  color: #FFCC00;
  font-size: 1.4rem;
  font-weight: 700;
}

.sticky-contact.is-open .sticky-contact-toggle .sc-toggle-icon-open  { opacity: 0; transform: rotate(90deg) scale(0.6); }
.sticky-contact.is-open .sticky-contact-toggle .sc-toggle-icon-close { opacity: 1; transform: rotate(0deg) scale(1); }
.sticky-contact.is-open .sticky-contact-toggle::before { display: none; }

/* ── TOOLTIP HINT — REMOVED ──────────────────────────────── */
.sticky-contact-hint {
  display: none;
}

/* ── MOBILE ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .sticky-contact {
    bottom: 20px;
    right: 16px;
  }
  .sticky-contact-toggle {
    width: 52px;
    height: 52px;
  }
  .sticky-contact-toggle .sc-toggle-icon {
    width: 52px;
    height: 52px;
  }
  .sticky-contact-toggle .sc-toggle-icon img {
    width: 52px;
    height: 52px;
  }
  .sticky-contact-item {
    font-size: .85rem;
    padding: 10px 16px 10px 12px;
  }
}

/* ── REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sticky-contact-toggle::before { animation: none; }
  .sticky-contact-panel,
  .sticky-contact-item,
  .sticky-contact-toggle,
  .sticky-contact-toggle .sc-toggle-icon {
    transition: none;
  }
}