/* =========================================================
   COMPARTILHAR ACESSO — WhatsApp / e-mail
   Três passos: aviso → escolher canal → pronto.
   Animações em transform/opacity, desligadas em "reduzir movimento".
========================================================= */
.shr-overlay{
  position: fixed; inset: 0; z-index: 430;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(10, 18, 35, .52); opacity: 0; transition: opacity .22s ease;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.shr-overlay.on{ opacity: 1; }
body.shr-locked{ overflow: hidden; }

.shr-box{
  position: relative; width: min(460px, 100%); max-height: 94vh; overflow-y: auto;
  background: #fff; border-radius: 24px 24px 0 0;
  box-shadow: 0 -24px 60px -24px rgba(10, 18, 35, .55);
  transform: translateY(18px) scale(.98); opacity: .6;
  transition: transform .3s cubic-bezier(.2, .9, .25, 1), opacity .25s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
.shr-overlay.on .shr-box{ transform: none; opacity: 1; }
@media (min-width: 721px){
  .shr-overlay{ align-items: center; }
  .shr-box{ border-radius: 24px; }
}

/* troca de passo */
.shr-in{ animation: shrIn .3s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes shrIn{ from{ opacity: 0; transform: translateX(14px); } to{ opacity: 1; transform: none; } }

/* ---------- Cabeçalho ---------- */
.shr-head{
  position: relative; padding: 20px 22px 18px; color: #fff; border-radius: 24px 24px 0 0;
  background:
    radial-gradient(380px 180px at 90% -20%, rgba(23, 134, 252, .5), transparent 65%),
    linear-gradient(140deg, #061B45 0%, #0B2A63 60%, #123C86 100%);
}
.shr-head h3{ margin: 10px 0 2px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.shr-sub{ margin: 0; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .82); }
.shr-sub b{ color: #fff; }
.shr-x{
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 0; border-radius: 11px; background: rgba(255, 255, 255, .2); color: #fff;
}
.shr-x svg{ width: 17px; height: 17px; }
.shr-x:hover{ background: rgba(255, 255, 255, .32); }
.shr-x:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; }

.shr-steps{ display: flex; gap: 5px; }
.shr-steps span{ width: 26px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .26); transition: background-color .3s ease; }
.shr-steps span.on{ background: #4FA3FF; }

/* cabeçalho de sucesso */
.shr-head-ok{ background: linear-gradient(140deg, #14532D 0%, #15803D 60%, #16A34A 100%); text-align: center; }
.shr-ok{ width: 58px; height: 58px; margin: 4px auto 8px; color: #fff; animation: shrPop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.shr-ok svg{ width: 100%; height: 100%; }
@keyframes shrPop{ from{ opacity: 0; transform: scale(.4); } to{ opacity: 1; transform: scale(1); } }

/* ---------- Corpo ---------- */
.shr-body{ padding: 18px 20px 20px; }

/* chave girando (passo 1) */
.shr-key{ position: relative; width: 84px; height: 84px; margin: 2px auto 16px; display: grid; place-items: center; }
.shr-key-ring{
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px dashed #B9CCE8; animation: shrSpin 9s linear infinite;
}
@keyframes shrSpin{ to{ transform: rotate(360deg); } }
.shr-key-ico{ width: 40px; height: 40px; color: var(--brand, #0B2A63); animation: shrFloat 2.6s ease-in-out infinite; }
.shr-key-ico svg{ width: 100%; height: 100%; }
@keyframes shrFloat{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-5px); } }

.shr-note{
  display: flex; gap: 11px; padding: 12px 14px; border-radius: 14px;
  background: #F4F7FB; border: 1px solid #E3E8EF; margin-bottom: 14px;
}
.shr-note-warn{ background: #FFF7E6; border-color: #F5D9A6; }
.shr-note-ico{ flex: 0 0 auto; width: 20px; height: 20px; color: #B7791F; }
.shr-note-ico svg{ width: 100%; height: 100%; }
.shr-note b{ display: block; font-size: 14px; color: #0F1B33; }
.shr-note p{ margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft, #4A5565); }

.shr-list{ margin: 0 0 18px; padding-left: 20px; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft, #4A5565); }
.shr-list b{ color: #0F1B33; }

/* código revelado */
.shr-code{
  text-align: center; padding: 16px; border-radius: 16px; margin-bottom: 10px;
  background: linear-gradient(180deg, #EAF2FF, #F7FAFF); border: 1.5px solid #C9DAF7;
  animation: shrReveal .45s cubic-bezier(.2, 1.2, .4, 1) both;
}
@keyframes shrReveal{ from{ opacity: 0; transform: scale(.94); } to{ opacity: 1; transform: none; } }
.shr-code-label{ display: block; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #5A6578; }
.shr-code-num{
  display: block; margin: 4px 0 2px; font-size: 34px; font-weight: 800; letter-spacing: .14em;
  color: var(--brand, #0B2A63); font-variant-numeric: tabular-nums;
}
.shr-code-cong{ display: block; font-size: 12.5px; color: var(--ink-soft, #4A5565); }
.shr-once{
  display: flex; align-items: flex-start; gap: 7px; margin: 0 0 16px;
  font-size: 12.5px; line-height: 1.45; color: #8C1D16;
}
.shr-once > span{ flex: 1 1 auto; min-width: 0; }
.shr-once b{ font-weight: 800; }
.shr-once svg{ width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }

/* opções de canal */
.shr-opts{ display: flex; flex-direction: column; gap: 9px; }
.shr-opt{
  display: flex; align-items: center; gap: 13px; width: 100%; min-height: 64px;
  padding: 12px 14px; border-radius: 15px; cursor: pointer; text-align: left;
  border: 1.5px solid #E3E8EF; background: #fff; font: inherit; color: #1C2A44;
  transition: border-color .15s ease, box-shadow .2s ease, transform .12s ease;
}
.shr-opt:hover{ border-color: #C5CFDD; box-shadow: 0 8px 18px -10px rgba(16, 24, 40, .35); }
.shr-opt:active{ transform: scale(.985); }
.shr-opt:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(23, 134, 252, .3); }
.shr-opt-ico{ flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff; }
.shr-opt-ico svg{ width: 24px; height: 24px; }
.shr-opt-whatsapp .shr-opt-ico{ background: linear-gradient(145deg, #4ADE80, #16A34A); }
.shr-opt-email .shr-opt-ico{ background: linear-gradient(145deg, #60A5FA, #1D4ED8); }
.shr-opt-copiar .shr-opt-ico{ background: linear-gradient(145deg, #94A3B8, #475569); }
.shr-opt-tx{ flex: 1 1 auto; min-width: 0; }
.shr-opt-tx b{ display: block; font-size: 15.5px; font-weight: 700; }
.shr-opt-tx small{ display: block; margin-top: 1px; font-size: 12.5px; color: var(--text-muted, #667085); }
.shr-opt-go{ flex: 0 0 auto; width: 20px; height: 20px; color: #A0AAB8; transition: transform .18s ease; }
.shr-opt-go svg{ width: 100%; height: 100%; }
.shr-opt:hover .shr-opt-go{ transform: translateX(3px); }

.shr-tip{ margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted, #667085); text-align: center; }
.shr-tip b{ color: #0F1B33; }

.shr-actions{ display: flex; gap: 10px; margin-top: 4px; }
.shr-actions .btn{ flex: 1 1 0; min-height: 50px; }

/* botão na lista de membros */
.member-share-btn{ color: #16A34A !important; }

@media (prefers-reduced-motion: reduce){
  .shr-overlay, .shr-box, .shr-in, .shr-key-ring, .shr-key-ico, .shr-code, .shr-ok, .shr-opt{
    animation: none !important; transition: none !important;
  }
}