/* Board Prep — shared quiz play UI (guest + logged-in) */

.bp-quiz-play {
  max-width: 980px;
}

.bp-quiz-play__hero {
  align-items: flex-start;
}

.bp-quiz-play__back {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.bp-quiz-play__back:hover {
  color: #fff;
}

.bp-quiz-play__meta {
  padding-top: 1rem;
}

.bp-play-progress {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0.85rem 1rem;
}

.bp-play-progress__track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e1ebe6;
}

.bp-play-progress__bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bp-primary, #1a5f4a), var(--bp-accent, #f0a500));
  transition: width 0.2s ease;
}

.bp-question-card {
  padding: 1rem;
}

.bp-question-card.is-answered {
  box-shadow: 0 8px 30px rgba(26, 95, 74, 0.12);
}

.bp-question-card__head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  margin-bottom: 1rem;
}

.bp-question-number {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8f4ef;
  color: var(--bp-primary, #1a5f4a);
  font-weight: 800;
}

.bp-question-card h2 {
  margin: 0;
  color: #1a3d32;
  font-size: 1.05rem;
  line-height: 1.45;
  letter-spacing: 0;
}

.bp-answer-list {
  display: grid;
  gap: 0.6rem;
}

.bp-answer-option {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  min-height: 56px;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid #e5ece8;
  border-radius: 8px;
  background: #f8fbf9;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.bp-answer-option:hover {
  border-color: var(--bp-primary, #1a5f4a);
  background: #f1f8f5;
}

.bp-answer-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bp-answer-key {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #d7e4de;
  color: var(--bp-primary, #1a5f4a);
  font-weight: 800;
}

.bp-answer-text {
  color: #243b32;
  line-height: 1.4;
  word-break: break-word;
}

.bp-answer-input:checked + .bp-answer-key {
  background: var(--bp-primary, #1a5f4a);
  border-color: var(--bp-primary, #1a5f4a);
  color: #fff;
}

.bp-answer-option.is-selected {
  border-color: var(--bp-primary, #1a5f4a);
  background: #edf8f3;
  box-shadow: 0 5px 16px rgba(26, 95, 74, 0.12);
}

.bp-submit-bar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem;
  border-radius: 8px 8px 0 0;
}

/* Logged-in template1 overrides when board prep portal */
body.bp-quiz-attempt-page {
  background: var(--bp-bg, #f0f4f8);
}

body.bp-quiz-attempt-page .quiz-topbar {
  background: linear-gradient(90deg, var(--bp-primary, #1a5f4a) 0%, var(--bp-primary-light, #2d8a6a) 100%);
}

body.bp-quiz-attempt-page .q-card {
  box-shadow: 0 8px 24px rgba(26, 95, 74, 0.12);
}

body.bp-quiz-attempt-page .q-header {
  background: linear-gradient(90deg, rgba(26, 95, 74, 0.12) 0%, rgba(240, 165, 0, 0.1) 100%);
}

body.bp-quiz-attempt-page .q-bubble {
  background: linear-gradient(135deg, var(--bp-primary, #1a5f4a), var(--bp-primary-light, #2d8a6a));
}

body.bp-quiz-attempt-page .option.checked,
body.bp-quiz-attempt-page .option.has-answer {
  border-color: var(--bp-primary, #1a5f4a);
  background: linear-gradient(0deg, rgba(26, 95, 74, 0.1), rgba(26, 95, 74, 0.1));
  box-shadow: 0 6px 16px rgba(26, 95, 74, 0.15);
}

body.bp-quiz-attempt-page .btn-next {
  background: linear-gradient(90deg, var(--bp-primary, #1a5f4a) 0%, var(--bp-primary-light, #2d8a6a) 100%);
}

body.bp-quiz-attempt-page .option input {
  accent-color: var(--bp-primary, #1a5f4a);
}

/* Guest signup upsell on result page */
.bp-guest-upsell {
  background: linear-gradient(135deg, var(--bp-primary-soft, #eaf6f1), #fff9e6);
  border: 2px solid var(--bp-primary, #1a5f4a);
  border-radius: var(--bp-radius-lg, 16px);
  padding: var(--bp-spacing-lg, 1.5rem);
  margin-bottom: var(--bp-spacing-lg, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-spacing-md, 1rem);
}

.bp-guest-upsell__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--bp-radius-full, 9999px);
  background: var(--bp-primary, #1a5f4a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.bp-guest-upsell__content {
  flex: 1 1 220px;
  min-width: 0;
}

.bp-guest-upsell__content h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--bp-text-primary, #0f172a);
}

.bp-guest-upsell__content p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--bp-text-secondary, #475569);
}

.bp-guest-upsell__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex-shrink: 0;
}

.bp-review-list {
  margin-bottom: var(--bp-spacing-lg, 1.5rem);
}

.bp-review-item {
  background: var(--bp-surface, #fff);
  border-radius: var(--bp-radius-md, 12px);
  padding: var(--bp-spacing-md, 1rem);
  margin-bottom: 0.75rem;
  border: 1px solid var(--bp-border, #e2e8f0);
  box-shadow: var(--bp-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.bp-review-item__question {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--bp-text-primary, #0f172a);
}

.bp-review-item__option {
  font-size: 0.875rem;
  padding: 0.15rem 0;
}

.bp-review-item__option--correct {
  color: #16a34a;
  font-weight: 600;
}

.bp-review-item__option--wrong {
  color: #dc2626;
}

.bp-review-item__option--muted {
  color: var(--bp-text-muted, #94a3b8);
}

@media (max-width: 767.98px) {
  .bp-question-card {
    padding: 0.85rem;
  }

  .bp-question-card__head {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.65rem;
  }

  .bp-question-number {
    width: 38px;
    height: 38px;
  }

  .bp-answer-option {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 0.7rem;
  }

  .bp-submit-bar {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .bp-submit-bar .btn {
    width: 100%;
  }

  .bp-guest-upsell {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .bp-guest-upsell__actions {
    justify-content: center;
  }

  /* Logged-in quiz attempt (template1) — mobile */
  body.bp-quiz-attempt-page {
    height: 100dvh;
    overflow: hidden;
  }

  body.bp-quiz-attempt-page .board-prep-nav,
  body.bp-quiz-attempt-page .bp-bottom-nav,
  body.bp-quiz-attempt-page .board-prep-footer,
  .board-prep-app-shell:has(.quiz-topbar) .board-prep-nav,
  .board-prep-app-shell:has(.quiz-topbar) .bp-bottom-nav,
  .board-prep-app-shell:has(.quiz-topbar) .board-prep-footer {
    display: none !important;
  }

  body.bp-quiz-attempt-page .quiz-topbar {
    padding-top: calc(0.45rem + env(safe-area-inset-top, 0px));
  }

  body.bp-quiz-attempt-page .quiz-footer {
    bottom: 0;
    z-index: 1050;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  body.bp-quiz-attempt-page .quiz-footer .d-flex {
    border-radius: 0;
    box-shadow: none;
    max-width: none;
  }

  body.bp-quiz-attempt-page .quiz-footer .btn-pill {
    flex: 1;
    min-height: 44px;
  }
}