/* Transcrib Si — the block "Pay with Stars" of the page of the bot.
 *
 * A page of its own, so the styles live in a file of its own: no build step,
 * no external font, no CDN. Only the tokens of assets/style.css are used, so
 * the block follows the theme of the site.
 */

.stars__panel {
  background: var(--brand-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--space-6);
}

.stars__price {
  margin: 0;
  font-size: var(--fs-600);
  line-height: var(--lh-tight);
  color: var(--text);
}

.stars__price strong {
  color: var(--brand-strong);
  font-weight: 700;
}

.stars__panel .small {
  margin-top: var(--space-2);
}

.stars__tag {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: var(--fs-200);
  color: var(--text-muted);
  background: var(--bg-raised);
  white-space: nowrap;
}

/* --- the three steps of the payment ----------------------------------- */

.stars__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  counter-reset: stars-step;
}

.stars__step {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: var(--space-5);
  box-shadow: var(--shadow-s);
}

.stars__step h3 {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--fs-500);
  line-height: var(--lh-tight);
}

.stars__step p {
  margin: 0;
  color: var(--text-muted);
}

.stars__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--brand-contrast);
  font-weight: 700;
  font-size: var(--fs-400);
}

/* --- the small chat that shows the receipt ---------------------------- */

.stars__chat {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  line-height: 1.55;
  color: var(--text-muted);
  white-space: pre-wrap;
  overflow-x: auto;
}

.stars__chat strong {
  color: var(--text);
}

@media (max-width: 640px) {
  .stars__panel {
    padding: var(--space-5);
  }
}