/* ── assets/css/forms.css — the look of the site's forms (application/views/forms/<key>.php) ───────────────────────
   One card at the end of the form's page: on the left (on top, on a phone) the form's own words in its audience's
   colour, on the right the questions, numbered, then Send. The colours come from the card's data-f (app/theme.css):
   --c main, --c2 light, --cd dark text, --ct tint; data-f="brand" (a job at Airdoot) is navy and gold, defined here.
   The site's type: the display face for the title, Manrope for everything else, JetBrains Mono for numbers and refs.
   Text on a solid --c passes AA: near-black on yellow, green, orange and turquoise; white on blue; white on the violet's
   dark shade. Reduced motion (html.fx-reduce, or the device's setting): nothing moves.
   What a click does is assets/js/forms.js; the classes are written by application/views/forms/_kit.php.             */

.af-card { --af-btn: var(--c, #F7B744); --af-btn-ink: #0B1B2B; --af-on: #0B1B2B; --af-ink: #0B1B2B;
  --af-edge: #D5DEE8; --af-edge-2: #B9C7D5; --af-bad: #B42318; --af-bad-edge: #C2362B; --af-ease: var(--ease, cubic-bezier(.16, 1, .3, 1)); }
.af-card[data-f="commercial"] { --af-btn-ink: #fff; --af-on: #fff; }
.af-card[data-f="oem"] { --af-btn: var(--cd); --af-btn-ink: #fff; --af-on: #fff; }
/* a job at Airdoot: the brand, gold for the one action and the ticks (navy on gold), gold-ink for gold words on white */
.af-card[data-f="brand"] { --c: var(--gold, #F7B744); --c2: var(--gold-60, #FFD487); --cd: var(--gold-ink, #8A5A00); --ct: var(--gold-30, #FDE9C7);
  --af-btn: var(--gold, #F7B744); --af-btn-ink: var(--navy, #00396C); --af-on: var(--navy, #00396C); }

.af-card, .af-card *, .af-card ::before, .af-card ::after { box-sizing: border-box; }
.af-card [hidden] { display: none !important; }
.af-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* the radio and tick inputs under the cards and chips: still focusable, still clicked through their label */
.af-vh { position: absolute; top: 12px; left: 12px; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
/* keyboard rings: the card's dark shade (the site's gold ring is under 2:1 on white); fields and cards draw their own */
.af-card :is(a, button, summary):focus-visible { outline: 2px solid var(--cd) !important; outline-offset: 3px; }
.af-card :is(.af-title, .af-done-h, .af-route-h, .af-qh, .af-rv-h, .af-in, .af-vh, .af-group):is(:focus, :focus-visible) { outline: none !important; }

/* ═══ the card ═══ */
.af-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; overflow: clip; text-align: left;
  border-radius: var(--r-panel, 28px); background: #fff; border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line));
  box-shadow: 0 44px 90px -56px color-mix(in srgb, var(--cd) 70%, transparent), 0 2px 4px rgba(0, 57, 108, .04);
  font-family: var(--font); color: var(--text); scroll-margin-top: 96px;
}
@media (min-width: 960px) { .af-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* the form's own words: the old start card's left half */
.af-copy {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding: clamp(24px, 3.6vw, 52px);
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c2) 42%, transparent), transparent 62%), var(--ct);
}
.af-copy::after { content: ""; position: absolute; z-index: -1; right: -110px; bottom: -120px; width: 300px; height: 300px; border-radius: 50%; border: 40px solid color-mix(in srgb, var(--c) 15%, transparent); pointer-events: none; }
.af-copy::before { content: ""; position: absolute; z-index: -1; right: 36px; top: 34px; width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--c) 18%, transparent); filter: blur(18px); pointer-events: none; }
.af-copy-in { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 960px) { .af-copy-in { position: sticky; top: 104px; } }
.af-eye { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1.25 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--cd); }
.af-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.af-card .af-title { margin: 0; font: 400 clamp(30px, 3.3vw, 48px)/1.04 var(--display); letter-spacing: -.02em; color: var(--navy); text-wrap: balance; }
.af-card .af-title em { font-style: italic; color: var(--cd); }
.af-lead { margin: 0; max-width: 46ch; font: 500 16px/1.55 var(--font); color: var(--text); text-wrap: pretty; }
.af-role { margin: 0; font: 500 15px/1.5 var(--font); color: var(--text); }
.af-role b { color: var(--navy); }
.af-pts { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 9px; }
.af-pts li { display: flex; align-items: flex-start; gap: 10px; font: 600 14.5px/1.4 var(--font); color: var(--navy); }
.af-pts svg { flex: none; margin-top: 1px; color: var(--cd); }
.af-meta { margin: 0; padding-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 500 12px/1.3 var(--mono); letter-spacing: .03em; color: var(--cd); }
.af-meta svg { flex: none; }

/* the questions */
.af-main { min-width: 0; padding: clamp(24px, 3.6vw, 52px); container-type: inline-size; }
.af-form { margin: 0; }
.af-q { min-width: 0; margin: 0; padding: 0; border: 0; }
.af-q + .af-q, .af-rest > .af-q:first-child, .af-route + .af-rest > .af-q:first-child { margin-top: 32px; padding-top: 30px; border-top: 1px solid var(--line); }
.af-form > .af-q:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.af-qh { float: left; width: 100%; display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 0;
  font: 700 clamp(19px, 1.6vw, 23px)/1.3 var(--font); letter-spacing: -.01em; color: var(--navy); }
.af-qh + * { clear: both; }
.af-qn { flex: none; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; background: var(--ct); color: var(--cd); font: 600 12px/28px var(--mono); letter-spacing: 0; text-align: center; }
.af-qt { min-width: 0; text-wrap: balance; }
.af-line { margin: 8px 0 0; max-width: 60ch; font: 500 15px/1.55 var(--font); color: var(--muted); text-wrap: pretty; }
.af-qh + .af-line, .af-line-q { padding-left: 40px; }
/* a question's line that depends on an answer (enterprise.php, the site question) sits inside its grid: the grid already
   starts right under the heading (it clears the floated legend), so no pull-up; 2px + the grid's 20px gap = the 22px the
   other questions have between their line and their first control */
.af-line-q { margin: 0 0 2px; }
.af-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 16px; margin-top: 22px; }
.af-grid > * { grid-column: 1 / -1; min-width: 0; }
@container (min-width: 500px) { .af-grid > .af-half { grid-column: span 3; } .af-grid > .af-third { grid-column: span 2; } }
.af-sub { margin: 6px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font: 700 12px/1.2 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--cd); }
.af-glabel { margin: 0 0 12px; font: 700 15px/1.35 var(--font); color: var(--navy); }
.af-glabel + .af-hint { margin: -6px 0 12px; }

