/* ============================================================
   Fly GACA — Funnel tools
   The three free guided checks: conversion checker, ELP self-check,
   AIP quiz. Loaded alongside tools.css; logical properties for RTL.
   ============================================================ */

/* ---- the question panel ---------------------------------- */
.fn-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.fn-panel + .fn-panel { margin-block-start: var(--space-4); }
.fn-panel h2 {
  font-size: var(--fs-h3);
  margin-block-end: var(--space-1);
}
.fn-panel-intro {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-block-end: var(--space-5);
}

/* ---- a question ------------------------------------------ */
.fn-q { margin-block-end: var(--space-5); }
.fn-q:last-of-type { margin-block-end: 0; }
.fn-q-label {
  display: block;
  font-weight: var(--fw-semibold);
  margin-block-end: var(--space-1);
}
.fn-q-num { color: var(--text-dim); font-weight: var(--fw-bold); margin-inline-end: 0.4rem; }
.fn-q-hint {
  display: block;
  color: var(--text-dim);
  font-size: var(--fs-sm);
  margin-block-end: var(--space-3);
}

/* ---- select inputs --------------------------------------- */
.fn-select {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
  cursor: pointer;
}
.fn-select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* ---- option buttons (radio group) ------------------------ */
.fn-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.fn-opt {
  flex: 1 1 auto;
  min-width: 7rem;
  position: relative;
  display: block;
  text-align: center;
  padding: 0.6rem 0.9rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.fn-opt input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.fn-opt:hover { border-color: var(--brand-hover); }
.fn-opt:has(input:checked) {
  border-color: var(--brand);
  background: rgba(45, 110, 138, 0.18);
  font-weight: var(--fw-semibold);
}
.fn-opt:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* quiz answers stack full width with the text left-aligned */
.fn-q-quiz .fn-options { flex-direction: column; }
.fn-q-quiz .fn-opt { flex: none; text-align: start; min-width: 0; }

/* ---- actions --------------------------------------------- */
.fn-actions {
  margin-block-start: var(--space-6);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}
.fn-error {
  color: var(--gold);
  font-size: var(--fs-sm);
}

/* ---- the result panel ------------------------------------ */
.fn-result { margin-block-start: var(--space-5); }
.fn-result[hidden] { display: none; }

.fn-result-hero {
  background: var(--surface);
  border: 1px solid var(--brand);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
}
.fn-result-hero .fn-score {
  font-size: 3rem;
  font-weight: var(--fw-black);
  line-height: 1;
}
.fn-result-hero .fn-score-sub {
  display: block;
  color: var(--text-muted);
  margin-block-start: var(--space-2);
  font-size: var(--fs-base);
}

/* ---- checklist (conversion path) ------------------------- */
.fn-section-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block: var(--space-5) var(--space-3);
}
.fn-checklist { list-style: none; margin: 0; padding: 0; }
.fn-checklist li {
  position: relative;
  padding-inline-start: 2.4rem;
  margin-block-end: var(--space-4);
}
.fn-checklist li:last-child { margin-block-end: 0; }
.fn-step-n {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 1.7rem;
  height: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  border: 1px solid var(--border-bright);
  color: var(--accent-bright);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.fn-checklist h4 { font-size: var(--fs-base); margin-block-end: 2px; }
.fn-checklist p { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }

/* ---- conditional flags ----------------------------------- */
.fn-flag {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: rgba(200, 160, 74, 0.08);
  border: 1px solid rgba(200, 160, 74, 0.35);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-block-start: var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}
.fn-flag strong { color: var(--text); }
.fn-flag svg { flex: none; color: var(--gold); margin-block-start: 2px; }

/* ---- quiz review ----------------------------------------- */
.fn-review { margin-block-start: var(--space-5); }
.fn-review-item {
  border-inline-start: 3px solid var(--border-bright);
  padding-inline-start: var(--space-3);
  margin-block-end: var(--space-4);
}
.fn-review-item.ok { border-color: var(--success); }
.fn-review-item.bad { border-color: var(--gold); }
.fn-review-q { font-weight: var(--fw-semibold); margin-block-end: 2px; }
.fn-review-a { font-size: var(--fs-sm); color: var(--text-muted); }
.fn-review-a .right { color: var(--accent-bright); }

/* ---- the Prep-Pack CTA card ------------------------------ */
.fn-cta {
  margin-block-start: var(--space-6);
  background:
    var(--glow-teal) no-repeat -40% -60% / 60% 140%,
    var(--surface);
  border: 1px solid var(--brand);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.fn-cta-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.fn-cta h3 {
  font-size: var(--fs-h3);
  margin-block: var(--space-2) var(--space-2);
}
.fn-cta p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  margin-block-end: var(--space-4);
}
.fn-cta-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .fn-panel, .fn-cta, .fn-result-hero { padding: var(--space-4); }
}