.camp-registration-wrapper {
  background-color: var(--text-color-white);
  /* Bleed white background full-width beyond the max-width container */
  box-shadow: 0 0 0 100vmax var(--text-color-white);
  clip-path: inset(0 -100vmax);
}

.camp-card {
  background: var(--accent-color-grey--50);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
}

.camp-page-title {
  margin: 0 0 2.5rem 0;
}

.camp-page-description {
  color: var(--accent-color-grey--600);
  font-weight: 500;
  margin: 0 0 1.5rem 0;
  line-height: 1.5;
}

.camp-step-title {
  font-family: var(--base-font);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color-body);
  margin-bottom: 1rem;
  width: 100%;
}

#camp-steps-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
  column-gap: 0.4375rem;
  row-gap: 1rem;
}

.camp-step-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

/* Step line margin removed — labels are now absolute so dots stay centered */

.camp-step-line {
  height: 4px;
  flex: 1;
  border-radius: var(--border-radius-round);
  background-color: var(--accent-color-primary--50);
}

.camp-step-line.completed {
  background-color: var(--accent-color-secondary--200);
}

.camp-step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 100%;
  border: 1px solid var(--accent-color-secondary--200);
  background-color: var(--text-color-white);
}

/* Inner dot for inactive steps (hidden by default) */
.camp-step-indicator::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: transparent;
}

.camp-step-container.current-step .camp-step-indicator {
  background-color: var(--accent-color-secondary--100);
  border-color: var(--accent-color-secondary--200);
}

.camp-step-container.current-step .camp-step-indicator::after {
  background-color: var(--accent-color-secondary--500);
}

.camp-step-container.completed .camp-step-indicator {
  background-color: var(--accent-color-secondary--500);
  border-color: var(--accent-color-secondary--500);
}

.camp-step-container.completed .camp-step-indicator::after {
  content: "\f00c";
  font-family: "Font Awesome 7 Pro";
  font-weight: 300;
  font-size: 0.6rem;
  color: var(--text-color-white);
  width: auto;
  height: auto;
  border-radius: 0;
  background-color: transparent;
}

.camp-step-label {
  position: absolute;
  top: 100%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  font-family: var(--base-font);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-color-body);
  text-align: center;
  line-height: 1.3;
  margin-top: 1rem;
  white-space: nowrap;
}

/* First step label anchors to start edge */
#step-coordinator .camp-step-label {
  inset-inline-start: 0;
  transform: none;
}

/* Last step label anchors to end edge */
#step-consent .camp-step-label {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: none;
}

.camp-tab {
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.camp-tab.active {
  opacity: 1;
  visibility: visible;
  height: auto;
  overflow: visible;
}

.camp-tab .tab-description {
  color: var(--text-color-body);
  font-weight: 500;
  margin: 0 0 1.5rem 0;
  line-height: 1.5;
  padding: 1.5rem;
  border-radius: 4px;
  background: var(--accent-color-primary--50);
}

/* Coordinator description — plain text, no box */
#tab-coordinator .tab-description {
  padding: 0;
  border-radius: 0;
  background: none;
}

.input-row {
  margin-bottom: 1.25rem;
}

.input-row label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-color-label);
}

.required-star {
  color: var(--accent-color-secondary--500);
  font-weight: 600;
}

.input-row input[type="text"],
.input-row input[type="email"],
.input-row input[type="tel"],
.input-row input[type="date"],
.input-row input[type="datetime-local"],
.input-row input[type="number"],
.input-row select,
.input-row textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color-input);
  border-radius: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color-placeholder);
  transition: border-color 0.3s;
  box-sizing: border-box;
  font-family: var(--base-font);
  background-color: var(--accent-color-grey--50);
}

/* Custom select dropdown arrow */
.input-row select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-inline-end: 2.75rem;
}

.select-wrapper {
  position: relative;
}

.select-wrapper > i {
  position: absolute;
  right: 1rem;
  bottom: 0;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 1rem;
  color: var(--text-color-placeholder);
  pointer-events: none;
}

