/**
 * Shared form and Select2 styles for free tools (logged-out).
 * Matches base_logged_out styling; ensures no dark text on dark backgrounds.
 */
/* Quiz page: form controls and labels (same as .tools-page) */
.tools-quiz input,
.tools-quiz textarea,
.tools-quiz select,
.tools-quiz .form-control,
.tools-quiz .form-select {
  color: var(--text-primary) !important;
  background-color: var(--bg-primary) !important;
  border-color: var(--border) !important;
}
.tools-quiz input::placeholder,
.tools-quiz textarea::placeholder,
.tools-quiz .form-control::placeholder {
  color: var(--text-muted) !important;
}
.tools-quiz .form-control:focus,
.tools-quiz .form-select:focus {
  color: var(--text-primary) !important;
  background-color: var(--bg-primary) !important;
  border-color: var(--accent) !important;
}
.tools-quiz .form-check-input {
  background-color: var(--bg-primary) !important;
  border-color: var(--border) !important;
}
.tools-quiz .form-check-input:checked {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.tools-quiz .form-check-label,
.tools-quiz .form-label,
.tools-quiz label {
  color: var(--text-secondary) !important;
}
.tools-quiz .form-label + .form-control,
.tools-quiz .form-label + .form-select {
  color: var(--text-primary) !important;
}

/* Match base_logged_out section and typography */
.tools-page .section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--text-primary);
}
.tools-page .lead {
  color: var(--text-secondary);
  font-size: 1.15rem;
}
.tools-page .text-muted {
  color: var(--text-muted) !important;
}
/* Cards: same as base theme (bg-secondary, border, radius, shadow) */
.tools-page .form-card,
.tools-page .result-card,
.tools-page .list-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--border-radius, 8px);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.15));
}
.tools-page .what-next {
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  border-radius: var(--border-radius, 8px);
  padding: 1.25rem;
  margin-top: 1.25rem;
}
/* Buttons: match base .btn-primary and .btn-outline */
.tools-page .btn-primary {
  background: var(--accent);
  color: var(--accent-on-accent, #121212);
  font-weight: 600;
  border: none;
  box-shadow: var(--glow-small);
}
.tools-page .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--glow-medium);
  color: var(--accent-on-accent, #121212);
}
.tools-page .btn-outline-secondary {
  border: 2px solid var(--border);
  color: var(--text-secondary);
  background: transparent;
}
.tools-page .btn-outline-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 10%, transparent);
  transform: translateY(-3px);
}
/* FAQ accordion */
.tools-page .faq-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--border-radius, 8px);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.tools-page .faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
}
.tools-page .faq-question span { flex: 1; }
.tools-page .faq-toggle {
  color: var(--accent);
  transition: transform 0.3s ease;
}
.tools-page .faq-item.active .faq-toggle { transform: rotate(180deg); }
.tools-page .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.tools-page .faq-item.active .faq-answer { max-height: 1000px; }
.tools-page .faq-answer-content {
  padding: 0 1.25rem 1.25rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.tools-page .alert-warning {
  background: rgba(255, 193, 7, 0.15);
  border: 1px solid rgba(255, 193, 7, 0.4);
  color: var(--text-secondary);
}
.tools-page .report-section { margin-bottom: 1.5rem; }
.tools-page .report-section h3 { color: var(--accent); font-size: 1.1rem; margin-bottom: 0.5rem; }
/* Result table (e.g. Supplement Stack Cost Calculator) */
.tools-page .result-card .table-responsive {
  border-radius: var(--border-radius, 8px);
  overflow: hidden;
  margin-bottom: 1rem;
}
.tools-page .result-card .table {
  margin-bottom: 0;
  color: var(--text-secondary);
}
.tools-page .result-card .table thead th {
  background-color: var(--bg-primary);
  color: var(--text-primary) !important;
  font-weight: 600;
  border-color: var(--border);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}
.tools-page .result-card .table tbody td {
  border-color: var(--border);
  color: var(--text-secondary) !important;
  padding: 0.75rem 1rem;
  vertical-align: middle;
}
.tools-page .result-card .table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--border);
}
.tools-page .result-card .table tbody tr:hover td {
  background-color: rgba(0, 212, 255, 0.06);
}
.tools-page table { color: var(--text-secondary); }
.tools-page .table th,
.tools-page .table td { border-color: var(--border); }
.tools-page .totals { font-size: 1.25rem; font-weight: 700; color: var(--accent); }
.tools-page .list-card h3 { color: var(--accent); font-size: 1.1rem; margin-bottom: 0.5rem; }
.tools-page .evidence-badge {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: rgba(255, 193, 7, 0.2);
  color: var(--text-secondary);
}

