/* ---- Dock ---- */
.wt-dock {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  /* FIXED: Start visible instead of hidden */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.5s cubic-bezier(.4,0,.2,1), transform 0.5s cubic-bezier(.4,0,.2,1);
}
/* Keep this class for scroll-based behavior if you want it later */
.wt-dock.hidden { opacity:0; transform:translateY(30px); pointer-events:none; }
.wt-dock.visible { opacity:1; transform:translateY(0); pointer-events:auto; }

/* ---- FAB ---- */
@keyframes ring-pulse {
  0%   { transform:scale(1);   opacity:0.55; }
  100% { transform:scale(2.3); opacity:0; }
}
.wt-fab {
  position: relative;
  width: 58px; height: 58px;
  border-radius: 50%;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  outline: none;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.wt-fab::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  animation: ring-pulse 2s ease-out infinite;
}
.wt-fab:hover { transform: scale(1.15) translateY(-3px); }

.wt-fab.wa   { background:linear-gradient(135deg,#25D366,#128C7E); box-shadow:0 8px 24px rgba(37,211,102,.45); }
.wt-fab.call { background:linear-gradient(135deg,#1a73e8,#0d47a1); box-shadow:0 8px 24px rgba(26,115,232,.45); }
.wt-fab.wa::before   { background:rgba(37,211,102,.4); }
.wt-fab.call::before { background:rgba(26,115,232,.4); }
.wt-fab.wa:hover   { box-shadow:0 14px 32px rgba(37,211,102,.6); }
.wt-fab.call:hover { box-shadow:0 14px 32px rgba(26,115,232,.6); }

.wt-fab svg { width:26px; height:26px; fill:#fff; position:relative; z-index:1; transition:transform .3s ease; }
.wt-fab:hover svg { transform:scale(1.1) rotate(-8deg); }

/* Tooltip */
.wt-fab-label {
  position:absolute; right:70px; top:50%;
  transform: translateY(-50%) translateX(10px);
  background:#1a2030; color:#fff;
  font-family:'Sora',sans-serif; font-size:12px; font-weight:600;
  white-space:nowrap; padding:6px 13px; border-radius:20px;
  opacity:0; pointer-events:none;
  transition: opacity .2s ease, transform .25s ease;
}
.wt-fab-label::after {
  content:''; position:absolute; right:-6px; top:50%;
  transform:translateY(-50%);
  border:6px solid transparent; border-right:none; border-left-color:#1a2030;
}
.wt-fab:hover .wt-fab-label { opacity:1; transform:translateY(-50%) translateX(0); }

/* ---- Overlay ---- */
.wt-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(10,15,30,.55);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  z-index:9999;
  align-items:flex-end; justify-content:flex-end;
  padding:0 24px 110px 0;
}
.wt-overlay.open { display:flex; }

/* ---- Card ---- */
.wt-card {
  background:#fff; border-radius:22px;
  width:310px; max-width:calc(100vw - 48px);
  overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.22);
  transform:scale(.88) translateY(20px); opacity:0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.wt-overlay.open .wt-card { transform:scale(1) translateY(0); opacity:1; }

/* ---- Card Header ---- */
.wt-card-head {
  padding:26px 22px 22px; color:#fff;
  position:relative; text-align:center;
}
.wt-card-head.wa-head   { background:linear-gradient(135deg,#25D366,#0e8c5a); }
.wt-card-head.call-head { background:linear-gradient(135deg,#1a73e8,#0d47a1); }
.wt-card-head::before,
.wt-card-head::after {
  content:''; position:absolute; border-radius:50%; background:rgba(255,255,255,.1);
}
.wt-card-head::before { width:90px; height:90px; top:-35px; right:-20px; }
.wt-card-head::after  { width:55px; height:55px; top:15px;  right:45px; }

.wt-close {
  position:absolute; top:13px; right:15px;
  background:rgba(255,255,255,.22); border:none; color:#fff;
  width:28px; height:28px; border-radius:50%; font-size:15px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s; z-index:2;
}
.wt-close:hover { background:rgba(255,255,255,.4); }

/* Big icon circle */
.wt-head-bigicon {
  width:68px; height:68px; border-radius:50%;
  background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
  border:2px solid rgba(255,255,255,.35);
  transition:transform .3s ease;
}
.wt-overlay.open .wt-head-bigicon { animation: iconPop .5s .2s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes iconPop { from{transform:scale(.5)} to{transform:scale(1)} }
.wt-head-bigicon svg { width:34px; height:34px; fill:#fff; }

.wt-card-head h3 {
  font-family:'Sora',sans-serif; font-size:17px; font-weight:700; margin-bottom:5px;
}
.wt-card-head p {
  font-size:12.5px; opacity:.88; font-family:'Sora',sans-serif; line-height:1.5;
}
.wt-online {
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  font-size:11px; font-weight:600; font-family:'Sora',sans-serif;
  background:rgba(255,255,255,.2); padding:4px 12px; border-radius:20px;
}
.wt-dot { width:7px; height:7px; background:#fff; border-radius:50%; animation:dot-blink 1.4s ease-in-out infinite; }
@keyframes dot-blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* ---- Card Body ---- */
.wt-card-body { padding:20px 20px 22px; }

.wt-info-row {
  display:flex; align-items:center; gap:12px;
  background:#f7faff; border:1.5px solid #e2eaf8;
  border-radius:12px; padding:12px 14px; margin-bottom:10px;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.wt-info-row:hover {
  border-color:#bcd0f5; box-shadow:0 4px 14px rgba(26,115,232,.1);
  transform:translateY(-1px);
}
.wt-info-row:last-of-type { margin-bottom:0; }

.wt-info-icon {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.wt-info-icon.green { background:#e8faf0; }
.wt-info-icon.blue  { background:#e8f0fe; }
.wt-info-icon svg   { width:20px; height:20px; }
.wt-info-icon.green svg { fill:#25D366; }
.wt-info-icon.blue  svg { fill:#1a73e8; }
.wt-info-icon.green svg[stroke] { fill:none; stroke:#25D366; }
.wt-info-icon.blue  svg[stroke] { fill:none; stroke:#1a73e8; }

.wt-info-text { flex:1; }
.wt-info-text span {
  display:block; font-family:'Sora',sans-serif; font-size:10px;
  color:#8896a5; font-weight:700; text-transform:uppercase; letter-spacing:.7px; margin-bottom:2px;
}
.wt-info-text strong {
  font-family:'Sora',sans-serif; font-size:13.5px; color:#1a2030; font-weight:700;
}

/* CTA button */
.wt-cta {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:14px; border:none; border-radius:13px; color:#fff;
  font-size:14.5px; font-weight:700; font-family:'Sora',sans-serif;
  cursor:pointer; margin-top:16px; letter-spacing:.2px; text-decoration:none;
  position:relative; overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease;
}
.wt-cta::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,0); transition:background .2s; }
.wt-cta:hover  { transform:translateY(-2px); }
.wt-cta:hover::after { background:rgba(255,255,255,.12); }
.wt-cta:active { transform:translateY(0); }
.wt-cta svg    { width:20px; height:20px; fill:#fff; flex-shrink:0; position:relative; z-index:1; }
.wt-cta span   { position:relative; z-index:1; }

.wt-cta.wa-cta   { background:linear-gradient(135deg,#25D366,#0e8c5a); box-shadow:0 6px 20px rgba(37,211,102,.4); }
.wt-cta.call-cta { background:linear-gradient(135deg,#1a73e8,#0d47a1); box-shadow:0 6px 20px rgba(26,115,232,.4); }
.wt-cta.wa-cta:hover   { box-shadow:0 10px 28px rgba(37,211,102,.55); }
.wt-cta.call-cta:hover { box-shadow:0 10px 28px rgba(26,115,232,.55); }