.input-row input::placeholder,
.input-row textarea::placeholder {
  color: var(--text-color-placeholder);
  font-size: 14px;
  font-weight: 500;
  opacity: 1;
}

.input-row input:focus,
.input-row select:focus,
.input-row textarea:focus {
  outline: none;
  border-color: var(--accent-color-secondary--500);
  box-shadow: 0 0 0 2px rgba(137, 118, 75, 0.15);
}

.input-row input.error,
.input-row select.error,
.input-row textarea.error {
  border: 1px solid var(--accent-color-error--500);
}

.input-row textarea {
  min-height: 80px;
  resize: vertical;
}

/* Field hint */
.field-hint {
  display: block;
  font-size: 0.875rem;
  color: var(--text-color-placeholder);
  margin-top: 0.35rem;
  line-height: 1.4;
}

/* Inline validation */

.field-validation-warning {
  display: block;
  font-size: 0.875rem;
  color: var(--accent-color-error--500);
  font-weight: 600;
  margin-top: 0.35rem;
  line-height: 1.4;
  animation: fadeInWarning 0.2s ease-in;
}

@keyframes fadeInWarning {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Checkbox */
.checkbox-label {
  display: flex !important;
  align-items: flex-start;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bg-color-black);
  cursor: pointer;
  line-height: 1.6;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  margin-inline-end: 0.75rem;
  flex-shrink: 0;
  accent-color: #89764b;
  cursor: pointer;
  border: 1px solid var(--border-color-input);
}

/* Multi-select checkbox group */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.625rem;
}

.checkbox-group .checkbox-label {
  font-size: 0.875rem;
  line-height: 1.4;
  align-items: center;
  margin: 0;
  margin-inline-end: 1rem;
}

.checkbox-group .checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: #89764b;
  cursor: pointer;
  margin: 0;
  margin-inline-end: 0.5rem;
}

.checkbox-group.error {
  border-inline-start: 3px solid var(--accent-color-error--500);
  padding-inline-start: 0.5rem;
}

/* Radio group */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.625rem;
}

.radio-label {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color-label);
  cursor: pointer;
  line-height: 1.4;
  margin: 0;
  margin-inline-end: 1rem;
}

.radio-label input[type="radio"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: #89764b;
  cursor: pointer;
  margin: 0;
  margin-inline-end: 0.5rem;
  vertical-align: middle;
  position: relative;
  top: 0;
}

.radio-group.error {
  border-inline-start: 3px solid var(--accent-color-error--500);
  padding-inline-start: 0.5rem;
}

.allergy-severity-group {
  display: grid;
  gap: 0.875rem;
}

.allergy-severity-option {
  display: flex !important;
  align-items: flex-start;
  margin-inline-end: 0;
  width: 100%;
}

.allergy-severity-option input[type="radio"] {
  margin-top: 0.25rem;
}