/* Form controls */
.tools-page input,
.tools-page textarea,
.tools-page select,
.tools-page .form-control,
.tools-page .form-select {
  color: var(--text-primary) !important;
  background-color: var(--bg-primary) !important;
  border-color: var(--border) !important;
}
.tools-page input::placeholder,
.tools-page textarea::placeholder,
.tools-page .form-control::placeholder {
  color: var(--text-muted) !important;
}
.tools-page .form-control:focus,
.tools-page .form-select:focus {
  color: var(--text-primary) !important;
  background-color: var(--bg-primary) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25);
}
.tools-page .form-check-input {
  background-color: var(--bg-primary) !important;
  border-color: var(--border) !important;
}
.tools-page .form-check-input:checked {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.tools-page .form-check-label,
.tools-page .form-label,
.tools-page label {
  color: var(--text-secondary) !important;
}
.tools-page .form-label + .form-control,
.tools-page .form-label + .form-select,
.tools-page label + select {
  color: var(--text-primary) !important;
}
.tools-page .small:not(.text-muted) {
  color: var(--text-secondary) !important;
}
.tools-page .form-card p,
.tools-page .result-card p,
.tools-page .list-card p,
.tools-page .what-next p,
.tools-page .form-card ul,
.tools-page .result-card ul,
.tools-page .list-card ul,
.tools-page .what-next ul {
  color: var(--text-secondary) !important;
}
.tools-page .form-card li,
.tools-page .result-card li,
.tools-page .list-card li,
.tools-page .what-next li {
  color: var(--text-secondary) !important;
}
.tools-page h1, .tools-page h2, .tools-page h3, .tools-page h4, .tools-page h5, .tools-page h6 {
  color: var(--text-primary) !important;
}

/* Select2 overrides for .tools-page (logged-out theme) */
.tools-page .select2-container .select2-selection {
  background-color: var(--bg-primary) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}
.tools-page .select2-container .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
}
.tools-page .select2-container .select2-selection--single .select2-selection__placeholder {
  color: var(--text-muted) !important;
}
.tools-page .select2-container .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-primary) transparent transparent transparent !important;
}
.tools-page .select2-container.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--text-primary) transparent !important;
}
.tools-page .select2-container .select2-selection--multiple .select2-selection__choice {
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}
.tools-page .select2-container .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--text-muted) !important;
}
.tools-page .select2-container .select2-selection--multiple .select2-search__field {
  color: var(--text-primary) !important;
  background: transparent !important;
}
.tools-page .select2-dropdown {
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
}
.tools-page .select2-search--dropdown .select2-search__field {
  background-color: var(--bg-primary) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}
.tools-page .select2-results__option {
  color: var(--text-primary) !important;
}
.tools-page .select2-results__option--highlighted[aria-selected] {
  background-color: var(--accent) !important;
  color: var(--accent-on-accent) !important;
}
.tools-page .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: rgba(0, 212, 255, 0.2) !important;
}
.tools-page .select2-container.select2-container--focus .select2-selection,
.tools-page .select2-container.select2-container--open .select2-selection {
  border-color: var(--accent) !important;
}

/*
 * Select2 dropdown is appended to body, so it is not inside .tools-page.
 * These rules apply on tool pages (this file is only loaded there) so the
 * dropdown and results always use light text on dark background.
 */
.select2-dropdown {
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
}
.select2-search--dropdown .select2-search__field {
  background-color: var(--bg-primary) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}
.select2-results__option {
  color: var(--text-primary) !important;
}
.select2-results__option--highlighted[aria-selected] {
  background-color: var(--accent) !important;
  color: var(--accent-on-accent) !important;
}
.select2-results__option[aria-selected="true"] {
  background-color: rgba(0, 212, 255, 0.2) !important;
  color: var(--text-primary) !important;
}
.select2-results__message {
  color: var(--text-muted) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--text-muted) !important;
}