/* ShareModal — "Heir & Share" full-screen modal. Content is vertically
   centered in the modal body (unlike the top-aligned Mailbox list).
   Overlay size/position + bottom-sheet slide come from .modal-fullscreen
   (modals.css); this file owns the inside-content shape only. Built by
   features/share.js. */

/* The body wrapper fills the fullscreen .modal-body (which is flex:1 with
   overflow-y:auto). .share-center is a centered column inside it. */
.share-modal {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Centered column. justify-content:center vertically centers the stack
   when it's shorter than the modal; on short screens where it would
   overflow, the parent .modal-body scrolls instead (margin:auto keeps it
   from clipping the top). */
.share-center {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  text-align: center;
  padding: 0.5rem 0;
}

/* ===== Primary actions: Copy Link / Share Link — stacked vertically,
   centered. ===== */
.share-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
}
.share-actions .button-primary,
.share-actions .button-secondary {
  flex: 0 0 auto;
  min-width: 13rem;
}

/* ===== QR code block ===== */
.share-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
/* White card behind the QR so it scans cleanly against the parchment, with
   the same cream-tile shadow used elsewhere (badge tile, mailbox cards). */
.share-qr-canvas {
  display: block;
  width: 12rem;
  height: 12rem;
  background: #fff;
  padding: 0.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(70, 50, 30, 0.18);
}
/* The shown URL (scheme stripped). Sized a touch larger than body text so
   the address is the legible focal point under the QR. */
.share-url {
  margin: 0;
  font-family: var(--font-family-3);
  font-size: 1.2rem;
  color: var(--font-color-1);
  word-break: break-all;
}

/* ===== Social row: Facebook · X ===== */
.share-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
}
.share-social-label {
  margin: 0;
  font-family: var(--font-family-3);
  font-size: 1rem;
  color: var(--font-color-2);
}
.share-social-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
/* Social button — just the platform's branded logo floating on the
   parchment (no pill, no container). A subtle lift on hover is the only
   chrome. */
.share-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 120ms ease-out, opacity 120ms ease-out;
}
.share-social-btn:hover,
.share-social-btn:focus {
  outline: none;
  opacity: 0.8;
  transform: translateY(-1px);
}
.share-social-icon {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}