/* ═══════════════════════════════════════════════════════
   COMPETITIVE KATTA — PRACTICE TESTS UI
   Hierarchy: Categories → Subjects/Chapters → Topics/Sets → Player
   Uses the site palette: navy #0D1B3E, saffron #FF6B00.
   Mobile-first: every flex/grid child that can hold long
   content carries min-width:0, no fixed widths > viewport.
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&display=swap');

.pr-wrap { max-width: 1080px; margin: 0 auto; padding: 0 4px 48px; min-width: 0; }

/* ── Page hero ── */
.pr-hero { padding: 18px 0 6px; }
.pr-hero h1 {
  font-family: 'Baloo 2', cursive;
  font-size: 1.7rem;
  color: #0D1B3E;
}
.pr-hero-badges { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.pr-hero-badges span { font-size: 0.82rem; color: #64748b; }
.pr-hero-badges span::before { content: "✅ "; }
.pr-breadcrumb { font-size: 0.85rem; margin: 14px 0 2px; color: #7A8499; }
.pr-breadcrumb a { color: #FF6B00; text-decoration: none; font-weight: 600; }
.pr-breadcrumb a:hover { text-decoration: underline; }

/* ── Category grid (page 1) ── */
.pr-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.pr-cat-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid #E0E4F0; border-radius: 14px;
  padding: 16px; text-decoration: none; color: #0D1B3E; min-width: 0;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.pr-cat-card:hover {
  box-shadow: 0 8px 22px rgba(13,27,62,.10);
  transform: translateY(-2px);
  border-color: #FF8C3A;
}
.pr-cat-logo {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px;
  background: #FFF3E8; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; overflow: hidden;
}
.pr-cat-logo img { width: 100%; height: 100%; object-fit: cover; }
.pr-cat-card h3 {
  font-size: 1rem; margin: 0 0 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-cat-meta { font-size: 0.78rem; color: #7A8499; }
.pr-cat-body { min-width: 0; }

.pr-empty {
  text-align: center; color: #7A8499; padding: 56px 16px;
  background: #fff; border-radius: 14px; border: 1px dashed #E0E4F0; margin-top: 18px;
}
.pr-empty .pr-empty-icon { font-size: 2.4rem; }

/* ── Two-column layout: sticky rail + content (pages 2 & 3) ── */
.pr-layout {
  display: flex; gap: 20px; align-items: flex-start; margin-top: 16px; min-width: 0;
}
.pr-rail {
  flex: 0 0 240px; min-width: 0;
  background: #fff; border: 1px solid #E0E4F0; border-radius: 14px;
  overflow: hidden; position: sticky; top: 80px;
}
.pr-rail-title {
  padding: 12px 16px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #7A8499;
  border-bottom: 1px solid #EEF0F7;
}
.pr-tab {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 13px 16px; font-size: 0.9rem; font-weight: 600; color: #0D1B3E;
  cursor: pointer; border-left: 3px solid transparent;
  border-bottom: 1px solid #F3F5FA; font-family: inherit;
}
.pr-tab:last-child { border-bottom: 0; }
.pr-tab:hover { background: #FAFBFF; }
.pr-tab.active {
  background: linear-gradient(90deg, #FFF3E8, #fff);
  border-left-color: #FF6B00; color: #E85D00;
}
.pr-tab .pr-tab-count { font-size: 0.72rem; color: #7A8499; font-weight: 500; display: block; }

.pr-content { flex: 1; min-width: 0; }

/* Search box above chapter cards */
.pr-search { position: relative; margin-bottom: 14px; }
.pr-search input {
  width: 100%; padding: 11px 14px 11px 40px;
  border: 1px solid #E0E4F0; border-radius: 10px;
  font: inherit; font-size: 0.9rem; background: #fff; color: #0D1B3E;
}
.pr-search input:focus { outline: 2px solid #FF8C3A; outline-offset: -1px; }
.pr-search::before {
  content: "🔍"; position: absolute; left: 13px; top: 50%;
  transform: translateY(-50%); font-size: 0.85rem; opacity: .55;
}

/* Chapter / set cards */
.pr-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}
.pr-chapter-card {
  position: relative; display: block; background: #fff;
  border: 1px solid #E0E4F0; border-radius: 14px; padding: 18px 46px 16px 18px;
  text-decoration: none; color: #0D1B3E; min-width: 0;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.pr-chapter-card:hover {
  box-shadow: 0 8px 22px rgba(13,27,62,.10);
  transform: translateY(-2px); border-color: #FF8C3A;
}
.pr-chapter-card h3 { font-size: 1rem; margin: 0 0 22px; line-height: 1.35; }
.pr-chapter-card .pr-card-qcount { font-size: 0.8rem; color: #7A8499; }
.pr-chapter-card .pr-card-arrow {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: #FFF3E8; color: #FF6B00; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
  transition: background .15s, color .15s;
}
.pr-chapter-card:hover .pr-card-arrow { background: #FF6B00; color: #fff; }

/* Subtle color variety so a grid of chapter cards doesn't read as flat/monotone */
.pr-chapter-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 14px 0 0 14px; background: #FF6B00; opacity: .55;
}
.pr-card-grid .pr-chapter-card:nth-child(5n+2)::before { background: #2E4E9E; }
.pr-card-grid .pr-chapter-card:nth-child(5n+3)::before { background: #0ABFA3; }
.pr-card-grid .pr-chapter-card:nth-child(5n+4)::before { background: #B85CFF; }
.pr-card-grid .pr-chapter-card:nth-child(5n+5)::before { background: #E85D00; }

/* Continue-practice strip (chapter page) */
.pr-continue {
  display: none; /* shown by JS when saved progress exists */
  background: #fff; border: 1px solid #E0E4F0; border-left: 4px solid #0ABFA3;
  border-radius: 14px; padding: 14px 16px; margin-bottom: 20px;
  align-items: center; gap: 14px; flex-wrap: wrap;
}
.pr-continue.show { display: flex; }
.pr-continue-info { flex: 1; min-width: 180px; }
.pr-continue-info .pr-continue-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #0ABFA3;
}
.pr-continue-info h4 { margin: 3px 0 2px; font-size: 0.98rem; color: #0D1B3E; }
.pr-continue-info .pr-continue-progress { font-size: 0.8rem; color: #7A8499; }

/* Practice set rows */
.pr-set-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid #E0E4F0; border-radius: 14px;
  padding: 14px 16px; margin-bottom: 12px; min-width: 0;
  transition: box-shadow .15s, border-color .15s;
}
.pr-set-card:hover { box-shadow: 0 6px 18px rgba(13,27,62,.08); border-color: #FFD3AE; }
.pr-set-icon {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px;
  background: linear-gradient(135deg, #0D1B3E, #2E4E9E);
  color: #FFD9B3;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px -4px rgba(13,27,62,.45);
  transition: transform .15s ease;
}
.pr-set-icon svg { width: 26px; height: 26px; }
.pr-set-card:hover .pr-set-icon { transform: scale(1.05) rotate(-2deg); }
.pr-set-body { flex: 1; min-width: 0; }
.pr-set-body h4 { margin: 0 0 3px; font-size: 0.98rem; color: #0D1B3E; overflow-wrap: anywhere; }
.pr-set-body .pr-set-meta { font-size: 0.8rem; color: #7A8499; }
.pr-free-badge {
  display: inline-block; background: #2ECC71; color: #fff;
  font-size: 0.64rem; font-weight: 800; letter-spacing: .05em;
  border-radius: 5px; padding: 2px 7px; vertical-align: 2px; margin-right: 6px;
}

/* Buttons */
.pr-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 9px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 0.86rem;
  padding: 10px 18px; text-decoration: none; white-space: nowrap;
  transition: filter .15s, transform .1s;
}
.pr-btn:active { transform: scale(.97); }
.pr-btn-primary { background: linear-gradient(135deg, #FF6B00, #FF8C3A); color: #fff; }
.pr-btn-primary:hover { filter: brightness(1.06); }
.pr-btn-ghost { background: #fff; color: #0D1B3E; border: 1px solid #E0E4F0; }
.pr-btn-ghost:hover { border-color: #FF8C3A; color: #E85D00; }

.pr-topic-empty {
  color: #7A8499; font-size: 0.88rem; background: #fff;
  border: 1px dashed #E0E4F0; border-radius: 12px; padding: 22px 16px; text-align: center;
}

/* ═══════════════ PLAYER ═══════════════ */
.pl2-topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff; border: 1px solid #E0E4F0; border-radius: 14px;
  padding: 12px 16px; margin: 16px 0;
}
.pl2-topbar .pl2-title { flex: 1; min-width: 160px; }
.pl2-topbar h1 { font-size: 1.05rem; margin: 0; color: #0D1B3E; }
.pl2-topbar .pl2-sub { font-size: 0.78rem; color: #7A8499; }

.pl2-lang { display: flex; gap: 6px; }
.pl2-lang button {
  border: 1.5px solid #E0E4F0; background: #fff; color: #0D1B3E;
  border-radius: 999px; padding: 6px 16px; font: inherit; font-size: 0.8rem;
  font-weight: 700; cursor: pointer;
}
.pl2-lang button.active { background: #0D1B3E; border-color: #0D1B3E; color: #fff; }

.pl2-progress { height: 8px; background: #E0E4F0; border-radius: 99px; overflow: hidden; margin-bottom: 18px; }
.pl2-progress-fill {
  height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, #FF6B00, #FF8C3A);
  transition: width .3s ease;
}

.pl2-qcard {
  background: #fff; border: 1px solid #E0E4F0; border-radius: 16px;
  padding: 22px; min-width: 0;
  box-shadow: 0 1px 2px rgba(13,27,62,.03), 0 12px 28px -16px rgba(13,27,62,.14);
}
.pl2-qnum { font-size: 0.78rem; font-weight: 700; color: #FF6B00; letter-spacing: .04em; }
.pl2-qtext { font-size: 1.05rem; line-height: 1.6; color: #0D1B3E; margin: 8px 0 18px; overflow-wrap: anywhere; }
.pl2-qtext img { max-width: 100%; height: auto; border-radius: 8px; }
.pl2-qtext p { margin: 0 0 10px; }
.pl2-qtext p:last-child { margin-bottom: 0; }

.pl2-option {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  text-align: left; background: #FAFBFF; border: 1.5px solid #E0E4F0;
  border-radius: 12px; padding: 13px 14px; margin-bottom: 10px;
  font: inherit; font-size: 0.95rem; color: #0D1B3E; cursor: pointer;
  transition: border-color .12s, background .12s, transform .1s;
}
.pl2-option:hover:not(:disabled) { border-color: #FF8C3A; background: #FFF9F4; transform: translateX(2px); }
.pl2-option:disabled { cursor: default; }
.pl2-option .pl2-opt-letter {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  background: #E9EDF7; color: #0D1B3E; font-weight: 800; font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.pl2-option .pl2-opt-text { min-width: 0; overflow-wrap: anywhere; }
.pl2-option .pl2-opt-text img { max-width: 100%; height: auto; }
.pl2-option.correct { border-color: #2ECC71; background: #F0FBF4; }
.pl2-option.correct .pl2-opt-letter { background: #2ECC71; color: #fff; }
.pl2-option.wrong { border-color: #E74C3C; background: #FDF2F1; }
.pl2-option.wrong .pl2-opt-letter { background: #E74C3C; color: #fff; }

.pl2-explain {
  display: none; margin-top: 16px; border-radius: 12px;
  background: #FFF9EF; border: 1px solid #FFE3BF; padding: 14px 16px;
  font-size: 0.9rem; line-height: 1.65; color: #4A3B22; overflow-wrap: anywhere;
}
.pl2-explain.show { display: block; }
.pl2-explain .pl2-explain-title { font-weight: 800; color: #B8620B; margin-bottom: 6px; font-size: 0.8rem; letter-spacing: .05em; }
.pl2-explain img { max-width: 100%; height: auto; }

.pl2-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.pl2-actions .spacer { flex: 1; }

/* Result summary */
.pl2-summary { text-align: center; background: #fff; border: 1px solid #E0E4F0; border-radius: 16px; padding: 34px 20px; }
.pl2-summary .pl2-summary-emoji { font-size: 2.6rem; }
.pl2-summary h2 { font-family: 'Baloo 2', cursive; color: #0D1B3E; margin: 8px 0 2px; }
.pl2-summary .pl2-summary-sub { color: #7A8499; font-size: 0.9rem; margin-bottom: 22px; }
.pl2-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 520px; margin: 0 auto 24px; }
.pl2-stat { background: #FAFBFF; border: 1px solid #EEF0F7; border-radius: 12px; padding: 14px 6px; }
.pl2-stat .v { font-size: 1.3rem; font-weight: 800; color: #0D1B3E; }
.pl2-stat .l { font-size: 0.7rem; color: #7A8499; text-transform: uppercase; letter-spacing: .05em; }
.pl2-stat.good .v { color: #2ECC71; }
.pl2-stat.bad .v { color: #E74C3C; }
.pl2-stat.accent .v { color: #FF6B00; }

/* Quiz page: hide the footer only (this one's unrelated to the sidebar
   issue below — your .ck-sidebar is position:fixed with top:0/bottom:0
   in dashboard.css, which already spans full viewport height and never
   scrolls with content on its own. No override needed for that at all. */
body:has(.pl2-topbar) footer {
  display: none !important;
}

/* ═══════════════ MOBILE ═══════════════ */
@media (max-width: 860px) {
  /* Rail becomes horizontal chip scroller above the content */
  .pr-layout { flex-direction: column; gap: 14px; }
  .pr-rail {
    position: static; flex: none; width: 100%;
    display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: 12px; padding: 8px;
    gap: 6px; scrollbar-width: none;
  }
  .pr-rail::-webkit-scrollbar { display: none; }
  .pr-rail-title { display: none; }
  .pr-tab {
    flex: 0 0 auto; width: auto; border: 1.5px solid #E0E4F0 !important;
    border-radius: 999px; padding: 8px 15px; font-size: 0.82rem;
    white-space: nowrap;
  }
  .pr-tab.active { background: #FF6B00; color: #fff; border-color: #FF6B00 !important; }
  .pr-tab .pr-tab-count { display: none; }
}

@media (max-width: 640px) {
  .pr-hero h1 { font-size: 1.35rem; }
  .pr-card-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pr-chapter-card { padding: 14px 38px 12px 14px; }
  .pr-chapter-card h3 { font-size: 0.88rem; margin-bottom: 14px; }
  .pr-cat-grid { grid-template-columns: 1fr; }
  .pr-set-card { flex-wrap: wrap; }
  .pr-set-card .pr-btn { flex: 1 1 100%; justify-content: center; }
  .pl2-qcard { padding: 16px 14px; }
  .pl2-qtext { font-size: 0.98rem; }
  .pl2-stats { grid-template-columns: repeat(2, 1fr); }
  .pl2-actions .pr-btn { flex: 1 1 45%; justify-content: center; }
}

@media (max-width: 400px) {
  .pr-card-grid { grid-template-columns: 1fr; }
}