/* ── cards: one answer (radio) or several (ticks) ── */
.af-group { min-width: 0; }
.af-opts { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
/* two across only where each card gets room for its line (at 1024 the form's column is about 530px: one across) */
@container (min-width: 560px) { .af-opts[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 640px) { .af-opts[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.af-opt { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.af-opt-box {
  display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 18px; border-radius: 18px; border: 1.5px solid var(--af-edge); background: #fff;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .22s ease, transform .22s var(--af-ease);
}
.af-opt:hover .af-opt-box { border-color: color-mix(in srgb, var(--c) 55%, var(--af-edge)); box-shadow: 0 16px 30px -24px color-mix(in srgb, var(--cd) 80%, transparent); transform: translateY(-1px); }
.af-opt input:checked + .af-opt-box { border-color: var(--c); background: color-mix(in srgb, var(--ct) 70%, #fff); box-shadow: inset 0 0 0 1px var(--c), 0 16px 30px -26px color-mix(in srgb, var(--cd) 80%, transparent); }
.af-opt input:focus-visible + .af-opt-box { outline: 2px solid var(--cd); outline-offset: 3px; }
.af-opt-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--ct); color: var(--cd); transition: background-color .18s ease, color .18s ease; }
.af-opt input:checked + .af-opt-box .af-opt-ic { background: var(--c); color: var(--af-on); }
.af-opt-t { flex: 1; min-width: 0; display: grid; gap: 4px; padding-top: 1px; }
.af-opt-t b { font: 700 16px/1.3 var(--font); color: var(--navy); }
.af-opt-t small { font: 500 13.5px/1.45 var(--font); color: var(--muted); text-wrap: pretty; }
.af-mark { flex: none; width: 22px; height: 22px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid #C2CEDA; color: transparent; transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.af-mark.af-sq { border-radius: 7px; }
.af-opt input:checked + .af-opt-box .af-mark { background: var(--c); border-color: var(--c); color: var(--af-on); }
.af-bad .af-opt-box { border-color: color-mix(in srgb, var(--af-bad-edge) 55%, var(--af-edge)); }
/* the sector tiles: two to a row everywhere, compact */
.af-opts[data-look="tiles"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.af-opts[data-look="tiles"] .af-opt-box { align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; }
.af-opts[data-look="tiles"] .af-opt-ic { width: 40px; height: 40px; border-radius: 12px; }
.af-opts[data-look="tiles"] .af-opt-t b { font-size: 15px; }
.af-opts[data-look="tiles"] .af-mark { margin-top: 0; }
@container (max-width: 469px) {
  .af-opts[data-look="tiles"] { gap: 8px; }
  .af-opts[data-look="tiles"] .af-opt-box { gap: 10px; padding: 11px 10px 11px 11px; min-height: 64px; border-radius: 14px; }
  .af-opts[data-look="tiles"] .af-opt-ic { width: 34px; height: 34px; border-radius: 10px; }
  .af-opts[data-look="tiles"] .af-opt-ic svg { width: 19px; height: 19px; }
  .af-opts[data-look="tiles"] .af-opt-t b { font-size: 14px; line-height: 1.25; }
  .af-opts[data-look="tiles"] .af-mark { display: none; }
}
/* three cards (what would help most): stacked when narrow, three across when there's room */
.af-opts[data-cols="3"] { gap: 10px; }
.af-opts[data-cols="3"] .af-opt-box { padding: 14px 16px; align-items: center; }
@container (min-width: 640px) {
  .af-opts[data-cols="3"] .af-opt-box { position: relative; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 16px 18px; }
  .af-opts[data-cols="3"] .af-mark { position: absolute; top: 14px; right: 14px; margin: 0; }
}

/* ── chips ── */
.af-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.af-chip { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.af-chip-b { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 16px 8px 11px; border-radius: 999px; border: 1.5px solid var(--af-edge); background: #fff;
  font: 600 14.5px/1.25 var(--font); color: var(--navy); transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.af-chip:hover .af-chip-b { border-color: color-mix(in srgb, var(--c) 55%, var(--af-edge)); }
.af-chip-ic { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid #C2CEDA; color: transparent; transition: inherit; }
.af-chip input:checked + .af-chip-b { border-color: var(--c); background: var(--ct); color: var(--cd); }
.af-chip input:checked + .af-chip-b .af-chip-ic { background: var(--c); border-color: var(--c); color: var(--af-on); }
.af-chip input:focus-visible + .af-chip-b { outline: 2px solid var(--cd); outline-offset: 3px; }
.af-bad .af-chip-b { border-color: color-mix(in srgb, var(--af-bad-edge) 55%, var(--af-edge)); }
.af-group + .af-group { margin-top: 8px; }
.af-group > .af-err { margin-top: 10px; }
.af-asked { margin: -6px 0 0; font: 500 14px/1.5 var(--font); color: var(--muted); }
.af-asked b { color: var(--navy); }

/* the provider's machines: one box per family, its count and Select all */
.af-fam { padding: 16px 18px 18px; border-radius: 18px; border: 1.5px solid var(--line, #E3E9EF); background: #FAFCFB; }
.af-fam-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.af-fam-h { margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; font: 700 16px/1.3 var(--font); color: var(--navy); }
.af-fam-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--ct); color: var(--cd); }
.af-fam-n { font: 500 11.5px/1 var(--mono); letter-spacing: .06em; color: var(--cd); }
.af-fam-n:empty { display: none; }
.af-fam:has(.af-bad) { border-color: color-mix(in srgb, var(--af-bad-edge) 60%, var(--line, #E3E9EF)); background: #FFFBFA; }
.af-textbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 2px; border: 0; background: none; color: var(--cd); font: 700 14px/1.2 var(--font); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--cd) 35%, transparent); }
.af-textbtn:hover { text-decoration-color: currentColor; }

/* ── fields ── */
.af-fld { display: grid; gap: 8px; align-content: start; min-width: 0; }
.af-label { font: 700 14px/1.3 var(--font); color: var(--navy); }
.af-optional { font-weight: 500; color: var(--muted); }
.af-in {
  width: 100%; min-height: 54px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--af-edge); background: #fff;
  font: 500 16px/1.3 var(--font); color: var(--af-ink); appearance: none; -webkit-appearance: none; transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.af-in { min-height: 120px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
select.af-in { padding-right: 46px; cursor: pointer; text-overflow: ellipsis;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300396C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center / 18px no-repeat; }
input[type="date"].af-in { padding-right: 12px; }
.af-in:hover { border-color: var(--af-edge-2); }
.af-in:focus { outline: none; border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 24%, transparent); }
.af-card:is([data-f="residential"], [data-f="technicians"], [data-f="academy"], [data-f="brand"], [data-f="suppliers"], [data-f="providers"]) .af-in:focus { border-color: var(--cd); }
.af-in::placeholder { color: #8391A2; }
.af-in:disabled { background: #F6F8FB; }
.af-pre { display: flex; align-items: stretch; overflow: hidden; border-radius: 14px; border: 1.5px solid var(--af-edge); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.af-pre:hover { border-color: var(--af-edge-2); }
.af-pre:focus-within { border-color: var(--cd); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 24%, transparent); }
.af-pre-t { display: grid; place-items: center; padding: 0 12px 0 16px; border-right: 1px solid var(--line); background: #F6F8FB; font: 600 15px/1 var(--mono); color: var(--slate); }
.af-pre .af-in { min-height: 51px; border: 0; border-radius: 0; box-shadow: none !important; letter-spacing: .02em; }
.af-hint { margin: 0; font: 500 13px/1.45 var(--font); color: var(--muted); }
.af-err { margin: 0; display: flex; align-items: flex-start; gap: 7px; font: 600 13.5px/1.4 var(--font); color: var(--af-bad); }
.af-err svg { flex: none; margin-top: 1px; }
.af-bad :is(.af-in, .af-pre) { border-color: var(--af-bad-edge); }
.af-bad :is(.af-in, .af-pre):focus-within { box-shadow: 0 0 0 4px rgba(194, 54, 43, .16); }
/* tick boxes and the declaration */
.af-check { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--af-edge); background: #fff; cursor: pointer;
  font: 500 15px/1.5 var(--font); color: var(--text); transition: border-color .15s ease, background-color .15s ease; }
.af-check:hover { border-color: var(--af-edge-2); }
.af-box { flex: none; width: 22px; height: 22px; margin-top: 1px; display: grid; place-items: center; border-radius: 7px; border: 1.5px solid var(--af-edge-2); color: transparent; background: #fff;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.af-check:has(input:checked) { border-color: var(--c); background: color-mix(in srgb, var(--ct) 60%, #fff); }
.af-check input:checked ~ .af-box { background: var(--c); border-color: var(--c); color: var(--af-on); }
.af-check input:focus-visible ~ .af-box { outline: 2px solid var(--cd); outline-offset: 2px; }
.af-bad .af-check { border-color: var(--af-bad-edge); }

/* a tinted tip */
.af-note { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px 16px; border-radius: 14px; background: #F4F7FA; font: 500 14px/1.5 var(--font); color: var(--text); }
.af-note svg { flex: none; margin-top: 2px; color: var(--cd); }
.af-note a { color: var(--cd); font-weight: 700; }
.af-rest > .af-note { margin-top: 30px; }

/* ── "Add another place": the rows ── */
.af-rows { display: grid; gap: 12px; }
.af-rows > .af-glabel { margin: 4px 0 0; }
.af-rows > .af-hint { margin: -4px 0 4px; }
.af-rows-l { display: grid; gap: 12px; }
.af-row { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 16px; border-radius: 18px; border: 1.5px solid var(--line); background: #F8FAFC; }
.af-row-n { width: 28px; height: 28px; margin-top: 30px; border-radius: 50%; background: #fff; color: var(--cd); font: 600 12px/28px var(--mono); text-align: center; box-shadow: 0 0 0 1px var(--line); }
.af-row-f { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 12px; min-width: 0; }
.af-row-f > * { grid-column: 1 / -1; }
@container (min-width: 500px) { .af-row-f > .af-half { grid-column: span 3; } }
.af-row .af-in, .af-row .af-pre { background-color: #fff; }
.af-row-x { width: 40px; height: 40px; margin-top: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--af-edge); background: #fff; color: var(--navy); cursor: pointer; }
.af-row-x:hover { border-color: var(--af-bad-edge); color: var(--af-bad); }
.af-add { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1.5px solid var(--cd); background: #fff; color: var(--cd); font: 700 14.5px/1 var(--font); cursor: pointer; transition: background-color .15s ease; }
.af-add:hover { background: var(--ct); }
.af-add:disabled { opacity: .5; cursor: not-allowed; }
@container (max-width: 469px) {
  .af-row { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 12px; }
  .af-row-n { display: none; }
  .af-row-x { margin-top: 24px; }
}

/* "Book online" / "Start with the Academy": instead of the rest of the form */
.af-route { margin-top: 30px; padding: clamp(20px, 3vw, 28px); border-radius: 20px; background: color-mix(in srgb, var(--ct) 55%, #fff); border: 1px solid color-mix(in srgb, var(--c) 28%, var(--line)); display: grid; gap: 14px; justify-items: start; }
.af-route-mark { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: #fff; color: var(--cd); }
.af-card .af-route-h { margin: 0; font: 400 clamp(26px, 2.6vw, 34px)/1.1 var(--display); letter-spacing: -.02em; color: var(--navy); }
.af-route .af-line { margin: 0; }
.af-route .af-note { background: #fff; }

/* ── the end: Send ── */
.af-end { display: grid; gap: 14px; justify-items: start; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.af-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border: 0; border-radius: 14px;
  background: var(--af-btn); color: var(--af-btn-ink); font: 700 16px/1 var(--font); cursor: pointer; text-decoration: none;
  box-shadow: 0 16px 30px -20px color-mix(in srgb, var(--cd) 95%, transparent); transition: filter .15s ease, transform .22s var(--af-ease), box-shadow .22s ease;
}
.af-go:hover { filter: brightness(1.05) saturate(1.06); transform: translateY(-1px); }
.af-go:active { transform: translateY(0); }
.af-go:disabled { opacity: .75; cursor: progress; transform: none; filter: none; }
.af-go.af-busy svg { display: none; }
.af-go.af-busy::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: af-spin .8s linear infinite; }
@keyframes af-spin { to { transform: rotate(1turn); } }
.af-fine { margin: 0; max-width: 60ch; font: 500 13.5px/1.5 var(--font); color: var(--muted); }
.af-alert { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid #F6B5AE; background: #FEF3F2; color: #912018; font: 600 14px/1.45 var(--font); }
.af-alert svg { flex: none; margin-top: 1px; }
.af-alert-fail { gap: 12px; padding: 16px 18px; border-radius: 16px; color: #7A271A; }
.af-alert-fail b { font: 700 15.5px/1.3 var(--font); }
.af-alert-fail p { margin: 6px 0 4px; font: 500 14px/1.5 var(--font); }
.af-alert-fail a { color: inherit; font-weight: 700; }
.af-alert-fail small { display: block; font: 500 13.5px/1.5 var(--font); }

/* ── sent: the thank-you (or, on a developer's PC, test mode's neutral screen) ── */
.af-done { display: grid; justify-items: start; }
.af-done-mark { width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 50%; background: var(--c); color: var(--af-on); box-shadow: 0 0 0 10px var(--ct); animation: af-pop .6s var(--af-ease) both; }
.af-done-mark path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: af-draw .5s .25s ease forwards; }
@keyframes af-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes af-draw { to { stroke-dashoffset: 0; } }
.af-done-mark.af-test-mark { background: #EDF1F5; color: #475569; box-shadow: 0 0 0 10px #F5F7FA; animation: none; }
.af-done-mark.af-test-mark :is(path, circle) { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.af-kick { margin: 0 0 12px; font: 700 12px/1.2 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--cd); }
.af-card .af-done-h { margin: 0; font: 400 clamp(28px, 3vw, 40px)/1.08 var(--display); letter-spacing: -.02em; color: var(--navy); text-wrap: balance; }
.af-done .af-line { margin-top: 12px; font-size: 16px; }
.af-test-lead { margin: 14px 0 0; max-width: 60ch; font: 700 17px/1.45 var(--font); color: var(--navy); text-wrap: pretty; }
.af-test { margin: 18px 0 0; max-width: 60ch; padding: 12px 14px; border-radius: 12px; border: 1.5px dashed #B07A18; background: #FFF8EB; color: #5C3D06; font: 500 14px/1.5 var(--font); overflow-wrap: anywhere; }
.af-test code { padding: 2px 6px; border-radius: 6px; background: rgba(140, 94, 14, .1); font: 600 12.5px/1.6 var(--mono); white-space: nowrap; }
/* the reference: its words, then the ref and Copy kept together (a narrow screen puts the words on their own line) */
.af-ref { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; max-width: 100%; margin-top: 24px; padding: 10px 10px 10px 16px; border-radius: 14px; border: 1px solid var(--line); background: #F4F7FA; }
.af-ref-k { font: 600 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.af-ref-v { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%; }
.af-ref b { min-width: 0; font: 600 17px/1.3 var(--mono); letter-spacing: .05em; color: var(--navy); overflow-wrap: anywhere; }
.af-copyref { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--af-edge); background: #fff; color: var(--navy); cursor: pointer; }
.af-copyref.ok { border-color: var(--c); color: var(--cd); }
.af-next { margin-top: 30px; }
.af-next h4 { margin: 0 0 14px; font: 700 12px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--cd); }
.af-next ol { list-style: none; counter-reset: afn; margin: 0; padding: 0; display: grid; gap: 12px; }
.af-next li { counter-increment: afn; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; font: 500 15px/1.55 var(--font); color: var(--text); }
.af-next li::before { content: counter(afn); width: 28px; height: 28px; border-radius: 50%; background: var(--ct); color: var(--cd); font: 600 12px/28px var(--mono); text-align: center; }
.af-payload { width: 100%; margin-top: 28px; border-radius: 14px; border: 1px solid var(--line); background: #F8FAFC; }
.af-payload summary { padding: 13px 16px; cursor: pointer; font: 700 13.5px/1.2 var(--font); color: var(--navy); }
.af-payload pre { margin: 0; padding: 0 16px 16px; max-height: 300px; overflow: auto; font: 500 12px/1.55 var(--mono); color: #334155; white-space: pre-wrap; word-break: break-word; }
.af-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.af-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 20px; border-radius: 14px; border: 1.5px solid var(--af-edge); background: #fff; color: var(--navy); font: 700 15px/1.1 var(--font); text-decoration: none; transition: border-color .15s ease; }
.af-ghost:hover { border-color: var(--cd); }

/* ═══ the pop-up (forms/_kit.php af_modal_open, assets/js/forms.js "the pop-up and its steps") ═══
   Solid white, over the page dimmed like the booking's pop-up (assets/css/checkout.css). On a laptop a centred dialog:
   the form's own words on the left, the step on the right (it scrolls; the counter stays on top, Back / Next at the
   bottom). On a phone (under 900px) a full-screen sheet: the form's name on top, then the step. */
html.af-locked, html.af-locked body { overflow: hidden !important; }
.af-modal { position: fixed; inset: 0; z-index: 97; display: grid; place-items: center; padding: 24px; }
.af-modal[hidden] { display: none; }
.af-scrim { position: absolute; inset: 0; background: rgba(0, 28, 54, .46); -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); animation: af-fade .25s ease both; }
.af-modal .af-card { width: min(1080px, 100%); height: min(780px, calc(100dvh - 48px)); grid-template-rows: minmax(0, 1fr); border: 0; scroll-margin-top: 0;
  box-shadow: 0 50px 110px -40px rgba(0, 20, 45, .6), 0 0 0 1px rgba(0, 57, 108, .08); animation: af-rise .45s var(--af-ease) both; }
@keyframes af-fade { from { opacity: 0; } }
@keyframes af-rise { from { opacity: 0; transform: translateY(20px) scale(.985); } }
@media (min-width: 900px) { .af-modal .af-card { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.af-modal .af-copy { overflow-y: auto; }
.af-modal .af-copy-in { position: static; }
.af-modal .af-main { position: relative; overflow-y: auto; overscroll-behavior: contain; padding-top: 0; padding-bottom: 0; display: flex; flex-direction: column; }
.af-modal .af-form { flex: 1 0 auto; display: flex; flex-direction: column; }
.af-modal .af-done { padding: 28px 0 40px; }
.af-x { position: absolute; z-index: 3; top: 16px; right: 16px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--af-edge); background: #fff; color: var(--navy); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.af-x:hover { background: #F4F7FA; border-color: var(--af-edge-2); }

/* "Step 2 of 5" and its bar: on top of the step, as it scrolls */
.af-steps { position: sticky; top: 0; z-index: 2; margin: 0 -4px; padding: 26px 64px 16px 4px; background: #fff; }
.af-steps-n { margin: 0 0 10px; font: 600 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cd); }
.af-steps-bar { height: 6px; border-radius: 999px; background: var(--ct); overflow: hidden; }
.af-steps-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c); transition: width .35s var(--af-ease); }

/* one step at a time: the others (and Send) are out of sight, still in the form (their answers stay and are sent) */
.af-stepping [data-step]:not(.af-now), .af-stepping.af-at-review [data-step] { display: none; }
.af-stepping:not(.af-at-review) :is(.af-end, .af-form > .af-note, .af-rest > .af-note) { display: none; }
.af-stepping .af-q.af-now { margin-top: 8px !important; padding-top: 0 !important; border-top: 0 !important; }
.af-stepping .af-route { margin-top: 6px; }
.af-stepping .af-end { margin-top: 24px; }

/* Back / Next: pinned under the step */
.af-nav { position: sticky; bottom: 0; z-index: 2; margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 0 22px; background: #fff; box-shadow: 0 -1px 0 var(--line); }
.af-stepping .af-q.af-now, .af-review { padding-bottom: 28px; }
.af-nav .af-step-alert { order: -1; flex: 1 0 100%; }
.af-back { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 18px 0 14px; border-radius: 14px; border: 1.5px solid var(--af-edge); background: #fff; color: var(--navy); font: 700 15px/1 var(--font); cursor: pointer; transition: border-color .15s ease; }
.af-back:hover { border-color: var(--cd); }
.af-nav .af-fwd { margin-left: auto; min-width: 160px; }
.af-nav [hidden] { display: none !important; }

/* "Check your answers" */
.af-card .af-rv-h { margin: 8px 0 0; font: 400 clamp(26px, 2.6vw, 34px)/1.1 var(--display); letter-spacing: -.02em; color: var(--navy); }
.af-rv-l { display: grid; gap: 12px; margin-top: 22px; }
.af-rv { padding: 14px 16px 16px; border-radius: 16px; border: 1px solid var(--line); background: #F8FAFC; }
.af-rv-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.af-rv h4 { margin: 0; min-width: 0; font: 700 15px/1.35 var(--font); color: var(--navy); }
.af-rv-edit { flex: none; min-height: 36px; margin: -6px -6px 0 0; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--cd); font: 700 14px/1 var(--font); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--cd) 35%, transparent); }
.af-rv-edit:hover { text-decoration-color: currentColor; background: #fff; }
.af-rv dl { margin: 8px 0 0; display: grid; gap: 6px; }
.af-rv dl > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2px 14px; }
.af-rv dl > div:not(:has(dt)) { grid-template-columns: minmax(0, 1fr); }
.af-rv dt { font: 500 13.5px/1.45 var(--font); color: var(--muted); }
.af-rv dd { margin: 0; font: 600 14.5px/1.45 var(--font); color: var(--text); overflow-wrap: anywhere; white-space: pre-line; }
.af-rv-none { margin: 6px 0 0; font: 500 14px/1.45 var(--font); color: var(--muted); }

/* the full-screen sheet (phones and small tablets): the form's name on top, then the step */
@media (max-width: 899px) {
  .af-modal { padding: 0; place-items: stretch; }
  .af-modal .af-card { width: 100%; height: 100%; height: 100dvh; border-radius: 0; grid-template-rows: auto minmax(0, 1fr); box-shadow: none; animation-name: af-up; }
  .af-modal .af-copy { overflow: visible; padding: 18px 72px 16px 16px; }
  .af-modal .af-copy::after, .af-modal .af-copy::before { display: none; }
  .af-modal .af-copy-in { gap: 6px; }
  .af-modal :is(.af-lead, .af-pts, .af-meta) { display: none; }
  .af-modal .af-card .af-title { font-size: clamp(22px, 6vw, 28px); }
  .af-modal .af-role { font-size: 14px; }
  .af-modal .af-main { padding: 0 16px; }
  .af-steps { padding: 16px 4px 14px; }
  .af-x { top: 14px; right: 12px; }
  .af-nav { padding: 12px 0 calc(14px + env(safe-area-inset-bottom, 0px)); }
  .af-nav .af-fwd { min-width: 0; flex: 1; width: auto; }
  .af-rv dl > div { grid-template-columns: minmax(0, 1fr); }
}
@keyframes af-up { from { transform: translateY(32px); opacity: 0; } }

/* ── phones ── */
@media (max-width: 720px) {
  .af-card { border-radius: 22px; }
  .af-copy-in { gap: 12px; }
  .af-copy::after { width: 220px; height: 220px; right: -100px; bottom: -110px; border-width: 30px; }
  .af-main { padding: 24px 16px 28px; }
  .af-qh + .af-line, .af-line-q { padding-left: 0; }
  .af-qh { gap: 10px; font-size: 19px; }
  .af-opt-box { padding: 16px 14px; gap: 12px; }
  .af-go { width: 100%; }
  .af-route .af-go { width: 100%; }
}

/* the Academy in Hindi, Marathi or Gujarati (site.css: --font carries the Noto faces): JetBrains Mono has no Devanagari
   or Gujarati letters, so the small labels take the text face, and the wide caps tracking goes */
html:is(:lang(hi), :lang(mr), :lang(gu)) .af-card[data-f="academy"] :is(.af-meta, .af-ref-k, .af-next h4, .af-eye, .af-kick, .af-sub) { font-family: var(--font); letter-spacing: .02em; text-transform: none; }

/* reduced motion: nothing slides, pops or spins */
html.fx-reduce .af-card *, html.fx-reduce .af-card, html.fx-reduce .af-scrim { animation: none !important; transition: none !important; }
html.fx-reduce .af-done-mark path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .af-card *, .af-card, .af-scrim { animation: none !important; transition: none !important; }
  .af-done-mark path { stroke-dashoffset: 0; }
  .af-go.af-busy::before { border-right-color: currentColor; opacity: .5; }
}