/* Nurse in KSA — Quiz feature styles.
 * Hook prefix: .nurse-quiz-*  (kept distinct from the theme's .nurse-*).
 * Most layout is inline (ported from the design) or Tailwind utilities from the
 * theme; this file carries shared component styles and animations.
 */

.nurse-quiz-app { font-family: Inter, system-ui, sans-serif; color: #0f172a; }
.nurse-quiz-app *::selection { background: #d1fae5; }

@keyframes nurse-quiz-pop-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nurse-quiz-ring-grow { from { stroke-dashoffset: 339; } }

/* Catalog quiz card — hover lift (the prototype's style-hover) */
.nurse-quiz-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid #eef2f5; border-radius: 20px; padding: 24px;
  text-decoration: none; color: inherit; cursor: pointer;
  box-shadow: 0 18px 44px -38px rgba(15,23,42,0.4);
  transition: transform .18s, box-shadow .18s;
}
.nurse-quiz-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 56px -34px rgba(15,118,110,0.4);
}

/* Catalog filter pills */
.nurse-quiz-filter {
  height: 38px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  font: 600 13px Inter; border: 1px solid #e2e8f0; background: #fff; color: #475569;
  transition: all .15s;
}
.nurse-quiz-filter.is-active { border-color: #059669; background: #059669; color: #fff; }

/* Hidden by client-side filtering */
.nurse-quiz-card.is-hidden { display: none; }

/* Login form inputs */
.nurse-quiz-input {
  width: 100%; height: 48px; padding: 0 16px; border: 1.5px solid #e2e8f0;
  border-radius: 12px; font: 500 15px Inter; color: #0f172a; outline: none;
  transition: border-color .15s;
}
.nurse-quiz-input:focus { border-color: #059669; }

/* Detail: 2-col on desktop, single column on mobile */
@media (max-width: 880px) {
  .nurse-quiz-detail-grid { grid-template-columns: 1fr !important; }
  .nurse-quiz-detail-grid aside { position: static !important; }
}