/*
 * Azon Forms — front-end stylesheet.
 *
 * Self-contained by design. Everything is scoped under .azf and every property
 * that matters is stated outright rather than inherited, so no template rule
 * can reach in and nothing here can leak out. Sizes come from the tokens in the
 * first block: change one number there and the whole form rescales coherently.
 *
 * (C) 2026 Azon Allied Health & Educare Development Sdn. Bhd.
 */

.azf {
  /* ---- palette ---- */
  --ink:  #1e2b3d;   --mut:  #55647c;   --soft: #7d8ca3;
  --ln:   #e2e9f3;   --ln2:  #cfdcee;   --wash: #f6f9fd;
  --bl:   #3f6cb2;   --bls:  #6c8ac5;   --blw:  #eef4fc;
  --grn:  #52be94;   --grnd: #2f8f6c;
  --red:  #c0392b;   --redbg:#fdf3f2;
  --amb:  #a8701a;   --ambg: #fff8ec;

  /* ---- type scale ---- */
  --fs:        17px;    /* body copy inside the form   */
  --fs-title:  34px;    /* the form's own title        */
  --fs-lead:   17.5px;  /* the intro paragraph         */
  --fs-sec:    23px;    /* section heading             */
  --fs-label:  15px;    /* field label                 */
  --fs-input:  16.5px;  /* what the visitor types      */
  --fs-nav:    15.5px;  /* section navigator           */
  --fs-small:  13.5px;  /* hints, notes, counters      */
  --fs-msg:    14px;    /* validation messages         */

  /* ---- metrics ---- */
  --ctl:   50px;   /* every control is this tall, so rows line up */
  --rad:   11px;   /* controls           */
  --rad-l: 18px;   /* cards              */
  --gap:   18px;

  --font: "微软雅黑", "Microsoft YaHei", "PingFang SC", "Helvetica Neue",
          Helvetica, Arial, "Noto Sans CJK SC", sans-serif;

  /* ---- section accents ----
     Each section owns one hue. It appears on the navigator dot, on the number
     badge and along the top of the card, which is what ties the map on the left
     to the cards on the right. Muted on purpose: this is a clinic, not a promo
     page. --az-accent is the live value; a schema section may override it. */
  --a1: #3f6cb2;  --a2: #1c8a86;  --a3: #2f8f6c;  --a4: #a9761c;
  --a5: #6558b8;  --a6: #b05a7a;  --a7: #2b7fa8;  --a8: #7a8b2f;
  --az-accent: var(--a1);

  --ease: cubic-bezier(.22, .9, .3, 1);

  max-width: 1400px;
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.65;
  color: var(--ink);
  text-align: left;
  -webkit-text-size-adjust: 100%;
}

.azf *,
.azf *::before,
.azf *::after { box-sizing: border-box; }

/* only the elements this component actually emits are reset */
.azf h2, .azf h3, .azf h4, .azf p, .azf ol, .azf ul, .azf li, .azf figure { margin: 0; padding: 0; }
.azf ol, .azf ul { list-style: none; }
.azf a { color: var(--bl); text-decoration: none; }
.azf a:hover { text-decoration: underline; }
.azf svg { display: block; }
.azf button { font-family: inherit; }
.azf input, .azf select, .azf textarea { font-family: inherit; margin: 0; }

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */
.azf .az-head { margin: 0 0 32px; }

/* trust line above the first card: solid green lock, one quiet grey sentence.
   The lock is an inline box anchored to the text baseline (not flex-centred),
   so it sits on the visual middle of the glyphs in every font. */
.azf .az-secure {
  display: block;
  margin: 0 0 14px;
  font-size: 12px;            /* small but readable, in Chinese too */
  line-height: 1.5;
  color: var(--mut);
}
.azf .az-secure svg {
  display: inline-block; width: 1.3em; height: 1.3em;
  vertical-align: -.3em; margin-right: .55em;
  fill: var(--grnd); stroke: none;
}

.azf .az-kicker {
  display: inline-block;
  font-size: 12.5px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700;
  color: var(--bl); background: #fff;
  border: 1px solid var(--ln); border-radius: 999px; padding: 6px 15px;
}

.azf .az-title {
  display: block;
  margin: 16px 0 10px;
  font-size: var(--fs-title);
  line-height: 1.22;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.4px;
}

.azf .az-head p {
  max-width: 68ch;
  color: var(--mut);
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.azf .az-reqnote { margin-top: 14px; font-size: var(--fs-small); color: var(--soft); }
.azf .az-reqnote b { color: var(--red); font-weight: 700; }

/* one rule per accent, applied to both the card and its navigator entry */
.azf .az-acc-1 { --az-accent: var(--a1); }
.azf .az-acc-2 { --az-accent: var(--a2); }
.azf .az-acc-3 { --az-accent: var(--a3); }
.azf .az-acc-4 { --az-accent: var(--a4); }
.azf .az-acc-5 { --az-accent: var(--a5); }
.azf .az-acc-6 { --az-accent: var(--a6); }
.azf .az-acc-7 { --az-accent: var(--a7); }
.azf .az-acc-8 { --az-accent: var(--a8); }

/* ------------------------------------------------------------------ *
 * Shell: navigator rail + body
 * ------------------------------------------------------------------ */
.azf .az-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.azf .az-shell > * { min-width: 0; }
.azf .az-body { min-width: 0; }

@media (min-width: 1080px) {
  .azf .az-shell { grid-template-columns: 264px minmax(0, 1fr); gap: 46px; align-items: start; }
}

.azf .az-nav { position: sticky; top: 150px; align-self: start; min-width: 0; max-width: 100%; }
.azf .az-nav-h {
  font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 700; color: var(--soft); margin: 0 0 14px;
}
.azf .az-nav a {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 11px 13px; border-radius: 10px;
  font-size: var(--fs-nav); font-weight: 600; color: var(--mut); line-height: 1.35;
  transition: background .18s ease, color .18s ease;
}
.azf .az-nav a { position: relative; }
.azf .az-nav a::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 3px; background: var(--az-accent);
  transform: scaleY(0); transform-origin: center;
  transition: transform .28s var(--ease);
}
.azf .az-nav a:hover { background: var(--wash); color: var(--ink); text-decoration: none; }
.azf .az-nav a.is-active { background: var(--wash); color: var(--az-accent); }
@supports (background: color-mix(in srgb, red 9%, #fff)) {
  .azf .az-nav a.is-active { background: color-mix(in srgb, var(--az-accent) 9%, #fff); }
}
.azf .az-nav a.is-active::before { transform: scaleY(1); }

.azf .az-dot {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--ln2); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; color: var(--soft);
  transition: background .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease);
}
.azf .az-nav a:hover .az-dot { transform: scale(1.08); }
.azf .az-nav a.is-active .az-dot { border-color: var(--az-accent); color: var(--az-accent); }
.azf .az-nav a.is-done .az-dot { border-color: var(--az-accent); background: var(--az-accent); color: #fff; }
.azf .az-nav a.is-done .az-dot span { display: none; }
.azf .az-nav a.is-done .az-dot::after {
  content: ""; width: 10px; height: 6px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}

.azf .az-prog { margin-top: 18px; padding: 0 13px; }
.azf .az-prog-bar { height: 6px; border-radius: 99px; background: var(--ln); overflow: hidden; }
.azf .az-prog-bar i {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--bls), var(--grn));
  transition: width .35s cubic-bezier(.3, .9, .3, 1);
}
.azf .az-prog-t { margin-top: 8px; font-size: var(--fs-small); color: var(--soft); font-weight: 600; }

