/* ═══════════════════════════════════════════════════
   BEST SELLERS PAGE (css/bestsellers.css)
   Requires: penned.css loaded first via header.php
   ═══════════════════════════════════════════════════ */

/* ── HERO ── */
.bs-hero { text-align: center; padding: 2.5rem 0 1.5rem; }
.bs-hero h1 { font-family: var(--font-sans); font-weight: 800; font-size: 2.2rem; }
.bs-hero p  { color: var(--text-muted); max-width: 500px; margin: 0.5rem auto 0; }

/* ── TABS ── */
.bs-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 2rem; }
.bs-tab {
  font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 0.75rem 1.25rem; border: none; background: none;
  color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s;
}
.bs-tab:hover { color: var(--text); }
.bs-tab.active { color: #7A4F2A; border-bottom-color: var(--accent); }
.bs-tab-content { display: none; }
.bs-tab-content.active { display: block; }

/* ── TOP 3 PODIUM ── */
.podium-section {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; max-width: 900px; margin: 0 auto 3rem;
}
@media (max-width: 768px) { .podium-section { grid-template-columns: 1fr; } }

.podium-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.5rem; text-align: center;
  position: relative; transition: transform 0.2s, box-shadow 0.2s;
}
.podium-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.podium-card.rank-1 { border-color: #D4A853; }
.podium-card.rank-2 { border-color: #A8A8A8; }
.podium-card.rank-3 { border-color: #CD7F32; }

.podium-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 36px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem; color: #fff;
}
.rank-1 .podium-badge { background: #D4A853; }
.rank-2 .podium-badge { background: #A8A8A8; }
.rank-3 .podium-badge { background: #CD7F32; }

.podium-cover { width: 120px; height: 170px; object-fit: cover; border-radius: 6px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); margin: 0.75rem auto; }
.podium-title  { font-family: var(--font-serif); font-weight: 700; font-size: 1rem; margin-top: 0.5rem; }
.podium-author { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; }
.podium-votes  { font-family: var(--font-mono); font-size: 0.8rem; color: #7A4F2A; margin-top: 0.5rem; }

/* ── VOTE BUTTON ── */
.vote-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: 1.5px solid var(--border); border-radius: 20px;
  padding: 0.35rem 0.8rem; font-family: var(--font-mono); font-size: 0.75rem;
  text-transform: uppercase; color: var(--text-muted); cursor: pointer;
  transition: all 0.2s; margin-top: 0.75rem;
}
.vote-btn:hover  { border-color: var(--accent); color: var(--accent); }
.vote-btn.voted  { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── RANK 4+ LIST ── */
.bs-list-item {
  display: grid; grid-template-columns: 40px 70px 1fr auto;
  gap: 1rem; align-items: center; padding: 1rem 1.25rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; margin-bottom: 0.75rem; transition: box-shadow 0.2s;
}
.bs-list-item:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
@media (max-width: 576px) {
  .bs-list-item { grid-template-columns: 30px 50px 1fr; }
  .bs-list-item .vote-btn { grid-column: 1/-1; }
}

.bs-rank       { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; color: var(--text-muted); }
.bs-cover-sm   { width: 55px; height: 78px; object-fit: cover; border-radius: 4px; }
.bs-book-title { font-weight: 600; font-size: 0.95rem; }
.bs-book-author { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; }
.bs-book-genre {
  font-family: var(--font-mono); font-size: 0.65rem;
  background: rgba(196,149,106,0.12); color: #7A4F2A;
  padding: 0.15rem 0.5rem; border-radius: 10px; display: inline-block; margin-top: 0.25rem;
}
.bs-hero-em {
    color: #7A4F2A;
}
body.dark-mode .bs-hero-em {
    color: #f0a050;
}
body.dark-mode .bs-tab.active {
    color: #f0a050;
    border-bottom-color: #f0a050;
}
body.dark-mode .podium-votes {
    color: #f0a050;
}
body.dark-mode .bs-book-genre {
    color: #f0a050;
    background: rgba(240,160,80,0.15);
}