/* ==========================================================================
   The quiz form on the ad landing pages (over-50.html, welcome.html).
   Loaded after ctc.css. The same card is used in line on the page (white, on
   the dark form section) and moved into the lightbox (dark, see form.js), so
   everything below has a .fx__slot version.

   The radio buttons are restyled but never hidden: GoHighLevel's External
   Tracking only reads inputs that are visible in the page.
   ========================================================================== */

.q { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; }
.q legend { padding: 0; margin: 0 0 12px; font-size: 1.14rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.q__n { display: block; margin: 0 0 4px; font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--olive); }
.q__opts { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .q__opts { grid-template-columns: 1fr 1fr; } }

.form-card label.opt {
  display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 13px 14px;
  border: 1.5px solid var(--line); border-radius: 9px; background: var(--paper); cursor: pointer;
  font-size: .97rem; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.35;
  color: var(--ink); transition: border-color var(--mk-fast, .15s) ease, background var(--mk-fast, .15s) ease;
}
.form-card label.opt:hover { border-color: var(--olive-soft); }
.opt input {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0;
  border: 2px solid var(--olive-soft); border-radius: 50%; background: #fff; display: grid; place-content: center;
}
.opt input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--olive);
  transform: scale(0); transition: transform .15s ease; }
.opt input:checked::before { transform: scale(1); }
.opt input:checked { border-color: var(--olive); }
.opt input:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
.form-card label.opt:has(input:checked) { border-color: var(--olive); background: #eef3ea; }

.form-card .q__reply { margin: 10px 0 0; padding: 11px 15px; border-left: 3px solid var(--sage); border-radius: 0 8px 8px 0;
  background: #eff7ef; color: var(--ink); font-size: .95rem; line-height: 1.45; animation: q-reply .35s ease both; }
@keyframes q-reply { from { opacity: 0; transform: translateY(-4px); } }

.q--you { margin-bottom: 10px; }

/* the summary after sending */
.result:focus { outline: none; }
.result { scroll-margin-top: 90px; }
.form-card .result .kicker { color: var(--olive); margin: 0 0 6px; }
.form-card .result__h { font-size: clamp(1.4rem, 3vw, 1.8rem); color: var(--ink); margin: 0 0 16px; }
.heard { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.heard li { padding: 13px 16px; border-radius: 9px; background: #eff7ef; border-left: 3px solid var(--sage); }
.form-card .heard b { display: block; color: var(--ink); margin: 0 0 3px; }
.form-card .heard span { color: var(--body); font-size: .95rem; }
.form-card .result__next { font-size: 1.05rem; color: var(--ink); margin: 0 0 10px; }
.form-card .nexts { margin: 0 0 24px; padding-left: 22px; display: grid; gap: 8px; color: var(--body); }
.result .btn { width: 100%; text-align: center; }

/* the countdown to /next-steps, at the top of the results */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.go-next { margin: 0 0 22px; padding: 16px 18px 18px; border-radius: 10px; background: var(--olive); color: #fff; }
.form-card .go-next__line { margin: 0 0 12px; color: #fff; font-weight: 600; }
.go-next__line b { display: inline-block; min-width: 1.4em; text-align: center; color: var(--sage); font-size: 1.15em; }
.go-next__bar { display: block; height: 4px; margin: 0 0 16px; border-radius: 2px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.go-next__bar > i { display: block; height: 100%; width: 100%; background: var(--sage); transition: width linear; }
.go-next.is-going .go-next__bar > i { width: 0; }
.go-next.is-staying .go-next__bar { display: none; }
.go-next .btn { width: 100%; text-align: center; background: #fff; color: var(--olive-deep); }
.go-next__stay { display: block; margin: 10px auto 0; padding: 4px 8px; border: 0; background: none;
  color: rgba(255, 255, 255, .8); font: inherit; font-size: .9rem; text-decoration: underline; cursor: pointer; }
.go-next__stay:hover, .go-next__stay:focus-visible { color: #fff; }
.fx__slot .go-next { background: rgba(138, 205, 143, .14); }
@media (prefers-reduced-motion: reduce) { .go-next__bar > i { transition: none; } }

/* in the lightbox: the card goes transparent on the dark panel */
.fx__slot .form-card .q legend, .fx__slot .form-card .result__h,
.fx__slot .form-card .result__next, .fx__slot .form-card .heard b { color: #fff; }
.fx__slot .form-card .q__n, .fx__slot .form-card .result .kicker { color: var(--sage); }
.fx__slot .form-card .q__reply, .fx__slot .form-card .heard li { background: rgba(138, 205, 143, .12); color: rgba(255, 255, 255, .9); }
.fx__slot .form-card .heard span, .fx__slot .form-card .nexts { color: rgba(255, 255, 255, .8); }

@media (prefers-reduced-motion: reduce) { .form-card .q__reply { animation: none; } }

/* ------------------------------------------------ one question at a time
   Only with the script running (form.stepped). Questions still to come are
   hidden; answered ones fold to one line, keeping the chosen answer (and its
   radio button) on screen, because External Tracking only reads what's visible. */
.qbar { height: 4px; background: var(--mist); border-radius: 4px; overflow: hidden; margin: 0 0 22px; }
.qbar i { display: block; height: 100%; width: 0; background: var(--sage); transition: width .35s ease; }
.stepped .q.is-todo { display: none; }
.stepped .q.is-current { animation: q-in .3s ease both; }
@keyframes q-in { from { opacity: 0; transform: translateY(6px); } }
.q__edit { display: none; }
.form-card .q__next { margin-top: 14px; width: 100%; }

.stepped .q.is-done { margin: 0 0 12px; padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.stepped .q.is-done legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: 100%;
  margin: 0 0 6px; font-size: .9rem; font-weight: 600; color: var(--muted); }
.stepped .q.is-done .q__n { display: none; }
.stepped .q.is-done .q__edit { display: inline; margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--olive);
  text-decoration: underline; text-underline-offset: 3px; }
.stepped .q.is-done .q__opts { grid-template-columns: 1fr; }
.stepped .q.is-done label.opt { display: none; }
.stepped .q.is-done label.opt:has(input:checked) { display: flex; padding: 6px 0; border: 0; background: none; font-size: .95rem; }
.stepped .q.is-done .q__reply, .stepped .q.is-done .q__next { display: none; }

.fx__slot .form-card .q.is-done { border-bottom-color: rgba(255, 255, 255, .14); }
.fx__slot .form-card .q.is-done legend { color: rgba(255, 255, 255, .7); }
.fx__slot .form-card .q.is-done label.opt:has(input:checked) { color: #fff; }
.fx__slot .form-card .q.is-done .q__edit { color: var(--sage); }
.fx__slot .qbar { background: rgba(255, 255, 255, .12); }

@media (prefers-reduced-motion: reduce) { .stepped .q.is-current { animation: none; } .qbar i { transition: none; } }

/* Replies are the results now, shown at the end, not under each question. */
.stepped .q__reply { display: none !important; }
.how-line { max-width: 62ch; margin: 28px auto 0; text-align: center; color: var(--body); font-size: 1.02rem; }

/* each question's wording for GoHighLevel's tracking script (see ad-pages.py) */
.form-card label.gfield_label { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }