/* SharpCut — share card modal (used by the landing page and the demo) */
/* ==========================================================================
   Share modal
   ========================================================================== */
.sharemodal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:1.2rem}
.sharemodal.is-open{display:flex}
.sharemodal__scrim{position:absolute;inset:0;background:rgba(4,5,7,.82);backdrop-filter:blur(4px)}
.sharemodal__box{
  position:relative;width:min(560px,100%);max-height:92vh;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-xl);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.95);overflow:hidden;
  animation:shareIn .3s var(--ease-out) both;
}
@keyframes shareIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.sharemodal__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex:none;
  padding:1rem 1.2rem;border-bottom:1px solid var(--line);background:var(--paper);
}
.sharemodal__head strong{font-family:var(--f-display);font-size:var(--fs-md)}
.sharemodal__preview{flex:1;overflow-y:auto;padding:1.2rem;background:var(--paper)}
.sharemodal__preview canvas{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line)}
.sharemodal__actions{display:flex;gap:.5rem;flex-wrap:wrap;padding:.85rem 1.2rem 0}
.sharemodal__actions .btn{flex:1;min-width:110px}
.sharemodal__note{margin:0;padding:.75rem 1.2rem 1.2rem;font-size:var(--fs-xs);color:var(--txt-3);line-height:1.55}
.sharemodal__note b{color:var(--txt-2);font-weight:550}

/* ------------------------------ social targets ---------------------------- */
/* Four named destinations. Each keeps its own brand colour only on hover —
   at rest they're uniform, so the row reads as one control group. */
.sharemodal__socials{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;
  padding:.9rem 1.2rem 0;flex:none;
}
.socbtn{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:.65rem .3rem;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:none;color:var(--txt-2);
  font-size:var(--fs-xs);font-weight:500;
  transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease);
}
.socbtn svg{width:18px;height:18px}
.socbtn:hover{background:rgba(255,255,255,.04);border-color:var(--line-3);color:var(--txt)}
.socbtn--whatsapp:hover{color:#4EBE68;border-color:rgba(78,190,104,.45)}
.socbtn--x:hover{color:var(--txt);border-color:var(--line-3)}
.socbtn--telegram:hover{color:#4C9BD1;border-color:rgba(76,155,209,.45)}
.socbtn--facebook:hover{color:#5B7FC4;border-color:rgba(91,127,196,.45)}

@media (max-width:420px){
  .sharemodal__socials{grid-template-columns:repeat(2,1fr)}
}

/* legacy single share button — kept for any page still using it */
.sharebtn{
  display:inline-flex;align-items:center;gap:.45rem;width:100%;justify-content:center;
  padding:.7rem 1rem;border-radius:var(--r-sm);
  border:1px solid rgba(46,216,140,.3);background:none;color:var(--cut);
  font-size:var(--fs-sm);font-weight:550;transition:background .18s;
}
.sharebtn:hover{background:var(--cut-dim)}
.sharebtn svg{width:15px;height:15px}