/* OYB Databases: share button and menu (database pages and detail pages). Kadence palette with fallbacks. */
.oyb-share, .oyb-share-menu {
  --osh-ink: var(--global-palette3, #1a1a2e);
  --osh-muted: var(--global-palette5, #5a5a72);
  --osh-line: var(--global-palette7, #ffe3ea);
  --osh-surface: var(--global-palette9, #ffffff);
  --osh-wash: var(--global-palette8, #fdf2f5);
  --osh-accent: var(--global-palette-btn-bg, #fa4488);
  --osh-hover: var(--global-palette-btn-bg-hover, #5271ff);
  font-family: var(--global-body-font-family, "Nunito", system-ui, sans-serif);
}
.oyb-share { position: relative; display: inline-flex; }
.oyb-share *, .oyb-share-menu, .oyb-share-menu * { box-sizing: border-box; }
.oyb-share[hidden] { display: none; }
.oyb-share-dock { margin-top: 14px; }

/* Secondary button: outline, same height as the buy buttons beside it. */
.oyb-share .oyb-share-btn.oyb-share-btn {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 18px; min-height: 46px;
  border: 2px solid var(--osh-accent); border-radius: 8px; background: transparent; color: var(--osh-ink);
  font: inherit; font-size: 1rem; font-weight: 800; line-height: 1.2; letter-spacing: normal; text-transform: none;
  box-shadow: none; cursor: pointer; transition: all .3s ease-in-out;
}
.oyb-share .oyb-share-btn.oyb-share-btn:hover, .oyb-share .oyb-share-btn.oyb-share-btn:focus-visible, .oyb-share .oyb-share-btn[aria-expanded="true"] {
  border-color: var(--osh-hover); background: var(--osh-hover); color: #fff; box-shadow: 0 0 25px -5px var(--osh-hover);
}
.oyb-share svg, .oyb-share-menu svg { display: block; width: 18px; height: 18px; flex: none; }

.oyb-share-menu {
  /* The script moves the open menu to <body> and positions it (fixed) under the button, so no card can clip it. */
  position: fixed; z-index: 99999; top: 0; left: 0; width: 360px; max-width: calc(100vw - 32px); max-height: calc(100vh - 24px); overflow: auto; box-sizing: border-box;
  padding: 16px; border: 1px solid var(--osh-line); border-radius: 16px; background: var(--osh-surface); color: var(--osh-ink);
  box-shadow: 0 24px 60px -18px rgba(40, 20, 60, .35), 0 2px 6px rgba(40, 20, 60, .06); text-align: left;
}
.oyb-share-menu[hidden] { display: none; }
.oyb-share-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.oyb-share-head p { margin: 0; font-weight: 800; font-size: 1rem; }
.oyb-share-menu .oyb-share-x.oyb-share-x {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--osh-muted); box-shadow: none; cursor: pointer;
}
.oyb-share-menu .oyb-share-x.oyb-share-x:hover { background: var(--osh-wash); color: var(--osh-ink); }
.oyb-share-card { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; margin: 0 0 12px; border-radius: 10px; border: 1px solid var(--osh-line); background: var(--osh-wash); }

.oyb-share-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.oyb-share-menu .oyb-share-item.oyb-share-item {
  /* Tile: icon centered over a one-line label, both centered both ways. */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-width: 0; height: auto; min-height: 68px; margin: 0; padding: 10px 4px;
  border: 1px solid var(--osh-line); border-radius: 10px; background: var(--osh-surface); color: var(--osh-ink) !important;
  font: inherit; font-size: .85rem; font-weight: 800; line-height: 1; letter-spacing: normal; text-transform: none; text-decoration: none; text-align: center;
  box-shadow: none; cursor: pointer; transition: background .15s, border-color .15s;
}
.oyb-share-menu .oyb-share-item svg { width: 22px; height: 22px; margin: 0; }
.oyb-share-menu .oyb-share-item span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; }
.oyb-share-menu .oyb-share-item.oyb-share-item:hover, .oyb-share-menu .oyb-share-item.oyb-share-item:focus-visible { background: var(--osh-wash); border-color: var(--osh-accent); }
.oyb-share-menu .oyb-share-item[hidden] { display: none; }
.oyb-share-item[data-net="x"] svg { color: #000; }
.oyb-share-item[data-net="fb"] svg { color: #1877f2; }
.oyb-share-item[data-net="reddit"] svg { color: #ff4500; }
.oyb-share-item[data-net="pin"] svg { color: #e60023; }
.oyb-share-item[data-net="in"] svg { color: #0a66c2; }
.oyb-share-item[data-net="mail"] svg, .oyb-share-item[data-act] svg { color: var(--osh-accent); }
.oyb-share-note { margin: 10px 0 0; font-size: .8rem; color: var(--osh-muted); }
.oyb-share-toast { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 8px); margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--osh-ink); color: #fff; font-size: .85rem; font-weight: 800; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.oyb-share-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Phones without a native share sheet: the menu becomes a bottom sheet. */
@media (max-width: 600px) {
  .oyb-share-menu.oyb-share-menu { top: auto !important; left: 0 !important; right: 0; bottom: 0; width: auto; max-width: none; max-height: 85vh; overflow: auto; border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .oyb-share-scrim { position: fixed; inset: 0; z-index: 99998; background: rgba(20, 16, 34, .45); }
}