/* Grid layout */
.us-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
/* Button base */
.us-btn{
  --us-bg:#ffffff; --us-tx:#111111; --us-bg-h:#f7f7f7; --us-tx-h:#111111;
  width:100%;
  border:1px solid #eee;
  border-radius:16px;
  padding:14px 18px;
  background:var(--us-bg);
  color:var(--us-tx);
  font:500 16px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  text-align:left;
  display:flex; align-items:center; gap:10px;
  cursor:pointer; transition:box-shadow .2s, background-color .2s, color .2s, border-color .2s;
}
.us-btn:hover{ background:var(--us-bg-h); color:var(--us-tx-h); }
.us-shadow .us-btn:hover{ box-shadow:0 6px 20px rgba(0,0,0,.06) }
.us-copied{ background:#f6ffed !important; border-color:#b7eb8f !important; }
/* Minimal icon dot */
.us-ico{ width:10px; height:10px; border-radius:999px; background:#777; display:inline-block; }
.us-btn[data-net="whatsapp"] .us-ico{ background:#25D366; }
.us-btn[data-net="linkedin"] .us-ico{ background:#0A66C2; }
.us-btn[data-net="facebook"] .us-ico{ background:#1877F2; }
.us-btn[data-net="email"] .us-ico{ background:#999; }
.us-btn[data-net="copy"] .us-ico{ background:#666; }
.us-btn[data-net="messenger"] .us-ico{ background:#00B2FF; }

/* Brand default colors */
.us-btn[data-net="whatsapp"]{ --us-bg:#25D366; --us-tx:#fff; --us-bg-h:#1ebe57; --us-tx-h:#fff; }
.us-btn[data-net="linkedin"]{ --us-bg:#0A66C2; --us-tx:#fff; --us-bg-h:#095aa9; --us-tx-h:#fff; }
.us-btn[data-net="facebook"]{ --us-bg:#1877F2; --us-tx:#fff; --us-bg-h:#0f6ad9; --us-tx-h:#fff; }
.us-btn[data-net="email"]{ --us-bg:#ffffff; --us-tx:#111; --us-bg-h:#f7f7f7; --us-tx-h:#111; }
.us-btn[data-net="copy"]{ --us-bg:#ffffff; --us-tx:#111; --us-bg-h:#f7f7f7; --us-tx-h:#111; }
.us-btn[data-net="messenger"]{ --us-bg:#00B2FF; --us-tx:#fff; --us-bg-h:#009fe0; --us-tx-h:#fff; }

/* Style variants */
.us-variant-outline .us-btn{ background:#fff; border-color:currentColor }
.us-variant-ghost .us-btn{ background:transparent; border-color:transparent }

/* text span is last-child */
.us-btn span:last-child{ pointer-events:none; }

@media (max-width: 480px){
  .us-grid{ grid-template-columns:1fr; }
}