/* TMS Hub — Social Posting module.
   Matches the live hub.travelmarketingsystems.com chrome from the screenshot:
   white top bar, teal wordmark, light-grey page, teal primary + orange CTA,
   rounded white cards. Builds on product tokens in ../../colors_and_type.css. */

:root {
  /* Hub-specific shades sampled from the live poster module screenshot */
  --hub-teal:        #0C7B8A;
  --hub-teal-hover:  #096676;
  --hub-teal-50:     #E7F3F4;
  --hub-teal-100:    #CFE7E9;
  --hub-orange:      #E8703A;   /* the "Add to Queue" CTA */
  --hub-orange-hover:#D25F2C;
  --hub-bg:          #EEF1F3;
  --hub-border:      #E3E7EA;
  --hub-ink:         #1B2A2E;
  --hub-muted:       #5C6B70;
  --hub-soft:        #8A979C;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--hub-bg);
  color: var(--hub-ink);
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.sp-container { max-width: 1280px; margin: 0 auto; padding: 0 28px; }

/* ============================================================
   Buttons.
   ============================================================ */
.sp-btn {
  font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1;
  padding: 11px 20px; border-radius: 999px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  transition: background 120ms, color 120ms, border-color 120ms, opacity 120ms;
}
.sp-btn svg { width: 16px; height: 16px; stroke-width: 2; }
.sp-btn--teal { background: var(--hub-teal); color: white; }
.sp-btn--teal:hover { background: var(--hub-teal-hover); }
.sp-btn--orange { background: var(--hub-orange); color: white; }
.sp-btn--orange:hover { background: var(--hub-orange-hover); }
.sp-btn--orange:disabled { background: #E7C3B2; cursor: not-allowed; }
.sp-btn--ghost { background: white; color: var(--hub-ink); border: 1.5px solid var(--hub-border); }
.sp-btn--ghost:hover { background: var(--hub-bg); }
.sp-btn--soft { background: var(--hub-teal-50); color: var(--hub-teal); }
.sp-btn--soft:hover { background: var(--hub-teal-100); }
.sp-btn--sm { padding: 8px 14px; font-size: 13px; }
.sp-btn--lg { padding: 13px 24px; font-size: 15px; }
.sp-btn--block { width: 100%; justify-content: center; }
.sp-btn .is-spin { animation: sp-spin 800ms linear infinite; }
@keyframes sp-spin { to { transform: rotate(360deg); } }

.sp-icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--hub-border);
  background: white; color: var(--hub-ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.sp-icon-btn:hover:not(:disabled) { background: var(--hub-bg); }
.sp-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sp-icon-btn svg { width: 17px; height: 17px; }

/* ============================================================
   Top bar (TMS Hub) + sub-header.
   ============================================================ */
.sp-topbar {
  background: white; border-bottom: 1px solid var(--hub-border);
  height: 60px; display: flex; align-items: center;
  position: sticky; top: 0; z-index: 30;
}
.sp-topbar-inner { max-width: 1280px; margin: 0 auto; width: 100%; padding: 0 28px; display: flex; align-items: center; gap: 16px; }
.sp-burger { width: 34px; height: 34px; border: 0; background: transparent; color: var(--hub-teal); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sp-burger svg { width: 22px; height: 22px; }
.sp-wordmark { font: 800 21px/1 var(--font-display, 'DM Sans', sans-serif); letter-spacing: -0.02em; color: var(--hub-teal); }
.sp-topbar-spacer { flex: 1; }
.sp-topbar-acct { font: 500 14px/1 var(--font-body, 'DM Sans', sans-serif); color: var(--hub-muted); }

.sp-subhead {
  background: white; border-bottom: 1px solid var(--hub-border);
  padding: 18px 0;
}
.sp-subhead-inner { max-width: 1280px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sp-subhead-left { display: flex; align-items: center; gap: 14px; }
.sp-subhead-icon {
  width: 44px; height: 44px; border-radius: 12px; background: var(--hub-teal);
  display: inline-flex; align-items: center; justify-content: center; color: white; flex-shrink: 0;
}
.sp-subhead-icon svg { width: 22px; height: 22px; }
.sp-subhead-title { font: 700 22px/1 var(--font-display, 'DM Sans', sans-serif); letter-spacing: -0.015em; color: var(--hub-ink); }
.sp-subhead-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sp-agent-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--hub-teal-50); border: 1px solid var(--hub-teal-100);
  border-radius: 999px; padding: 5px 14px 5px 5px;
  font: 600 13px/1 var(--font-display, 'DM Sans', sans-serif); color: var(--hub-ink);
}
.sp-agent-initial {
  width: 24px; height: 24px; border-radius: 999px; background: var(--hub-teal);
  color: white; font: 700 11px/1 var(--font-display, 'DM Sans', sans-serif);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sp-agency-name { font: 400 13px/1 var(--font-body, 'DM Sans', sans-serif); color: var(--hub-muted); }

/* ============================================================
   Page body.
   ============================================================ */
.sp-page { padding: 24px 0 64px; }
.sp-crumb { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 20px; }
.sp-crumb a { color: var(--hub-teal); text-decoration: none; }
.sp-crumb a:hover { text-decoration: underline; }
.sp-crumb span { color: var(--hub-soft); }
.sp-crumb .is-current { color: var(--hub-ink); font-weight: 600; }

/* Tabs */
.sp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hub-border); margin-bottom: 22px; }
.sp-tab {
  background: transparent; border: 0; cursor: pointer;
  font: 700 13px/1 var(--font-display, 'DM Sans', sans-serif); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--hub-muted); padding: 14px 18px;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 8px;
}
.sp-tab:hover:not(.is-on) { color: var(--hub-ink); }
.sp-tab.is-on { color: var(--hub-teal); border-bottom-color: var(--hub-teal); }
.sp-tab svg { width: 15px; height: 15px; }

/* Search + filters card */
.sp-search-card {
  background: white; border: 1px solid var(--hub-border); border-radius: 14px;
  padding: 22px 24px; margin-bottom: 18px;
}
.sp-search-top { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.sp-search-label { font: 700 12px/1 var(--font-display, 'DM Sans', sans-serif); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hub-muted); }
.sp-search-input {
  flex: 1; max-width: 420px;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--hub-border); border-radius: 10px; padding: 0 14px; height: 42px; background: white;
}
.sp-search-input:focus-within { border-color: var(--hub-teal); box-shadow: 0 0 0 3px rgba(12,123,138,0.15); }
.sp-search-input svg { width: 16px; height: 16px; color: var(--hub-soft); }
.sp-search-input input { flex: 1; border: 0; outline: none; font-family: inherit; font-size: 15px; color: var(--hub-ink); }
.sp-offers-count { margin-left: auto; font: 500 14px/1 var(--font-body, 'DM Sans', sans-serif); color: var(--hub-muted); }
.sp-offers-count b { color: var(--hub-ink); font-weight: 700; }

.sp-filters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; min-width: 0; }
.sp-filter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-filter select { width: 100%; min-width: 0; }
.sp-filter label { font: 600 13px/1 var(--font-display, 'DM Sans', sans-serif); color: var(--hub-ink); }
.sp-filter select, .sp-filter input {
  height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--hub-border);
  background: white; font-family: inherit; font-size: 14px; color: var(--hub-ink); outline: none;
}
.sp-filter select:focus, .sp-filter input:focus { border-color: var(--hub-teal); }

/* Brand-voice banner */
.sp-voice-banner {
  display: flex; align-items: center; gap: 12px;
  background: var(--hub-teal-50); border: 1px solid var(--hub-teal-100);
  border-radius: 12px; padding: 12px 18px; margin-bottom: 18px;
  font-size: 14px; color: #0A5663;
}
.sp-voice-banner svg { width: 18px; height: 18px; color: var(--hub-teal); flex-shrink: 0; }
.sp-voice-banner b { font-weight: 700; }
.sp-voice-banner .spacer { flex: 1; }
.sp-voice-banner a { color: var(--hub-teal); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sp-voice-banner a:hover { text-decoration: underline; }

/* ============================================================
   Promotions table.
   ============================================================ */
.sp-table-card { background: white; border: 1px solid var(--hub-border); border-radius: 14px; overflow: hidden; }
.sp-thead, .sp-row {
  display: grid;
  grid-template-columns: 44px 80px 1.5fr 1fr 1fr 2.2fr;
  align-items: center; gap: 16px; padding: 14px 22px;
}
.sp-thead { background: #F7F9FA; border-bottom: 1px solid var(--hub-border); }
.sp-th { font: 700 11px/1.3 var(--font-display, 'DM Sans', sans-serif); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hub-muted); }
.sp-th input, .sp-td-check input { width: 18px; height: 18px; accent-color: var(--hub-teal); cursor: pointer; }

.sp-rows { list-style: none; margin: 0; padding: 0; }
.sp-row { border-bottom: 1px solid #EFF2F3; transition: background 120ms; }
.sp-row:last-child { border-bottom: 0; }
.sp-row:hover { background: #F7F9FA; }
.sp-row.is-selected { background: var(--hub-teal-50); }

/* Skeleton rows shown while /promotions is in flight — icon-free grey blocks
   so the shell paints immediately without waiting for the API or the LucideIcon
   batch to drain. Shimmer is a 1200ms diagonal sweep. */
.sp-row--skeleton { pointer-events: none; }
.sp-row--skeleton .sp-td-check,
.sp-row--skeleton .sp-td-id,
.sp-row--skeleton .sp-td-title,
.sp-row--skeleton .sp-td-op,
.sp-row--skeleton .sp-td-dest,
.sp-row--skeleton .sp-td-actions { padding-top: 4px; padding-bottom: 4px; }
.sp-skel {
  display: inline-block;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, #EEF1F3 0%, #F6F8F9 50%, #EEF1F3 100%);
  background-size: 200% 100%;
  animation: sp-skel-shimmer 1200ms ease-in-out infinite;
  vertical-align: middle;
}
.sp-skel--xs    { width: 40%; height: 10px; margin-top: 4px; }
.sp-skel--sm    { width: 40px; }
.sp-skel--md    { width: 60%; }
.sp-skel--lg    { width: 75%; height: 14px; }
.sp-skel--check { width: 14px; height: 14px; border-radius: 3px; }
.sp-skel--btn   { width: 78px; height: 26px; border-radius: 6px; }
@keyframes sp-skel-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.sp-td-id { font: 500 13px/1 var(--font-mono, 'SF Mono', monospace); color: var(--hub-muted); }
.sp-td-title b { display: block; font: 600 15px/1.3 var(--font-display, 'DM Sans', sans-serif); color: var(--hub-ink); }
.sp-td-title span { display: block; font: 400 13px/1.2 var(--font-body, 'DM Sans', sans-serif); color: var(--hub-muted); margin-top: 3px; }
.sp-td-op, .sp-td-dest { font-size: 14px; color: var(--hub-muted); }
.sp-td-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

.sp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 700 11px/1 var(--font-display, 'DM Sans', sans-serif); letter-spacing: 0.04em; }
.sp-pill--posted { background: #DDF1E6; color: #1B6B43; }
.sp-pill--queued { background: #FCE9DF; color: #9C4A22; }

/* ============================================================
   Sticky batch bar.
   ============================================================ */
.sp-batchbar {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 60; width: calc(100% - 56px); max-width: 1080px;
  animation: sp-bar-in 200ms var(--ease-out, ease);
}
@keyframes sp-bar-in { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.sp-batchbar-inner {
  background: var(--hub-ink); color: white; border-radius: 14px;
  padding: 12px 16px 12px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  box-shadow: 0 18px 40px -10px rgba(27,42,46,0.5);
}
.sp-batchbar-count { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
.sp-batchbar-count svg { width: 16px; height: 16px; color: #6FD0D8; }
.sp-batchbar-count b { font: 700 18px/1 var(--font-display, 'DM Sans', sans-serif); }
.sp-batchbar-left { display: inline-flex; align-items: center; gap: 20px; }
.sp-batchbar .sp-link { background: transparent; border: 0; color: #9FD8DE; cursor: pointer; font: 600 13px/1 var(--font-display, 'DM Sans', sans-serif); }
.sp-batchbar .sp-link:hover { color: white; }

/* ============================================================
   Composer (full-screen overlay) — split editor / preview.
   ============================================================ */
.sp-modal-bg {
  position: fixed; inset: 0; background: rgba(27,42,46,0.55);
  z-index: 100; display: flex; align-items: center; justify-content: center; padding: 28px;
  backdrop-filter: blur(6px); animation: sp-fade 200ms ease;
}
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }
.sp-modal {
  background: var(--hub-bg); border-radius: 18px; width: 100%; max-width: 1180px;
  height: calc(100vh - 56px); max-height: 880px;
  display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  box-shadow: 0 32px 64px -16px rgba(27,42,46,0.45);
}
.sp-modal-head {
  background: white; border-bottom: 1px solid var(--hub-border);
  padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.sp-modal-head-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sp-modal-thumb { width: 46px; height: 46px; border-radius: 10px; background-size: cover; background-position: center; background-color: var(--hub-border); flex-shrink: 0; }
.sp-modal-head h2 { margin: 0; font: 700 17px/1.25 var(--font-display, 'DM Sans', sans-serif); letter-spacing: -0.01em; color: var(--hub-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 480px; }
.sp-modal-head .sub { font: 400 13px/1 var(--font-body, 'DM Sans', sans-serif); color: var(--hub-muted); margin-top: 3px; }
.sp-modal-nav { display: inline-flex; align-items: center; gap: 8px; }
.sp-modal-nav .counter { font: 500 13px/1 var(--font-body, 'DM Sans', sans-serif); color: var(--hub-muted); min-width: 64px; text-align: center; }
.sp-modal-nav .counter b { color: var(--hub-ink); font-weight: 700; }

.sp-composer { display: grid; grid-template-columns: 1fr 440px; overflow: hidden; }
.sp-compose-left { padding: 22px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.sp-compose-right { background: white; border-left: 1px solid var(--hub-border); overflow-y: auto; padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }

.sp-card { background: white; border: 1px solid var(--hub-border); border-radius: 12px; padding: 18px; }
.sp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sp-card-head h3 { margin: 0; font: 700 14px/1 var(--font-display, 'DM Sans', sans-serif); letter-spacing: 0.02em; color: var(--hub-ink); display: inline-flex; align-items: center; gap: 8px; }
.sp-card-head h3 svg { width: 16px; height: 16px; color: var(--hub-teal); }

/* Channel selector */
.sp-channels { display: flex; gap: 10px; flex-wrap: wrap; }

.sp-gallery-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-gallery-thumb {
  position: relative; width: 64px; height: 64px; border-radius: 10px;
  background-size: cover; background-position: center;
  border: 2px solid transparent; cursor: pointer; padding: 0; flex-shrink: 0;
  opacity: 0.55; transition: opacity .15s, border-color .15s;
}
.sp-gallery-thumb:hover:not(.is-disabled) { opacity: 0.85; }
.sp-gallery-thumb.is-on { opacity: 1; border-color: var(--hub-teal); }
.sp-gallery-thumb.is-disabled { cursor: not-allowed; opacity: 0.3; }
.sp-gallery-check {
  position: absolute; top: 4px; right: 4px; width: 18px; height: 18px;
  background: var(--hub-teal); color: white; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
.sp-gallery-check i { width: 11px; height: 11px; }
.sp-channel {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  border: 1.5px solid var(--hub-border); border-radius: 10px; background: white; cursor: pointer;
  font: 600 13px/1 var(--font-display, 'DM Sans', sans-serif); color: var(--hub-muted);
  transition: border-color 120ms, color 120ms, background 120ms;
}
.sp-channel-ico { width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; }
.sp-channel-ico svg { width: 12px; height: 12px; }
.sp-channel.is-on { border-color: var(--hub-teal); background: var(--hub-teal-50); color: var(--hub-ink); }
.sp-channel .check { width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--hub-border); display: inline-flex; align-items: center; justify-content: center; }
.sp-channel.is-on .check { background: var(--hub-teal); border-color: var(--hub-teal); }
.sp-channel.is-on .check svg { width: 10px; height: 10px; color: white; }
.sp-channel:not(.is-on) .check svg { display: none; }
.ico-facebook { background: #1877F2; }
.ico-instagram { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); }
.ico-x { background: #111; }
.ico-linkedin { background: #0A66C2; }
.ico-google_business { background: #4285F4; }
/* TikTok's mark is black; the brand's cyan/magenta only appear in the glyph. */
.ico-tiktok { background: #111; }

/* Message editor */
.sp-msg-tabs { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid var(--hub-border); }
.sp-msg-tab {
  background: transparent; border: 0; cursor: pointer;
  font: 600 12px/1 var(--font-display, 'DM Sans', sans-serif); color: var(--hub-muted);
  padding: 8px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 6px;
}
.sp-msg-tab.is-on { color: var(--hub-teal); border-bottom-color: var(--hub-teal); }
.sp-msg-tab .dot { width: 14px; height: 14px; border-radius: 5px; }
.sp-msg-tab.override::after { content: '•'; color: var(--hub-orange); margin-left: 2px; }

.sp-textarea {
  width: 100%; min-height: 150px; resize: vertical;
  border: 1px solid var(--hub-border); border-radius: 10px; padding: 12px 14px;
  font-family: inherit; font-size: 15px; line-height: 1.55; color: var(--hub-ink); outline: none;
}
.sp-textarea:focus { border-color: var(--hub-teal); box-shadow: 0 0 0 3px rgba(12,123,138,0.15); }
.sp-msg-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 12.5px; color: var(--hub-muted); }
.sp-msg-meta .over { color: var(--hub-orange); font-weight: 600; }
.sp-msg-actions { display: flex; gap: 8px; align-items: center; }

/* AI rewrite */
.sp-ai { background: linear-gradient(120deg, #EAF6F7 0%, #F3EFFA 100%); border: 1px solid #CFE7E9; border-radius: 12px; padding: 16px 18px; }
.sp-ai-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sp-ai-head .badge { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--font-display, 'DM Sans', sans-serif); color: var(--hub-teal); }
.sp-ai-head .badge svg { width: 14px; height: 14px; }
.sp-ai-head .brandtag { margin-left: auto; font: 500 11.5px/1 var(--font-body, 'DM Sans', sans-serif); color: var(--hub-muted); display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.sp-ai-head .brandtag svg { width: 12px; height: 12px; }
.sp-ai-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sp-preset {
  background: white; border: 1px solid var(--hub-border); border-radius: 999px;
  padding: 6px 12px; font: 500 12.5px/1 var(--font-body, 'DM Sans', sans-serif); color: var(--hub-ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.sp-preset:hover { border-color: var(--hub-teal); background: var(--hub-teal-50); }
.sp-preset svg { width: 12px; height: 12px; color: var(--hub-teal); }
.sp-ai-prompt { position: relative; }
.sp-ai-prompt textarea {
  width: 100%; min-height: 56px; resize: none;
  border: 1px solid var(--hub-border); border-radius: 10px; padding: 11px 44px 11px 12px;
  font-family: inherit; font-size: 13.5px; line-height: 1.5; color: var(--hub-ink); outline: none; background: white;
}
.sp-ai-prompt textarea:focus { border-color: var(--hub-teal); }
.sp-ai-send {
  position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 999px; border: 0;
  background: var(--hub-teal); color: white; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.sp-ai-send:disabled { background: #B5CFD3; cursor: not-allowed; }
.sp-ai-send svg { width: 14px; height: 14px; }
.sp-ai-thinking { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--hub-teal); margin-top: 10px; }
.sp-ai-thinking svg { width: 14px; height: 14px; }

/* Schedule */
.sp-sched-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.sp-sched-tabs button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px; border: 1.5px solid var(--hub-border); border-radius: 10px; background: white; cursor: pointer;
  font: 600 13.5px/1 var(--font-display, 'DM Sans', sans-serif); color: var(--hub-ink);
}
.sp-sched-tabs button.is-on { border-color: var(--hub-teal); background: var(--hub-teal-50); color: var(--hub-teal); }
.sp-sched-tabs svg { width: 15px; height: 15px; }
.sp-sched-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-sched-fields .sp-filter { gap: 5px; }
.sp-besttime {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; background: var(--hub-teal-50); border-radius: 8px; font-size: 12.5px; color: #0A5663;
}
.sp-besttime svg { width: 14px; height: 14px; color: var(--hub-teal); flex-shrink: 0; }
.sp-besttime b { font-weight: 700; }
.sp-besttime button { margin-left: auto; background: transparent; border: 0; color: var(--hub-teal); font: 600 12px/1 var(--font-display, 'DM Sans', sans-serif); cursor: pointer; white-space: nowrap; }
.sp-besttime button:hover { text-decoration: underline; }

/* Live preview (right column) */
.sp-preview-head { display: flex; align-items: center; justify-content: space-between; }
.sp-preview-head h3 { margin: 0; font: 700 13px/1 var(--font-display, 'DM Sans', sans-serif); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hub-muted); }
.sp-preview-switch { display: inline-flex; gap: 4px; }
.sp-preview-switch button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--hub-border); background: white; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--hub-muted); }
.sp-preview-switch button .sp-channel-ico { width: 26px; height: 26px; border-radius: 7px; }
.sp-preview-switch button .sp-channel-ico svg { width: 14px; height: 14px; }
.sp-preview-switch button.is-on { border-color: var(--hub-teal); box-shadow: 0 0 0 2px rgba(12,123,138,0.18); }

/* social card mock */
.sp-social {
  border: 1px solid var(--hub-border); border-radius: 12px; overflow: hidden; background: white;
}
.sp-social-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.sp-social-avatar { width: 38px; height: 38px; border-radius: 999px; background: var(--hub-teal); color: white; font: 700 14px/1 var(--font-display, 'DM Sans', sans-serif); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sp-social-meta b { display: block; font: 700 13.5px/1.2 var(--font-display, 'DM Sans', sans-serif); color: var(--hub-ink); }
.sp-social-meta span { display: block; font: 400 11.5px/1.2 var(--font-body, 'DM Sans', sans-serif); color: var(--hub-muted); margin-top: 2px; }
.sp-social-body { padding: 0 14px 12px; font-size: 14px; line-height: 1.5; color: var(--hub-ink); white-space: pre-wrap; word-break: break-word; }
/* position: relative anchors .sp-carousel-pill. */
.sp-social-img { position: relative; width: 100%; aspect-ratio: var(--preview-ratio, 1200 / 628); background-size: cover; background-position: center; background-color: var(--hub-border); }
/* Static "1 / N" count — how many images this channel posts, not a live carousel. */
.sp-carousel-pill {
  position: absolute; bottom: 8px; right: 8px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, .6); color: #fff;
  font: 600 12px/1.4 var(--font-display, 'DM Sans', sans-serif);
  letter-spacing: .2px; pointer-events: none;
}
.sp-social-foot { display: flex; gap: 18px; padding: 10px 14px; border-top: 1px solid #EFF2F3; color: var(--hub-soft); }
.sp-social-foot svg { width: 17px; height: 17px; }
.sp-social-foot span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.sp-social--x .sp-social-body { font-size: 15px; }

/* Footer of composer */
.sp-compose-foot {
  position: sticky; bottom: 0;
  /* Negate .sp-compose-left's 22px 24px padding so the sticky bar spans
     edge-to-edge inside the left column. .sp-compose-left has identical
     padding to what .sp-compose-right had, so the offsets match either
     column — but the foot now lives in the left column. */
  margin: auto -24px -22px;
  padding: 14px 24px 22px;
  border-top: 1px solid var(--hub-border);
  background: white;
  display: flex; flex-direction: column; gap: 10px;
}
.sp-summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--hub-teal-50); border-radius: 8px; font-size: 13px; color: #0A5663; }
.sp-summary svg { width: 14px; height: 14px; color: var(--hub-teal); flex-shrink: 0; }

/* Toast */
.sp-toast {
  position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%);
  background: var(--hub-ink); color: white; padding: 11px 18px; border-radius: 999px;
  font-size: 14px; display: inline-flex; align-items: center; gap: 9px; z-index: 200;
  animation: sp-bar-in 200ms ease; box-shadow: 0 10px 28px rgba(27,42,46,0.3);
}
.sp-toast svg { width: 15px; height: 15px; color: #6FD0D8; }

/* Floating "Post queue" tab (mirrors the live "Print queue") */
.sp-queue-tab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 50;
  background: var(--hub-teal); color: white; border: 0; cursor: pointer;
  padding: 16px 10px; border-radius: 12px 0 0 12px;
  writing-mode: vertical-rl; font: 700 13px/1 var(--font-display, 'DM Sans', sans-serif); letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: -4px 0 12px -2px rgba(27,42,46,0.2);
}
.sp-queue-tab svg { width: 16px; height: 16px; writing-mode: horizontal-tb; }
.sp-queue-tab .badge { writing-mode: horizontal-tb; background: var(--hub-orange); color: white; border-radius: 999px; padding: 2px 7px; font-size: 11px; }

@media (max-width: 1080px) {
  .sp-filters { grid-template-columns: repeat(2, 1fr); }
  .sp-composer { grid-template-columns: 1fr; }
  .sp-compose-right { border-left: 0; border-top: 1px solid var(--hub-border); }
  .sp-thead, .sp-row { grid-template-columns: 40px 60px 1.4fr 1.6fr; }
  .sp-th-op, .sp-td-op, .sp-th-dest, .sp-td-dest { display: none; }
}

@media (max-width: 640px) {
  .sp-filters { grid-template-columns: 1fr; }
  .sp-topbar-inner { padding: 0 16px; }
  .sp-subhead-inner { flex-wrap: wrap; gap: 8px; }

  /* Promotions table: stop trying to fit a grid on a phone screen —
     stack each row as a card instead. Pure CSS, no JSX/DOM change. */
  .sp-thead { display: none; } /* column headers don't make sense once it's cards */
  .sp-row {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 8px; padding: 16px;
  }
  .sp-td-check { order: -1; align-self: flex-start; }
  .sp-td-id { order: 0; }
  .sp-td-title { order: 1; }
  .sp-td-op, .sp-td-dest { order: 2; }
  .sp-td-actions {
    order: 3; justify-content: stretch; margin-top: 4px;
  }
  .sp-td-actions .sp-btn { flex: 1; justify-content: center; white-space: nowrap; }

  /* Modal: less outer padding so it fills the screen properly */
  .sp-modal-bg { padding: 8px; }

  /* Preview header: center "PREVIEW" label + channel icons as a balanced pair */
  .sp-preview-head { justify-content: center; gap: 20px; }

  /* Sched tabs: buttons must fill their grid columns (inline-flex needs explicit width) */
  .sp-sched-tabs button { width: 100%; }
}

/* ── Emoji picker ─────────────────────────────────────────────────────────
   Curated travel set (see EMOJI_CATEGORIES in Composer.jsx). The panel is a
   floating popover anchored to the toolbar button, not a modal — the composer
   is already a full-screen overlay and a second modal layer would trap focus. */
.sp-emoji-wrap { position: relative; display: inline-flex; }

.sp-emoji-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: white; border: 1px solid var(--hub-border); border-radius: 7px;
  color: var(--hub-muted); cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.sp-emoji-btn:hover { background: var(--hub-teal-50); color: var(--hub-teal); border-color: var(--hub-teal-100); }
.sp-emoji-btn.is-on { background: var(--hub-teal-50); color: var(--hub-teal); border-color: var(--hub-teal); }
.sp-emoji-btn svg { width: 15px; height: 15px; }

.sp-emoji-panel {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 60;
  width: 280px; display: flex; flex-direction: column;
  background: white; border: 1px solid var(--hub-border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16, 32, 40, .16), 0 2px 6px rgba(16, 32, 40, .08);
}

.sp-emoji-search {
  margin: 8px 8px 6px; padding: 7px 9px; box-sizing: border-box; width: calc(100% - 16px);
  border: 1px solid var(--hub-border); border-radius: 6px;
  font: 500 12.5px/1 var(--font-body, 'DM Sans', sans-serif); color: var(--hub-ink); background: white;
}
.sp-emoji-search:focus { outline: none; border-color: var(--hub-teal); }

/* max-height lives on the scroller, not the panel, so the search box stays put. */
.sp-emoji-scroll { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 8px; }

.sp-emoji-cat-label {
  position: sticky; top: 0; z-index: 1; background: white;
  padding: 6px 2px 4px; font: 700 10px/1 var(--font-display, 'DM Sans', sans-serif);
  color: var(--hub-muted); text-transform: uppercase; letter-spacing: .5px;
}

.sp-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }

.sp-emoji-glyph {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
  font-size: 18px; line-height: 1;
  /* Colour emoji fonts first — otherwise some glyphs fall back to mono outlines. */
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.sp-emoji-glyph:hover { background: var(--hub-teal-50); }
.sp-emoji-glyph:focus-visible { outline: 2px solid var(--hub-teal); outline-offset: -2px; }

.sp-emoji-empty { padding: 14px 4px; font: 500 12.5px/1.5 var(--font-body, 'DM Sans', sans-serif); color: var(--hub-muted); text-align: center; }

/* ── Per-channel image order strip ────────────────────────────────────────
   One row per selected channel. Each row's thumbs are that channel's own
   ordering of the SHARED selection, sliced to the channel's image cap. */
.sp-slot-strip { display: flex; flex-direction: column; gap: 8px; }

.sp-slot-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: var(--hub-bg);
  border: 1px solid var(--hub-border); border-radius: 8px;
}
.sp-slot-row .sp-channel-ico { flex-shrink: 0; }

.sp-slot-name {
  flex-shrink: 0; min-width: 96px;
  font: 600 12.5px/1 var(--font-display, 'DM Sans', sans-serif); color: var(--hub-ink);
}

.sp-slot-thumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }

.sp-slot-thumb {
  width: 40px; height: 40px; border-radius: 6px; flex-shrink: 0;
  background-size: cover; background-position: center;
  border: 1px solid var(--hub-border);
  transition: opacity .12s, box-shadow .12s, transform .12s;
}
.sp-slot-thumb[draggable="true"] { cursor: grab; }
.sp-slot-thumb[draggable="true"]:active { cursor: grabbing; }
.sp-slot-thumb.is-dragging { opacity: .5; }
/* Drop target — a leading rule rather than a gap, so the row doesn't reflow
   under the pointer mid-drag and retarget the drop. */
.sp-slot-thumb.is-over { box-shadow: -3px 0 0 0 var(--hub-teal); transform: translateX(2px); }

.sp-slot-status {
  flex-shrink: 0; margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font: 600 11.5px/1 var(--font-display, 'DM Sans', sans-serif); color: var(--hub-teal);
  white-space: nowrap;
}
.sp-slot-status svg { width: 13px; height: 13px; }
.sp-slot-warn { color: var(--hub-orange); }

/* Over-cap thumbs stay visible and draggable — dimmed, not hidden, so an agent
   can drag one up past the cut-off to swap which images this channel posts. */
.sp-slot-thumb.is-excluded { opacity: .4; filter: grayscale(.4); }
.sp-slot-thumb.is-excluded:hover { opacity: .7; }
/* Marks where the channel stops posting: everything from here right is excluded. */
.sp-slot-thumb.is-cutoff { margin-left: 12px; position: relative; }
.sp-slot-thumb.is-cutoff::before {
  content: ''; position: absolute; left: -7px; top: -2px; bottom: -2px;
  border-left: 2px dashed var(--hub-orange);
}

/* ── Fancy text styler ────────────────────────────────────────────────────
   Sits beside the emoji button on the message toolbar. Same popover pattern
   as .sp-emoji-panel — anchored, not modal. */
.sp-fancy-wrap { position: relative; display: inline-flex; }

.sp-fancy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: white; border: 1px solid var(--hub-border); border-radius: 7px;
  color: var(--hub-muted); cursor: pointer;
  font-size: 14px; line-height: 1;
  transition: background .12s, color .12s, border-color .12s;
}
.sp-fancy-btn:hover { background: var(--hub-teal-50); color: var(--hub-teal); border-color: var(--hub-teal-100); }
.sp-fancy-btn.is-on { background: var(--hub-teal-50); color: var(--hub-teal); border-color: var(--hub-teal); }

.sp-fancy-panel {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 60;
  width: 320px; display: flex; flex-direction: column; gap: 8px;
  padding: 10px;
  background: white; border: 1px solid var(--hub-border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16, 32, 40, .16), 0 2px 6px rgba(16, 32, 40, .08);
}

.sp-fancy-label {
  font: 600 11px/1 var(--font-display, 'DM Sans', sans-serif);
  color: var(--hub-muted); text-transform: uppercase; letter-spacing: .4px;
}

.sp-fancy-inputrow { display: flex; align-items: center; gap: 6px; }
.sp-fancy-input {
  flex: 1; min-width: 0; padding: 7px 9px; box-sizing: border-box;
  border: 1px solid var(--hub-border); border-radius: 6px;
  font: 500 13px/1 var(--font-body, 'DM Sans', sans-serif); color: var(--hub-ink); background: white;
}
.sp-fancy-input:focus { outline: none; border-color: var(--hub-teal); }
.sp-fancy-clear {
  flex-shrink: 0; width: 24px; height: 24px; padding: 0;
  background: transparent; border: 0; border-radius: 6px;
  color: var(--hub-muted); cursor: pointer; font-size: 13px; line-height: 1;
}
.sp-fancy-clear:hover { background: var(--hub-bg); color: var(--hub-ink); }

.sp-fancy-list {
  max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--hub-border); border-radius: 8px; padding: 4px;
}

.sp-fancy-row {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  width: 100%; padding: 6px 8px; text-align: left;
  background: transparent; border: 0; border-left: 3px solid transparent;
  border-radius: 6px; cursor: pointer;
}
.sp-fancy-row:hover { background: var(--hub-bg); }
.sp-fancy-row.is-selected { background: var(--hub-teal-50); border-left-color: var(--hub-teal); }

.sp-fancy-name {
  font: 600 10.5px/1 var(--font-display, 'DM Sans', sans-serif);
  color: var(--hub-muted); text-transform: uppercase; letter-spacing: .4px;
}
/* The styled sample. Explicit fallback stack because the Mathematical
   Alphanumeric block is missing from many UI fonts — without this, glyphs that
   the brand font lacks render as .notdef boxes even where the OS has them. */
.sp-fancy-preview {
  font-size: 15px; line-height: 1.35; color: var(--hub-ink);
  word-break: break-word; overflow-wrap: anywhere;
  font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'Noto Sans Math', serif;
}

.sp-fancy-note {
  display: flex; align-items: flex-start; gap: 6px;
  font: 400 11px/1.4 var(--font-body, 'DM Sans', sans-serif); color: var(--hub-soft);
}
.sp-fancy-note svg { width: 12px; height: 12px; flex-shrink: 0; margin-top: 1px; }

.sp-fancy-insert {
  width: 100%; padding: 9px 12px;
  background: var(--hub-teal); color: white;
  border: 0; border-radius: 7px; cursor: pointer;
  font: 600 12.5px/1 var(--font-display, 'DM Sans', sans-serif);
}
.sp-fancy-insert:hover:not(:disabled) { background: var(--hub-teal-hover); }
.sp-fancy-insert:disabled { background: var(--hub-border); color: var(--hub-soft); cursor: default; }
/* Shown only when X is a selected channel — styled glyphs are surrogate pairs,
   so they cost 2 against X's 280. Orange to match the over-limit counter. */
.sp-fancy-note--x { color: var(--hub-orange); font-weight: 500; }

/* ── TikTok preview ───────────────────────────────────────────────────────
   Unlike every other channel, TikTok is media-first: the image IS the card and
   the caption sits on top of it. Rendered as its own card in SocialPreview. */
.sp-tiktok { border-radius: 14px; overflow: hidden; background: #1a1a1a; }

.sp-tiktok-media {
  position: relative; width: 100%;
  aspect-ratio: var(--preview-ratio, 1080 / 1920);
  background-color: #1a1a1a; background-size: cover; background-position: center;
  display: flex; flex-direction: column; justify-content: flex-end;
}
/* Bottom scrim — white caption text has to stay legible over an arbitrary
   photo, and TikTok itself does exactly this. */
.sp-tiktok-media::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

.sp-tiktok-handle {
  position: absolute; top: 12px; left: 14px; z-index: 2;
  font: 700 13px/1 var(--font-display, 'DM Sans', sans-serif); color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

.sp-tiktok-rail {
  position: absolute; right: 10px; bottom: 96px; z-index: 2;
  display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.sp-tiktok-rail span {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 999px; background: rgba(255,255,255,.14); color: #fff;
}
.sp-tiktok-rail svg { width: 18px; height: 18px; }

.sp-tiktok-overlay { position: relative; z-index: 2; padding: 14px 58px 16px 14px; }
.sp-tiktok-name { font: 700 14px/1.2 var(--font-display, 'DM Sans', sans-serif); color: #fff; }
.sp-tiktok-caption {
  margin-top: 5px;
  font: 400 13px/1.45 var(--font-body, 'DM Sans', sans-serif); color: rgba(255,255,255,.92);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Operator content tabs (Video posts / General posts) ──────────────────
   Same card chrome as the promotions table; different column geometry, since
   these rows lead with a media thumbnail rather than an id. */
.sp-opthead, .sp-oprow {
  display: grid;
  grid-template-columns: 46px 132px minmax(0, 1fr) 150px 130px 110px 250px;
  align-items: center; gap: 14px;
}
.sp-opthead {
  padding: 14px 20px; background: var(--hub-bg);
  border-bottom: 1px solid var(--hub-border);
  font: 700 11px/1 var(--font-display, 'DM Sans', sans-serif);
  letter-spacing: .1em; color: var(--hub-muted);
}
.sp-oprow { padding: 12px 20px; border-bottom: 1px solid #EFF2F3; }
.sp-oprow:hover { background: var(--hub-bg); }
.sp-oprow.is-selected { background: var(--hub-teal-50); }

.sp-op-media {
  position: relative; width: 116px; height: 72px; border-radius: 10px;
  background-color: var(--hub-teal); background-size: cover; background-position: center;
  display: grid; place-items: center; color: #fff; overflow: hidden; flex-shrink: 0;
}
.sp-op-media svg { width: 24px; height: 24px; opacity: .9; }
.sp-op-play {
  display: grid; place-items: center; width: 34px; height: 34px;
  background: rgba(255,255,255,.92); border-radius: 999px; color: var(--hub-teal);
}
.sp-op-play svg { width: 15px; height: 15px; opacity: 1; }
.sp-op-badge {
  position: absolute; right: 6px; bottom: 6px; padding: 2px 6px;
  font: 700 10px/1.3 var(--font-display, 'DM Sans', sans-serif); color: #fff;
  background: rgba(6,43,48,.72); border-radius: 5px; letter-spacing: .03em;
}

.sp-op-title { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sp-op-title b { font: 700 15px/1.25 var(--font-display, 'DM Sans', sans-serif); color: var(--hub-ink); }
.sp-op-caption {
  font: 400 13px/1.35 var(--font-body, 'DM Sans', sans-serif); color: var(--hub-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-op-offer {
  align-self: flex-start; margin-top: 2px; padding: 2px 9px;
  font: 700 10px/1.5 var(--font-display, 'DM Sans', sans-serif); letter-spacing: .04em;
  color: #A2451F; background: #FDF0EA; border: 1px solid #F4CDBA; border-radius: 999px;
}
.sp-op-operator { font: 600 14px/1.3 var(--font-body, 'DM Sans', sans-serif); color: var(--hub-ink); }
.sp-op-type, .sp-op-added { font: 400 13px/1.3 var(--font-body, 'DM Sans', sans-serif); color: var(--hub-muted); }

.sp-op-empty {
  padding: 48px 24px; text-align: center;
  font: 500 15px/1.5 var(--font-body, 'DM Sans', sans-serif); color: var(--hub-muted);
}

/* Skeleton rows — same grey-block language as the promotions table. */
.sp-skel { background: linear-gradient(90deg, #EDF0F2 25%, #F5F7F8 50%, #EDF0F2 75%); background-size: 200% 100%; animation: sp-shimmer 1.2s infinite; border-radius: 6px; }
.sp-skel--line { display: block; height: 12px; width: 60%; }
.sp-skel--line.short { width: 35%; margin-top: 6px; }
@keyframes sp-shimmer { to { background-position: -200% 0; } }
.sp-oprow--skeleton:hover { background: transparent; }

/* ── Operator offer attribution in the Composer ───────────────────────────
   Read-only: the operator requires this wording intact, so it is shown as a
   locked block rather than pasted into the editable message. */
.sp-offer-banner {
  display: flex; gap: 11px; margin-top: 14px; padding: 14px 16px;
  background: #FDF0EA; border: 1px solid #F4CDBA; border-radius: 10px;
}
.sp-offer-banner > svg { width: 18px; height: 18px; flex-shrink: 0; color: #C2551F; margin-top: 1px; }
.sp-offer-lead { font: 400 13px/1.5 var(--font-body, 'DM Sans', sans-serif); color: #8A3A18; }
.sp-offer-lead strong { font-weight: 700; }
.sp-offer-credit {
  margin-top: 8px; padding: 9px 11px; background: #fff;
  border: 1px solid #F4CDBA; border-radius: 7px;
  font: 600 13px/1.45 var(--font-body, 'DM Sans', sans-serif); color: var(--hub-ink);
  user-select: all;
}
.sp-offer-terms { margin-top: 7px; font: 400 11.5px/1.45 var(--font-body, 'DM Sans', sans-serif); color: var(--hub-soft); }