/* below the two-column breakpoint the navigator becomes a sticky chip rail */
@media (max-width: 1079.98px) {
  .azf .az-nav {
    position: sticky; top: 0; z-index: 40; margin: 0 0 26px;
    background: #fff; border-bottom: 1px solid var(--ln);
    padding: 10px 0 9px; box-shadow: 0 6px 14px -10px rgba(30, 43, 61, .35);
  }
  .azf .az-nav-h { display: none; }
  .azf .az-nav ol {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity;
  }
  .azf .az-nav ol::-webkit-scrollbar { display: none; }
  .azf .az-nav li { flex: none; scroll-snap-align: start; }
  .azf .az-nav a {
    white-space: nowrap; border: 1px solid var(--ln);
    padding: 9px 15px 9px 11px; font-size: 14.5px; align-items: center;
  }
  .azf .az-nav a.is-active { border-color: #bcd0ec; }
  .azf .az-dot { width: 21px; height: 21px; font-size: 11px; }
  .azf .az-prog { margin-top: 9px; padding: 0; }
}

/* ------------------------------------------------------------------ *
 * Sections
 *
 * A card is: an accent bar along the top, a tinted header zone carrying the
 * section number and title with the section icon as a watermark behind it,
 * then a generous gap before the first field.
 * ------------------------------------------------------------------ */
.azf .az-sec {
  position: relative; overflow: hidden;
  border: 1px solid var(--ln); border-radius: 20px;
  background: color-mix(in srgb, var(--az-accent) 8%, #fff);
  margin: 0 0 24px; scroll-margin-top: 170px;
  box-shadow: 0 1px 2px rgba(30, 43, 61, .05);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
@supports not (background: color-mix(in srgb, red 8%, #fff)) {
  .azf .az-sec { background: #fff; }
}
.azf .az-sec:hover { box-shadow: 0 12px 34px -16px rgba(30, 43, 61, .28); }
.azf .az-sec { border-color: color-mix(in srgb, var(--az-accent) 22%, var(--ln)); }

/* A slow wash of light drifting across the card. Two radial pools of the
   section's own colour move against each other and the hue swings a few degrees
   either side, so the tint breathes without ever leaving its colour family. */
.azf .az-sec::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 55% at 18% 8%,  color-mix(in srgb, var(--az-accent) 30%, transparent), transparent 70%),
    radial-gradient(52% 58% at 88% 88%, color-mix(in srgb, var(--az-accent) 20%, transparent), transparent 72%);
  background-size: 200% 200%, 220% 220%;
  background-repeat: no-repeat;
  opacity: .85;
}
@supports not (background: color-mix(in srgb, red 30%, transparent)) {
  .azf .az-sec::after { display: none; }
}
/* content sits above the wash */
.azf .az-sec > * { position: relative; z-index: 1; }

/* the accent bar draws itself in when the card arrives */
.azf .az-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 4px; display: block;
  background: linear-gradient(90deg, var(--az-accent), color-mix(in srgb, var(--az-accent) 45%, #fff));
  transform-origin: left center;
}
@supports not (background: color-mix(in srgb, red 45%, #fff)) {
  .azf .az-bar { background: var(--az-accent); }
}

.azf .az-sec-top {
  position: relative; overflow: hidden;
  padding: 26px 32px 24px;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--az-accent) 26%, #fff),
              color-mix(in srgb, var(--az-accent) 12%, #fff));
  border-bottom: 1px solid color-mix(in srgb, var(--az-accent) 26%, var(--ln));
}
@supports not (background: color-mix(in srgb, red 7%, #fff)) {
  .azf .az-sec-top { background: var(--wash); border-bottom-color: var(--ln); }
}

/* the section icon, large and faint, as a watermark */
.azf .az-wm {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  width: 74px; height: 74px; color: var(--az-accent); opacity: .09;
  pointer-events: none;
}
.azf .az-wm svg {
  width: 100%; height: 100%; fill: none; stroke: currentColor;
  stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
}

.azf .az-sec-h { position: relative; display: flex; align-items: flex-start; gap: 16px; }

/* the number badge — the same tag the navigator shows */
.azf .az-num {
  flex: none; width: 42px; height: 42px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 800; color: #fff; line-height: 1;
  background: linear-gradient(140deg, color-mix(in srgb, var(--az-accent) 80%, #fff), var(--az-accent));
  box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--az-accent) 55%, transparent);
}
@supports not (background: color-mix(in srgb, red 80%, #fff)) {
  .azf .az-num { background: var(--az-accent); box-shadow: 0 4px 12px -3px rgba(30, 43, 61, .3); }
}

.azf .az-sec-tt { min-width: 0; padding-top: 2px; }
.azf .az-sec-h h3 {
  font-size: var(--fs-sec); font-weight: 800; color: var(--ink);
  line-height: 1.28; letter-spacing: -.2px;
}
.azf .az-sec-hint { margin-top: 6px; color: var(--mut); font-size: 15px; line-height: 1.55; }

/* the requested breathing room between the title and the first field */
.azf .az-sec-body { padding: 34px 32px 32px; }

/* ------------------------------------------------------------------ *
 * Fields
 * ------------------------------------------------------------------ */
.azf .az-row {
  display: grid; gap: 18px 20px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.azf .az-row-1 { grid-template-columns: minmax(0, 400px); }
.azf .az-f { display: flex; flex-direction: column; min-width: 0; }
.azf .az-f.az-wide { grid-column: 1 / -1; }

.azf .az-lab {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 3px;
  font-size: var(--fs-label); font-weight: 700; color: var(--ink);
  margin: 0 0 7px; line-height: 1.4;
}
.azf .az-lab i { font-style: normal; color: var(--red); margin-left: 2px; }
.azf .az-hint { font-size: var(--fs-small); color: var(--soft); font-weight: 500; margin-left: 6px; }

.azf .az-in,
.azf .az-ta,
.azf .az-se {
  width: 100%;
  min-height: var(--ctl);
  font-family: inherit; font-size: var(--fs-input); line-height: 1.4;
  color: var(--ink); background: #fff;
  border: 1.5px solid var(--ln2); border-radius: var(--rad);
  padding: 12px 15px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
  -webkit-appearance: none; appearance: none;
}
.azf .az-ta { min-height: 104px; resize: vertical; line-height: 1.55; }
.azf .az-se {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355647c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 18px;
  padding-right: 40px; cursor: pointer;
}
/* The file control. The browser's own button cannot be restyled, so the
   control itself is given the same box as every other field and the button
   inside it is toned down to match — nothing is hidden behind a fake label,
   which keeps it operable by keyboard and by a screen reader. */
.azf .az-file {
  width: 100%;
  min-height: var(--ctl);
  font-family: inherit; font-size: var(--fs-input); line-height: 1.4;
  color: var(--ink); background: #fff;
  border: 1.5px dashed var(--ln2); border-radius: var(--rad);
  padding: 8px 14px;
  display: flex; align-items: center;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
  cursor: pointer;
}
.azf .az-file:hover { border-color: #b6c8e0; background: #fbfdff; }
.azf .az-file:focus {
  outline: none; border-style: solid; border-color: var(--az-accent, #3f6cb2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--az-accent, #3f6cb2) 16%, transparent);
}
.azf .az-file::file-selector-button {
  font: inherit; font-size: var(--fs-small); font-weight: 600;
  color: var(--ink); background: #eef3fa;
  border: 1px solid var(--ln2); border-radius: 8px;
  padding: 7px 13px; margin-right: 12px; cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.azf .az-file::file-selector-button:hover { background: #e2ebf7; border-color: #b6c8e0; }
.azf .az-f.az-err .az-file { border-color: var(--red); background: var(--redbg); border-style: solid; }

.azf .az-in::placeholder, .azf .az-ta::placeholder { color: #a4b2c6; opacity: 1; }
/* a chooser still showing its prompt reads as a placeholder, not as an answer */
.azf .az-se.az-ph { color: #a4b2c6; }
.azf .az-se.az-ph option { color: var(--ink); }
.azf .az-se.az-ph option[value=""] { color: #a4b2c6; }
.azf .az-in:hover, .azf .az-ta:hover, .azf .az-se:hover { border-color: #b6c8e0; }
.azf .az-in:focus, .azf .az-ta:focus, .azf .az-se:focus {
  outline: none; border-color: var(--bl); box-shadow: 0 0 0 4px rgba(63, 108, 178, .15);
}
.azf .az-f.az-ok .az-in, .azf .az-f.az-ok .az-ta, .azf .az-f.az-ok .az-se { border-color: #b7e0cd; }
.azf .az-f.az-err .az-in, .azf .az-f.az-err .az-ta, .azf .az-f.az-err .az-se {
  border-color: var(--red); background: var(--redbg);
}
.azf .az-f.az-err .az-in:focus, .azf .az-f.az-err .az-ta:focus, .azf .az-f.az-err .az-se:focus {
  box-shadow: 0 0 0 4px rgba(192, 57, 43, .14);
}

.azf .az-msg { display: none; margin-top: 7px; font-size: var(--fs-msg); color: var(--red); font-weight: 600; line-height: 1.45; }
.azf .az-f.az-err .az-msg { display: block; }
.azf .az-count { margin-top: 6px; font-size: var(--fs-small); color: var(--soft); text-align: right; }
.azf .az-note-sm { margin-top: 7px; font-size: var(--fs-small); color: var(--soft); line-height: 1.5; }

/* segmented choice — same height as a text input so rows align */
.azf .az-seg { display: flex; gap: 9px; flex-wrap: wrap; }
.azf .az-seg label { flex: 1 1 0; min-width: 104px; position: relative; margin: 0; }
.azf .az-seg input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.azf .az-seg span {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ctl); padding: 12px 12px;
  border: 1.5px solid var(--ln2); border-radius: var(--rad); background: #fff;
  font-size: var(--fs-input); font-weight: 600; color: var(--mut);
  cursor: pointer; text-align: center; line-height: 1.3;
  transition: all .16s ease;
}
.azf .az-seg input:hover + span { border-color: #b6c8e0; }
.azf .az-seg input:checked + span { border-color: var(--bl); background: var(--blw); color: var(--bl); }
.azf .az-seg input:focus-visible + span { box-shadow: 0 0 0 4px rgba(63, 108, 178, .18); }
.azf .az-f.az-err .az-seg span { border-color: var(--red); }

/* consent block + checkbox */
.azf .az-static { width: 100%; }
.azf .az-consent {
  border: 1px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .82); border-radius: 14px;
  padding: 22px 24px; margin: 0 0 22px;
  font-size: var(--fs-input); color: var(--mut); line-height: 1.72;
}
.azf .az-check {
  display: flex; gap: 14px; align-items: flex-start; cursor: pointer;
  font-size: var(--fs-input); font-weight: 700; color: var(--ink); margin: 0;
  padding: 4px 0; min-height: 34px;
}
.azf .az-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.azf .az-box {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  border: 2px solid var(--ln2); background: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px; transition: all .16s ease;
}
.azf .az-box::after {
  content: ""; width: 12px; height: 6px;
  border-left: 2.6px solid #fff; border-bottom: 2.6px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px) scale(.4);
  opacity: 0; transition: all .18s ease;
}
.azf .az-check input:checked + .az-box { background: var(--grn); border-color: var(--grn); }
.azf .az-check input:checked + .az-box::after { opacity: 1; transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.azf .az-check input:focus-visible + .az-box { box-shadow: 0 0 0 4px rgba(82, 190, 148, .28); }
.azf .az-f.az-err .az-box { border-color: var(--red); }
.azf .az-check > span:last-child i { margin-left: 3px; font-style: normal; color: var(--red); }

/* ------------------------------------------------------------------ *
 * Repeating groups
 * ------------------------------------------------------------------ */
.azf .az-kids { display: flex; flex-direction: column; gap: 16px; }
.azf .az-kid {
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 15px; background: rgba(255, 255, 255, .78);
  padding: 22px 24px 24px;
  animation: azfKidIn .4s cubic-bezier(.22, .9, .3, 1) both;
}
@keyframes azfKidIn { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
.azf .az-kid.az-going { animation: azfKidOut .28s ease forwards; }
@keyframes azfKidOut { to { opacity: 0; transform: translateY(-6px) scale(.985); margin-bottom: -14px; } }

.azf .az-kid-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.azf .az-kid-t { display: flex; align-items: center; gap: 11px; font-size: 17px; font-weight: 800; color: var(--ink); }
.azf .az-kid-n {
  flex: none; width: 28px; height: 28px; border-radius: 9px;
  background: #e6eef9; color: var(--bl);
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800;
}
.azf .az-rm {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px;
  border: 1px solid var(--ln2); background: #fff; color: var(--mut);
  border-radius: 9px; padding: 8px 14px;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: all .16s ease;
}
.azf .az-rm:hover { border-color: #e9bdb7; color: var(--red); }
.azf .az-rm svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.azf .az-empty {
  border: 1.5px dashed var(--ln2); border-radius: 15px; padding: 28px 22px;
  text-align: center; color: var(--soft); font-size: 15.5px; background: rgba(255, 255, 255, .6);
}
.azf .az-add {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; min-height: 48px;
  border: 1.5px solid var(--bls); background: #fff; color: var(--bl);
  border-radius: var(--rad); padding: 12px 22px;
  font-size: 15.5px; font-weight: 700; cursor: pointer; transition: all .18s ease;
}
.azf .az-add:hover { background: var(--blw); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(63, 108, 178, .14); }
.azf .az-add:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.azf .az-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.azf .az-cap { margin-top: 10px; font-size: var(--fs-small); color: var(--soft); }

/* ------------------------------------------------------------------ *
 * Notices, contact, submit
 * ------------------------------------------------------------------ */
.azf .az-info {
  border-left: 4px solid var(--amb); background: var(--ambg); border-radius: 0 12px 12px 0;
  padding: 18px 22px; margin: 0 0 24px; font-size: 15.5px; color: #6d4c12; line-height: 1.62;
}
.azf .az-info b { display: block; color: var(--amb); margin-bottom: 5px; font-size: 15.5px; }

.azf .az-contact {
  border: 1px solid var(--ln); border-radius: var(--rad-l); padding: 24px 26px;
  background: var(--wash); font-size: 15.5px; color: var(--mut); line-height: 1.7; margin-top: 28px;
}
.azf .az-contact b { display: block; color: var(--ink); font-size: 16.5px; margin-bottom: 9px; }
.azf .az-contact .az-cl { display: flex; gap: 10px; align-items: flex-start; margin-top: 7px; }
.azf .az-contact svg {
  flex: none; width: 17px; height: 17px; margin-top: 4px;
  fill: none; stroke: var(--bls); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.azf .az-foot { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.azf .az-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 58px; padding: 16px 38px;
  border: 0; border-radius: 13px;
  background: linear-gradient(135deg, var(--grn), var(--grnd)); color: #fff;
  font-family: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 22px rgba(47, 143, 108, .26);
  transition: transform .18s ease, box-shadow .18s ease;
}
.azf .az-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(47, 143, 108, .32); }
.azf .az-btn:focus-visible { outline: 3px solid #8ab6ff; outline-offset: 3px; }
.azf .az-btn:disabled { opacity: .62; cursor: not-allowed; transform: none; box-shadow: none; }
.azf .az-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.azf .az-spin {
  width: 19px; height: 19px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  border-radius: 50%; animation: azfSpin .7s linear infinite; display: none;
}
@keyframes azfSpin { to { transform: rotate(360deg); } }
.azf.is-sending .az-spin { display: block; }
.azf.is-sending .az-btn svg { display: none; }

.azf .az-alert {
  display: none; border: 1px solid #f0c8c2; background: var(--redbg); border-radius: 13px;
  padding: 17px 20px; margin: 0 0 22px; color: #8f2a1e; font-size: 15.5px; font-weight: 600;
}
.azf .az-alert.az-on { display: flex; gap: 12px; align-items: flex-start; }
.azf .az-alert svg { flex: none; width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* honeypots — off-screen, never display:none, which bots detect */
.azf .az-hp {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}

/* ------------------------------------------------------------------ *
 * Result panels (rendered by the site template after a submission)
 * ------------------------------------------------------------------ */
.azf-result {
  max-width: 680px; margin: 10px 0 30px; border-radius: var(--rad-l, 18px);
  padding: 48px 36px; text-align: center;
  font-family: "微软雅黑", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.azf-result.azf-good { border: 1px solid #bfe3d3; background: linear-gradient(135deg, #f0faf6, #e6f6ef); }
.azf-result.azf-bad  { border: 1px solid #f0c8c2; background: #fdf5f4; margin-bottom: 26px; }
.azf-result .azf-tick {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
}
.azf-result.azf-good .azf-tick { background: #52be94; }
.azf-result.azf-bad  .azf-tick { background: #c0392b; }
.azf-result .azf-tick svg { width: 33px; height: 33px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.azf-result h3 { margin: 0 0 11px; font-size: 26px; font-weight: 800; color: #1e2b3d; line-height: 1.3; }
.azf-result p { margin: 0 auto; max-width: 50ch; color: #55647c; font-size: 16.5px; line-height: 1.65; }
.azf-result .azf-ref { margin-top: 18px; font-size: 15px; color: #7d8ca3; }
.azf-notice {
  border: 1px solid #e2e9f3; background: #f6f9fd; border-radius: 12px;
  padding: 20px 24px; color: #55647c; font-size: 16px;
}


/* ------------------------------------------------------------------ *
 * Motion
 *
 * Every animation here is gated behind .az-anim, which the script adds at
 * boot. If the script never runs, or fails before that line, nothing is left
 * hidden — the form simply appears, fully usable, with no motion.
 * ------------------------------------------------------------------ */
@keyframes azfRise   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes azfFieldIn{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes azfBar    { from { transform: scaleX(0); }  to { transform: scaleX(1); } }
@keyframes azfPop    { 0% { opacity: 0; transform: scale(.4) rotate(-12deg); }
                       60% { opacity: 1; transform: scale(1.12) rotate(3deg); }
                       100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes azfWm     { from { opacity: 0; transform: translate(16px, -50%) rotate(-10deg); }
                       to   { opacity: .09; transform: translateY(-50%); } }
@keyframes azfSheen  { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(320%); } }
@keyframes azfGlow {
  0%   { background-position:   0% 50%, 100% 50%; opacity: .78; filter: hue-rotate(-7deg); }
  33%  { background-position:  70% 12%,  25% 85%; opacity: 1;   filter: hue-rotate(4deg); }
  66%  { background-position:  22% 88%,  80% 18%; opacity: .88; filter: hue-rotate(8deg); }
  100% { background-position:   0% 50%, 100% 50%; opacity: .78; filter: hue-rotate(-7deg); }
}

.azf.az-anim .az-sec { opacity: 0; transform: translateY(26px); }
.azf.az-anim .az-sec.az-vis {
  animation: azfRise .6s var(--ease) both;
}
.azf.az-anim .az-sec::after { animation: azfGlow 26s ease-in-out infinite; }
.azf.az-anim .az-sec:nth-of-type(2n)::after   { animation-duration: 31s; animation-delay: -6s; }
.azf.az-anim .az-sec:nth-of-type(3n)::after   { animation-duration: 23s; animation-delay: -13s; }
.azf.az-anim .az-sec .az-bar  { transform: scaleX(0); }
.azf.az-anim .az-sec .az-wm   { opacity: 0; }
.azf.az-anim .az-sec .az-num  { opacity: 0; }

.azf.az-anim .az-sec.az-vis .az-bar { animation: azfBar .7s var(--ease) .12s both; }
.azf.az-anim .az-sec.az-vis .az-num { animation: azfPop .55s var(--ease) .2s both; }
.azf.az-anim .az-sec.az-vis .az-wm  { animation: azfWm .8s var(--ease) .18s both; }

/* fields arrive in sequence rather than all at once */
.azf.az-anim .az-sec .az-sec-body .az-f { opacity: 0; }
.azf.az-anim .az-sec.az-vis .az-sec-body .az-f { animation: azfFieldIn .45s var(--ease) both; }
.azf.az-anim .az-sec.az-vis .az-sec-body .az-f:nth-child(1)  { animation-delay: .26s; }
.azf.az-anim .az-sec.az-vis .az-sec-body .az-f:nth-child(2)  { animation-delay: .30s; }
.azf.az-anim .az-sec.az-vis .az-sec-body .az-f:nth-child(3)  { animation-delay: .34s; }
.azf.az-anim .az-sec.az-vis .az-sec-body .az-f:nth-child(4)  { animation-delay: .38s; }
.azf.az-anim .az-sec.az-vis .az-sec-body .az-f:nth-child(5)  { animation-delay: .42s; }
.azf.az-anim .az-sec.az-vis .az-sec-body .az-f:nth-child(6)  { animation-delay: .46s; }
.azf.az-anim .az-sec.az-vis .az-sec-body .az-f:nth-child(7)  { animation-delay: .50s; }
.azf.az-anim .az-sec.az-vis .az-sec-body .az-f:nth-child(n+8){ animation-delay: .54s; }

/* the repeat-group scaffolding is not a field, so it fades as one piece */
.azf.az-anim .az-sec .az-sec-body > .az-kids,
.azf.az-anim .az-sec .az-sec-body > .az-empty,
.azf.az-anim .az-sec .az-sec-body > .az-add,
.azf.az-anim .az-sec .az-sec-body > .az-consent { opacity: 0; }
.azf.az-anim .az-sec.az-vis .az-sec-body > .az-kids,
.azf.az-anim .az-sec.az-vis .az-sec-body > .az-empty,
.azf.az-anim .az-sec.az-vis .az-sec-body > .az-add,
.azf.az-anim .az-sec.az-vis .az-sec-body > .az-consent { animation: azfFieldIn .5s var(--ease) .26s both; }

/* a control lifts very slightly as it takes focus */
.azf .az-in:focus, .azf .az-ta:focus, .azf .az-se:focus { transform: translateY(-1px); }
.azf .az-in, .azf .az-ta, .azf .az-se { will-change: auto; }

/* the progress bar catches the light as it fills */
.azf .az-prog-bar { position: relative; }
.azf .az-prog-bar i::after {
  content: ""; position: absolute; inset: 0; width: 40px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  animation: azfSheen 2.6s ease-in-out infinite;
}
.azf .az-prog-bar i[style*="width: 0"]::after { display: none; }

/* the add button's plus turns as you reach for it */
.azf .az-add svg { transition: transform .3s var(--ease); }
.azf .az-add:hover:not(:disabled) svg { transform: rotate(90deg); }

/* the submit arrow leans forward */
.azf .az-btn svg { transition: transform .25s var(--ease); }
.azf .az-btn:hover:not(:disabled) svg { transform: translateX(3px) translateY(-1px); }

/* removing a repeat block collapses it rather than snapping away */
.azf .az-kid { transition: box-shadow .2s var(--ease); }
.azf .az-kid:hover { box-shadow: 0 6px 20px -14px rgba(30, 43, 61, .5); }

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */
@media (max-width: 1079.98px) {
  .azf { --fs-title: 30px; }
}

@media (max-width: 767.98px) {
  .azf { --fs-title: 27px; --fs-sec: 21px; --fs-lead: 16.5px; }
  .azf .az-sec-top { padding: 22px 24px 20px; }
  .azf .az-sec-body { padding: 28px 24px 26px; }
  .azf .az-wm { width: 64px; height: 64px; right: 20px; }
}

@media (max-width: 575.98px) {
  .azf {
    --fs: 16.5px; --fs-title: 24px; --fs-sec: 19.5px; --fs-lead: 16px;
    --fs-input: 16px;      /* 16px keeps iOS from zooming the page on focus */
    --fs-label: 14.5px; --ctl: 48px;
  }
  .azf .az-head { margin-bottom: 24px; }
  .azf .az-sec { border-radius: 16px; margin-bottom: 18px; }
  .azf .az-sec-top { padding: 18px 17px 16px; }
  .azf .az-sec-body { padding: 26px 16px 22px; }
  .azf .az-sec-h { gap: 12px; }
  .azf .az-num { width: 36px; height: 36px; border-radius: 11px; font-size: 16.5px; }
  .azf .az-wm { width: 52px; height: 52px; right: 14px; }
  .azf .az-row { grid-template-columns: 1fr; gap: 16px; }
  .azf .az-row-1 { grid-template-columns: 1fr; }
  .azf .az-kid { padding: 18px 15px 20px; border-radius: 13px; }
  .azf .az-kid-h { margin-bottom: 14px; }
  .azf .az-consent { padding: 18px 17px; }
  .azf .az-contact { padding: 20px 18px; }
  .azf .az-info { padding: 15px 17px; }
  .azf .az-btn { width: 100%; padding: 16px 22px; }
  .azf .az-add { width: 100%; justify-content: center; }
  .azf .az-empty { padding: 22px 16px; }
  .azf-result { padding: 34px 20px; }
  .azf-result h3 { font-size: 22px; }
}

@media (max-width: 359.98px) {
  .azf { --fs-title: 22px; }
  .azf .az-seg { gap: 7px; }
  .azf .az-seg label { min-width: 0; flex: 1 1 44%; }
  .azf .az-sec-top { padding: 16px 14px 14px; }
  .azf .az-sec-body { padding: 22px 13px 20px; }
}

/* ------------------------------------------------------------------ *
 * Motion, print
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .azf .az-sec, .azf .az-f, .azf .az-bar { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .azf .az-sec::after { animation: none !important; filter: none !important; }
  .azf .az-kid { animation: none; }
  .azf *, .azf *::before, .azf *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .azf .az-nav, .azf .az-foot, .azf .az-add, .azf .az-rm, .azf .az-alert { display: none !important; }
  .azf .az-sec, .azf .az-f { opacity: 1 !important; transform: none !important; animation: none !important;
    break-inside: avoid; page-break-inside: avoid; }
  .azf .az-sec { border-color: #999; box-shadow: none; }
  .azf .az-wm, .azf .az-sec::after { display: none !important; }
  .azf .az-sec, .azf .az-sec-top { background: #fff !important; }
  .azf { --fs: 12pt; max-width: none; }
}