/* -------------------------------------------------------
   Personality Blend — Custom Styles
   ------------------------------------------------------- */

/* ── Element colour palette ── */
:root {
  --fire-color:  #dc3545;   /* Bootstrap danger/red  */
  --water-color: #0d6efd;   /* Bootstrap primary/blue */
  --earth-color: #198754;   /* Bootstrap success/green */
  --wind-color:  #6c757d;   /* Bootstrap secondary/gray */
}

/* ── Element dot indicators ── */
.element-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.element-fire  { background-color: var(--fire-color);  }
.element-water { background-color: var(--water-color); }
.element-earth { background-color: var(--earth-color); }
.element-wind  { background-color: var(--wind-color);  border: 1px solid #adb5bd; }

/* ── Element badges ── */
.badge-fire  { background-color: var(--fire-color)  !important; color: #fff; }
.badge-water { background-color: var(--water-color) !important; color: #fff; }
.badge-earth { background-color: var(--earth-color) !important; color: #fff; }
.badge-wind  { background-color: var(--wind-color)  !important; color: #fff; }

/* ── Personality score bars (results page) ── */
.score-bar-wrap {
  background: #e9ecef;
  border-radius: 4px;
  height: 14px;
  overflow: hidden;
}
.score-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}
.score-bar-fire  { background-color: var(--fire-color);  }
.score-bar-water { background-color: var(--water-color); }
.score-bar-earth { background-color: var(--earth-color); }
.score-bar-wind  { background-color: var(--wind-color);  }

/* ── Extra-small button (not in Bootstrap 5 by default) ── */
.btn-xs {
  padding: 0.15rem 0.45rem;
  font-size: 0.75rem;
  line-height: 1.4;
  border-radius: 0.2rem;
}

/* ── Test page ── */

/* Option rows */
.option-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  margin-bottom: 0.4rem;
}
.option-label:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
}
.option-label input[type="radio"] {
  margin-top: 0.15rem;
  flex-shrink: 0;
}
.option-label.selected {
  background: #e7f1ff;
  border-color: #0d6efd;
}

/* Question cards */
.question-card {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  background: #fff;
  transition: border-color 0.15s;
}
.question-card.answered {
  border-left: 4px solid var(--earth-color);
}

/* Progress bar label */
.progress-label {
  font-size: 0.8rem;
  color: #6c757d;
}

/* Section tab nav */
.section-tabs .nav-link {
  color: #6c757d;
}
.section-tabs .nav-link.active {
  color: #212529;
  font-weight: 600;
}

/* Sub-section header */
.subsection-header {
  background: #f8f9fa;
  border-left: 4px solid #adb5bd;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.75rem;
  border-radius: 0 0.25rem 0.25rem 0;
}

/* ── Results page ── */
.personality-card {
  border-radius: 0.5rem;
  overflow: hidden;
}
.personality-card.dominant {
  border: 2px solid #0d6efd;
}
.personality-card .card-header {
  font-weight: 700;
  font-size: 1rem;
}
.personality-header-fire  .card-header { background-color: #f8d7da; color: #842029; }
.personality-header-water .card-header { background-color: #cfe2ff; color: #084298; }
.personality-header-earth .card-header { background-color: #d1e7dd; color: #0a3622; }
.personality-header-wind  .card-header { background-color: #e2e3e5; color: #41464b; }

/* Radar chart container */
.chart-container {
  position: relative;
  max-width: 360px;
  margin: 0 auto;
}

/* ── Dashboard ── */
.test-row {
  border-bottom: 1px solid #dee2e6;
  padding: 0.75rem 0;
}
.test-row:last-child { border-bottom: none; }

/* ── Gate page ── */
.gate-card {
  max-width: 420px;
  margin: 6rem auto;
}

/* ── Auth pages (login, register, forgot) ── */
.auth-card {
  max-width: 440px;
  margin: 4rem auto;
}

/* ── Utility ── */
.font-monospace { font-family: var(--bs-font-monospace) !important; }
.text-xs { font-size: 0.75rem; }

/* ── Mobile tweaks ── */
@media (max-width: 576px) {
  .chart-container { max-width: 100%; }
  .option-label    { font-size: 0.9rem; }
  .question-card   { padding: 1rem; }
  h1.h3           { font-size: 1.25rem; }
}