.mg-share-sheet[hidden]{
  display:none !important;
}

.mg-share-sheet{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  align-items:end;
  color:#101828;
  font-family:inherit;
}

.mg-share-sheet__backdrop{
  position:absolute;
  inset:0;
  background:rgba(12,18,32,.58);
  opacity:0;
  transition:opacity .18s ease;
}

.mg-share-sheet__panel{
  position:relative;
  width:100%;
  max-height:min(82vh,680px);
  overflow:auto;
  padding:12px 18px 22px;
  border-radius:26px 26px 0 0;
  background:
    radial-gradient(circle at 14% 10%,rgba(236,72,153,.22),transparent 28%),
    radial-gradient(circle at 88% 16%,rgba(14,165,233,.20),transparent 30%),
    radial-gradient(circle at 58% 92%,rgba(34,197,94,.12),transparent 34%),
    linear-gradient(145deg,#ffffff 0%,#f8fbff 52%,#fff7fb 100%);
  box-shadow:0 -18px 44px rgba(16,24,40,.24);
  transform:translateY(100%);
  transition:transform .22s ease;
}

.mg-share-sheet.is-open .mg-share-sheet__backdrop{
  opacity:1;
}

.mg-share-sheet.is-open .mg-share-sheet__panel{
  transform:translateY(0);
}

.mg-share-sheet__handle{
  width:56px;
  height:5px;
  margin:0 auto 14px;
  border-radius:999px;
  background:rgba(102,112,133,.28);
}

.mg-share-sheet__head{
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  margin-bottom:14px;
}

.mg-share-sheet__close{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.78);
  color:#344054;
  font-size:32px;
  line-height:1;
  box-shadow:0 10px 22px rgba(16,24,40,.08);
}

.mg-share-sheet__head h3{
  margin:0;
  color:#101828;
  font-size:21px;
  line-height:1.2;
  font-weight:900;
  text-align:center;
  letter-spacing:0;
}

.mg-share-sheet__preview{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  margin-bottom:18px;
  padding:12px;
  border:1px solid rgba(230,234,240,.92);
  border-radius:18px;
  background:rgba(255,255,255,.82);
  box-shadow:0 12px 26px rgba(16,24,40,.07);
}

.mg-share-sheet__thumb{
  display:grid;
  width:48px;
  height:48px;
  min-width:48px;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg,#ff4f9a 0%,#2f80ed 54%,#17c964 100%);
  color:#fff;
  font-size:15px;
  font-weight:900;
}

.mg-share-sheet__meta{
  min-width:0;
}

.mg-share-sheet__meta b,
.mg-share-sheet__meta span{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mg-share-sheet__meta b{
  color:#101828;
  font-size:15px;
  font-weight:900;
}

.mg-share-sheet__meta span{
  margin-top:3px;
  color:#667085;
  font-size:12px;
  font-weight:700;
}

.mg-share-sheet__actions{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px 8px;
}

.mg-share-action{
  display:grid;
  gap:7px;
  justify-items:center;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:#344054;
  font:inherit;
}

.mg-share-action span{
  display:grid;
  width:50px;
  height:50px;
  place-items:center;
  border-radius:17px;
  color:#fff;
  font-size:13px;
  font-weight:900;
  letter-spacing:0;
  box-shadow:0 12px 26px rgba(16,24,40,.12);
}

.mg-share-action b{
  width:100%;
  min-width:0;
  overflow:hidden;
  color:#101828;
  font-size:11px;
  line-height:1.15;
  font-weight:800;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* V191 final product share sheet icons */
.mg-share-action span svg{
  display:block;
  width:28px;
  height:28px;
  fill:currentColor;
}

.mg-share-action.is-whatsapp span{
  background:linear-gradient(135deg,#36d66b,#15b85a);
  color:#fff;
}

.mg-share-action.is-imo span{
  width:52px;
  height:52px;
  overflow:visible;
  border:1px solid rgba(230,234,240,.94);
  background:#fff;
  color:inherit;
}

.mg-share-action.is-imo span svg{
  width:53px;
  height:53px;
}

.mg-share-action.is-imo .imo-bg{
  fill:#fff;
}

.mg-share-action.is-imo .imo-bubble{
  fill:none;
  stroke:#315f9d;
  stroke-width:5.2;
  stroke-linejoin:round;
}

.mg-share-action.is-imo .imo-text{
  fill:#315f9d;
  font-family:Arial,sans-serif;
  font-size:17px;
  font-weight:900;
  letter-spacing:0;
}

.mg-share-action.is-facebook span{
  width:52px;
  height:52px;
  overflow:visible;
  border:0;
  background:#1877f2;
  color:#fff;
  box-shadow:0 12px 26px rgba(24,119,242,.24);
}

.mg-share-action.is-facebook span svg{
  width:49px;
  height:49px;
  transform:translateY(2px);
}

.mg-share-action.is-facebook .facebook-f{
  fill:#fff;
}

.mg-share-action.is-messenger span{
  background:linear-gradient(135deg,#00b2ff,#a033ff,#ff4f9a);
  color:#fff;
}

.mg-share-action.is-telegram span{
  background:linear-gradient(135deg,#32a8e8,#1689cf);
  color:#fff;
}

.mg-share-action.is-sms span{
  width:52px;
  height:52px;
  overflow:visible;
  border:1px solid rgba(230,234,240,.94);
  background:#fff;
  color:inherit;
}

.mg-share-action.is-sms span svg{
  width:52px;
  height:52px;
}

.mg-share-action.is-sms .sms-bg{
  fill:#fff;
}

.mg-share-action.is-sms .sms-back{
  fill:#8cb6ff;
}

.mg-share-action.is-sms .sms-front{
  fill:#256bd8;
}

.mg-share-action.is-copy span,
.mg-share-action.is-qr span,
.mg-share-action.is-more span{
  border:1px solid rgba(230,234,240,.96);
  background:#fff;
  color:#344054;
  box-shadow:0 12px 24px rgba(16,24,40,.10);
}

.mg-share-action.is-copy span svg,
.mg-share-action.is-qr span svg,
.mg-share-action.is-more span svg{
  fill:currentColor;
}


.mg-share-sheet__qr{
  display:none;
  margin-top:18px;
}

.mg-share-sheet__qr.is-open{
  display:block;
}

.mg-share-sheet__qr-card{
  padding:14px;
  border:1px solid rgba(230,234,240,.92);
  border-radius:20px;
  background:rgba(255,255,255,.88);
  box-shadow:0 14px 32px rgba(16,24,40,.09);
}

.mg-share-sheet__qr-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.mg-share-sheet__qr-head b{
  color:#101828;
  font-size:15px;
  font-weight:900;
}

.mg-share-sheet__qr-head button,
.mg-share-sheet__qr-copy{
  border:0;
  border-radius:999px;
  background:#eef4ff;
  color:#344054;
  font:inherit;
  font-size:12px;
  font-weight:900;
}

.mg-share-sheet__qr-head button{
  padding:7px 10px;
}

.mg-share-sheet__qr-img{
  display:block;
  width:190px;
  height:190px;
  margin:0 auto;
  border-radius:16px;
  background:#fff;
}

.mg-share-sheet__qr-link{
  margin:12px 0;
  overflow:hidden;
  color:#667085;
  font-size:11px;
  font-weight:700;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mg-share-sheet__qr-copy{
  display:block;
  width:100%;
  padding:11px 12px;
  background:linear-gradient(135deg,#2f80ed,#17c964);
  color:#fff;
}

.mg-share-sheet-open{
  overflow:hidden;
}

@media (max-width:370px){
  .mg-share-sheet__actions{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}