/* CloudForcePath chat widget. Edit links in chat-widget.js, not here. */

/* Hide the old standalone WhatsApp button immediately (no flash before JS runs) */
a.whatsapp{display:none!important}

.cfp{--s:52px;position:fixed;z-index:9999;
  right:calc(22px + env(safe-area-inset-right,0px));
  bottom:calc(22px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  font:600 13px/1 Inter,"Segoe UI",Arial,sans-serif}
.cfp *{box-sizing:border-box}

/* Option list: WhatsApp sits nearest the main button */
.cfp-list{list-style:none;margin:0;padding:0 calc((62px - var(--s)) / 2) 0 0;
  display:flex;flex-direction:column-reverse;gap:12px;align-items:flex-end}
.cfp-list li{opacity:0;visibility:hidden;transform:translateY(18px) scale(.8);
  transition:opacity .15s,transform .15s,visibility 0s .15s}
.cfp.is-open .cfp-list li{opacity:1;visibility:visible;transform:none;
  transition:opacity .25s calc(var(--i) * .04s),
  transform .38s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * .04s),visibility 0s}

.cfp-opt{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;border-radius:30px}
.cfp-label,.cfp-tip{background:#07172d;color:#fff;border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:9px 14px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.4)}
.cfp-ico{width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;
  box-shadow:0 8px 20px rgba(0,0,0,.35);transition:transform .2s,box-shadow .2s}
.cfp-ico svg{width:50%;height:50%}
.cfp-opt:hover .cfp-ico,.cfp-opt:focus-visible .cfp-ico{
  transform:scale(1.12) rotate(-6deg);box-shadow:0 12px 28px rgba(0,0,0,.55)}
.cfp-wa{background:#25D366}
.cfp-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.cfp-tg{background:#27A7E7}

/* Main row: "24/7 Chat Support" pill + round button */
.cfp-row{display:flex;align-items:center;gap:10px}
.cfp-tip{display:flex;align-items:center;gap:8px;cursor:pointer;
  transition:opacity .2s,transform .2s}
.cfp-tip i{width:8px;height:8px;border-radius:50%;background:#25D366;box-shadow:0 0 0 3px rgba(37,211,102,.25)}
.cfp.is-open .cfp-tip{opacity:0;transform:translateX(8px);pointer-events:none}

.cfp-main{position:relative;width:62px;height:62px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,#24b9ff,#1a6fff);color:#fff;
  box-shadow:0 10px 30px rgba(36,185,255,.45),0 4px 12px rgba(0,0,0,.35)}
.cfp-main svg{position:absolute;inset:0;margin:auto;width:28px;height:28px;
  transition:transform .3s,opacity .25s}
.cfp-x{opacity:0;transform:rotate(-90deg) scale(.5)}
.cfp.is-open .cfp-x{opacity:1;transform:none}
.cfp.is-open .cfp-chat{opacity:0;transform:rotate(90deg) scale(.5)}

/* Pulse ring: 2.4s loop, scale 1 to 1.6 and fade; stops while open */
.cfp-main::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid #24b9ff;pointer-events:none;animation:cfp-pulse 2.4s ease-out infinite}
.cfp.is-open .cfp-main::before{animation:none;opacity:0}
@keyframes cfp-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}

/* Visible keyboard focus */
.cfp a:focus-visible,.cfp button:focus-visible,.cfp-tip:focus-visible{outline:3px solid #fff;outline-offset:3px}

@media(max-width:599px){
  .cfp{--s:48px}
  .cfp-label,.cfp-tip{font-size:12px;padding:8px 12px}
}
@media(prefers-reduced-motion:reduce){
  .cfp *,.cfp *::before{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
}