.form-mw {
  max-width: 900px;
}

.form--new {
  label > small {
    display: block;
    font-weight: normal;
    padding-right: 1rem;
  }
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

label.radio-label {
  font-weight: normal;
}

input {
  border: 1px solid var(--border-color);
  font-size: 1em;
}

input:focus {
  border-color: var(--primary);
  outline: none;
}

textarea {
  border: none;
  border: 1px solid var(--border-color);
  font-size: 1em;
  padding: 1.5rem;
  font-family: var(--body-font);
  min-height: 10rem;
  width: 100%;
}

@media (min-width: 1024px) {
  textarea {
    width: inherit;
  }
}

textarea:focus {
  border-color: var(--primary);
  outline: none;
}

input,
select {
  font-size: 1em;
  font-family: var(--body-font);
  padding: 0.5em 1em;
  margin-bottom: 1em;
  width: 100%;
}

@media (min-width: 1024px) {
  input,
  select {
    width: inherit;
  }
}

input[type="radio"] {
  width: inherit;
}

select {
  border-color: var(--border-color);
}

input[type="submit"] {
  background: var(--primary);
  border: 2px solid var(--primary);
  border-radius: 3px;
  color: white;
  display: inline-block;
  text-decoration: none;
  font-weight: 500;
  font-size: 1em;
  line-height: 3rem;
  text-align: center;
  padding: 0 1.5rem;
  letter-spacing: 0.5px;
}

fieldset {
  border-color: var(--border-color);
  margin-bottom: 3rem;
}

fieldset > button {
  margin-top: 1rem !important;
}

.nested-form-wrapper {
  padding-bottom: 1rem;
  padding-left: 2rem;
  border-left: 4px solid var(--border-color);
  margin-bottom: 2rem;
}

label.multi-check:hover {
  cursor: pointer;
}

label.multi-check input {
  min-width: 2rem;
  margin-right: 1rem;
}

.form-input {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #efefef;
  overflow: hidden;
}

.form-input.overflow-visible {
  overflow: visible;
}

@media (min-width: 1024px) {
  .form-input {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
  }
  
  .form-input label,
  .form-input .field_with_errors {
    flex: 3;
  }
  
  .form-input > div {
    flex: 5;
  }
  
  .form-input input,
  .form-input select,
  .form-input textarea {
    min-width: 40rem;
    margin-bottom: 1rem;
  }
  
  .form-input input[type="radio"] {
    min-width: auto;
  }
  
  .form-input label.radio-label {
    flex: initial;
    display: inline-block;
    margin-right: 2rem;
  }
}

.form-input .form-input__internal {
  max-width: 40rem;
}

.form-input--submit {
  border: none;
  text-align: right;
  display: block;
}

.form-hidden-fieldset {
  overflow: hidden;
  display: none;
}

.form-hidden-fieldset.active {
  display: block;
  overflow: visible;
}

.radio-label {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.radio-label input {
  margin-bottom: 0;
  margin-right: 1rem;
}

.radio-label .field_with_errors {
  display: inline;
}

.check-label {
  flex: 1;
}

.check-label input {
  min-width: 1rem;
  margin-right: 2rem;
  max-width: 3rem;
  margin-bottom: 0;
}

.check-label small {
  display: inline !important;
}

.check-label--normal {
  font-weight: normal;
}

.check-label--normal input {
  margin-right: 0.7rem;
}

.check-label .field_with_errors {
  display: inline;
}

.field_with_errors label {
  color: var(--error);
}

#pricing-update-form h2 {
  text-align: center;
  margin-bottom: 2rem;
}

.product-price-field {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 3rem;
  margin-bottom: 1rem;
}

.product-price-field.input-changed label {
  color: var(--secondary);
}

.product-price-field.input-changed input {
  border-color: var(--secondary);
}

.product-price-field label,
.product-price-field input {
  margin: 0;
}

.product-price-field label {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.product-price-field small {
  display: block;
  font-weight: normal;
}

.product-price-field .faux-label {
  font-weight: bold;
  font-size: 0.9em;
}

textarea[data-input-field-visibility-target] {
  display: block;
  margin-bottom: 1rem;
}

textarea[data-input-field-visibility-target].hidden {
  display: none;
}

.inline-check-with-desc {
  display: grid;
  grid-template-columns: 5rem 1fr;
}

.inline-check-with-desc input {
  min-width: auto;
}

.field_with_errors input {
  border-color: var(--error);
}

.form-error-callout {
  color: white;
  background: var(--error);
  padding: 0.7rem 1.5rem;
  border-radius: 3px;
  display: inline-block;
}

.ts-control input {
  padding-left: 1rem !important;
}

.generic_staff_count {
  max-width: 30rem !important;
  min-width: 10rem !important;
  margin-left: 3.5rem;
  display: none;
}

.check-label-reveal input[type="checkbox"]:checked ~ input.generic_staff_count,
.check-label-reveal input[type="checkbox"]:checked ~ select.generic_staff_count,
.check-label-reveal input[type="checkbox"]:checked ~ .generic_staff_count,
.check-label-reveal input[type="checkbox"]:checked ~ .attendance_note {
  display: block;
  margin-top: 0.4rem;
}

.check-label-reveal input[type="checkbox"]:checked ~ div[data-controller] .generic_staff_count,
.check-label-reveal input[type="checkbox"]:checked ~ div[data-controller] .attendance_note {
  display: block;
  margin-top: 0.4rem;
}

.attendance_note {
  display: none;
  font-weight: normal;
  margin-bottom: 0;
  margin-left: 3.7rem;
  margin-top: 0 !important;
}

.revealable-other {
  margin-left: 3.5rem;
  display: block;
  margin-top: 0.4rem;
  width: 100%;
  max-width: 30rem !important;
}

.form-input__duration {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1.5rem;
}

.form-input__duration select {
  min-width: 0;
}

.signups .form-input {
  display: block;
  border-bottom: none;
  padding-bottom: 0;
}

/* Admin dynamic-form builder (new/edit form metadata).
   The markup uses Bootstrap-style class names that have no base styles,
   so it rendered unspaced with hints sitting beside inputs. These rules
   give it clean, stacked spacing using the app's design tokens. Scoped to
   .admin-form-new so nothing leaks to other forms. */
.admin-form-new {
  max-width: 64rem;
}

.admin-form-new .page-header {
  margin-bottom: 2.5rem;
}

.admin-form-new .form-section {
  padding: 2.5rem 0;
  border-top: 1px solid var(--light-border-color);
}

.admin-form-new .form-section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.admin-form-new .form-section > h3 {
  margin: 0 0 1.5rem;
  font-size: 1.7rem;
}

.admin-form-new .form-group {
  margin-bottom: 2rem;
}

.admin-form-new .form-section .form-group:last-child {
  margin-bottom: 0;
}

.admin-form-new .control-label {
  display: block;
  margin-bottom: 0.5rem;
}

/* Override the global `input,select { width: inherit }` at >=1024px so
   fields fill the constrained container instead of shrinking. */
.admin-form-new .form-control {
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.5rem;
}

.admin-form-new textarea.form-control {
  min-height: 9rem;
  padding: 1rem;
}

.admin-form-new .form-text {
  display: block;
  margin: 0;
  font-size: 1.4rem;
  font-weight: normal;
  color: #6b6b6b;
}

/* Keep the checkbox inline with its label instead of stacking (the
   global `label { display: block }` was pushing the label underneath). */
.admin-form-new .checkbox {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.admin-form-new .checkbox input[type="checkbox"] {
  width: auto;
  min-width: auto;
  max-width: none;
  margin: 0;
  flex: none;
}

.admin-form-new .checkbox label {
  margin: 0;
  font-weight: normal;
}

.admin-form-new .form-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3rem;
}

.admin-form-new .alert-danger {
  border-left: 4px solid var(--error);
  background: #fdeaea;
  padding: 1.5rem 2rem;
  margin-bottom: 2.5rem;
}

.admin-form-new .alert-danger h4 {
  margin: 0 0 0.5rem;
  color: var(--error);
}

.admin-form-new .next-steps-info {
  font-size: 1.5rem;
}