/* ---------------------------------------------------------------------------
   preview-banner.css — sticky "this is a preview" bar, with the active
   Zenrush market shown on the right.
--------------------------------------------------------------------------- */

:root { --preview-banner-min: 46px; --preview-banner-h: 47px; }

/* The mount point must not generate a box, otherwise it becomes the sticky
   containing block and the banner scrolls away with it. */
[data-preview-banner] { display: contents; }

.preview-banner {
  position: sticky; top: 0; z-index: 60;
  min-height: var(--preview-banner-min);
  background: #04120f; color: #e2e8e5;
  font-family: var(--font, -apple-system, sans-serif);
  font-size: 13px; border-bottom: 1px solid #16302a;
}

.preview-banner__inner {
  max-width: 1320px; margin: 0 auto; padding: 7px 1.5rem;
  display: flex; align-items: center; gap: 0.85rem;
  min-height: var(--preview-banner-min); flex-wrap: wrap;
}

.preview-banner__tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0, 182, 122, 0.14); color: #00b67a;
  border: 1px solid rgba(0, 182, 122, 0.35); border-radius: 999px;
  padding: 3px 10px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0;
}
.preview-banner__tag svg { height: 9px; width: auto; }

.preview-banner__text { color: #a9b6b1; }
.preview-banner__text strong { color: #fff; font-weight: 600; }
.preview-banner__spacer { margin-left: auto; }

/* Market switcher — mirrors the picker on the product page. */
.preview-banner__markets { display: inline-flex; gap: 4px; flex-shrink: 0; }
.preview-banner__market {
  background: #12241f; border: 1px solid #22413a; color: #c2cfca;
  border-radius: 999px; padding: 4px 11px;
  font-family: inherit; font-size: 12px; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.preview-banner__market:hover { background: #1b332c; color: #fff; }
.preview-banner__market[aria-pressed='true'] {
  background: #00b67a; border-color: #00b67a; color: #06231a; font-weight: 700;
}

@media (max-width: 720px) {
  .preview-banner { position: static; }
  .preview-banner__inner { gap: 0.5rem; }
  .preview-banner__spacer { margin-left: 0; }
}