/* ── Floating contact widget ──
 * Plain-PHP adaptation of dc-contact-widgetV5.
 * Floating action button bottom-right with WhatsApp / Phone / Email channels.
 */
.cw-widget{
  position:fixed; right:18px; bottom:24px;
  z-index:2147483647;
  display:flex; flex-direction:column-reverse; align-items:center; gap:12px;
  pointer-events:none; /* let children take pointer events */
}
.cw-widget > *{ pointer-events:auto; }

.cw-icon{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; text-decoration:none;
  background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:transform .18s ease, box-shadow .18s ease;
  border:0;
}
.cw-icon:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.24); }
.cw-icon:focus-visible{ outline:3px solid rgba(255,107,53,.55); outline-offset:3px; }
.cw-icon svg{ width:28px; height:28px; }
.cw-icon[data-key="whatsapp"]{ background:#25D366; }
.cw-icon[data-key="phone"]{    background:#0D6EFD; }
.cw-icon[data-key="email"]{    background:#FF6B35; }
.cw-icon[data-key="telegram"]{ background:#26A5E4; }
.cw-icon[data-key="whatsapp"] svg,
.cw-icon[data-key="phone"] svg,
.cw-icon[data-key="email"] svg,
.cw-icon[data-key="telegram"] svg{ fill:#fff; stroke:none; }

.cw-main{
  width:60px; height:60px; position:relative;
  background:#FF6B35;
}
.cw-main svg{ width:30px; height:30px; fill:#fff; }
.cw-main::before, .cw-main::after{
  content:""; position:absolute; inset:-6px;
  border-radius:50%; background:#FF6B35; opacity:.35;
  pointer-events:none;
}
.cw-widget:not(.is-open) .cw-main::before{ animation:cw-pulse 2.4s ease-out infinite; }
.cw-widget:not(.is-open) .cw-main::after{  animation:cw-pulse 2.4s ease-out 1.2s infinite; }
@keyframes cw-pulse{
  0%   { transform:scale(1);   opacity:.35; }
  70%  { transform:scale(1.9); opacity:0;   }
  100% { transform:scale(2.2); opacity:0;   }
}
@media (prefers-reduced-motion: reduce){
  .cw-widget .cw-main::before, .cw-widget .cw-main::after{ animation:none; }
}

.cw-menu{
  display:none; flex-direction:column-reverse; align-items:center; gap:12px;
}
.cw-widget.is-open .cw-menu{ display:flex; }
.cw-widget.is-open .cw-main svg{ transform:rotate(45deg); transition:transform .2s ease; }

.cw-tip{
  position:absolute; right:calc(100% + 10px); top:50%;
  transform:translateY(-50%) scale(.96);
  background:#111; color:#fff;
  padding:6px 10px; border-radius:8px; font-size:13px;
  white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .14s ease, transform .14s ease;
}
.cw-tip::after{
  content:""; position:absolute; top:50%; right:-5px;
  transform:translateY(-50%);
  border:5px solid transparent; border-left-color:#111;
}
.cw-icon:hover .cw-tip,
.cw-icon:focus-visible .cw-tip{ opacity:1; transform:translateY(-50%) scale(1); }

@media (max-width:600px){
  .cw-widget{ right:14px; bottom:16px; gap:10px; }
  .cw-icon{ width:48px; height:48px; }
  .cw-icon svg{ width:24px; height:24px; }
  .cw-main{ width:56px; height:56px; }
  .cw-main svg{ width:28px; height:28px; }
}
