/* ================================================
   زهار — ويدجت التواصل | widget.css v1.1.0
   الزر أقصى اليسار — البطاقة تفتح على اليمين
================================================ */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');

.zcw-widget *{box-sizing:border-box;margin:0;padding:0}

/* الحاوية: row — الزر يسار، البطاقة تنفتح يمينه */
.zcw-widget{
  position:fixed;
  left:0;
  bottom:var(--zcw-bottom-desktop, 28px);
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  gap:10px;
  font-family:'Tajawal',sans-serif;
  direction:ltr;
  z-index:99999;
}
@media(max-width:768px){
  .zcw-widget{bottom:var(--zcw-bottom-mobile,70px);gap:8px}
}

/* ═══════════════════════════
   عمود الزر (FAB + pill فوقه)
═══════════════════════════ */
.zcw-row{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding-left:10px;
  flex-shrink:0;
}
@media(max-width:768px){.zcw-row{padding-left:6px}}

/* ═══════════════════════════
   CARD — تفتح يمين الزر
═══════════════════════════ */
.zcw-card{
  background:rgba(20,50,10,0.75);
  backdrop-filter:blur(26px) saturate(200%);
  -webkit-backdrop-filter:blur(26px) saturate(200%);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:20px;padding:18px;width:258px;
  display:none;flex-direction:column;gap:11px;
  direction:rtl;
  box-shadow:0 24px 56px rgba(0,0,0,0.32),0 4px 14px rgba(0,0,0,0.18),inset 0 1px 0 rgba(255,255,255,0.2);
  animation:zcwIn .38s cubic-bezier(.34,1.56,.64,1);
  transform-origin:bottom left;
}
.zcw-card.open{display:flex}
@keyframes zcwIn{
  from{opacity:0;transform:translateX(-14px) scale(.93)}
  to{opacity:1;transform:translateX(0) scale(1)}
}
@media(max-width:768px){.zcw-card{width:220px;padding:14px;gap:9px}}

/* ═══════════════════════════
   HEADER
═══════════════════════════ */
.zcw-head{
  display:flex;align-items:center;gap:9px;
  padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.13);
}
.zcw-av{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(145deg,rgba(122,184,58,.55),rgba(74,124,47,.5));
  border:1px solid rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.zcw-av svg{width:22px;height:22px;fill:#fff}
.zcw-info{flex:1}
.zcw-info strong{display:block;color:#fff;font-size:15px;font-weight:800;line-height:1.2;letter-spacing:-.3px}
.zcw-info em{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.6);font-weight:400}
.zcw-live{
  display:flex;align-items:center;gap:4px;
  font-size:10.5px;font-weight:700;color:rgba(255,255,255,.9);
  background:rgba(76,175,80,.25);border:1px solid rgba(76,175,80,.38);
  padding:4px 9px;border-radius:20px;flex-shrink:0;
}
.zcw-dot{
  width:6px;height:6px;border-radius:50%;background:#69f0ae;
  box-shadow:0 0 6px rgba(105,240,174,.9);animation:zcwBlink 2s infinite;
}
@keyframes zcwBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(1.6)}}

/* ═══════════════════════════
   GREETING
═══════════════════════════ */
.zcw-greet{color:rgba(255,255,255,.75);font-size:12.5px;font-weight:400;line-height:1.7}

