/* ============================================================
   BLOG QUIZ MINI — styles
   Paleta Essential: navy #0F1923, champagne #C8A97E, cream #F5F0E6
   ============================================================ */

.blog-quiz,
.bqm-wrap {
  background: #FFFFFF;
  border: 2px solid #C8A97E;
  border-radius: 12px;
  padding: 24px;
  margin: 32px 0;
  font-family: 'DM Sans', 'DM Sans Fallback', -apple-system, sans-serif;
  box-shadow: 0 4px 20px rgba(15, 25, 35, 0.06);
}

.bqm-header {
  margin-bottom: 20px;
}

.bqm-title {
  font-family: 'DM Serif Display', 'DM Serif Fallback', Georgia, serif;
  color: #0F1923;
  font-size: 1.4em;
  font-weight: 400;
  margin: 0 0 12px;
  text-align: center;
}

.bqm-progress {
  background: #F5F0E6;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.bqm-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #C8A97E, #B8945E);
  transition: width 0.4s ease;
  border-radius: 3px;
}

.bqm-counter {
  text-align: center;
  font-size: 0.85em;
  color: #6B7280;
  font-weight: 600;
}

/* Question */
.bqm-question {
  margin-top: 16px;
}

.bqm-q-text {
  font-size: 1.15em;
  color: #0F1923;
  line-height: 1.5;
  margin-bottom: 16px;
  font-weight: 500;
}

.bqm-audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0F1923;
  color: #F5F0E6;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 14px;
  transition: background 0.15s;
}

.bqm-audio-btn:hover { background: #1A2638; }

/* Options grid */
.bqm-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bqm-option {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FAFAF7;
  border: 2px solid #E5E5E5;
  padding: 14px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 1em;
  color: #0F1923;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  width: 100%;
}

.bqm-option:hover:not(:disabled) {
  background: #F5F0E6;
  border-color: #C8A97E;
}

.bqm-option:active:not(:disabled) {
  transform: scale(0.98);
}

.bqm-option:disabled {
  cursor: default;
}

.bqm-option-letter {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #C8A97E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9em;
  color: #0F1923;
}

.bqm-option-text {
  flex: 1;
}

.bqm-option--correct {
  background: #DCFCE7 !important;
  border-color: #16A34A !important;
}

.bqm-option--correct .bqm-option-letter {
  background: #16A34A;
  border-color: #16A34A;
  color: #FFFFFF;
}

.bqm-option--wrong {
  background: #FEE2E2 !important;
  border-color: #DC2626 !important;
}

.bqm-option--wrong .bqm-option-letter {
  background: #DC2626;
  border-color: #DC2626;
  color: #FFFFFF;
}

/* Fill mode */
.bqm-fill-wrap {
  display: flex;
  gap: 8px;
}

.bqm-fill-input {
  flex: 1;
  padding: 14px 16px;
  border: 2px solid #E5E5E5;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1em;
  background: #FAFAF7;
  color: #0F1923;
  outline: none;
  transition: border-color 0.15s;
}

.bqm-fill-input:focus {
  border-color: #C8A97E;
  background: #FFFFFF;
}

.bqm-fill-input--correct {
  background: #DCFCE7 !important;
  border-color: #16A34A !important;
  color: #14532D;
}

.bqm-fill-input--wrong {
  background: #FEE2E2 !important;
  border-color: #DC2626 !important;
}

.bqm-fill-submit {
  background: #0F1923;
  color: #F5F0E6;
  border: none;
  padding: 0 22px;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.bqm-fill-submit:hover:not(:disabled) {
  background: #1A2638;
}

.bqm-fill-submit:disabled {
  background: #888;
  cursor: not-allowed;
}

/* Feedback */
.bqm-feedback {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.95em;
  line-height: 1.5;
}

.bqm-feedback--correct {
  background: #DCFCE7;
  color: #14532D;
}

.bqm-feedback--wrong {
  background: #FEE2E2;
  color: #7F1D1D;
}

.bqm-feedback svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Next button */
.bqm-next-row {
  text-align: right;
  margin-top: 12px;
}

.bqm-next-btn {
  background: #C8A97E;
  color: #0F1923;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.bqm-next-btn:hover {
  background: #B8945E;
}

.bqm-next-btn:active {
  transform: scale(0.97);
}

/* Result screen */
.bqm-result {
  text-align: center;
  padding: 16px 0;
}

.bqm-result-trophy {
  color: #C8A97E;
  margin-bottom: 8px;
}

.bqm-result-score {
  font-family: 'DM Serif Display', 'DM Serif Fallback', Georgia, serif;
  font-size: 3.5em;
  color: #0F1923;
  line-height: 1;
  font-weight: 400;
}

.bqm-result-total {
  font-size: 0.4em;
  color: #6B7280;
  margin-left: 4px;
}

.bqm-result-pct {
  font-size: 1.2em;
  color: #C8A97E;
  font-weight: 700;
  margin-bottom: 8px;
}

.bqm-result-msg {
  color: #4B5563;
  margin-bottom: 20px;
  line-height: 1.5;
}

.bqm-result-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.bqm-restart-btn,
.bqm-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: 1em;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background 0.15s;
  min-width: 200px;
}

.bqm-restart-btn {
  background: #0F1923;
  color: #F5F0E6;
}

.bqm-restart-btn:hover {
  background: #1A2638;
}

.bqm-share-btn {
  background: #25D366;
  color: #FFFFFF;
}

.bqm-share-btn:hover {
  background: #1FB854;
}

/* Mobile */
@media (max-width: 600px) {
  .blog-quiz, .bqm-wrap {
    padding: 18px 14px;
    margin: 24px -14px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .bqm-title {
    font-size: 1.2em;
  }
  .bqm-q-text {
    font-size: 1.05em;
  }
  .bqm-fill-wrap {
    flex-direction: column;
  }
  .bqm-fill-submit {
    padding: 12px;
  }
}