.allergy-severity-option-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.allergy-severity-option-image {
  display: block;
  border-radius: 0.75rem;
  border: 1px solid #dedede;
  background: #ffffff;
  object-fit: cover;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.form-grid > .input-row {
  padding-inline-end: 0.75rem;
}

.form-grid > .input-row:nth-child(2n) {
  padding-inline-start: 0.75rem;
  padding-inline-end: 0;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.form-grid-3 > .input-row {
  padding-inline-end: 0.5rem;
}

.form-grid-3 > .input-row:nth-child(3n + 2) {
  padding-inline: 0.5rem;
}

.form-grid-3 > .input-row:nth-child(3n) {
  padding-inline-start: 0.5rem;
  padding-inline-end: 0;
}

.form-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.form-grid-4 > .input-row {
  padding-inline-end: 0.5rem;
}

.form-grid-4 > .input-row:nth-child(4n + 2),
.form-grid-4 > .input-row:nth-child(4n + 3) {
  padding-inline: 0.25rem;
}

.form-grid-4 > .input-row:nth-child(4n) {
  padding-inline-start: 0.5rem;
  padding-inline-end: 0;
}

.form-section {
  border-top: 1px solid var(--border-color-light);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.form-section:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* Remove trailing margin from last input row in a section */
.form-section > *:last-child > .input-row:last-child,
.form-section > .input-row:last-child {
  margin-bottom: 0;
}

.form-section-title {
  font-family: var(--base-font);
  font-size: 0.875rem;
  font-weight: 700;
  color: #5f6368;
  margin: 0 0 1rem 0;
}

.form-subsection-title {
  font-family: var(--base-font);
  font-size: 0.875rem;
  font-weight: 700;
  color: #393632;
  margin: 0 0 1rem 0;
}

.form-subsection-title:first-of-type {
  margin-top: 0;
}

/* Subsection title row with inline action button */
.form-subsection-title-row {
  display: flex;
  align-items: center;
}

.form-subsection-title-row .form-subsection-title {
  margin-bottom: 0;
}

/* Dynamic guardian entries */
.guardian-entry {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.guardian-entry:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.guardian-entry .form-subsection-title-row {
  margin-bottom: 16px;
}

.remove-guardian-btn {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
  color: #e9292d;
  font-size: 1rem;
  cursor: pointer;
  margin-inline-start: 1rem;
  transition: opacity 0.2s;
}

.remove-guardian-btn:hover {
  opacity: 0.7;
}

/* Add Guardian toggle button — plain text link style */
.add-guardian-btn {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
  color: #89764b;
  font-family: var(--base-font);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s;
  margin-bottom: 1rem;
}

.add-guardian-btn:hover {
  color: var(--accent-color-secondary--600);
}

.add-guardian-btn i {
  margin-inline-end: 0.5rem;
}

.conditional-field,
.conditional-group {
  padding-inline-start: 1rem;
  border-inline-start: 2px solid #b4bbc4;
  margin-bottom: 1.25rem;
}

.conditional-group .conditional-group {
  margin-inline-start: 0;
}

.camp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  font-family: var(--base-font);
  border-radius: var(--border-radius-sm);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.025em;
}

/* Primary (filled gold) */
.camp-btn-primary {
  background-color: var(--accent-color-secondary--500);
  color: var(--text-color-white);
}

.camp-btn-primary:hover {
  background-color: var(--accent-color-secondary--600);
}

.camp-btn-primary:active {
  transform: translateY(1px);
}

.camp-btn-primary:disabled {
  background-color: var(--bg-color-button-disabled);
  color: var(--text-color-disabled);
  cursor: not-allowed;
}

/* Outline — used for "Add participant" and similar secondary actions */
.camp-btn-outline {
  background-color: transparent;
  color: var(--accent-color-grey);
  border: 1px solid var(--accent-color-secondary--500);
}

.camp-btn-outline:hover {
  background-color: var(--accent-color-secondary--500);
  color: var(--text-color-white);
}

.camp-btn-outline:disabled {
  border-color: var(--bg-color-button-disabled);
  color: var(--bg-color-button-disabled);
  cursor: not-allowed;
}

.camp-btn-outline:disabled:hover {
  background-color: transparent;
  color: var(--bg-color-button-disabled);
}

.camp-btn i {
  margin-inline-end: 0.5rem;
}

.camp-btn i:last-child {
  margin-inline-end: 0;
  margin-inline-start: 0.5rem;
}

.camp-btn i:only-child {
  margin: 0;
}

/* Nav button FA chevron icons are in the HTML via <i class="fal fa-chevron-*"> */

/* Button rows */
.button-row {
  margin-top: 1.5rem;
  text-align: center;
}

.button-row.button-row-start {
  text-align: start;
}

.button-row-dual {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button-row-dual .camp-btn + .camp-btn {
  margin-inline-start: 1rem;
}

.order-summary {
  margin-bottom: 2.5rem;
}

.order-summary-card {
  background: var(--accent-color-primary--50);
  border-radius: var(--border-radius-md);
  padding: 1.5rem;
}

.order-summary-divider {
  border: none;
  border-top: 1px solid #dedede;
  margin: 0;
}

.order-summary-card .order-label {
  font-weight: 600;
}

.order-summary-card .order-value {
  font-weight: 500;
}

.order-customer-name {
  margin: 0.5rem 0 0 0;
}

.order-customer-email {
  margin: 0 0 1rem 0;
}

/* Camp group — one heading per camp, variants listed below */
.order-camp-group {
  margin-bottom: 0.5rem;
}

.order-camp-group:last-child {
  margin-bottom: 0;
}

.order-camp-group > .order-value {
  display: block;
}

.order-camp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.order-camp-qty {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-color-secondary--500);
}

/* Variant info labels — inline within camp row */
.order-camp-row .camp-variant-info {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-color-muted);
  margin: 0;
  margin-inline-end: 0.5rem;
  padding-inline-start: 0.5rem;
  border-inline-start: 2px solid var(--accent-color-primary--100);
}

.roster-form-layout {
  display: flex;
  flex-wrap: wrap;
}

.roster-form-sidebar {
  flex: 0 0 100%;
  margin-bottom: 1rem;
}

.roster-form-main {
  flex: 0 0 100%;
}

.roster-form-sidebar-label {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-color-body);
}

.roster-form-sidebar-remove {
  display: inline-flex;
  align-items: center;
  margin-top: 0.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: #e9292d;
  font-size: 1rem;
  cursor: pointer;
  transition: opacity 0.2s;
}

.roster-form-sidebar-remove:hover {
  opacity: 0.7;
}

#roster-cards-container {
  margin-top: 2.5rem;
}

