.b2a-share-box,
.b2a-share-box *{box-sizing:border-box}

.b2a-share-box{
  --b2a-share-text:#111827;
  --b2a-share-muted:#64748b;
  --b2a-share-line:#e4eaf2;
  --b2a-share-soft:#f8fafc;
  --b2a-share-accent:#4f46e5;
  position:relative;
  isolation:isolate;
  direction:rtl;
  width:100%;
  margin:24px 0;
  padding:22px;
  border:1px solid var(--b2a-share-line);
  border-radius:22px;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
  box-shadow:0 14px 38px rgba(15,23,42,.055);
  color:var(--b2a-share-text);
  text-align:right;
  font-family:inherit;
  overflow:hidden;
}

.b2a-share-box::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,#7c3aed,#2563eb,#06b6d4);
  opacity:.9;
}

.b2a-share-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 18px;
}

.b2a-share-head-icon{
  flex:0 0 44px;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:linear-gradient(135deg,#eef2ff,#eff6ff);
  color:var(--b2a-share-accent);
  border:1px solid #e0e7ff;
}

.b2a-share-head-icon svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.b2a-share-intro{min-width:0;display:flex;flex-direction:column;gap:4px}
.b2a-share-intro strong{display:block;margin:0;color:var(--b2a-share-text);font-size:17px;font-weight:800;line-height:1.55}
.b2a-share-intro span{display:block;margin:0;color:var(--b2a-share-muted);font-size:12.5px;font-weight:500;line-height:1.7}

.b2a-share-actions{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  width:100%;
}

.b2a-share-btn{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:100%;
  min-width:0;
  min-height:54px;
  margin:0!important;
  padding:10px 9px!important;
  border:1px solid var(--b2a-share-line)!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#263244!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  text-align:center!important;
  cursor:pointer!important;
  font-family:inherit!important;
  font-size:12.5px!important;
  font-weight:700!important;
  line-height:1.35!important;
  text-decoration:none!important;
  box-shadow:0 2px 8px rgba(15,23,42,.025)!important;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease!important;
}

.b2a-share-btn:hover,
.b2a-share-btn:focus-visible{
  transform:translateY(-2px);
  border-color:#cbd5e1!important;
  background:var(--b2a-share-soft)!important;
  box-shadow:0 8px 20px rgba(15,23,42,.07)!important;
  outline:none!important;
}

.b2a-share-btn:disabled{opacity:.58;cursor:wait!important;transform:none!important}
.b2a-share-btn.is-loading .b2a-share-icon{animation:b2aSharePulse .8s ease-in-out infinite alternate}
@keyframes b2aSharePulse{to{opacity:.35;transform:scale(.9)}}

.b2a-share-icon{flex:0 0 20px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center}
.b2a-share-icon svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.b2a-share-telegram .b2a-share-icon{color:#229ed9}
.b2a-share-whatsapp .b2a-share-icon{color:#16a34a}
.b2a-share-instagram .b2a-share-icon{color:#c026d3}
.b2a-share-x .b2a-share-icon{color:#111827}
.b2a-share-btn.b2a-share-copy .b2a-share-icon{color:#64748b}
.b2a-share-native .b2a-share-icon{color:#4f46e5}
.b2a-share-telegram svg,.b2a-share-whatsapp svg,.b2a-share-x svg{fill:currentColor;stroke:none}

.b2a-share-toast{
  min-height:0;
  max-height:0;
  overflow:hidden;
  margin:0;
  padding:0 2px;
  color:#475569;
  font-size:12px;
  font-weight:600;
  line-height:1.7;
  opacity:0;
  transform:translateY(-3px);
  transition:max-height .2s ease,margin .2s ease,opacity .2s ease,transform .2s ease;
}
.b2a-share-toast.show{max-height:44px;margin-top:11px;opacity:1;transform:none}

/* The portal is hidden at the footer to prevent a flash in the wrong place. */
.b2a-share-footer-fallback{display:none!important}
.b2a-share-box.b2a-share-ready{display:block!important}

/* When no comments/related landmark exists, JS still keeps the fallback tidy. */
.b2a-share-box[data-b2a-placement="before-footer"],
.b2a-share-box[data-b2a-placement="end-body"]{max-width:1180px;margin-left:auto;margin-right:auto}

@media(max-width:1050px){
  .b2a-share-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:640px){
  .b2a-share-box{margin:18px 0;padding:17px;border-radius:18px}
  .b2a-share-head{gap:10px;margin-bottom:14px}
  .b2a-share-head-icon{flex-basis:40px;width:40px;height:40px;border-radius:12px}
  .b2a-share-intro strong{font-size:15px}
  .b2a-share-intro span{font-size:11.5px}
  .b2a-share-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .b2a-share-btn{min-height:50px!important;padding:9px 7px!important;font-size:11.5px!important;border-radius:12px!important}
}

@media(max-width:380px){
  .b2a-share-box{padding:14px}
  .b2a-share-btn{font-size:11px!important}
}