/* ============ RedX Social Float — واتساب وانستقرام عائمان ============ */
.socl{
  position:fixed;z-index:71;
  inset-inline-start:16px;
  inset-block-end:calc(96px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:10px;
  opacity:0;transform:translateY(20px) scale(.9);
  transition:opacity .6s ease,transform .7s var(--e);
}
.socl.in{opacity:1;transform:none}
.socl-b{
  position:relative;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(17,3,9,.92);
  border:1px solid var(--line);
  box-shadow:0 12px 30px -10px #000;
  transition:transform .35s var(--e),border-color .3s,background .3s,box-shadow .35s;
}
.socl-b svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.socl-b.wa{color:#25d366}
.socl-b.ig{color:var(--gold)}
.socl-b.wa::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid rgba(37,211,102,.55);
  animation:soclPulse 2.8s 1.5s ease-out infinite;
}
@keyframes soclPulse{0%{opacity:.8;transform:scale(.92)}75%,100%{opacity:0;transform:scale(1.35)}}
@media(hover:hover){
  .socl-b:hover{transform:translateY(-4px) scale(1.06)}
  .socl-b.wa:hover{border-color:#25d366;box-shadow:0 16px 36px -10px rgba(37,211,102,.6)}
  .socl-b.ig:hover{border-color:var(--gold);box-shadow:0 16px 36px -10px rgba(232,199,126,.55)}
}
.socl-b:active{transform:scale(.9)}
/* التلميح الموسّع */
.socl-t{
  position:absolute;inset-inline-start:calc(100% + 12px);inset-block-start:50%;
  transform:translateY(-50%) translateX(8px);
  display:flex;flex-direction:column;line-height:1.3;
  padding:8px 14px;border-radius:14px;white-space:nowrap;
  background:var(--cream);color:var(--ink);
  box-shadow:0 14px 34px -8px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--e),transform .4s var(--e);
}
[dir=rtl] .socl-t{inset-inline-start:auto;inset-inline-end:calc(100% + 12px);transform:translateY(-50%) translateX(-8px)}
.socl-t b{font-size:13.5px}.socl-t small{font-size:11.5px;opacity:.65}
@media(hover:hover){
  .socl-b:hover .socl-t{opacity:1;transform:translateY(-50%) translateX(0)}
}
@media(min-width:1021px){
  .socl{inset-block-end:28px;inset-inline-start:24px;flex-direction:row}
}
@media(max-width:620px){
  .socl-t{display:none}
  .socl{inset-block-end:calc(150px + env(safe-area-inset-bottom,0px))}
}