/* One-page group registration, using the club's track colours. */
.registration-dialog {
  width: calc(100% - 48px);
  max-width: 1060px;
  max-height: calc(100dvh - 48px);
  border-radius: 18px;
  overscroll-behavior: contain;
  scrollbar-color: #aac7c8 #edf2ee;
}
.dialog-layout {
  grid-template-columns: 28% minmax(0, 1fr);
  min-height: 0;
  background: var(--navy);
}
.dialog-aside {
  position: sticky;
  top: 0;
  height: calc(100dvh - 48px);
  min-height: 550px;
  padding: 38px 28px;
}
.dialog-aside > .eyebrow { margin-bottom: 48px; }
.registration-aside-tag {
  display: inline-block;
  position: relative;
  z-index: 2;
  font-size: 8px;
  letter-spacing: .08em;
  border: 1px solid #70939e;
  border-radius: 30px;
  padding: 9px 11px;
  margin-bottom: 22px;
  color: #c8e8ec;
}
.dialog-aside > p { font-size: clamp(35px, 3.7vw, 46px); }
.dialog-aside > .registration-aside-copy {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0;
  color: #bfd3d9;
  margin-top: 26px;
}
.dialog-aside > svg { top: auto; bottom: 75px; height: 30%; opacity: .8; }
.dialog-age { left: 28px; bottom: 30px; }
.dialog-content { background: #fff; padding: 34px 36px 27px; min-width: 0; }
.dialog-close {
  position: sticky;
  top: 12px;
  float: right;
  z-index: 5;
  margin: -18px -20px 0 0;
  width: 38px;
  height: 38px;
  box-shadow: 0 2px 12px #102d3b10;
}
.dialog-content > .eyebrow { margin: 0 0 12px; }
.dialog-content h2 { font-size: 35px; margin-bottom: 13px; }
.registration-intro { font-size: 12px; line-height: 1.8; color: #56727a; max-width: 510px; margin-bottom: 18px; }
.form-demo-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 26px;
  background: #f6f3ec;
  border: 1px solid #ece8df;
  border-radius: 8px;
  font-size: 10px;
  color: #587079;
}
.form-demo-note > span:first-child { color: #a44725; font-size: 22px; line-height: 1; }
.form-demo-note strong { color: var(--ink); }
.registration-block { margin: 0 0 28px; }
.registration-block-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.registration-block-heading h3, .contact-fields > legend { font-size: 18px; font-weight: 800; letter-spacing: -.035em; margin: 0; }
.child-count { background: #fce9db; color: #823b21; border-radius: 20px; padding: 6px 11px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.registration-help { color: #668089; font-size: 10px; line-height: 1.7; margin: 0 0 14px; }
.child-card { padding: 16px 18px; border: 1px solid #d9e5dc; border-radius: 12px; background: #eff5ed; margin-bottom: 12px; animation: child-arrive .3s var(--ease); }
.child-card-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.child-number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: white; font-size: 10px; font-weight: 800; flex-shrink: 0; }
.child-card-heading h4 { font-size: 13px; font-weight: 800; margin: 0; }
.remove-child { display: inline-flex; gap: 5px; align-items: center; margin-left: auto; padding: 5px 7px; font-size: 10px; border: 0; background: transparent; border-radius: 4px; color: #62767d; }
.remove-child > span { font-size: 20px; line-height: 1; }
.remove-child:hover { color: #963f2e; background: #ffe4d5; }
.child-fields { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }
.dialog-content label { font-size: 10px; margin-bottom: 7px; }
.dialog-content input:not([type=checkbox]), .dialog-content textarea { margin-bottom: 0; min-height: 45px; font-size: 12px; padding: 12px; border-radius: 7px; background: #fff; }
.dialog-content input:not([type=checkbox]):focus-visible, .dialog-content textarea:focus-visible { border-color: var(--blue); outline-offset: 1px; }
.dialog-content .checkbox-label { margin: 0; gap: 9px; font-size: 10px; line-height: 1.75; }
.dialog-content .checkbox-label > span { color: #42616b; }
.checkbox-label input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--navy); }
.dialog-content .shared-contact { margin-top: 14px; }
.child-guardian { margin-top: 17px; padding-top: 16px; border-top: 1px solid #d0dfd4; }
.child-guardian legend { font-size: 11px; font-weight: 800; float: left; width: 100%; margin-bottom: 7px; }
.child-guardian > .registration-help { clear: both; }
.guardian-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.guardian-fullname { grid-column: 1 / -1; }
.guardian-fullname > .registration-help { margin: 6px 0 0; }
.contact-fields > legend { padding: 0; margin-bottom: 8px; }
.contact-fields input:not([type=checkbox]), .contact-fields textarea { background: #f8faf9; }
.add-child { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1px dashed #93b5a0; border-radius: 9px; background: #fafcf9; text-align: left; transition: background .2s, border-color .2s; }
.add-child > span:first-child { font-size: 24px; line-height: 1; background: var(--mint); width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; }
.add-child > span:nth-child(2) { font-size: 12px; font-weight: 800; }
.add-child small { display: block; font-size: 9px; color: #718880; font-weight: 400; margin-top: 3px; }
.add-child > span:last-child { font-size: 19px; margin-left: auto; }
.add-child:hover { background: #edf5e9; border-color: #345e42; }
.registration-consents { border-top: 1px solid #e1e8e3; padding-top: 20px; }
.consent-heading { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; margin-bottom: 16px; }
.registration-consents .checkbox-label { margin-top: 14px; font-size: 11px; }
.registration-privacy { margin: 14px 0 0 26px; }
.registration-privacy summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 15px; font-size: 10px; font-weight: 700; border-bottom: 1px solid #c7d8d7; padding: 7px 0; }
.registration-privacy summary::-webkit-details-marker { display: none; }
.registration-privacy summary > span { font-size: 17px; transition: transform .2s; }
.registration-privacy[open] summary > span { transform: rotate(45deg); }
.registration-privacy > div { background: #f5f8f6; padding: 14px; border-radius: 0 0 8px 8px; }
.registration-privacy p { font-size: 10px; line-height: 1.8; color: #536e77; margin-bottom: 12px; }
.registration-privacy p:last-child { margin: 0; }
.registration-privacy a { overflow-wrap: anywhere; }
.registration-privacy .privacy-draft { padding-top: 12px; border-top: 1px solid #dce5df; color: #7b624a; }
.field-error { color: #a63527; font-size: 10px; line-height: 1.6; margin: 5px 0 0; }
.dialog-content [aria-invalid=true] { border-color: #bd5542!important; }
.registration-error { color: #8b2d24; background: #fff0e9; padding: 12px; border-radius: 7px; font-size: 11px; margin: 20px 0 0; }
.registration-submit { display: flex; justify-content: space-between; align-items: center; gap: 18px; border-top: 1px solid #e1e8e3; margin-top: 26px; padding-top: 22px; }
.registration-submit > p { margin: 0; font-size: 11px; line-height: 1.6; }
.registration-submit > p > span { display: block; font-size: 9px; color: #75888e; margin-top: 3px; }
.registration-submit .button { font-size: 12px; min-height: 52px; gap: 25px; padding: 0 22px; }
.registration-cancel { display: block; margin: 16px 0 0 auto; padding: 4px 0; border: 0; background: none; color: #6e858d; font-size: 10px; text-decoration: underline; text-underline-offset: 4px; }
.registration-cancel:hover { color: var(--pink); }
.form-success { outline: none; padding: 10px 0 40px; }
.form-success .success-kicker { color: #397552; font-size: 11px; font-weight: 700; margin-bottom: 16px; }
@keyframes child-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) {
  .registration-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 14px; }
  .dialog-layout { grid-template-columns: 1fr; background: #fff; }
  .dialog-aside { display: none; }
  .dialog-content { padding: 31px 21px 24px; }
  .dialog-content h2 { font-size: 29px; padding-right: 10px; }
  .dialog-close { top: 10px; margin: -20px -12px 0 0; width: 34px; height: 34px; }
  .registration-intro { font-size: 11px; }
  .form-demo-note { padding: 11px; }
  .registration-block-heading h3, .contact-fields > legend { font-size: 17px; }
  .child-card { padding: 15px 13px; }
  .child-fields, .guardian-fields { grid-template-columns: 1fr; gap: 14px; }
  .dialog-content input:not([type=checkbox]), .dialog-content textarea { font-size: 16px; min-height: 47px; }
  .dialog-content label { font-size: 11px; }
  .dialog-content .checkbox-label { font-size: 10px; }
  .registration-consents .checkbox-label { font-size: 12px; }
  .registration-submit { align-items: stretch; flex-direction: column; gap: 16px; }
  .registration-submit .button { width: 100%; justify-content: space-between; }
  .registration-cancel { margin-right: auto; }
  .registration-privacy { margin-left: 0; }
  .registration-privacy summary { font-size: 11px; }
  .registration-privacy p { font-size: 12px; }
}