.roster-empty-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-color-label);
  font-weight: 600;
  padding-top: 1rem;
  margin-bottom: 0;
  text-align: center;
}

.roster-empty-icon {
  font-size: 44px;
  color: var(--accent-color-grey--200);
  margin-bottom: 1rem;
}

#roster-form-container {
  border: 1px solid #dedede;
  border-radius: 4px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

#add-participant-btn {
  display: flex;
  align-items: center;
  margin: 1.5rem auto 0;
  font-size: 1.125rem;
}

#add-participant-btn i {
  margin-inline-end: 0.5rem;
}

.roster-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border: 1px solid #dedede;
  border-radius: var(--border-radius-md);
  margin-bottom: 0.75rem;
  background: transparent;
  transition: border-color 0.2s;
}

.roster-card.active {
  border-color: var(--accent-color-secondary--500);
}

.roster-card.complete {
  border-color: var(--border-color-light);
}

.roster-card.complete.active {
  border-color: var(--accent-color-secondary--500);
}

.roster-card-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1;
}

.roster-card-info > * {
  margin-inline-end: 1rem;
}

.roster-card-info > *:last-child {
  margin-inline-end: 0;
}

.roster-card-name {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--text-color-body);
}

.roster-card-name em {
  font-weight: 400;
  color: var(--accent-color-grey--300);
}

.roster-card-badge {
  font-size: 0.875rem;
  font-weight: 700;
  background: var(--accent-color-secondary--100);
  color: var(--accent-color-secondary--500);
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius-round);
  white-space: nowrap;
}

.roster-card-status {
  font-size: 14px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  display: inline-block;
}

.status-complete {
  color: var(--accent-color-secondary--500);
  background: #e3ded4;
}

.status-incomplete {
  color: #eb001b;
  background: rgba(235, 0, 27, 0.1);
}

.roster-card-actions {
  display: flex;
  flex-shrink: 0;
  margin-inline-start: 1rem;
}

.roster-card-actions > * + * {
  margin-inline-start: 2rem;
}

.roster-edit-btn,
.roster-remove-btn {
  display: flex;
  align-items: center;
  padding: 0;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--base-font);
  transition: color 0.2s;
}

.roster-edit-btn i,
.roster-remove-btn i {
  font-size: 1rem;
  margin-inline-end: 0.5rem;
}

.roster-edit-btn {
  color: #393632;
}

.roster-edit-btn:hover {
  color: var(--accent-color-secondary--500);
}

.roster-remove-btn {
  color: #393632;
}

.roster-remove-btn:hover {
  color: var(--accent-color-error--500);
}

