/* bs-platform-pill.css
 * Styles for <bs-platform-pill> (pages/charts/bs-platform-pill.js).
 * Visual language mirrors .bs-atp-pill in css/bs-atp.css. Every rule is scoped
 * under body[data-portal="brand-store"] so it cannot leak into SOCOM.
 * Brand colors (#EE4D2D, #111318) are used literally — they ARE the marketplace
 * identity, matching bs-atp.css. All other colors come from design tokens.
 */

body[data-portal="brand-store"] .bs-pp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

/* ── Brand variants ── */
body[data-portal="brand-store"] .bs-pp--shopee {
  background: var(--color-shopee, #EE4D2D);
}

body[data-portal="brand-store"] .bs-pp--tiktok {
  background: #111318;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
}
/* Dark theme: lift the near-black chip off the dark surface (mirrors bs-atp.css line ~273). */
[data-theme="dark"] body[data-portal="brand-store"] .bs-pp--tiktok {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--text-primary, #F0F2F5);
}

/* ── Neutral fallback (unknown platform) ── */
body[data-portal="brand-store"] .bs-pp--other {
  background: var(--bg-active, #e5e7eb);
  color: var(--text-primary);
}

/* ── Size modifiers ── */
body[data-portal="brand-store"] .bs-pp--sm {
  padding: 1px 6px;
  font-size: 10px;
}

/* ── Logo ── */
body[data-portal="brand-store"] .bs-pp__logo {
  display: block;
  width: auto;
  height: 14px;
  object-fit: contain;
}
body[data-portal="brand-store"] .bs-pp--sm .bs-pp__logo {
  height: 11px;
}