/* Social publishing modals are shared by the light application shell and the
 * standalone dark video editor. Everything is scoped to avoid importing the
 * Tailwind bundle into the editor and changing its base controls. */
.social-share-overlay {
  position: fixed;
  z-index: 20100;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, .74);
  backdrop-filter: blur(3px);
  box-sizing: border-box;
}

.social-share-overlay *, .social-share-overlay *::before, .social-share-overlay *::after { box-sizing: border-box; }
.social-share-overlay .hidden, .social-share-overlay [hidden] { display: none !important; }

.social-share-dialog {
  width: min(100%, 34rem);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  border: 1px solid #484848 !important;
  border-radius: .75rem !important;
  background: #202020 !important;
  box-shadow: 0 28px 76px rgba(0, 0, 0, .68) !important;
  color: #f4f4f5 !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.social-share-dialog--wide { width: min(100%, 64rem); }
.social-share-dialog--large { width: min(100%, 72rem); display: flex; flex-direction: column; overflow: hidden; }
.social-share-dialog h1, .social-share-dialog h2, .social-share-dialog h3,
.social-share-dialog legend, .social-share-dialog strong { color: #fafafa !important; }
.social-share-dialog p, .social-share-dialog small { color: #a1a1aa; }

.social-share-header {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex !important;
  flex: 0 0 auto;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1rem 1.25rem !important;
  border: 0 !important;
  border-bottom: 1px solid #414141 !important;
  background: #202020 !important;
}

.social-share-header h1 { margin: 0; font-size: 1.2rem; font-weight: 700; }
.social-share-header button {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  padding: 0 !important;
  border: 0;
  border-radius: 999px !important;
  background: #303030;
  color: #a1a1aa !important;
  cursor: pointer;
}
.social-share-header button:hover { background: #444 !important; color: #fff !important; }

.social-share-form { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 1.25rem; padding: 1.35rem !important; }
.social-share-grid { display: grid !important; min-height: 0; grid-template-columns: minmax(15rem, .85fr) minmax(18rem, 1.15fr); gap: 1.35rem !important; }
.social-share-preview { min-width: 0; padding: 1rem; border-radius: .6rem; background: #171717 !important; color: #e4e4e7 !important; }
.social-share-preview p { margin: .65rem 0 0; color: #a1a1aa !important; font-size: .75rem; }
.social-share-video { display: block; width: 100% !important; max-height: 32rem; margin: 0 auto; border-radius: .5rem; background: #000; object-fit: contain; aspect-ratio: 16 / 9; }
.social-share-video--vertical { width: auto !important; max-width: 100%; aspect-ratio: 9 / 16; }
.social-share-fields { display: flex; min-width: 0; flex-direction: column; gap: 1rem !important; padding: 0 !important; background: transparent !important; }
.social-share-fields > div > label:not(:has(> input[type="checkbox"])) { display: block; margin: 0 0 .35rem; font-size: .875rem; font-weight: 600; }

.social-share-dialog label:not(.social-share-consent) { color: #d4d4d8 !important; }
.social-share-dialog input[type="text"], .social-share-dialog textarea, .social-share-dialog select {
  display: block;
  width: 100% !important;
  min-height: 2.55rem;
  padding: .65rem .75rem !important;
  border: 1px solid #525252 !important;
  border-radius: .42rem !important;
  background: #171717 !important;
  color: #f9fafb !important;
  font: inherit;
  font-size: .875rem;
}
.social-share-dialog textarea { min-height: 6rem; resize: vertical; }
.social-share-dialog input:focus, .social-share-dialog textarea:focus, .social-share-dialog select:focus { border-color: #3b82f6 !important; outline: 0; box-shadow: 0 0 0 3px rgba(59, 130, 246, .18); }
.social-share-dialog input[type="checkbox"] { width: 1rem; height: 1rem; flex: 0 0 1rem; margin: .12rem 0 0; accent-color: #3b82f6; }
.social-share-dialog fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.social-share-dialog fieldset legend { margin: 0 0 .55rem; font-size: .875rem; font-weight: 600; }
.social-share-dialog fieldset > div { display: grid; gap: .55rem; }
.social-share-check-list { display: grid; gap: .55rem; }
.social-share-check-row,
.social-share-dialog label:has(> input[type="checkbox"]) { display: flex !important; min-height: 1.25rem; align-items: flex-start !important; gap: .65rem !important; margin: 0; color: #d4d4d8 !important; cursor: pointer; font-size: .875rem; line-height: 1.35; }
.social-share-check-row > span { display: block; min-width: 0; }
.social-share-check-row.is-primary { font-weight: 600; }
.social-share-check-row.is-disabled { color: #71717a !important; cursor: not-allowed; }

.social-share-account, .social-share-panel {
  padding: .85rem !important;
  border: 1px solid #414141 !important;
  border-radius: .5rem !important;
  background: #292929 !important;
}
.social-share-account { display: flex !important; align-items: center; gap: .75rem !important; }
.social-share-account img { width: 2.5rem; height: 2.5rem; border-radius: 999px; object-fit: cover; }
.social-share-account p { margin: 0; }
.social-share-account p:last-child { color: #f4f4f5 !important; font-weight: 650; }
.social-share-panel { display: grid; gap: .75rem !important; }
.social-share-commercial { padding: .9rem !important; }
.social-share-delivery-mode legend { margin-bottom: .65rem; }
.social-share-delivery-mode small { display: block; margin-top: .2rem; color: #a1a1aa !important; font-weight: 400; line-height: 1.35; }
.social-share-direct-fields { display: flex; flex-direction: column; gap: 1rem; }
.social-share-direct-fields[hidden] { display: none; }
.social-share-commercial-options { display: grid; gap: .6rem; margin-left: 1.65rem; padding: .75rem 0 0 .85rem; border-left: 2px solid #454545; }
.social-share-commercial-options.hidden { display: none; }
.social-share-commercial-options p { margin: .1rem 0 0; color: #fbbf24 !important; font-size: .75rem; line-height: 1.4; }
.social-share-consent { padding: .75rem .85rem; border: 1px solid #414141; border-radius: .5rem; background: #242424; font-size: .79rem !important; line-height: 1.45 !important; }
.social-share-consent a { color: #93c5fd !important; }
.social-share-processing-note { display: flex; align-items: flex-start; gap: .55rem; margin: 0 !important; padding: .7rem .8rem; border-radius: .45rem; background: rgba(59, 130, 246, .08); color: #a1a1aa !important; font-size: .78rem; line-height: 1.4; }
.social-share-processing-note i { margin-top: .12rem; color: #60a5fa; }

.social-share-alert { margin: 0; padding: .85rem 1rem !important; border: 1px solid #7f1d1d !important; border-radius: .5rem !important; background: rgba(127, 29, 29, .3) !important; color: #fecaca !important; }
.social-share-alert ul { margin: 0; padding-left: 1.2rem; }
.social-share-actions { position: sticky; z-index: 3; bottom: 0; display: flex !important; flex: 0 0 auto; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: .7rem !important; margin-top: auto; padding: 1rem 1.35rem !important; border: 0 !important; border-top: 1px solid #414141 !important; background: #202020 !important; }
.social-share-form > .social-share-actions { margin: 0 -1.35rem -1.35rem; }
.social-share-actions button, .social-share-actions input[type="submit"], .social-share-status button, .social-share-status a {
  display: inline-flex !important;
  width: auto;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .55rem .9rem !important;
  border: 1px solid #555 !important;
  border-radius: .42rem !important;
  background: #303030 !important;
  color: #f4f4f5 !important;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 650;
  text-decoration: none;
}
.social-share-actions input[type="submit"] { border-color: #3b82f6 !important; background: #3b82f6 !important; }
.social-share-actions input[type="submit"]:hover { background: #2563eb !important; }

.social-share-status { padding: 1.35rem !important; text-align: center; }
.social-share-status > .social-share-header { margin: -1.35rem -1.35rem 1rem; text-align: left; }
.social-share-status > h1 { margin: 0; color: #fff !important; font-size: 1.35rem; line-height: 1.3; }
.social-share-status > p { margin: .6rem 0 0; line-height: 1.5; }
.social-share-status > [data-tiktok-post-status-target="success"],
.social-share-status > [data-tiktok-post-status-target="failure"] { margin: 0 0 1rem; font-size: 3rem; line-height: 1; }
.social-share-status > [data-tiktok-post-status-target="success"] { color: #22c55e !important; }
.social-share-status > [data-tiktok-post-status-target="failure"] { color: #ef4444 !important; }
.social-share-status > button { margin-top: 1.5rem; }
.social-share-status [data-youtube-post-status-target="backgroundNote"] { padding: .85rem !important; border: 1px solid #1e3a8a; border-radius: .5rem; background: rgba(30, 58, 138, .25) !important; color: #bfdbfe !important; text-align: left; }
.social-share-status [data-meta-platform] { border-color: #444 !important; background: #292929; }
.social-share-spinner { width: 3.5rem !important; height: 3.5rem !important; margin: 0 auto 1rem; border: 4px solid #444 !important; border-top-color: #3b82f6 !important; border-radius: 999px; animation: social-share-spin .8s linear infinite; }

@keyframes social-share-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .social-share-overlay { padding: .5rem; }
  .social-share-dialog { max-height: calc(100vh - 1rem); }
  .social-share-grid { grid-template-columns: 1fr; }
  .social-share-preview { padding: .75rem; }
  .social-share-video { max-height: 18rem; }
  .social-share-actions { flex-wrap: wrap; }
}