.assignment-group {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--border-color-light);
  border-radius: var(--border-radius-md);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Camp name — full width at top of card */
.assignment-group-name {
  flex: 0 0 100%;
  border-bottom: 1px solid var(--border-color-light);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.assignment-group-title {
  display: block;
  font-family: var(--base-font);
  font-size: 1.125rem;
  font-weight: 600;
  color: #323233;
  margin: 0;
}

/* Variant row — 2-column layout per variant */
.assignment-variant-row {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 100%;
}

/* Variant left column — labels + slot count */
.assignment-variant-header {
  flex: 0 0 100%;
  margin-bottom: 1rem;
}

/* Variant right column — slot dropdowns */
.assignment-variant-slots {
  flex: 0 0 100%;
  min-width: 0;
}

/* Full-width divider between variants */
.assignment-variant-divider {
  flex: 0 0 100%;
  border-top: 1px solid var(--border-color-light);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Variant label with left border */
.assignment-variant-header .camp-variant-info {
  display: block;
  color: var(--text-color-muted);
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  padding-inline-start: 0.5rem;
  border-inline-start: 2px solid var(--accent-color-primary--100);
}

.assignment-group-count {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  color: #89764b;
  background: #e3ded4;
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius-round);
  margin-top: 0.5rem;
}

.assignment-slot-label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-color-label);
  margin-bottom: 0.5rem;
}

.assignment-dropdown {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color-input);
  border-radius: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color-placeholder);
  font-family: var(--base-font);
  transition: border-color 0.3s;
  box-sizing: border-box;
  background-color: var(--text-color-white);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-inline-end: 2.75rem;
}

.assignment-dropdown:focus {
  outline: none;
  border-color: var(--accent-color-secondary--500);
  box-shadow: 0 0 0 2px rgba(137, 118, 75, 0.15);
}

/* Assignment slot block */
.assignment-slot-block {
  margin-bottom: 1rem;
}

.assignment-slot-block:last-child {
  margin-bottom: 0;
}

.inline-programme-questions:empty {
  display: none;
}

/* Participant info card (shown below assignment dropdown) */
.participant-info-card {
  background: var(--accent-color-primary--50);
  border-top: 1px dashed var(--border-color-light);
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}

.participant-info-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #505052;
  margin-bottom: 0.5rem;
}

.participant-info-row {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-color-body);
  line-height: 1.6;
}

/* Inline programme questions — conditional-group style */
.inline-prog-questions {
  margin-top: 0.75rem;
}

.inline-prog-questions .input-row {
  margin-bottom: 0.75rem;
}

.inline-prog-questions .input-row:last-child {
  margin-bottom: 0;
}

.inline-prog-questions .input-row label {
  font-size: 0.875rem;
}

.inline-prog-questions textarea {
  min-height: 60px;
}

.inline-prog-questions input[type="number"],
.inline-prog-questions input[type="date"],
.inline-prog-questions input[type="datetime-local"] {
  width: 100%;
}

.inline-prog-questions .prog-options-group {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.625rem;
}

.inline-prog-questions .prog-option-label {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color-label);
  cursor: pointer;
  line-height: 1.4;
  margin: 0;
  margin-inline-end: 1rem;
}

.inline-prog-questions .prog-option-label input[type="checkbox"],
.inline-prog-questions .prog-option-label input[type="radio"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: #89764b;
  cursor: pointer;
  margin: 0;
  margin-inline-end: 0.5rem;
}

#review-cards-container {
  margin-bottom: 1.5rem;
}

.review-card {
  flex-direction: column;
  margin-bottom: 0.75rem;
}

.review-card-content {
  width: 100%;
}

/* Card heading — "Contact Information", "Participants (X)", "Camp Assignments" */
.review-card-heading {
  font-size: 1.125rem;
  font-weight: 600;
  color: #323233;
  margin: 0;
}

/* Review row — flex container for columns */
.review-row {
  display: flex;
  flex-wrap: wrap;
}

/* 4-col layout (Contact Information) */
.review-row-4 > .review-col {
  flex: 0 0 100%;
  margin-bottom: 0.75rem;
}

