/* ════════════════════════════════════════
   COMPONENTS — BUTTONS, BADGES, MISC
════════════════════════════════════════ */

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 2.1rem;
  border-radius: var(--r-pill);
  font-family: var(--font-b); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease),
              background 200ms, border-color 200ms, color 200ms;
}
.btn-gold { background: var(--gold); color: #0b0908; }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(254,193,8,.38); background: #fed840; }
.btn-outline { background: transparent; color: var(--btn-outline-color); border: 1.5px solid var(--btn-outline-border); }
.btn-outline:hover { border-color: var(--btn-outline-border-hover); transform: translateY(-2px); }
.btn-sm { padding: .6rem 1.5rem; font-size: .7rem; }
.btn-lg { padding: 1.1rem 2.6rem; font-size: .8rem; }
.w-full { width: 100%; }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .75rem;
  border-radius: var(--r-pill);
  font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.badge-gold { background: var(--gold); color: #0b0908; }
.badge-burg { background: var(--burgundy); color: #f4ede3; }
.badge-dim  { background: var(--border); color: var(--text-primary); border: 1px solid var(--border-strong); }
.badge-pre  { background: var(--gold-glow); color: var(--gold); border: 1px solid rgba(254,193,8,.25); }

/* ── Show card (used in /shows grid) ── */
.show-card:hover {
  transform: translateY(-4px);
  border-color: rgba(254,193,8,.25);
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
}
/* Stretched link — makes the Details anchor cover the whole card */
.show-card-stretched-link::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
}

/* ── Watch button ── */
.watch-btn {
  display: flex; align-items: center; gap: .6rem;
  background: none; border: none;
  color: var(--text-muted);
  font-family: var(--font-b); font-size: .72rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  cursor: pointer; padding: 0;
  transition: color 200ms;
}
.watch-btn:hover           { color: var(--text-primary); }
.watch-icon {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; flex-shrink: 0; color: var(--gold);
  transition: all 200ms;
}
.watch-btn:hover .watch-icon,
.watch-btn.playing .watch-icon { border-color: var(--gold); background: var(--gold-glow); }
.watch-btn.playing             { color: var(--text-primary); }

/* ── Ticker ── */
.ticker { background: var(--ticker-bg); padding: .6rem 0; overflow: hidden; position: relative; }
.ticker::before, .ticker::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 5rem; z-index: 1;
}
.ticker::before { left: 0;  background: linear-gradient(to right, var(--ticker-bg), transparent); }
.ticker::after  { right: 0; background: linear-gradient(to left,  var(--ticker-bg), transparent); }
.ticker-track   { display: flex; gap: 3rem; animation: tickerMove 32s linear infinite; white-space: nowrap; }
@keyframes tickerMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item { display: flex; align-items: center; gap: 1rem; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,237,227,.82); flex-shrink: 0; }
.ticker-gem  { color: var(--gold); font-size: .5rem; }

/* ── Trust bar ── */
.trust-bar   { padding: .9rem 0; border-bottom: 1px solid var(--border); background: var(--trust-bg); }
.trust-items { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem; }
.trust-item  { display: flex; align-items: center; gap: .45rem; font-size: .7rem; letter-spacing: .06em; color: var(--text-muted); }

/* ── Strip ── */
.strip-lbl { font-size: .6rem;  letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); margin-bottom: .22rem; }
.strip-val { font-size: .88rem; color: var(--text-primary); font-weight: 500; }