/* ============================================================
   Testyjęzykowe — Quiz UI styles
   Wymaga zmiennych CSS z child theme (style.css tj-child).
   ============================================================ */

/* ── Spinner ── */
.tj-quiz-spinner {
  width: 48px; height: 48px;
  border: 4px solid var(--tj-surface-3, #e9e7e1);
  border-top-color: var(--tj-primary, #2447ee);
  border-radius: 50%;
  animation: tj-spin 0.7s linear infinite;
  margin: 0 auto;
}
@keyframes tj-spin { to { transform: rotate(360deg); } }

/* ── Opcja zaznaczona ── */
.tj-quiz-option {
  transition: background var(--tj-trans, 150ms), border-color var(--tj-trans, 150ms);
}
.tj-quiz-option:hover {
  border-color: var(--tj-primary, #2447ee) !important;
  background: var(--tj-surface-2, #f4f3ef) !important;
}
.tj-quiz-option--selected {
  background: var(--tj-primary-bg, #eaeefd) !important;
  border-color: var(--tj-primary, #2447ee) !important;
  color: var(--tj-primary-ink, #1d3aba) !important;
}
.tj-quiz-option--selected strong {
  color: var(--tj-primary, #2447ee) !important;
}

/* ── Timer — pulsuje gdy < 60s ── */
.tj-quiz-timer--urgent {
  color: var(--tj-danger, #dc2626) !important;
  animation: tj-pulse 1s ease infinite;
}
@keyframes tj-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* ── Responsywność statystyk na dashboardzie ── */
@media (max-width: 980px) {
  .tj-quiz-app [style*="grid-template-columns: 1.4fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 640px) {
  .tj-quiz-app [style*="grid-template-columns: 1.4fr"] {
    grid-template-columns: 1fr !important;
  }
  .tj-quiz-option {
    font-size: 14px !important;
  }
}