/* Option list */
.new-onboarding .ol {
  display: flex;
  flex-direction: column;
  gap: 7px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s .65s, transform .6s .65s;
}
.new-onboarding .s.a .ol { opacity: 1; transform: translateY(0) }

/* Option card (shared for radio + checkbox) */
.new-onboarding .oc {
  padding: 12px 13px;
  border: 1.5px solid var(--border);
  border-radius: 13px;
  cursor: pointer;
  transition: all .2s;
  background: var(--white);
  display: flex;
  align-items: center;
  gap: 10px;
  -webkit-tap-highlight-color: transparent;
}
.new-onboarding .oc:hover { border-color: var(--border-hover); background: var(--sand-light) }
.new-onboarding .oc.sel { border-color: var(--coral); background: var(--coral-glow) }

/* Radio indicator */
.new-onboarding .orad {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  transition: all .2s;
}
.new-onboarding .oc.sel .orad { border-color: var(--coral); border-width: 6px }

/* Checkbox indicator */
.new-onboarding .ochk {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.new-onboarding .oc.sel .ochk { border-color: var(--coral); background: var(--coral) }

/* Checkbox checkmark SVG */
.new-onboarding .csv {
  width: 12px;
  height: 12px;
  color: var(--white);
  opacity: 0;
  transform: scale(0);
  transition: all .15s;
}
.new-onboarding .oc.sel .csv { opacity: 1; transform: scale(1) }

/* Option icon (pain location, etc.) */
.new-onboarding .oc-icon {
  width: auto;
  height: 28px;
  flex-shrink: 0;
  object-fit: contain;
}

/* Option label + sublabel */
.new-onboarding .olb { font-size: 14px; font-weight: 500; color: var(--text-primary); line-height: 1.35; flex: 1 }
.new-onboarding .osub { font-size: 12px; color: var(--text-muted); font-weight: 400; display: block; margin-top: 1px }

/* "None" dashed variant */
.new-onboarding .oc.none { border-style: dashed }
.new-onboarding .oc.none .olb { color: var(--text-muted); font-weight: 400 }
.new-onboarding .oc.none.sel { border-style: solid; border-color: var(--green); background: var(--green-bg) }
.new-onboarding .oc.none.sel .ochk { border-color: var(--green); background: var(--green) }
.new-onboarding .oc.none.sel .olb { color: var(--text-primary); font-weight: 500 }