/**
 * Shared site styles — pulled out of per-page inline <style> blocks where
 * the same rules were being copy-pasted (and slowly drifting) across many
 * files. Loaded once from includes/header.php so every page gets it.
 *
 * Sections:
 *   1. Quiz-set card   (.quiz-card)      — used by home/quizzes/category/tags/search
 *   2. Nav buttons     (.nav-btn)        — used by set/daily-quiz/on-this-day/
 *                                          revision-cards/did-you-know/create-quiz/embed
 *   3. Fade-in + spinner utility animations
 *   4. Hero gradients  (.hero-simple / .hero-rich / .hero-amber)
 */

/* ── 1. Quiz-set card ────────────────────────────────────────────── */
.quiz-card {
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid #e5e7eb;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
}
.quiz-card:hover { border-color: #5D4DA8; box-shadow: 0 3px 14px rgba(93,77,168,0.13); }
.quiz-card-img { width: 100%; height: 130px; overflow: hidden; flex-shrink: 0; }
.quiz-card-img img { width: 100%; height: 100%; object-fit: cover; }
.quiz-card-img-placeholder {
  width: 100%; height: 96px;
  background: linear-gradient(135deg, #f0eef9, #e5e1f8);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.quiz-card-img-placeholder i { font-size: 32px; color: #c4b8f0; }
.quiz-card-body { padding: 10px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.quiz-card-badges { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.quiz-card-badge { display: inline-block; font-size: 10px; font-weight: 700; border-radius: 6px; padding: 2px 7px; color: #fff; }
.quiz-card-upvotes { font-size: 10px; color: #16a34a; font-weight: 700; margin-left: auto; }
.quiz-card-name {
  font-size: 12px; font-weight: 700; color: #1f2937; line-height: 1.4; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.quiz-card:hover .quiz-card-name { color: #5D4DA8; }
.quiz-card-desc { font-size: 10px; color: #6b7280; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.quiz-card-cat { font-size: 10px; color: #9ca3af; margin: 0; }

.quiz-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 600px) { .quiz-card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .quiz-card-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── 1b. Filter bar dropdowns (Type/Difficulty — used by quizzes/index.php
   and quizzes/category.php). Native <select> so it collapses cleanly on
   mobile instead of a horizontally-scrolling chip row. ──────────────── */
.fb-select-group { display: flex; align-items: center; gap: 6px; }
.fb-select-wrap { position: relative; flex-shrink: 0; }
.fb-select-wrap i {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: #9ca3af; pointer-events: none;
}
.fb-select {
  appearance: none; -webkit-appearance: none;
  background: #f5f3ff;
  border: 1.5px solid #e5e1f8;
  border-radius: 10px;
  padding: 7px 28px 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  transition: all .15s;
  max-width: 46vw;
}
.fb-select:hover  { background: #ede9fb; border-color: #c4b8f0; }
.fb-select.active { background: #5D4DA8; border-color: #5D4DA8; color: #fff; }
.fb-select.active + i { color: #fff; }
@media (min-width: 480px) { .fb-select { max-width: none; } }

/* ── 2. Nav buttons (quiz-taking flows: prev/skip/next) ───────────── */
.nav-btn { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; padding:8px 18px; border-radius:10px; border:1.5px solid; cursor:pointer; transition:all .15s; white-space:nowrap; }
.nav-btn-prev { background:#f9fafb; color:#4b5563; border-color:#e5e7eb; }
.nav-btn-prev:hover { background:#f3f4f6; border-color:#d1d5db; }
.nav-btn-skip { background:#fefce8; color:#a16207; border-color:#fde68a; }
.nav-btn-skip:hover { background:#fef9c3; border-color:#fcd34d; }
.nav-btn-next { background:#5D4DA8; color:#fff; border-color:#5D4DA8; }
.nav-btn-next:hover { background:#4c3d97; border-color:#4c3d97; }
.nav-btn:disabled, .nav-btn.invisible { opacity:.4; pointer-events:none; }

/* ── 3. Fade-in + spinner ──────────────────────────────────────────── */
.fade-in { animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

.spinner { animation: sg-spin 1s linear infinite; }
@keyframes sg-spin { to { transform: rotate(360deg); } }

/* ── 4. Hero gradients ─────────────────────────────────────────────── */
.hero-simple { background: linear-gradient(135deg, #4a3d8f 0%, #5D4DA8 100%); position:relative; overflow:hidden; }
.hero-rich   { background: linear-gradient(135deg, #3d3080 0%, #5D4DA8 55%, #7B6DC0 100%); position:relative; overflow:hidden; }
.hero-amber  { background: linear-gradient(135deg, #8a5a1e 0%, #b45309 55%, #d17f2e 100%); position:relative; overflow:hidden; }

/* ── 5. Promo card (homepage banners: Random Quiz / On This Day / Create a Quiz) ──
   These were three pixel-identical structures with different class-name
   prefixes and duplicated rules — one base + color modifiers instead. */
.promo-card {
  border-radius: 16px;
  padding: 16px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  transition: opacity .2s;
}
.promo-card:hover { opacity: .9; }
.promo-card-indigo { background: linear-gradient(135deg, #5D4DA8, #7B6DC0); }
.promo-card-amber  { background: linear-gradient(135deg, #8a5a1e, #b45309); }
.promo-card-teal   { background: linear-gradient(135deg, #0d9488, #14b8a6); }
.promo-card-icon {
  width: 52px; height: 52px;
  background: rgba(255,255,255,0.18);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.promo-card-icon i { font-size: 28px; }
.promo-card-label { font-size: 10px; font-weight: 700; opacity: .8; text-transform: uppercase; letter-spacing: .5px; }
.promo-card-title { font-size: 15px; font-weight: 700; line-height: 1.3; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.promo-card-meta { font-size: 11px; opacity: .7; margin-top: 3px; }
.promo-card-arrow { margin-left: auto; flex-shrink: 0; opacity: .6; }