/* ==========================================================
   ShareCardLink - Social Side Dock
   Card page ke social buttons ko left side dock me dikhata hai,
   jo right side ke floating button se khulta hai.
   Self-contained - koi library nahi.
   ========================================================== */

:root{
  --sd-accent:#f5b301;
  --sd-accent2:#ff8a00;
  --sd-panel:rgba(18,20,28,.82);
  --sd-stroke:rgba(255,255,255,.14);
  --sd-txt:#f2f5fa;
}

/* ---------- 1. floating toggle button (FAB) ---------- */
#sd-fab{
  position:fixed;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  z-index:99990;
  width:58px;height:58px;
  border:0;border-radius:50%;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--sd-accent),var(--sd-accent2));
  box-shadow:0 10px 28px rgba(245,179,1,.42), 0 2px 8px rgba(0,0,0,.3);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
}
#sd-fab:hover{box-shadow:0 14px 36px rgba(245,179,1,.55), 0 2px 8px rgba(0,0,0,.3)}
#sd-fab:active{transform:translateY(-50%) scale(.93)}

/* halka pulse taaki dikhe */
#sd-fab::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(245,179,1,.55);
  animation:sdPulse 2.6s ease-out infinite;
}
@keyframes sdPulse{
  70%{box-shadow:0 0 0 16px rgba(245,179,1,0)}
  100%{box-shadow:0 0 0 0 rgba(245,179,1,0)}
}
body.sd-open #sd-fab::before{animation:none}

/* icon (4 dots -> X) */
#sd-fab .sd-ico{
  position:relative;width:22px;height:22px;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
#sd-fab .sd-ico span{
  position:absolute;width:8px;height:8px;border-radius:2.5px;background:#1a1205;
  transition:all .4s cubic-bezier(.34,1.56,.64,1);
}
#sd-fab .sd-ico span:nth-child(1){left:0;top:0}
#sd-fab .sd-ico span:nth-child(2){right:0;top:0}
#sd-fab .sd-ico span:nth-child(3){left:0;bottom:0}
#sd-fab .sd-ico span:nth-child(4){right:0;bottom:0}

body.sd-open #sd-fab .sd-ico{transform:rotate(45deg)}
body.sd-open #sd-fab .sd-ico span{border-radius:50%;width:7px;height:7px}
body.sd-open #sd-fab .sd-ico span:nth-child(1){left:3px;top:3px}
body.sd-open #sd-fab .sd-ico span:nth-child(2){right:3px;top:3px}
body.sd-open #sd-fab .sd-ico span:nth-child(3){left:3px;bottom:3px}
body.sd-open #sd-fab .sd-ico span:nth-child(4){right:3px;bottom:3px}

/* ---------- 2. scrim ---------- */
#sd-scrim{
  position:fixed;inset:0;z-index:99980;
  background:rgba(4,6,12,.5);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
}
body.sd-open #sd-scrim{opacity:1;pointer-events:auto}

/* ---------- 3. dock panel ---------- */
#sd-dock{
  position:fixed;
  left:0;top:50%;
  transform:translate(-112%,-50%);
  z-index:99985;
  width:104px;
  max-height:88vh;
  border-radius:0 22px 22px 0;
  display:flex;
  background:var(--sd-panel);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--sd-stroke);
  border-left:0;
  box-shadow:14px 0 46px rgba(0,0,0,.45);
  transition:transform .52s cubic-bezier(.22,1,.36,1);
}

/* andar ka scroll area */
#sd-scroll{
  width:100%;
  padding:14px 8px;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  border-radius:inherit;
}

/* neeche fade - tabhi jab list scroll hoti ho */
#sd-dock::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46px;
  border-radius:0 0 22px 0;
  background:linear-gradient(to bottom,rgba(18,20,28,0),rgba(18,20,28,.95));
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
#sd-dock.sd-scrollable::after{opacity:1}
body.sd-open #sd-dock{transform:translate(0,-50%)}

#sd-scroll::-webkit-scrollbar{width:4px}
#sd-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:4px}
#sd-scroll::-webkit-scrollbar-track{background:transparent}

/* ---------- 4. dock items ---------- */
.sd-item{
  display:block;
  width:100%;
  padding:7px 4px;
  text-align:center;
  text-decoration:none;
  border-radius:14px;
  position:relative;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  /* entry animation */
  opacity:0;
  transform:translateX(-26px);
  transition:background .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
body.sd-open .sd-item{
  animation:sdIn .5s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes sdIn{to{opacity:1;transform:translateX(0)}}

.sd-item:hover{background:rgba(255,255,255,.09);transform:translateX(4px)}
.sd-item:active{transform:scale(.94)}

/* icon */
.sd-item .sd-img{
  display:block;
  width:44px;height:44px;
  margin:0 auto 5px;
  border-radius:12px;
  object-fit:contain;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), filter .3s;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.35));
}
.sd-item:hover .sd-img{transform:scale(1.14) rotate(-5deg);filter:drop-shadow(0 6px 13px rgba(0,0,0,.5)) brightness(1.08)}

/* font-awesome fallback icon */
.sd-item .sd-fa{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:0 auto 5px;
  border-radius:12px;font-size:21px;color:#fff;
  background:linear-gradient(135deg,#3a4256,#222835);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.sd-item:hover .sd-fa{transform:scale(1.14) rotate(-5deg)}

/* label */
.sd-item .sd-lbl{
  display:block;
  font:600 10px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--sd-txt);
  letter-spacing:.2px;
  opacity:.85;
  word-break:break-word;
  transition:opacity .25s;
}
.sd-item:hover .sd-lbl{opacity:1}

/* displacement-style shine sweep */
.sd-item::after{
  content:"";position:absolute;top:0;left:-55%;width:45%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);
  transition:left .7s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.sd-item:hover::after{left:145%}

/* tap ripple */
.sd-ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.45);
  transform:scale(0);opacity:.8;
  animation:sdRipple .6s ease-out forwards;
}
@keyframes sdRipple{to{transform:scale(2.6);opacity:0}}

/* ---------- 5. mobile ---------- */
@media (max-width:600px){
  #sd-fab{width:52px;height:52px;right:10px}
  #sd-dock{width:88px;border-radius:0 18px 18px 0}
  #sd-scroll{padding:11px 6px}
  #sd-dock::after{border-radius:0 0 18px 0;height:38px}
  .sd-item .sd-img,.sd-item .sd-fa{width:40px;height:40px}
  .sd-item .sd-lbl{font-size:9px}
}

/* ---------- 6. print + reduced motion ---------- */
@media print{#sd-fab,#sd-dock,#sd-scrim{display:none !important}}

@media (prefers-reduced-motion:reduce){
  #sd-fab::before{animation:none}
  #sd-dock{transition:none}
  body.sd-open .sd-item{animation:none;opacity:1;transform:none}
  .sd-item,.sd-item .sd-img,.sd-item .sd-fa,.sd-item::after{transition:none}
}