/* ============================================================
   Floating contact widget — site-wide, injected by contact-widget.js
   on every page. Closed state shows only the main button (currently
   a chat icon; reserved for a future AI assistant panel — see that
   file's header comment). Opening it reveals Phone + WhatsApp above
   it on one shared vertical axis. RedRoute red/white only, no
   WhatsApp green / phone orange — this is a RedRoute component, not
   a generic third-party widget.
   ============================================================ */

.contact-widget{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 85;
  display: flex;
  flex-direction: column-reverse; /* DOM order is main, whatsapp, phone — reversed visually so phone ends up on top, main stays at the anchor corner */
  align-items: center;
  gap: 12px;
  /* Hidden by default — contact-widget.js reveals it once the page's
     hero section has scrolled (mostly) out of view, via .is-visible.
     Pages with no detected hero add .is-visible immediately, so the
     widget behaves exactly as before there. */
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.contact-widget.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (max-width: 700px){
  .contact-widget{ right: 16px; bottom: 16px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce){
  .contact-widget{ transition: opacity 0.001ms !important; transform: none !important; }
}

/* ---------- shared circular button base ---------- */
.contact-widget__main,
.contact-widget__btn{
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.22);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.contact-widget__main:hover,
.contact-widget__btn:hover{
  background: var(--red-dark);
  transform: scale(1.04);
}
.contact-widget__main:active,
.contact-widget__btn:active{
  transform: scale(0.97);
}

.contact-widget__main{
  width: 58px;
  height: 58px;
}
@media (max-width: 700px){
  .contact-widget__main{ width: 54px; height: 54px; }
}

.contact-widget__btn{
  width: 50px;
  height: 50px;
  text-decoration: none;
  opacity: 0;
  transform: translateY(15px) scale(0.85);
  pointer-events: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
@media (max-width: 700px){
  .contact-widget__btn{ width: 48px; height: 48px; }
}
.contact-widget__btn--whatsapp{ transform: translateY(10px) scale(0.85); }
.contact-widget.is-open .contact-widget__btn{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.contact-widget.is-open .contact-widget__btn--whatsapp{ transition-delay: 30ms; }
.contact-widget.is-open .contact-widget__btn--phone{ transition-delay: 80ms; }

@media (prefers-reduced-motion: reduce){
  .contact-widget__btn,
  .contact-widget__icon{ transition: opacity 0.001ms !important; transform: none !important; }
}

/* ---------- icons ---------- */
.contact-widget__btn svg,
.contact-widget__icon{
  width: 22px;
  height: 22px;
}
.contact-widget__btn svg{ display: block; }

/* Chat/close icons are cross-faded, absolutely stacked, inside the
   main button — only the icons rotate slightly, never the button
   itself. */
.contact-widget__icon{
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 1;
  transform: rotate(0deg) scale(1);
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
}
.contact-widget__icon--close{
  opacity: 0;
  transform: rotate(-45deg) scale(0.7);
}
.contact-widget.is-open .contact-widget__icon--chat{
  opacity: 0;
  transform: rotate(45deg) scale(0.7);
}
.contact-widget.is-open .contact-widget__icon--close{
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* ---------- hover labels — desktop only, purely a visual helper ---------- */
.contact-widget__label{
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translate(6px, -50%);
  white-space: nowrap;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 7px 12px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(17, 17, 17, 0.14);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
@media (hover: hover) and (pointer: fine){
  .contact-widget__main:hover .contact-widget__label,
  .contact-widget__main:focus-visible .contact-widget__label,
  .contact-widget__btn:hover .contact-widget__label,
  .contact-widget__btn:focus-visible .contact-widget__label{
    opacity: 1;
    transform: translate(0, -50%);
  }
}
@media (max-width: 700px){
  .contact-widget__label{ display: none; }
}