/* 2-col layout (Participants, Camp Assignments) — flex-md-3 / flex-md-9 */
.review-row-2 > .review-col {
  flex: 0 0 100%;
  margin-bottom: 0.75rem;
}

/* Remove bottom margin from last row's last col */
.review-row:last-child > .review-col:last-child {
  margin-bottom: 0;
}

/* Field label — Name, Email, Phone, etc. */
.review-col-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #505052;
  margin-bottom: 0.25rem;
}

/* Field value */
.review-col-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-color-body);
  line-height: 1.6;
}

/* Detail row — DOB / Grade / Emergency, inline with pipes */
.review-detail-row {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-color-body);
  line-height: 1.6;
}

.review-detail-muted {
  color: var(--text-color-muted);
}

/* Participant entry block (name + details) */
.review-participant-block {
  margin-bottom: 1rem;
}

.review-participant-block:last-child {
  margin-bottom: 0;
}

/* Participant name — title style */
.review-participant-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #505052;
  margin-bottom: 0.25rem;
}

/* Camp name heading inside assignments card */
.review-camp-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-color-body);
  margin-bottom: 0.25rem;
}

/* One variant row = variant labels + participant list */
.review-variant-row {
  margin-bottom: 0.5rem;
}

.review-variant-row:last-child {
  margin-bottom: 0;
}

.review-variant-labels {
  margin-bottom: 0.25rem;
}

.review-variant-labels .camp-variant-info {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-color-muted);
  margin: 0;
  margin-inline-end: 0.5rem;
  padding-inline-start: 0.5rem;
  border-inline-start: 2px solid var(--accent-color-primary--100);
}

.review-variant-participants {
  font-size: 0.875rem;
  font-weight: 600;
  color: #505052;
  margin-top: 0.25rem;
}

/* Divider between camp groups */
.review-camp-divider {
  border-top: 1px solid var(--border-color-light);
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.consent-block {
  margin-top: 0.5rem;
}

.consent-text {
  background: var(--accent-color-primary--50);
  border: none;
  border-radius: var(--border-radius-md);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  max-height: 300px;
  overflow-y: auto;
}

.consent-text p {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bg-color-black);
  line-height: 1.6;
  margin: 0 0 0.75rem 0;
}

.consent-text p:last-child {
  margin-bottom: 0;
}

.consent-text ul {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bg-color-black);
  line-height: 1.6;
  margin: 0 0 0.75rem 0;
  padding-inline-start: 1.5rem;
}

.consent-text li {
  font-size: 0.875rem;
  margin: 0;
  padding: 0;
}

.assignments-progress {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0.5rem 0 !important;
}

.progress-incomplete {
  color: var(--text-color-warning);
}

.progress-complete {
  color: var(--text-color-success);
}

#loading-mask {
  display: none;
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

#loading-mask.active {
  display: flex;
}

.spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#camp-errors-container:not(:empty) {
  margin-bottom: 1rem;
}

#camp-errors-container .error-message {
  background-color: rgba(235, 0, 27, 0.1);
  color: var(--accent-color-error--500);
  padding: 1.5rem;
  border-radius: 4px;
  border: none;
  margin: 0 0 1.5rem 0;
  font-weight: 600;
  display: flex;
  align-items: baseline;
}

#camp-errors-container .error-message:last-child {
  margin-bottom: 0;
}

#camp-errors-container .error-message i {
  margin-inline-end: 0.5rem;
  font-size: 1rem;
  flex-shrink: 0;
}

.success-icon {
  text-align: center;
  font-size: 2.75rem;
  color: #8f9aa7;
  margin-bottom: 0.5rem;
}

.camp-page-title.success-title {
  text-align: center;
}

#success-description {
  color: var(--text-color-body);
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  padding: 1.5rem;
  border-radius: 4px;
  background: var(--accent-color-primary--50);
}

#order-lookup-section {
  display: none;
}

