/* Wrapper */
.wpplanit-share { display:flex; align-items:center; gap:22px; }
.wpplanit-share .label { font-weight:600; color:#374151; }
.wpplanit-share .wpplanit-share-grid {
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}

/* Let the whole bar behave like a single inline element */
.wpplanit-share{
  display:inline-block;   /* was likely block/flex */
  width:auto;             /* don't force 100% */
}

/* Grid can stay flex; it will align inside the shrink-to-fit wrapper */
.wpplanit-share-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Keep the label obeying the container alignment if you show it */
.wpplanit-share .label{
  display:block;
  text-align:inherit;
}

/* Buttons */
.wpplanit-share .share-btn {
  --size: 56px;                  /* override via shortcode size= */
  --icon: calc(var(--size) * .42);
  --radius: 10px;

  width: var(--size);
  height: var(--size);
  border:1px solid #d3d3d3;
  border-radius: var(--radius);
  background:#fff;
  display:inline-flex;
  align-items:center; justify-content:center;
  text-decoration:none;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.wpplanit-share .share-btn:hover {
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  border-color:#d1d5db;
  transform:translateY(-2px);
}
.wpplanit-share .share-btn:focus {
  outline:2px solid #2563eb33; outline-offset:2px;
}

/* Icon sizing (for both <img> SVGs & inline <svg>) */
.wpplanit-share .share-btn img,
.wpplanit-share .share-btn svg {
  width: var(--icon);
  height: var(--icon);
  display:block;
}

/* Brand color for the inline email SVG (uses currentColor) */
.wpplanit-share .brand-email { color:#F59E0B; }

@media (max-width:480px){
  .wpplanit-share { gap:16px; }
  .wpplanit-share .wpplanit-share-grid { gap:16px; }
}