/* ═══════════════════════════
   BUTTONS
═══════════════════════════ */
.zcw-btn{
  display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:13px;
  text-decoration:none;cursor:pointer;border:none;width:100%;
  font-family:'Tajawal',sans-serif;font-size:13px;font-weight:700;
  transition:all .22s cubic-bezier(.34,1.56,.64,1);direction:rtl;
}
.zcw-btn:hover{transform:translateY(-2px) scale(1.015)}
.zcw-btn:active{transform:scale(.97)}
.zcw-wa{
  background:linear-gradient(135deg,#25d366,#0e8a58);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 4px 20px rgba(37,211,102,.32),inset 0 1px 0 rgba(255,255,255,.2);color:#fff;
}
.zcw-ph{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff}
.zcw-ph:hover{background:rgba(255,255,255,.19)}
.zcw-ico{
  width:32px;height:32px;background:rgba(255,255,255,.18);
  border-radius:9px;border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.zcw-ico svg{width:16px;height:16px;fill:#fff}
.zcw-txt{flex:1;text-align:right}
.zcw-txt small{display:block;font-size:10px;opacity:.72;font-weight:400;letter-spacing:.5px}
.zcw-arr{
  width:22px;height:22px;background:rgba(255,255,255,.12);
  border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.zcw-arr svg{width:11px;height:11px;fill:#fff}

/* ═══════════════════════════
   NUMBER STRIP
═══════════════════════════ */
.zcw-num{
  background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1);
  border-radius:11px;padding:9px 12px;
  display:flex;align-items:center;justify-content:space-between;
}
.zcw-num span{font-size:11.5px;color:rgba(255,255,255,.85);font-weight:700;direction:ltr;letter-spacing:.7px}
.zcw-cp{
  background:rgba(255,255,255,.13);border:none;cursor:pointer;
  font-size:11px;color:rgba(255,255,255,.9);
  font-family:'Tajawal',sans-serif;font-weight:700;
  padding:4px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.2);transition:all .2s;
}
.zcw-cp:hover{background:rgba(255,255,255,.23)}

/* ═══════════════════════════
   FAB (الزر الرئيسي)
═══════════════════════════ */
.zcw-fab{
  width:56px;height:56px;
  background:linear-gradient(145deg,var(--zcw-accent,#7bc442),var(--zcw-primary,#3d6b24));
  border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;position:relative;
  box-shadow:0 5px 26px rgba(74,124,47,.62),0 2px 8px rgba(0,0,0,.2),inset 0 1.5px 0 rgba(255,255,255,.28);
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
@media(max-width:768px){.zcw-fab{width:50px;height:50px}}
.zcw-fab:hover{transform:scale(1.1) rotate(-5deg)}
.zcw-fab.on{transform:scale(1.04);background:linear-gradient(145deg,#4a7c2f,#2a5018)}
.zcw-fab svg{
  width:26px;height:26px;fill:#fff;position:absolute;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1),opacity .22s;
}
@media(max-width:768px){.zcw-fab svg{width:22px;height:22px}}
.zcw-ic-o{opacity:1;transform:scale(1)}
.zcw-ic-c{opacity:0;transform:scale(.35) rotate(90deg)}
.zcw-fab.on .zcw-ic-o{opacity:0;transform:scale(.35) rotate(-90deg)}
.zcw-fab.on .zcw-ic-c{opacity:1;transform:scale(1) rotate(0)}

/* Ping rings */
.zcw-ring{
  position:absolute;inset:-5px;border-radius:50%;
  border:2px solid rgba(122,184,58,.5);
  animation:zcwRing 2.6s ease-out infinite;pointer-events:none;
}
.zcw-ring:nth-child(2){animation-delay:.75s;border-color:rgba(122,184,58,.3)}
@keyframes zcwRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.zcw-fab.on .zcw-ring{display:none}

/* Badge */
.zcw-badge{
  position:absolute;top:-1px;right:-1px;width:18px;height:18px;
  background:linear-gradient(135deg,#ff6b6b,#c0392b);
  border-radius:50%;border:2.5px solid #fff;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;color:#fff;font-weight:800;
  box-shadow:0 2px 7px rgba(192,57,43,.52);
  animation:zcwWiggle 3.5s ease-in-out infinite;
}
@keyframes zcwWiggle{
  0%,75%,100%{transform:rotate(0)}80%{transform:rotate(-14deg)}87%{transform:rotate(14deg)}93%{transform:rotate(-8deg)}
}

/* ═══════════════════════════
   PILL TOOLTIP (فوق الزر)
═══════════════════════════ */
.zcw-pill{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(18px);
  color:#2d5a1b;font-size:12px;font-weight:700;
  padding:8px 14px;border-radius:24px;
  box-shadow:0 4px 20px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.55);
  white-space:nowrap;font-family:'Tajawal',sans-serif;
  animation:zcwFloat 3.2s ease-in-out infinite;
  transition:opacity .4s,transform .4s;
}
.zcw-pd{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#4CAF50,#1b5e20);flex-shrink:0}
@keyframes zcwFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.zcw-pill.hide{opacity:0;transform:translateY(6px);pointer-events:none}