/**
 * Find Your Car Tool Styles
 * Built on the Danto theme tokens (gold --primary-color, 22px radius, pill
 * buttons, Montserrat/Roboto). Inherits dark/light mode automatically.
 */

.cf-tool {
  --cf-radius: 22px;
  --cf-radius-sm: 16px;
  --cf-tint: color-mix(in srgb, var(--primary-color) 22%, transparent);
  --cf-tint-strong: color-mix(in srgb, var(--primary-color) 40%, transparent);
  color: var(--text-color);
}

/* ---------- Hero ---------- */
.cf-hero { padding: 2.5rem 0 0.5rem; text-align: center; }
.cf-hero__breadcrumb { font-size: 0.85rem; color: var(--text-alt-color); margin-bottom: 1rem; }
.cf-hero__breadcrumb a { color: var(--text-alt-color); text-decoration: none; }
.cf-hero__breadcrumb a:hover { color: var(--text-color); }
.cf-hero__title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  color: var(--heading-font-color);
}
.cf-hero__subtitle {
  font-size: 1.05rem;
  color: var(--text-alt-color);
  max-width: 40rem;
  margin: 0 auto;
}
.cf-hero__media {
  max-width: 46rem;
  margin: 1.5rem auto 0;
}
.cf-hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--cf-radius);
  display: block;
}

/* ---------- Quiz card ---------- */
.cf-quiz-wrapper { padding-top: 1.5rem; }
.cf-quiz {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--cf-radius);
  background: var(--background-alt-color);
}

.cf-progress { margin-bottom: 1.5rem; }
.cf-progress__track {
  height: 8px;
  border-radius: 60px;
  background: var(--background-alt-color-2);
  overflow: hidden;
}
.cf-progress__bar {
  height: 100%;
  width: 16.6%;
  background: var(--primary-color);
  border-radius: 60px;
  transition: width 0.3s ease;
}
.cf-progress__text {
  display: block;
  font-size: 0.8rem;
  color: var(--text-alt-color);
  margin-top: 0.5rem;
}

