/* Registration: quiet surfaces and one group of questions at a time. */
.register-page {
  --reg-ink: #24364b;
  --reg-muted: #718095;
  --reg-line: #e1e7ee;
  --reg-surface: #fff;
  --reg-soft: #f7f9fc;
  --reg-fixed-bg: #f3f4f6;
  --reg-accent: #286cbf;
  --reg-choice-bg: #eff6ff;
}
.register-page .step-tabs { align-items: stretch; }
.register-page .step-tab { display: flex; flex-direction: column; min-width: 0; }
.register-page .step-tab-label { display: grid; grid-template-rows: minmax(2.8em, auto) auto; align-content: start; flex: 1; min-width: 0; line-height: 1.4; }
.register-page .step-tab-bar { flex-shrink: 0; margin-top: auto; }
.register-page .step-tab-label .tl-sub { margin-top: 2px; font-size: 10px; font-style: normal; line-height: 1.4; overflow-wrap: anywhere; }
.register-page #step0 > .card-body,
.register-page #step1 > .card-body { padding: 24px 0; }
.reg-intro { margin-bottom: 22px; }
.reg-intro > p { margin: 0 0 7px; color: var(--reg-ink); font-size: 19px; font-weight: 600; letter-spacing: -.35px; }
.reg-intro > span { color: var(--reg-muted); font-size: 12.5px; line-height: 1.65; }
.reg-residency-note { display: flex; align-items: flex-start; gap: 9px; margin: -5px 0 22px; padding: 11px 14px; background: var(--reg-soft); border-radius: 8px; color: var(--reg-muted); font-size: 12px; line-height: 1.6; }
.reg-residency-note > i { margin-top: 3px; color: var(--reg-accent); }
.reg-living-select { padding: 20px 22px; border-left: 3px solid var(--reg-accent); background: var(--reg-soft); border-radius: 0 10px 10px 0; }
.reg-living-select .form-select { max-width: 440px; margin: 4px 0 10px; min-height: 44px; background-color: var(--reg-surface); }
.reg-living-select .form-text { color: var(--reg-muted); font-size: 11.5px; line-height: 1.65; }
.reg-household-number { max-width: 380px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--reg-line); }
.reg-branch-note { margin: 16px 0 0; padding: 12px 14px; border-left: 3px solid var(--reg-accent); background: var(--reg-surface); color: var(--reg-muted); font-size: 12px; line-height: 1.65; }
.register-page #step0 .reg-household-panel { margin-top: 0; margin-bottom: 8px; }
.register-page #step0 > .card-body { padding-bottom: 0; }
.reg-household-panel { margin-top: 24px; padding: 22px; border: 1px solid var(--reg-line); border-radius: 12px; background: var(--reg-soft); }
.reg-household-choice-group { min-width: 0; margin: 0; }
.reg-household-choice-group > legend { float: none; width: auto; margin-bottom: 10px; }
.reg-household-options { display: grid; gap: 10px; }
.reg-household-choice { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid var(--reg-line); border-radius: 10px; background: var(--reg-surface); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.reg-household-choice:hover { border-color: var(--reg-muted); }
.reg-household-choice > input { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; accent-color: var(--reg-accent); cursor: pointer; }
.reg-household-choice > span { min-width: 0; }
.reg-household-choice strong { display: block; color: var(--reg-ink); font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.reg-household-choice small { display: block; margin-top: 3px; color: var(--reg-muted); font-size: 11px; line-height: 1.5; }
.reg-household-choice:has(input:checked) { border-color: var(--reg-accent); background: var(--reg-choice-bg); box-shadow: inset 3px 0 var(--reg-accent); }
.reg-household-choice:focus-within { outline: 2px solid var(--reg-accent); outline-offset: 2px; }
.reg-household-choice:has(input.is-invalid) { border-color: #dc3545; }
.reg-housing-inline { min-width: 0; margin: 18px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--reg-line); }
.reg-housing-inline > .row > .col-md-6 { flex: 0 0 100%; max-width: 100%; }
.reg-panel-heading { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; }
.reg-panel-icon { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: #eaf1fb; color: var(--reg-accent); }
.reg-panel-heading h3 { margin: 0 0 5px; color: var(--reg-ink); font-family: inherit; font-size: 14px; font-weight: 600; }
.reg-panel-heading p { margin: 0; color: var(--reg-muted); font-size: 11.5px; line-height: 1.6; }
.reg-optional-details { margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--reg-line); }
.reg-optional-details > summary { display: flex; align-items: center; gap: 8px; color: var(--reg-ink); font-size: 12px; font-weight: 500; cursor: pointer; list-style: none; }
.reg-optional-details > summary > span { color: var(--reg-muted); font-size: 10.5px; font-weight: 400; }
.reg-optional-details > summary > i { margin-left: auto; font-size: 10px; }
.reg-optional-details[open] > summary > i { transform: rotate(180deg); }
.reg-section { margin-bottom: 12px; border: 1px solid var(--reg-line); border-radius: 12px; background: var(--reg-surface); }
.reg-section > summary { display: flex; align-items: center; gap: 13px; padding: 18px; cursor: pointer; list-style: none; border-radius: 12px; }
.reg-section > summary::-webkit-details-marker,
.reg-optional-details > summary::-webkit-details-marker { display: none; }
.reg-section > summary:hover { background: var(--reg-soft); }
.reg-section > summary:focus-visible,
.reg-optional-details > summary:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
.reg-section-number { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; background: var(--reg-soft); color: var(--reg-muted); border-radius: 10px; font-size: 12px; font-weight: 600; }
.reg-section-heading { min-width: 0; flex: 1; }
.reg-section-heading strong { display: block; color: var(--reg-ink); font-size: 13px; font-weight: 600; }
.reg-section-heading small { display: block; margin-top: 4px; color: var(--reg-muted); font-size: 11.5px; line-height: 1.5; }
.reg-section-chevron { color: var(--reg-muted); font-size: 10px; }
.reg-section[open] { border-color: #c4d6ee; }
.reg-section[open] > summary { border-radius: 12px 12px 0 0; }
.reg-section[open] > summary .reg-section-number { background: #eaf1fb; color: var(--reg-accent); }
.reg-section[open] > summary .reg-section-chevron { transform: rotate(180deg); }
.reg-section-content { margin: 0 20px; padding: 22px 0 8px; border-top: 1px solid var(--reg-line); }
.reg-group-label { margin: 0 0 14px; color: var(--reg-muted); font-size: 11px; font-weight: 600; }
.reg-fixed-location { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--reg-soft); border-radius: 8px; color: var(--reg-muted); font-size: 11.5px; line-height: 1.6; }
.register-page .reg-section-content .row,
.register-page .reg-household-panel .row { --bs-gutter-x: 20px; --bs-gutter-y: 18px; }
.register-page #step0 .form-label,
.register-page #step1 .form-label { color: var(--reg-ink); font-size: 12px; font-weight: 500; line-height: 1.5; }
.register-page #step0 .optional-tag,
.register-page #step1 .optional-tag { color: var(--reg-muted); font-size: 10px; font-weight: 400; }
.register-page .reg-section-content .form-text,
.register-page .reg-household-panel .form-text { color: var(--reg-muted); font-size: 11px; line-height: 1.6; }
.register-page .reg-section-content .section-title { margin: 4px 0 14px; padding: 0; border: 0; color: var(--reg-ink); font-family: inherit; font-size: 12px; font-weight: 600; }
.register-page .reg-section-content .renter-details { margin: 6px 0 14px; padding: 16px; background: var(--reg-soft); border-color: var(--reg-line); }
.register-page .reg-section-content .renter-details legend { font-size: 12px; color: var(--reg-ink); }
.register-page [data-head-account] .form-text { margin-bottom: 0; }
.reg-personal-intro { margin-bottom: 20px; }
.reg-personal-intro h2 { margin: 0 0 7px; color: var(--reg-ink); font-family: inherit; font-size: 20px; font-weight: 600; letter-spacing: -.4px; }
.reg-personal-intro p { margin: 0; color: var(--reg-muted); font-size: 12px; line-height: 1.7; }
.reg-personal-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 6px; border: 1px solid var(--reg-line); border-radius: 12px; background: var(--reg-soft); }
.reg-personal-nav[hidden], .reg-personal-status[hidden] { display: none; }
.reg-personal-tab { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 5px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--reg-muted); font: inherit; font-size: 11px; font-weight: 500; line-height: 1.4; cursor: pointer; }
.reg-personal-tab-number { display: grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--reg-surface); font-size: 10px; }
.reg-personal-tab.active { border-color: var(--reg-line); background: var(--reg-surface); color: var(--reg-accent); box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }
.reg-personal-tab.active .reg-personal-tab-number { background: var(--reg-accent); color: var(--reg-surface); }
.reg-personal-tab:hover { color: var(--reg-accent); }
.reg-personal-tab:focus-visible { outline: 2px solid var(--reg-accent); outline-offset: 2px; }
.reg-personal-status { display: flex; justify-content: space-between; gap: 10px; margin: 12px 2px 16px; color: var(--reg-muted); font-size: 10.5px; line-height: 1.5; }
.reg-personal-status > :first-child { color: var(--reg-accent); font-weight: 500; }
.reg-personal-panel { scroll-margin-top: 20px; margin-bottom: 0; }
.reg-personal-heading { display: flex; align-items: center; gap: 12px; padding: 18px 20px; }
.reg-personal-heading .reg-section-number { background: var(--reg-choice-bg); color: var(--reg-accent); }
.reg-personal-title { margin: 0; color: var(--reg-ink); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.5; }
.reg-personal-panel .reg-section-content { padding-bottom: 18px; }
.register-page #step1 > .card-footer { gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.register-page #step1 [data-personal-next] { margin-left: auto; }
.reg-benefit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.reg-benefit-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 20px; min-width: 0; align-items: start; }
.reg-benefit-item:has(> fieldset:not([hidden])) { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reg-benefit-demographics { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reg-benefit-demographics > fieldset { grid-column: 2; }
.reg-benefit-item > fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.reg-benefit-grid .col-md-6 { width: 100%; max-width: 100%; }
#step3 > .card-body { padding-top: 12px; }
.reg-id-intro { margin: 0 0 12px; color: var(--reg-muted); font-size: 12px; line-height: 1.7; }
.reg-birth-option { margin-bottom: 12px; color: var(--reg-ink); font-size: 12px; }
.reg-birth-option .form-check-label { display: flex; align-items: center; cursor: pointer; }
.reg-birth-option .form-check-input { flex: 0 0 auto; margin-top: 0; }
.reg-birth-option .form-text { margin-left: 21px; color: var(--reg-muted); font-size: 11px; }
.reg-birth-option[hidden], #birthSupportSection[hidden], .reg-id-group[hidden], [data-primary-id-controls][hidden] { display: none !important; }
.reg-id-group { padding: 16px; border: 1px solid var(--reg-line); border-radius: 12px; background: var(--reg-surface); }
.reg-id-support-section { margin-top: 14px; }
.reg-id-support-section[hidden] { display: none !important; }
#guardianIdSection .reg-id-group { margin-top: 20px; }
.reg-id-group-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.reg-id-group-heading > i { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; color: var(--reg-accent); background: var(--reg-choice-bg); }
.reg-id-group-heading h3 { margin: 0 0 4px; color: var(--reg-ink); font-family: inherit; font-size: 14px; font-weight: 600; }
.reg-id-group-heading p { margin: 0; color: var(--reg-muted); font-size: 11px; line-height: 1.6; }
.reg-id-type { max-width: 420px; }
#minorBirthOption { color: var(--reg-muted); font-size: 11px; }
.reg-id-choice-row { display: flex; align-items: flex-end; gap: 16px; }
.reg-id-choice-row > .reg-id-type-field { flex: 1; min-width: 0; }
.reg-id-choice-row > .reg-birth-option { flex: 0 1 260px; min-width: 0; margin-bottom: 0; padding: 0; }
.reg-id-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; margin-top: 10px; }
.reg-id-sides.is-single { grid-template-columns: minmax(0, 1fr); }
.reg-id-side { min-width: 0; overflow: hidden; border: 1px solid var(--reg-line); border-radius: 10px; background: var(--reg-soft); }
.reg-id-side[hidden], .reg-id-placeholder[hidden], .reg-id-single-note[hidden] { display: none !important; }
.reg-id-side-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--reg-line); }
.reg-id-side-heading h4 { margin: 0; color: var(--reg-ink); font-family: inherit; font-size: 12px; font-weight: 600; }
.reg-id-state { color: var(--reg-muted); font-size: 10px; white-space: nowrap; }
.reg-id-side.is-complete { border-color: var(--reg-accent); }
.reg-id-side.is-complete .reg-id-state { color: var(--reg-accent); }
.reg-id-side.is-invalid { border-color: #dc3545; }
.register-page .reg-id-side .camera-container { margin: 0; padding: 14px; border: 0; border-radius: 0; background: transparent; }
.reg-id-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 155px; padding: 20px; border: 1px dashed var(--reg-line); border-radius: 8px; color: var(--reg-muted); font-size: 11px; text-align: center; }
.reg-id-placeholder > i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--reg-choice-bg); color: var(--reg-accent); font-size: 17px; }
.reg-id-side video, .reg-id-side .captured-preview { width: 100%; max-height: 260px; object-fit: contain; border-radius: 8px; }
.reg-id-side canvas { display: none; }
.reg-id-side .qr-code-box canvas { display: block; }
.reg-id-side .camera-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 12px; }
.reg-id-side .camera-actions > .btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.reg-id-side .camera-actions > .btn > i { margin: 0 !important; line-height: 1; }
.reg-id-side .phone-capture { margin: 0 0 12px; padding: 12px; }
.reg-id-side .phone-capture[hidden], .reg-id-side .cam-card[hidden], .reg-id-side .pc-use-phone[hidden] { display: none !important; }
.reg-id-side .pc-row { flex-direction: column; align-items: center; gap: 10px; }
.reg-id-side .pc-head { font-size: 12px; }
.reg-id-side .pc-intro, .reg-id-side .pc-steps { font-size: 11px; }
.reg-id-side .pc-steps { padding-left: 16px; }
.reg-id-side .pc-link { overflow-wrap: anywhere; word-break: break-all; }
.reg-id-side .cam-card { margin-bottom: 12px; padding: 14px; }
.reg-id-side .phone-capture, .reg-id-side .cam-card, .reg-id-side .cc-steps { background: var(--reg-surface); border-color: var(--reg-line); }
.reg-id-side .pc-head, .reg-id-side .cc-title, .reg-id-side .cc-steps-title { color: var(--reg-ink); }
.reg-id-side .pc-intro, .reg-id-side .pc-steps, .reg-id-side .cc-text, .reg-id-side .cc-foot, .reg-id-side .cc-step { color: var(--reg-muted); }
.reg-id-side .pc-status { background: var(--reg-choice-bg); color: var(--reg-accent); font-size: 11px; }
[data-theme="dark"] .reg-id-side .pc-status.ok { background: #163d32; color: #86efac; }
[data-theme="dark"] .reg-id-side .pc-status.warn, [data-theme="dark"] .reg-id-side .pc-reason { background: #44351c; color: #fcd34d; }
.register-page #regForm .form-control[readonly],
.register-page #regForm .form-control:disabled,
.register-page #regForm .form-select:disabled {
  background-color: var(--reg-fixed-bg);
  border-color: var(--reg-line);
  color: var(--reg-ink);
  opacity: 1;
}
.register-page #regForm .form-control[readonly]:focus {
  border-color: var(--reg-muted);
  box-shadow: 0 0 0 3px rgba(113, 128, 149, .15);
}
[data-theme="dark"] .register-page,
.register-page[data-theme="dark"] { --reg-ink: #e2e8f0; --reg-muted: #a8b3c2; --reg-line: #3a4a5c; --reg-surface: #222e3c; --reg-soft: #1b2735; --reg-fixed-bg: #2b3644; --reg-accent: #60a5fa; --reg-choice-bg: #243b55; }
[data-theme="dark"] .reg-panel-icon,
[data-theme="dark"] .reg-section[open] > summary .reg-section-number { background: #243b55; }
@media (max-width: 575.98px) {
  .register-page .step-tab-label .tl-sub { font-size: 9.5px; }
  .register-page .tl-toggle-wrap .form-check { min-height: 24px; align-items: center; }
  .register-page #step0 > .card-body,
  .register-page #step1 > .card-body { padding: 20px 0; }
  .register-page #step0 > .card-body { padding-bottom: 0; }
  .reg-intro > p { font-size: 17px; }
  .reg-household-panel { padding: 17px; }
  .reg-section > summary { padding: 15px 13px; gap: 10px; }
  .reg-section-content { margin: 0 15px; padding-top: 18px; }
  .reg-section-heading small { font-size: 11px; }
  .reg-personal-intro h2 { font-size: 18px; }
  .reg-personal-nav { display: flex; overflow-x: auto; }
  .reg-personal-tab { flex: 0 0 auto; padding: 8px 10px; }
  .reg-personal-status > :last-child { display: none; }
  .reg-personal-heading { padding: 16px 15px; }
  .reg-benefit-grid,
  .reg-benefit-demographics,
  .reg-benefit-item:has(> fieldset:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .reg-benefit-demographics > fieldset { grid-column: 1; }
  .reg-id-group { padding: 15px; }
  .reg-id-choice-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .reg-id-choice-row > .reg-birth-option { flex-basis: auto; }
  .reg-id-sides { grid-template-columns: minmax(0, 1fr); }
}