/* The membership sign-up page (register.html, KD-144): customer-facing, on the Khunpon Design System's components
   (kp-, KD-059) over the brand's light theme, with the page's own look (the owner, 2026-10-21, KD-218 item 11: "more
   normal and less angry gym"; KD-226): white, one calm column built for a phone, plain titles, clear inputs and
   choices, gold only on the wordmark, the progress bar and the one main button. The form's controls stay the design
   system's (Field, Choice, Agreement, FormProgress, Signature, PhotoField); only their angles, italics and capitals are
   turned off here. The poster (the QR code to print) keeps the brand's look. */
:root[data-theme="light"] {
  --ground: #ffffff; --ground-2: #f6f6f4; --surface: #f7f7f5; --surface-2: #ffffff; --surface-3: #f0efea;
  --line: #e6e4de; --line-strong: #d6d3cb; --control-border: #b9b4a9; --text: #17181a; --text-muted: #5b5852; --text-subtle: #6b675f;
  --gold-edge: #b8923a; --focus: #7a5a14;
}
body { background: #fff; font-family: 'Kanit', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.kp-title, .r-section__title, .kp-doc h3, .r-summary__head h3, .r-poster .kp-title { font-family: inherit; font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; }
.kp-title { font-size: 26px; line-height: 32px; }
.kp-title--xl { font-size: 30px; line-height: 36px; }
.kp-title .gold { color: var(--text); }
.kp-eyebrow { font-family: inherit; font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text-muted); }
.kp-eyebrow::before { display: none; }
.kp-btn { font-family: inherit; font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 16px; min-height: 48px; padding: 12px 20px; border-radius: 10px; }
.kp-btn::before { clip-path: none; border-radius: 10px; border-width: 1px; }
.kp-btn:hover { transform: none; filter: none; }
.kp-btn--lg { padding: 14px 24px; font-size: 17px; }
.kp-label { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--text); }
.kp-input, .kp-select, .kp-textarea { min-height: 48px; padding: 12px 14px; font-size: 17px; line-height: 24px; background: #fff; border: 1.5px solid var(--control-border); border-radius: 10px; }
.kp-input:focus-visible, .kp-select:focus-visible, .kp-textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
.kp-select-wrap .kp-icon { right: 14px; }
.kp-help { font-size: 14px; line-height: 20px; }
.kp-question { font-size: 17px; line-height: 24px; }
.kp-choice { min-height: 48px; padding: 12px 14px; background: #fff; border: 1.5px solid var(--control-border); border-radius: 10px; }
.kp-choice:hover { background: var(--surface); }
.kp-choice:has(input:checked) { background: #fbf6e8; border-color: #a8842f; box-shadow: none; }
.kp-choice__mark, .kp-check__mark { border-radius: 5px; border-width: 1.5px; background: #fff; }
.kp-choice--one .kp-choice__mark { transform: none; border-radius: 50%; }
.kp-choice--one input:checked + .kp-choice__mark .kp-icon { transform: none; }
.kp-check { padding: 14px 16px; background: #fff; border: 1.5px solid var(--control-border); border-radius: 10px; }
.kp-check:has(input:checked) { background: #f0f8f6; border-color: #0a675a; }
.r-accept-all .kp-check { border-color: #a8842f; background: #fffdf7; }
.r-accept-all .kp-check:has(input:checked) { background: #fbf6e8; border-color: #a8842f; }
.r-accept-all .kp-check input:checked + .kp-check__mark { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.r-accept-all .kp-check__text b { font-weight: 600; }
.kp-panel { border-radius: 12px; padding: 18px; background: var(--surface); border: 1px solid var(--line); }
.kp-panel--notched { clip-path: none; }
.kp-doc { border-radius: 10px; background: #fafaf8; }
.kp-progress__bar { height: 6px; border-radius: 4px; }
.kp-progress__bar > span { border-radius: 4px; }
.kp-status { border-radius: 10px; }
.kp-signature { border-radius: 10px; overflow: hidden; }
.kp-photo { border-radius: 12px; }
.kp-icon { stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; } /* a component's own display never beats hidden */
.r-top { display: flex; align-items: center; padding: 14px max(20px, env(safe-area-inset-left)); background: #fff; border-bottom: 1px solid var(--line); }
.r-top__logo { display: block; width: auto; height: 18px; }
.r-main { display: grid; gap: 24px; max-width: 680px; margin: 0 auto; padding: 28px 20px 40px; box-sizing: border-box; }
.r-loading { color: var(--text-muted); }
.r-head { display: grid; gap: 10px; }
.r-head .kp-title { max-width: 20ch; }
.r-lead { margin: 0; color: var(--text-muted); max-width: 56ch; }
.r-step { display: grid; gap: 22px; }
.r-step > p { margin: 0; }
.r-section { display: grid; gap: 14px; }
.r-section + .r-section { padding-top: 22px; border-top: 1px solid var(--line); }
.r-section__title { margin: 0; font-size: 18px; line-height: 24px; }
.r-section__title:lang(th) { letter-spacing: 0; }
.r-note { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-muted); }
.r-note .kp-icon { vertical-align: -3px; margin-right: 4px; }
.r-errors:empty { display: none; }
.r-need { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.r-need li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.r-need .kp-icon { color: var(--gold-text); width: 20px; height: 20px; margin-top: 3px; }
/* Back and Continue: at the foot of the step, kept in view on a phone */
.r-actions { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 12px; justify-content: space-between; padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, transparent, var(--ground) 18px); }
.r-actions .kp-btn:last-child { margin-left: auto; }
.r-actions .kp-btn { min-width: 128px; }
.r-photo { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.r-photo__side { display: grid; gap: 14px; align-content: start; }
.r-photo__side .kp-btn-row { flex-wrap: wrap; }
.r-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.r-camera { display: grid; gap: 14px; justify-items: center; }
.r-camera .kp-photo { width: min(300px, 100%); }
.r-summary { display: grid; gap: 14px; }
.r-summary__part { display: grid; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.r-summary__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; }
.r-summary__head h3 { margin: 0; font-size: 16px; line-height: 22px; }
.r-summary dl { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 4px 14px; margin: 0; font-size: 15px; line-height: 22px; }
.r-summary dt { color: var(--text-muted); }
.r-summary dd { margin: 0; overflow-wrap: anywhere; }
.r-summary img { width: 80px; height: 80px; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; }
.r-location { display: grid; gap: 8px; }
.r-thanks { display: grid; gap: 16px; padding: 12px 0; }
.r-thanks p { margin: 0; }
.r-foot { display: grid; gap: 4px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; line-height: 20px; color: var(--text-muted); }
.r-foot p { margin: 0; }
.r-demo { font-size: 12px; line-height: 18px; color: var(--text-subtle); }
.r-closed { display: grid; gap: 14px; padding: 24px 0; }
.r-closed p { margin: 0; }
@media (max-width: 560px) {
  .r-main { padding: 20px 16px 24px; gap: 20px; }
  .r-head .kp-title--xl { font-size: 28px; line-height: 34px; }
  .r-photo { grid-template-columns: 1fr; justify-items: start; }
  .r-actions .kp-btn { min-width: 0; flex: 1; }
  .r-summary dl { grid-template-columns: 1fr; gap: 0; }
  .r-summary dd { margin-bottom: 8px; }
}

/* ---------- the poster: the reusable link's QR code, printed for the desk (A4) ---------- */
.r-poster { display: grid; justify-items: center; gap: 22px; max-width: 640px; margin: 0 auto; padding: 40px 24px; text-align: center; }
.r-poster .kp-title { font-size: 56px; max-width: none; }
.r-poster__qr { width: 300px; height: 300px; padding: 18px; background: #fff; }
.r-poster__qr svg { display: block; width: 100%; height: 100%; }
.r-poster__url { font-size: 18px; line-height: 26px; color: var(--text-muted); overflow-wrap: anywhere; }
.r-poster ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 18px; line-height: 26px; }
@page { size: A4; margin: 14mm; }
@media print {
  body { background: #fff; color: #111; }
  .r-top { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .r-poster { padding: 30px 0; }
  .r-poster .kp-title, .r-poster ul { color: #111; }
  .r-poster .gold { color: #8a6413; }
  .r-poster__url { color: #333; }
  .kp-btn, .r-demo { display: none !important; }
}

/* The parent's children (families step 3, KD-289): one panel a child */
.r-children { display: grid; gap: 20px; }
.r-child { display: grid; gap: 16px; padding: 18px 16px; }
.r-child__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.r-child__head .r-section__title { margin: 0; }
.r-child .r-photo .kp-photo { width: min(180px, 100%); }
.r-child__locked { margin: 0; color: var(--kp-ink-soft, inherit); }
.r-child__age:empty { display: none; }
.r-summary__part dd img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }