/* ============================================================
   Shared FAQ accordion
   Used by fleet.html (inside vehicle panels) and my-quote.html.
   Tokens fall back across page design systems:
   fleet --primary / my-quote --accent, etc.
   ============================================================ */

.faq-list,
.faq-item,
.faq-heading {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --faq-primary: var(--primary, var(--accent, #e31b23));
  --faq-line: var(--line, var(--border, #e2e8f0));
  --faq-line-strong: var(--line-strong, rgba(15, 23, 42, 0.12));
  --faq-bg-subtle: var(--bg-subtle, #f1f5f9);
  --faq-surface: var(--surface, #ffffff);
  --faq-text: var(--text-dark, var(--text, #0f172a));
  --faq-text-muted: var(--text-medium, var(--muted, #334155));
  --faq-radius: var(--radius-md, 12px);
  --faq-ease: var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  --faq-transition-fast: var(--transition-fast, 0.2s ease);
  --faq-transition-normal: var(--transition-normal, 0.3s ease);
}

.faq-heading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.faq-heading i {
  color: var(--faq-primary);
  font-size: 0.95em;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Nested padding when the list sits inside a fleet vehicle panel */
.vehicle-panel .faq-list {
  padding: 0.4rem 1.4rem 1.4rem;
  animation: faqPanelFadeIn 0.35s var(--faq-ease);
}

.faq-item {
  border: 1px solid var(--faq-line);
  border-radius: var(--faq-radius);
  background: var(--faq-bg-subtle);
  overflow: hidden;
}

.faq-item[open] {
  background: var(--faq-surface);
  border-color: var(--faq-line-strong);
}

.faq-item > summary {
  padding: 0.9rem 2.5rem 0.9rem 1.1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--faq-text);
  position: relative;
  transition: color var(--faq-transition-fast);
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item > summary::after {
  content: '\2b'; /* plus sign */
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faq-primary);
  font-weight: 700;
  font-size: 1rem;
  transition: transform var(--faq-transition-normal);
}

.faq-item[open] > summary::after {
  content: '\2212'; /* minus sign */
}

.faq-item > summary:hover {
  color: var(--faq-primary);
}

.faq-item > p,
.faq-item .faq-answer,
.faq-item .faq-answer p {
  padding: 0 1.1rem 1rem;
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--faq-text-muted);
  animation: faqPanelFadeIn 0.3s var(--faq-ease);
}

.faq-item .faq-answer {
  padding-top: 0;
}

.faq-item .faq-answer p {
  padding: 0;
  animation: none;
}

.faq-item .faq-answer a {
  color: var(--faq-primary);
  font-weight: 600;
}

@keyframes faqPanelFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .vehicle-panel .faq-list {
    padding: 0.4rem 1rem 1rem;
  }
}