/* Universal Melopod share sheet. One component serves feed cards, releases,
   videos, beats and competitions so the interaction stays recognisable. */
:root {
  --mp-share-ink: #f6f5f2;
  --mp-share-muted: #a9b2c2;
  --mp-share-surface: #101a2c;
  --mp-share-surface-2: #17243a;
  --mp-share-line: rgba(214, 224, 240, .15);
  --mp-share-accent: #c9905a;
  --mp-share-accent-2: #8fa9d2;
}

.mp-share-root {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: none;
  color: var(--mp-share-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mp-share-root.is-open { display: block; }
.mp-share-root[hidden] { display: none; }

.mp-share-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 17, .68);
  backdrop-filter: blur(10px) saturate(.84);
  -webkit-backdrop-filter: blur(10px) saturate(.84);
  opacity: 0;
  transition: opacity 240ms ease;
}

.mp-share-root.is-open .mp-share-backdrop { opacity: 1; }

.mp-share-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(492px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 48px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mp-share-line);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(22, 36, 59, .98), rgba(10, 17, 30, .98));
  box-shadow: 0 32px 100px rgba(0, 0, 0, .48), 0 0 0 1px rgba(255,255,255,.025) inset;
  transform: translate(-50%, -47%) scale(.96);
  opacity: 0;
  transition: transform 280ms cubic-bezier(.22, 1, .36, 1), opacity 220ms ease;
  overscroll-behavior: contain;
}

.mp-share-root.is-open .mp-share-dialog { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.mp-share-dialog.is-dragging { transition: none; }

.mp-share-grab { display: none; }

.mp-share-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--mp-share-line);
}

.mp-share-heading { min-width: 0; flex: 1; }
.mp-share-kicker { display: block; margin-bottom: 5px; color: var(--mp-share-accent); font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; }
.mp-share-header h2 { margin: 0; color: var(--mp-share-ink); font: 650 27px/1.05 Georgia, "Times New Roman", serif; letter-spacing: -.025em; }
.mp-share-header p { margin: 7px 0 0; color: var(--mp-share-muted); font-size: 13px; line-height: 1.4; }
.mp-share-close { width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid var(--mp-share-line); border-radius: 50%; background: rgba(255,255,255,.04); color: var(--mp-share-ink); font-size: 22px; line-height: 1; cursor: pointer; transition: background 160ms ease, transform 160ms ease; }
.mp-share-close:hover, .mp-share-close:focus-visible { background: rgba(255,255,255,.12); outline: none; transform: rotate(4deg); }

.mp-share-scroll { min-height: 0; overflow-y: auto; padding: 18px 24px 24px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }

.mp-share-preview { display: flex; align-items: center; gap: 12px; min-height: 58px; margin-bottom: 19px; padding: 10px 12px; border: 1px solid var(--mp-share-line); border-radius: 15px; background: rgba(5, 11, 22, .35); }
.mp-share-preview-art { width: 46px; height: 46px; flex: 0 0 46px; overflow: hidden; border-radius: 10px; background: linear-gradient(135deg, #2b3e61, #141d31); }
.mp-share-preview-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.mp-share-preview-copy { min-width: 0; display: grid; gap: 3px; }
.mp-share-preview-copy strong { overflow: hidden; color: var(--mp-share-ink); font-size: 14px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.mp-share-preview-copy span { overflow: hidden; color: var(--mp-share-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.mp-share-label { display: block; margin: 0 0 12px; color: var(--mp-share-muted); font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.mp-share-platforms { display: flex; gap: 12px; overflow-x: auto; margin: 0 -2px 21px; padding: 2px 2px 8px; scrollbar-width: none; }
.mp-share-platforms::-webkit-scrollbar { display: none; }
.mp-share-platform { width: 62px; flex: 0 0 62px; display: grid; justify-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: var(--mp-share-muted); cursor: pointer; }
.mp-share-platform-icon { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid var(--mp-share-line); border-radius: 50%; background: #1d2b43; color: #f7f5ef; font: 750 15px/1 Inter, sans-serif; box-shadow: 0 7px 18px rgba(0,0,0,.18); transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease; }
.mp-share-platform-label { display: block; font-size: 10px; line-height: 1.1; white-space: nowrap; }
.mp-share-platform:hover .mp-share-platform-icon, .mp-share-platform:focus-visible .mp-share-platform-icon { background: #294263; border-color: rgba(201,144,90,.66); color: #fff; transform: translateY(-2px); }
.mp-share-platform:active .mp-share-platform-icon { transform: scale(.92); }
.mp-share-platform:focus-visible { outline: none; }
.mp-share-platform[data-platform="copy"] .mp-share-platform-icon { color: #f0d4b2; }
.mp-share-platform[data-platform="whatsapp"] .mp-share-platform-icon { background: #1e443d; }
.mp-share-platform[data-platform="messenger"] .mp-share-platform-icon { background: #293f79; }
.mp-share-platform[data-platform="facebook"] .mp-share-platform-icon { background: #263e68; }
.mp-share-platform[data-platform="x"] .mp-share-platform-icon { background: #202632; }
.mp-share-platform[data-platform="telegram"] .mp-share-platform-icon { background: #22516a; }
.mp-share-platform[data-platform="more"] .mp-share-platform-icon { background: #4b3f55; }

.mp-share-divider { height: 1px; margin: 0 0 19px; background: var(--mp-share-line); }
.mp-share-send-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mp-share-send-heading h3 { margin: 0; color: var(--mp-share-ink); font-size: 15px; font-weight: 750; }
.mp-share-send-heading span { color: var(--mp-share-muted); font-size: 11px; }
.mp-share-search-wrap { position: relative; display: flex; align-items: center; margin-bottom: 12px; }
.mp-share-search-icon { position: absolute; left: 14px; color: var(--mp-share-muted); font-size: 16px; pointer-events: none; }
.mp-share-search { width: 100%; min-height: 45px; padding: 0 38px 0 38px; border: 1px solid var(--mp-share-line); border-radius: 999px; background: rgba(4, 10, 20, .48); color: var(--mp-share-ink); outline: none; font-size: 13px; transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.mp-share-search::placeholder { color: #8590a2; }
.mp-share-search:focus { border-color: rgba(143,169,210,.75); background: rgba(7, 15, 28, .72); box-shadow: 0 0 0 3px rgba(143,169,210,.12); }
.mp-share-search-clear { position: absolute; right: 7px; width: 31px; height: 31px; border: 0; border-radius: 50%; background: transparent; color: var(--mp-share-muted); cursor: pointer; }
.mp-share-search-clear:hover { background: rgba(255,255,255,.1); color: var(--mp-share-ink); }
.mp-share-recipient-list { display: grid; gap: 5px; max-height: 235px; overflow-y: auto; padding-right: 2px; }
.mp-share-recipient { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 7px 8px; border: 1px solid transparent; border-radius: 14px; color: var(--mp-share-ink); transition: background 160ms ease, border-color 160ms ease; }
.mp-share-recipient:hover { border-color: var(--mp-share-line); background: rgba(255,255,255,.045); }
.mp-share-recipient-avatar { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, #647ba4, #87605c); color: #fff; font-size: 12px; font-weight: 800; }
.mp-share-recipient-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mp-share-recipient-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.mp-share-recipient-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.mp-share-recipient-copy span { overflow: hidden; color: var(--mp-share-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.mp-share-send-button { min-width: 57px; min-height: 31px; padding: 0 12px; border: 1px solid rgba(201,144,90,.58); border-radius: 999px; background: rgba(201,144,90,.13); color: #f4d2ad; font-size: 11px; font-weight: 800; cursor: pointer; transition: background 160ms ease, transform 160ms ease, color 160ms ease; }
.mp-share-send-button:hover, .mp-share-send-button:focus-visible { background: var(--mp-share-accent); color: #16100b; outline: none; }
.mp-share-send-button:active { transform: scale(.94); }
.mp-share-send-button[disabled] { cursor: default; opacity: .8; }
.mp-share-send-button.is-sent { border-color: rgba(119,196,155,.6); background: rgba(71,147,113,.22); color: #bcebd0; }
.mp-share-empty { margin: 7px 4px 2px; color: var(--mp-share-muted); font-size: 12px; line-height: 1.5; }
.mp-share-status { min-height: 18px; margin: 10px 3px 0; color: var(--mp-share-muted); font-size: 12px; line-height: 1.4; }
.mp-share-status.is-success { color: #bcebd0; }
.mp-share-status.is-error { color: #f0a6a3; }
.mp-share-login { margin: 12px 3px 0; color: var(--mp-share-muted); font-size: 12px; line-height: 1.5; }
.mp-share-login a { color: #e0c19c; font-weight: 750; }

body.mp-share-lock { overflow: hidden !important; }

@media (max-width: 640px) {
  .mp-share-dialog { top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-height: min(86dvh, 760px); border-right: 0; border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-radius: 26px 26px 0 0; transform: translateY(105%); }
  .mp-share-root.is-open .mp-share-dialog { transform: translateY(0); }
  .mp-share-grab { display: block; width: 42px; height: 4px; flex: 0 0 4px; margin: 10px auto 0; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.3); }
  .mp-share-header { padding: 12px 18px 15px; }
  .mp-share-scroll { padding: 16px 18px calc(20px + env(safe-area-inset-bottom)); }
  .mp-share-preview { margin-bottom: 17px; }
  .mp-share-platforms { gap: 10px; }
  .mp-share-platform { width: 60px; flex-basis: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-share-backdrop, .mp-share-dialog, .mp-share-platform-icon, .mp-share-search, .mp-share-send-button { transition-duration: 1ms !important; }
}

/* Shared icons: preserve the supplied brand artwork and size every control consistently. */
.mp-share-platform-icon > img, .mp-share-platform-icon > svg { display: block; flex: none; object-fit: contain; pointer-events: none; }
.mp-share-platform-icon .mp-share-brand-icon { width: 46px; height: 46px; border-radius: 50%; }
.mp-share-platform-icon .mp-share-link-icon { width: 28px; height: 28px; }
.mp-share-platform-icon > svg { width: 26px; height: 26px; }
.mp-share-platform.is-copied .mp-share-platform-icon { color: #8BBEB2; }