@media (min-width: 768px) {
  .camp-card {
    padding: 2.5rem;
  }

  .roster-form-sidebar {
    flex: 0 0 16.666%;
    margin-bottom: 0;
  }

  .roster-form-main {
    flex: 0 0 83.333%;
  }

  .assignment-variant-header {
    flex: 0 0 33.333%;
    padding-inline-end: 1rem;
    box-sizing: border-box;
    margin-bottom: 0;
  }

  .assignment-variant-slots {
    flex: 0 0 66.666%;
    box-sizing: border-box;
  }

  /* Review card — 4-col on desktop (3:3:3:3) — heading + Name + Email + Phone */
  .review-row-4 > .review-col {
    flex: 0 0 25%;
    margin-bottom: 0;
  }

  /* Review card — 2-col on desktop (flex-md-3 + flex-md-9) */
  .review-row-2 > .review-col:first-child {
    flex: 0 0 25%;
    padding-inline-end: 1rem;
    margin-bottom: 0;
  }

  .review-row-2 > .review-col:last-child {
    flex: 0 0 75%;
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .camp-step-label {
    font-size: 0.75rem;
    width: auto;
  }

  .section-header-row {
    flex-direction: column;
  }

  .section-header-row > * + * {
    margin-top: 0.75rem;
  }

  /* Buttons stack on mobile */
  .camp-btn {
    width: 100%;
  }

  .button-row-dual {
    flex-direction: column-reverse;
  }

  .button-row-dual .camp-btn + .camp-btn {
    margin-inline-start: 0;
    margin-bottom: 0.75rem;
  }

  .button-row-dual .camp-btn {
    width: 100%;
  }

  /* Form grids collapse */
  .form-grid,
  .form-grid-3,
  .form-grid-4 {
    grid-template-columns: 1fr;
  }

  .form-grid > .input-row,
  .form-grid > .input-row:nth-child(2n),
  .form-grid-3 > .input-row,
  .form-grid-3 > .input-row:nth-child(3n + 2),
  .form-grid-3 > .input-row:nth-child(3n),
  .form-grid-4 > .input-row,
  .form-grid-4 > .input-row:nth-child(4n + 2),
  .form-grid-4 > .input-row:nth-child(4n + 3),
  .form-grid-4 > .input-row:nth-child(4n) {
    padding-inline: 0;
  }

  /* Roster cards stack */
  .roster-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .roster-card-info {
    margin-bottom: 0.75rem;
  }

  .roster-card-actions {
    margin-inline-start: 0;
    width: 100%;
    justify-content: flex-start;
  }

  .roster-card-actions > * + * {
    margin-inline-start: 1.5rem;
  }

  /* Assignment — stack on mobile */
  .assignment-variant-header {
    flex: 0 0 100%;
  }

  .assignment-variant-slots {
    flex: 0 0 100%;
  }

  .assignment-dropdown {
    width: 100%;
  }

  /* Order summary — already column layout */

  /* Consent */
  .consent-text {
    max-height: 200px;
  }

  /* Conditional fields */
  .conditional-field,
  .conditional-group {
    padding-inline-start: 0.75rem;
  }

  .allergy-severity-option-image {
    min-width: 0;
  }

  /* iOS Safari date/datetime controls can render with clipped/misaligned text. */
  @supports (-webkit-touch-callout: none) {
    .input-row input[type="date"],
    .input-row input[type="datetime-local"],
    .inline-prog-questions input[type="date"],
    .inline-prog-questions input[type="datetime-local"] {
      min-height: 44px;
      font-size: 16px; /* prevent iOS zoom + layout jump */
      line-height: 1.2;
      padding-block: 0.75rem;
      -webkit-appearance: none;
      appearance: none;
    }

    .input-row input[type="date"]::-webkit-date-and-time-value,
    .input-row input[type="datetime-local"]::-webkit-date-and-time-value {
      text-align: left;
      min-height: 1.2em;
    }

    .input-row input[type="date"]::-webkit-datetime-edit,
    .input-row input[type="datetime-local"]::-webkit-datetime-edit {
      display: inline-flex;
      align-items: center;
      min-height: 1.2em;
      padding: 0;
    }
  }
}