.quiz-step { border: 0; padding: 0; margin: 0; }
.quiz-step__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  outline: none;
  color: var(--heading-font-color);
}
.quiz-step__hint { font-size: 0.92rem; color: var(--text-alt-color); margin: 0 0 1.1rem; }
.quiz-step__error { color: #d64545; font-size: 0.88rem; margin-top: 0.85rem; font-weight: 500; }

/* ---------- Options ---------- */
.cf-options { display: grid; grid-template-columns: 1fr; gap: 0.65rem; }
@media (min-width: 30rem) { .cf-options--2 { grid-template-columns: 1fr 1fr; } }

.cf-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.1rem;
  border: 2px solid var(--border-color);
  border-radius: var(--cf-radius-sm);
  background: var(--background-color);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.cf-option:hover {
  border-color: var(--primary-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.cf-option input { position: absolute; opacity: 0; pointer-events: none; }
.cf-option__icon { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
.cf-option__text { font-weight: 600; color: var(--text-color); }
.cf-option__sub { display: block; font-weight: 400; font-size: 0.8rem; color: var(--text-alt-color); }
.cf-option:has(input:checked) {
  border-color: var(--primary-color);
  background: var(--cf-tint);
}
.cf-option:has(input:checked)::after {
  content: "\2713";
  margin-left: auto;
  font-weight: 700;
  color: var(--button-color);
  background: var(--primary-color);
  width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 0.85rem;
  flex: 0 0 auto;
}
.cf-option:has(input:focus-visible) { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.cf-option:has(input:disabled) { opacity: 0.4; cursor: not-allowed; }

/* ---------- Buttons (match theme .button pills) ---------- */
.cf-nav { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.75rem; }
.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.6rem;
  border-radius: 60px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-color);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--global-transition, all 0.2s);
}
.cf-btn:hover { border-color: var(--primary-color); }
.cf-btn--primary {
  border-color: var(--primary-color);
  background: var(--button-background-color);
  color: var(--button-color);
}
.cf-btn--primary:hover { background: var(--button-background-hover); color: var(--button-color); }
.cf-btn[hidden] { display: none; }
#carFinderNext, #carFinderSubmit { margin-left: auto; }

/* ---------- Results ---------- */
.cf-results { padding: 2.5rem 0; }
.cf-results__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.7rem; font-weight: 700; text-align: center; margin-bottom: 1.5rem;
  color: var(--heading-font-color);
}
.cf-cards { display: grid; gap: 1.1rem; max-width: 46rem; margin: 0 auto; }

.cf-card {
  border: 1px solid var(--border-color);
  border-radius: var(--cf-radius);
  padding: 1.4rem;
  background: var(--background-alt-color);
}
.cf-card__head { display: flex; align-items: flex-start; gap: 0.85rem; }
.cf-card__rank {
  flex: 0 0 auto;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--button-color);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 1.05rem;
}
.cf-card__name {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.22rem; font-weight: 700; margin: 0; color: var(--heading-font-color);
}
.cf-card__close {
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--text-alt-color); border: 1px solid var(--border-color);
  border-radius: 60px; padding: 0.12rem 0.5rem; vertical-align: middle;
}
.cf-card__price { margin: 0.25rem 0 0; font-weight: 600; color: var(--text-color); }
.cf-card__exs { font-weight: 400; font-size: 0.8rem; color: var(--text-alt-color); }
.cf-card__badge {
  margin-left: auto; flex: 0 0 auto;
  font-size: 0.78rem; font-weight: 700;
  background: rgba(34, 139, 84, 0.14); color: #1f8a54;
  border-radius: 60px; padding: 0.28rem 0.7rem; white-space: nowrap;
}
.cf-card__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1rem 0; }
.cf-chip {
  font-size: 0.78rem; font-weight: 600;
  background: var(--cf-tint); color: var(--text-color);
  border-radius: 60px; padding: 0.3rem 0.75rem;
}
.cf-card__verdict { margin: 0.5rem 0; color: var(--text-color); }
.cf-card__skip { margin: 0.5rem 0 1.1rem; font-size: 0.92rem; color: var(--text-alt-color); }
.cf-card__skip strong { color: var(--text-color); }

.cf-card__actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.cf-card__link {
  display: inline-flex; align-items: center;
  font-size: 0.86rem; font-weight: 600; text-decoration: none;
  padding: 0.5rem 1rem; border-radius: 60px;
  border: 1px solid var(--border-color); color: var(--text-color);
  transition: var(--global-transition, all 0.2s);
}
.cf-card__link:hover { border-color: var(--primary-color); color: var(--text-color); }
.cf-card__link--loan {
  border-color: var(--primary-color);
  background: var(--button-background-color); color: var(--button-color);
}
.cf-card__link--loan:hover { background: var(--button-background-hover); color: var(--button-color); }

.cf-upcoming {
  max-width: 46rem; margin: 1.4rem auto 0;
  padding: 1.1rem 1.35rem; border: 1px dashed var(--border-color); border-radius: var(--cf-radius);
  background: var(--background-alt-color);
}
.cf-upcoming__title { font-family: 'Montserrat', sans-serif; font-size: 1.05rem; margin: 0 0 0.6rem; }
.cf-upcoming__item { font-size: 0.92rem; margin-bottom: 0.5rem; color: var(--text-color); }
.cf-upcoming__item a { color: var(--text-color); text-decoration: underline; }

.cf-results__meta {
  max-width: 46rem; margin: 1.4rem auto 0;
  font-size: 0.8rem; color: var(--text-alt-color); text-align: center; line-height: 1.6;
}
.cf-results__restart { display: flex; margin: 1.5rem auto 0; }
.cf-empty { text-align: center; color: var(--text-alt-color); }

/* ---------- Supporting article spacing ---------- */
.cf-article { max-width: 46rem; margin: 1rem auto 0; }